primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-calendar.mjs

@@ -30,8 +30,8 @@ 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 {
@@ -44,8 +44,8 @@ position: relative;
     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;
@@ -534,7 +534,7 @@ function Calendar_ng_template_2_ng_container_2_span_2_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearicon);
 } }
 function Calendar_ng_template_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -543,9 +543,9 @@ function Calendar_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 Calendar_ng_template_2_button_3_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 16);
@@ -567,9 +567,9 @@ function Calendar_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 Calendar_ng_template_2_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -608,9 +608,9 @@ function Calendar_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 Calendar_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -619,11 +619,11 @@ function Calendar_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(2, Calendar_ng_template_2_ng_container_2_Template, 3, 2, "ng-container", 7)(3, Calendar_ng_template_2_button_3_Template, 3, 6, "button", 8)(4, Calendar_ng_template_2_ng_container_4_Template, 4, 5, "ng-container", 7);
 } if (rf & 2) {
-    let tmp_16_0;
+    let tmp_17_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);
-    i0.ɵɵattribute("id", ctx_r1.inputId)("name", ctx_r1.name)("required", ctx_r1.required)("aria-required", ctx_r1.required)("aria-expanded", (tmp_16_0 = ctx_r1.overlayVisible) !== null && tmp_16_0 !== undefined ? tmp_16_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);
+    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.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.showClear && !ctx_r1.disabled && ctx_r1.value != null);
     i0.ɵɵadvance();
@@ -648,7 +648,7 @@ function Calendar_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 Calendar_div_3_ng_container_4_div_2_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -697,9 +697,9 @@ function Calendar_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);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decade);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decadeTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c22, ctx_r1.yearPickerValues));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decade)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c22, ctx_r1.yearPickerValues));
 } }
 function Calendar_div_3_ng_container_4_div_2_ChevronRightIcon_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronRightIcon");
@@ -715,7 +715,7 @@ function Calendar_div_3_ng_container_4_div_2_span_11_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nextIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nexticon);
 } }
 function Calendar_div_3_ng_container_4_div_2_table_12_th_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th", 44)(1, "span");
@@ -778,7 +778,7 @@ function Calendar_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1_n
     const date_r16 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.disabledDateTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, date_r16));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.disabledDate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, date_r16));
 } }
 function Calendar_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 53);
@@ -805,9 +805,9 @@ function Calendar_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1_T
     i0.ɵɵproperty("ngClass", ctx_r1.dayClass(date_r16));
     i0.ɵɵattribute("data-date", ctx_r1.formatDateKey(ctx_r1.formatDateMetaToDate(date_r16)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.dateTemplate && (date_r16.selectable || !ctx_r1.disabledDateTemplate));
+    i0.ɵɵproperty("ngIf", !ctx_r1.disabledDate && (date_r16.selectable || !ctx_r1.disabledDate));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", date_r16.selectable || !ctx_r1.disabledDateTemplate);
+    i0.ɵɵproperty("ngIf", date_r16.selectable || !ctx_r1.disabledDate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !date_r16.selectable);
     i0.ɵɵadvance();
@@ -876,9 +876,9 @@ function Calendar_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();
@@ -889,9 +889,9 @@ function Calendar_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.decade);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.nextIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.nexticon);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
 } }
@@ -1025,7 +1025,7 @@ function Calendar_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 Calendar_div_3_div_5_div_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 61)(1, "span");
@@ -1074,9 +1074,9 @@ function Calendar_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();
@@ -1084,9 +1084,9 @@ function Calendar_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 Calendar_div_3_div_5_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 61)(1, "span");
@@ -1129,17 +1129,17 @@ function Calendar_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 Calendar_div_3_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
@@ -1177,9 +1177,9 @@ function Calendar_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();
@@ -1187,17 +1187,17 @@ function Calendar_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();
@@ -1205,9 +1205,9 @@ function Calendar_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();
@@ -1250,7 +1250,7 @@ function Calendar_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngStyle", ctx_r1.panelStyle)("ngClass", ctx_r1.panelClass)("@overlayAnimation", i0.ɵɵpureFunction1(18, _c20, i0.ɵɵpureFunction2(15, _c19, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions)))("@.disabled", ctx_r1.inline === true);
     i0.ɵɵattribute("id", ctx_r1.panelId)("aria-label", ctx_r1.getTranslation("chooseDate"))("role", ctx_r1.inline ? null : "dialog")("aria-modal", ctx_r1.inline ? null : "true");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.header);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.timeOnly);
     i0.ɵɵadvance();
@@ -1258,7 +1258,7 @@ function Calendar_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.showButtonBar);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footer);
 } }
 const CALENDAR_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -1787,57 +1787,57 @@ class Calendar extends BaseComponent {
      * Custom template for header section.
      * @group Templates
      */
-    headerTemplate;
+    header;
     /**
      * Custom template for footer section.
      * @group Templates
      */
-    footerTemplate;
+    footer;
     /**
      * Custom template for disabled date cells.
      * @group Templates
      */
-    disabledDateTemplate;
+    disabledDate;
     /**
      * Custom template for decade view.
      * @group Templates
      */
-    decadeTemplate;
+    decade;
     /**
      * 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;
     containerViewChild;
     inputfieldViewChild;
     set content(content) {
@@ -3650,7 +3650,7 @@ class Calendar extends BaseComponent {
             if (this.appendTo === 'body')
                 this.document.body.appendChild(this.overlay);
             else
-                appendChild(this.overlay, this.appendTo);
+                appendChild(this.appendTo, this.overlay);
         }
     }
     restoreOverlayAppend() {
@@ -4217,17 +4217,17 @@ class Calendar extends BaseComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dateTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
-            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.header = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footer = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.disabledDate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.decade = _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 Calendar_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c12, 5);
             i0.ɵɵviewQuery(_c13, 5);
@@ -4237,10 +4237,10 @@ class Calendar 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", 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([CALENDAR_VALUE_ACCESSOR, CalendarStyle]), 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", "ngClass", "p-datepicker-input", "autocomplete", "off", 3, "focus", "keydown", "click", "blur", "input", "value", "readonly", "ngStyle", "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 Calendar_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", 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([CALENDAR_VALUE_ACCESSOR, CalendarStyle]), 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 Calendar_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c15);
             i0.ɵɵelementStart(0, "span", 3, 0);
-            i0.ɵɵtemplate(2, Calendar_ng_template_2_Template, 5, 23, "ng-template", 4)(3, Calendar_div_3_Template, 9, 20, "div", 5);
+            i0.ɵɵtemplate(2, Calendar_ng_template_2_Template, 5, 24, "ng-template", 4)(3, Calendar_div_3_Template, 9, 20, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
@@ -4300,7 +4300,7 @@ class Calendar extends BaseComponent {
                     (input)="onUserInput($event)"
                     [ngStyle]="inputStyle"
                     [class]="inputStyleClass"
-                    ngClass="p-datepicker-input"
+                    [ngClass]="'p-datepicker-input'"
                     [placeholder]="placeholder || ''"
                     [disabled]="disabled"
                     [attr.tabindex]="tabindex"
@@ -4311,9 +4311,9 @@ class Calendar extends BaseComponent {
                     [fluid]="hasFluid"
                 />
                 <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
@@ -4330,21 +4330,21 @@ class Calendar 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>
@@ -4368,7 +4368,7 @@ class Calendar extends BaseComponent {
                 *ngIf="inline || overlayVisible"
             >
                 <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="header"></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">
@@ -4384,9 +4384,9 @@ class Calendar 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">
@@ -4415,8 +4415,8 @@ class Calendar extends BaseComponent {
                                         {{ getYear(month) }}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
-                                        <ng-container *ngIf="!decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
-                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
+                                        <ng-container *ngIf="!decade">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decade; context: { $implicit: yearPickerValues }"></ng-container>
                                     </span>
                                 </div>
                                 <p-button
@@ -4429,10 +4429,10 @@ class Calendar extends BaseComponent {
                                     [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
                                     [attr.aria-label]="nextIconAriaLabel"
                                 >
-                                    <ChevronRightIcon *ngIf="!nextIconTemplate" />
+                                    <ChevronRightIcon *ngIf="!decade" />
 
-                                    <span *ngIf="nextIconTemplate">
-                                        <ng-template *ngTemplateOutlet="nextIconTemplate"></ng-template>
+                                    <span *ngIf="nexticon">
+                                        <ng-template *ngTemplateOutlet="nexticon"></ng-template>
                                     </span>
                                 </p-button>
                             </div>
@@ -4472,12 +4472,12 @@ class Calendar extends BaseComponent {
                                                     (keydown)="onDateCellKeydown($event, date, i)"
                                                     pRipple
                                                 >
-                                                    <ng-container *ngIf="!dateTemplate && (date.selectable || !disabledDateTemplate)">{{ date.day }}</ng-container>
-                                                    <ng-container *ngIf="date.selectable || !disabledDateTemplate">
+                                                    <ng-container *ngIf="!disabledDate && (date.selectable || !disabledDate)">{{ date.day }}</ng-container>
+                                                    <ng-container *ngIf="date.selectable || !disabledDate">
                                                         <ng-container *ngTemplateOutlet="dateTemplate; context: { $implicit: date }"></ng-container>
                                                     </ng-container>
                                                     <ng-container *ngIf="!date.selectable">
-                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate; context: { $implicit: date }"></ng-container>
+                                                        <ng-container *ngTemplateOutlet="disabledDate; context: { $implicit: date }"></ng-container>
                                                     </ng-container>
                                                 </span>
                                                 <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
@@ -4544,9 +4544,9 @@ class Calendar 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
@@ -4564,9 +4564,9 @@ class Calendar 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">
@@ -4588,9 +4588,9 @@ class Calendar 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
@@ -4608,9 +4608,9 @@ class Calendar 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>
@@ -4633,9 +4633,9 @@ class Calendar 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
@@ -4653,9 +4653,9 @@ class Calendar 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'">
@@ -4672,8 +4672,8 @@ class Calendar 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
@@ -4686,8 +4686,8 @@ class Calendar 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>
@@ -4696,7 +4696,7 @@ class Calendar extends BaseComponent {
                     <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"></ng-container>
+                <ng-container *ngTemplateOutlet="footer"></ng-container>
             </div>
         </span>
     `,
@@ -4914,37 +4914,37 @@ class Calendar extends BaseComponent {
         }], dateTemplate: [{
             type: ContentChild,
             args: ['date']
-        }], headerTemplate: [{
+        }], header: [{
             type: ContentChild,
             args: ['header']
-        }], footerTemplate: [{
+        }], footer: [{
             type: ContentChild,
             args: ['footer']
-        }], disabledDateTemplate: [{
+        }], disabledDate: [{
             type: ContentChild,
             args: ['disabledDate']
-        }], decadeTemplate: [{
+        }], decade: [{
             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']
         }], containerViewChild: [{