primeng 18.0.0-beta.5 → 18.0.0-rc.2

package/fesm2022/primeng-datepicker.mjs

@@ -19,7 +19,7 @@ import { BaseStyle } from 'primeng/base';
 
 const theme = ({ dt }) => `
 .p-datepicker {
-position: relative;
+    position: relative;
     display: inline-flex;
     max-width: 100%;
 }
@@ -30,25 +30,24 @@ position: relative;
 }
 
 .p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
 }
 
 .p-datepicker-dropdown {
     cursor: pointer;
     display: inline-flex;
-    cursor: pointer;
     user-select: none;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     position: relative;
     width: ${dt('datepicker.dropdown.width')};
-    border-top-right-radius: ${dt('datepicker.dropdown.border.radius')};
-    border-bottom-right-radius: ${dt('datepicker.dropdown.border.radius')};
+    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-left: 0 none;
+    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;
@@ -77,16 +76,17 @@ position: relative;
 }
 
 .p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
-    padding-right: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
+    padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
 }
 
 .p-datepicker-input-icon-container {
     cursor: pointer;
     position: absolute;
     top: 50%;
-    right: ${dt('form.field.padding.x')};
+    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-fluid {
@@ -127,6 +127,14 @@ position: relative;
     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;
@@ -173,18 +181,17 @@ position: relative;
 
 .p-datepicker-calendar-container .p-datepicker-calendar {
     flex: 1 1 auto;
-    border-left: 1px solid ${dt('datepicker.group.border.color')};
-    padding-right: ${dt('datepicker.group.gap')};
-    padding-left: ${dt('datepicker.group.gap')};
+    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-left: 0;
-    border-left: 0 none;
+    padding-inline-start: 0;
+    border-inline-start: 0 none;
 }
 
 .p-datepicker-calendar-container .p-datepicker-calendar:last-child {
-    padding-right: 0;
+    padding-inline-end: 0;
 }
 
 .p-datepicker-day-view {
@@ -717,7 +724,7 @@ function DatePicker_ng_template_2_ng_container_2_span_2_Template(rf, ctx) { if (
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearicon);
 } }
 function DatePicker_ng_template_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -726,9 +733,9 @@ function DatePicker_ng_template_2_ng_container_2_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.clearicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.clearicon);
 } }
 function DatePicker_ng_template_2_button_3_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 16);
@@ -750,9 +757,9 @@ function DatePicker_ng_template_2_button_3_ng_container_2_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.triggerIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.triggericon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggerIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggericon);
 } }
 function DatePicker_ng_template_2_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -791,9 +798,9 @@ function DatePicker_ng_template_2_ng_container_4_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r1.inputIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.inputicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.inputIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c17, ctx_r1.onButtonClick.bind(ctx_r1)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.inputicon)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c17, ctx_r1.onButtonClick.bind(ctx_r1)));
 } }
 function DatePicker_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -802,11 +809,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)("placeholder", ctx_r1.placeholder || "")("disabled", ctx_r1.disabled)("pAutoFocus", ctx_r1.autofocus)("variant", ctx_r1.variant)("fluid", ctx_r1.hasFluid)("size", ctx_r1.size);
-    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("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)("size", ctx_r1.size);
+    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();
@@ -831,7 +838,7 @@ function DatePicker_div_3_ng_container_4_div_2_span_4_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.previousIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.previousicon);
 } }
 function DatePicker_div_3_ng_container_4_div_2_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -898,7 +905,7 @@ function DatePicker_div_3_ng_container_4_div_2_span_11_Template(rf, ctx) { if (r
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nextIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nexticon);
 } }
 function DatePicker_div_3_ng_container_4_div_2_table_12_th_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th", 44)(1, "span");
@@ -1059,9 +1066,9 @@ function DatePicker_div_3_ng_container_4_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(12, _c21, i_r17 === 0 ? "visible" : "hidden"));
     i0.ɵɵattribute("aria-label", ctx_r1.prevIconAriaLabel);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.previousIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.previousicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.previousIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.previousicon);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
     i0.ɵɵadvance();
@@ -1072,9 +1079,9 @@ function DatePicker_div_3_ng_container_4_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(14, _c21, i_r17 === ctx_r1.months.length - 1 ? "visible" : "hidden"));
     i0.ɵɵattribute("aria-label", ctx_r1.nextIconAriaLabel);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.nextIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.nexticon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.nextIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.nexticon);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
 } }
@@ -1208,7 +1215,7 @@ function DatePicker_div_3_div_5_ng_container_23_Template(rf, ctx) { if (rf & 1)
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
 } }
 function DatePicker_div_3_div_5_div_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 61)(1, "span");
@@ -1257,9 +1264,9 @@ function DatePicker_div_3_div_5_div_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("nextSecond"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentSecond < 10);
     i0.ɵɵadvance();
@@ -1267,9 +1274,9 @@ function DatePicker_div_3_div_5_div_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("prevSecond"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
 } }
 function DatePicker_div_3_div_5_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 61)(1, "span");
@@ -1312,17 +1319,17 @@ function DatePicker_div_3_div_5_div_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("am"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.pm ? "PM" : "AM");
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("pm"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
 } }
 function DatePicker_div_3_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
@@ -1360,9 +1367,9 @@ function DatePicker_div_3_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("nextHour"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentHour < 10);
     i0.ɵɵadvance();
@@ -1370,17 +1377,17 @@ function DatePicker_div_3_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("prevHour"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.timeSeparator);
     i0.ɵɵadvance(2);
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("nextMinute"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentMinute < 10);
     i0.ɵɵadvance();
@@ -1388,9 +1395,9 @@ function DatePicker_div_3_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("aria-label", ctx_r1.getTranslation("prevMinute"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.decrementIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.decrementicon);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.showSeconds);
     i0.ɵɵadvance();
@@ -2049,37 +2056,37 @@ class DatePicker extends BaseComponent {
      * Custom template for previous month icon.
      * @group Templates
      */
-    previousIconTemplate;
+    previousicon;
     /**
      * Custom template for next month icon.
      * @group Templates
      */
-    nextIconTemplate;
+    nexticon;
     /**
      * Custom template for trigger icon.
      * @group Templates
      */
-    triggerIconTemplate;
+    triggericon;
     /**
      * Custom template for clear icon.
      * @group Templates
      */
-    clearIconTemplate;
+    clearicon;
     /**
      * Custom template for decrement icon.
      * @group Templates
      */
-    decrementIconTemplate;
+    decrementicon;
     /**
      * Custom template for increment icon.
      * @group Templates
      */
-    incrementIconTemplate;
+    incrementicon;
     /**
      * Custom template for input icon.
      * @group Templates
      */
-    inputIconTemplate;
+    inputicon;
     _disabledDates;
     _disabledDays;
     selectElement;
@@ -3268,9 +3275,9 @@ class DatePicker extends BaseComponent {
             if (this.navigationState.button) {
                 this.initFocusableCell();
                 if (this.navigationState.backward)
-                    findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev').focus();
+                    findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev-button').focus();
                 else
-                    findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next').focus();
+                    findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next-button').focus();
             }
             else {
                 if (this.navigationState.backward) {
@@ -4361,7 +4368,7 @@ class DatePicker extends BaseComponent {
         return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
     }
     isNavIconClicked(event) {
-        return hasClass(event.target, 'p-datepicker-prev') || hasClass(event.target, 'p-datepicker-prev-icon') || hasClass(event.target, 'p-datepicker-next') || hasClass(event.target, 'p-datepicker-next-icon');
+        return hasClass(event.target, 'p-datepicker-prev-button') || hasClass(event.target, 'p-datepicker-prev-icon') || hasClass(event.target, 'p-datepicker-next-button') || hasClass(event.target, 'p-datepicker-next-icon');
     }
     onWindowResize() {
         if (this.overlayVisible && !isTouchDevice()) {
@@ -4416,13 +4423,13 @@ class DatePicker extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.disabledDateTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.decadeTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.previousIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nextIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.decrementIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.incrementIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.previousicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nexticon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggericon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.decrementicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.incrementicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputicon = _t.first);
         } }, viewQuery: function DatePicker_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c12, 5);
             i0.ɵɵviewQuery(_c13, 5);
@@ -4432,10 +4439,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", "position", "click", 4, "ngIf"], ["pInputText", "", "type", "text", "role", "combobox", "aria-autocomplete", "none", "aria-haspopup", "dialog", "ngClass", "p-datepicker-input", "autocomplete", "off", 3, "focus", "keydown", "click", "blur", "input", "value", "readonly", "ngStyle", "placeholder", "disabled", "pAutoFocus", "variant", "fluid", "size"], [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", "severity", "secondary", "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", "", "severity", "secondary", "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", "text", "", "severity", "secondary", "styleClass", "p-datepicker-today-button", 3, "keydown", "onClick", "label", "ngClass"], ["size", "small", "text", "", "severity", "secondary", "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", "position", "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", "size"], [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", "severity", "secondary", "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", "", "severity", "secondary", "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", "text", "", "severity", "secondary", "styleClass", "p-datepicker-today-button", 3, "keydown", "onClick", "label", "ngClass"], ["size", "small", "text", "", "severity", "secondary", "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, 22, "div", 5);
+            i0.ɵɵtemplate(2, DatePicker_ng_template_2_Template, 5, 25, "ng-template", 4)(3, DatePicker_div_3_Template, 9, 22, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
@@ -4495,7 +4502,7 @@ class DatePicker extends BaseComponent {
                     (input)="onUserInput($event)"
                     [ngStyle]="inputStyle"
                     [class]="inputStyleClass"
-                    ngClass="p-datepicker-input"
+                    [ngClass]="'p-datepicker-input'"
                     [placeholder]="placeholder || ''"
                     [disabled]="disabled"
                     [attr.tabindex]="tabindex"
@@ -4507,9 +4514,9 @@ class DatePicker extends BaseComponent {
                     [size]="size"
                 />
                 <ng-container *ngIf="showClear && !disabled && value != null">
-                    <TimesIcon *ngIf="!clearIconTemplate" [class]="'p-datepicker-clear-icon'" (click)="clear()" />
-                    <span *ngIf="clearIconTemplate" class="p-datepicker-clear-icon" (click)="clear()">
-                        <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+                    <TimesIcon *ngIf="!clearicon" [class]="'p-datepicker-clear-icon'" (click)="clear()" />
+                    <span *ngIf="clearicon" class="p-datepicker-clear-icon" (click)="clear()">
+                        <ng-template *ngTemplateOutlet="clearicon"></ng-template>
                     </span>
                 </ng-container>
                 <button
@@ -4526,21 +4533,21 @@ class DatePicker extends BaseComponent {
                 >
                     <span *ngIf="icon" [ngClass]="icon"></span>
                     <ng-container *ngIf="!icon">
-                        <CalendarIcon *ngIf="!triggerIconTemplate" />
-                        <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
+                        <CalendarIcon *ngIf="!triggericon" />
+                        <ng-template *ngTemplateOutlet="triggericon"></ng-template>
                     </ng-container>
                 </button>
                 <ng-container *ngIf="iconDisplay === 'input' && showIcon">
                     <span class="p-datepicker-input-icon-container">
                         <CalendarIcon
                             (click)="onButtonClick($event)"
-                            *ngIf="!inputIconTemplate"
+                            *ngIf="!inputicon"
                             [ngClass]="{
                                 'p-datepicker-input-icon': showOnFocus
                             }"
                         />
 
-                        <ng-container *ngTemplateOutlet="inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
+                        <ng-container *ngTemplateOutlet="inputicon; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                     </span>
                 </ng-container>
             </ng-template>
@@ -4582,9 +4589,9 @@ class DatePicker extends BaseComponent {
                                     type="button"
                                     [attr.aria-label]="prevIconAriaLabel"
                                 >
-                                    <ChevronLeftIcon *ngIf="!previousIconTemplate" />
-                                    <span *ngIf="previousIconTemplate">
-                                        <ng-template *ngTemplateOutlet="previousIconTemplate"></ng-template>
+                                    <ChevronLeftIcon *ngIf="!previousicon" />
+                                    <span *ngIf="previousicon">
+                                        <ng-template *ngTemplateOutlet="previousicon"></ng-template>
                                     </span>
                                 </p-button>
                                 <div class="p-datepicker-title">
@@ -4628,10 +4635,10 @@ class DatePicker extends BaseComponent {
                                     [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
                                     [attr.aria-label]="nextIconAriaLabel"
                                 >
-                                    <ChevronRightIcon *ngIf="!nextIconTemplate" />
+                                    <ChevronRightIcon *ngIf="!nexticon" />
 
-                                    <span *ngIf="nextIconTemplate">
-                                        <ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
+                                    <span *ngIf="nexticon">
+                                        <ng-template *ngTemplateOutlet="nexticon"></ng-template>
                                     </span>
                                 </p-button>
                             </div>
@@ -4743,9 +4750,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('nextHour')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate" />
+                            <ChevronUpIcon *ngIf="!incrementicon" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate"></ng-template>
+                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
                         </p-button>
                         <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
                         <p-button
@@ -4763,9 +4770,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('prevHour')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate" />
+                            <ChevronDownIcon *ngIf="!decrementicon" />
 
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate"></ng-template>
+                            <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
                         </p-button>
                     </div>
                     <div class="p-datepicker-separator">
@@ -4787,9 +4794,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('nextMinute')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate" />
+                            <ChevronUpIcon *ngIf="!incrementicon" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate"></ng-template>
+                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
                         </p-button>
                         <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
                         <p-button
@@ -4807,9 +4814,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('prevMinute')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate" />
-                            <ng-container *ngIf="decrementIconTemplate">
-                                <ng-template *ngTemplateOutlet="decrementIconTemplate"></ng-template>
+                            <ChevronDownIcon *ngIf="!decrementicon" />
+                            <ng-container *ngIf="decrementicon">
+                                <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
                             </ng-container>
                         </p-button>
                     </div>
@@ -4832,9 +4839,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('nextSecond')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate" />
+                            <ChevronUpIcon *ngIf="!incrementicon" />
 
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate"></ng-template>
+                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
                         </p-button>
                         <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
                         <p-button
@@ -4852,9 +4859,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('prevSecond')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate" />
+                            <ChevronDownIcon *ngIf="!decrementicon" />
 
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate"></ng-template>
+                            <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
                         </p-button>
                     </div>
                     <div class="p-datepicker-separator" *ngIf="hourFormat == '12'">
@@ -4871,8 +4878,8 @@ class DatePicker extends BaseComponent {
                             (keydown.enter)="toggleAMPM($event)"
                             [attr.aria-label]="getTranslation('am')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementIconTemplate" />
-                            <ng-template *ngTemplateOutlet="incrementIconTemplate"></ng-template>
+                            <ChevronUpIcon *ngIf="!incrementicon" />
+                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
                         </p-button>
                         <span>{{ pm ? 'PM' : 'AM' }}</span>
                         <p-button
@@ -4885,8 +4892,8 @@ class DatePicker extends BaseComponent {
                             (keydown.enter)="toggleAMPM($event)"
                             [attr.aria-label]="getTranslation('pm')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementIconTemplate" />
-                            <ng-template *ngTemplateOutlet="decrementIconTemplate"></ng-template>
+                            <ChevronDownIcon *ngIf="!decrementicon" />
+                            <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
                         </p-button>
                     </div>
                 </div>
@@ -5154,25 +5161,25 @@ class DatePicker extends BaseComponent {
         }], decadeTemplate: [{
             type: ContentChild,
             args: ['decade']
-        }], previousIconTemplate: [{
+        }], previousicon: [{
             type: ContentChild,
             args: ['previousicon']
-        }], nextIconTemplate: [{
+        }], nexticon: [{
             type: ContentChild,
             args: ['nexticon']
-        }], triggerIconTemplate: [{
+        }], triggericon: [{
             type: ContentChild,
             args: ['triggericon']
-        }], clearIconTemplate: [{
+        }], clearicon: [{
             type: ContentChild,
             args: ['clearicon']
-        }], decrementIconTemplate: [{
+        }], decrementicon: [{
             type: ContentChild,
             args: ['decrementicon']
-        }], incrementIconTemplate: [{
+        }], incrementicon: [{
             type: ContentChild,
             args: ['incrementicon']
-        }], inputIconTemplate: [{
+        }], inputicon: [{
             type: ContentChild,
             args: ['inputicon']
         }] }); })();