primeng 19.0.0-rc.1 → 19.0.1

package/fesm2022/primeng-datepicker.mjs

@@ -2,11 +2,11 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, appendChild, absolutePosition, relativePosition, addClass, blockBodyScroll, unblockBodyScroll, setAttribute, isTouchDevice } from '@primeuix/utils';
+import { uuid, getOuterWidth, isDate, findSingle, getFocusableElements, hasClass, getIndex, find, isNotEmpty, addStyle, appendChild, absolutePosition, relativePosition, addClass, blockBodyScroll, unblockBodyScroll, setAttribute, isTouchDevice } from '@primeuix/utils';
 import * as i1 from 'primeng/api';
-import { TranslationKeys, SharedModule } from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Button } from 'primeng/button';
@@ -724,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.clearicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate || ctx_r1._clearIconTemplate);
 } }
 function DatePicker_ng_template_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -733,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.clearicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.clearIconTemplate && !ctx_r1._clearIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.clearicon);
+    i0.ɵɵproperty("ngIf", ctx_r1.clearIconTemplate || ctx_r1._clearIconTemplate);
 } }
 function DatePicker_ng_template_2_button_3_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 16);
@@ -757,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.triggericon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.triggerIconTemplate && !ctx_r1._triggerIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggericon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggerIconTemplate || ctx_r1._triggerIconTemplate);
 } }
 function DatePicker_ng_template_2_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -798,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.inputicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.inputIconTemplate && !ctx_r1._inputIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.inputicon)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c17, ctx_r1.onButtonClick.bind(ctx_r1)));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.inputIconTemplate || ctx_r1._inputIconTemplate)("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();
@@ -809,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_18_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)("ngClass", "p-datepicker-input")("placeholder", ctx_r1.placeholder || "")("disabled", ctx_r1.disabled)("pAutoFocus", ctx_r1.autofocus)("variant", ctx_r1.variant)("fluid", ctx_r1.hasFluid)("pSize", 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.ɵɵ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();
@@ -838,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.previousicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.previousIconTemplate || ctx_r1._previousIconTemplate);
 } }
 function DatePicker_div_3_ng_container_4_div_2_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -887,9 +887,9 @@ function DatePicker_div_3_ng_container_4_div_2_span_8_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate && ctx_r1._decadeTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decadeTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c22, ctx_r1.yearPickerValues));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decadeTemplate || ctx_r1._decadeTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c22, ctx_r1.yearPickerValues));
 } }
 function DatePicker_div_3_ng_container_4_div_2_ChevronRightIcon_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronRightIcon");
@@ -905,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.nexticon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nextIconTemplate || ctx_r1._nextIconTemplate);
 } }
 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");
@@ -955,7 +955,7 @@ function DatePicker_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1
     const date_r16 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dateTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, date_r16));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dateTemplate || ctx_r1._dateTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, date_r16));
 } }
 function DatePicker_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -968,7 +968,7 @@ function DatePicker_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1
     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.disabledDateTemplate || ctx_r1._disabledDateTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, date_r16));
 } }
 function DatePicker_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);
@@ -995,9 +995,9 @@ function DatePicker_div_3_ng_container_4_div_2_table_12_tr_6_td_2_ng_container_1
     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.dateTemplate && !ctx_r1._dateTemplate && (date_r16.selectable || !ctx_r1.disabledDateTemplate && !ctx_r1._disabledDateTemplate));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", date_r16.selectable || !ctx_r1.disabledDateTemplate);
+    i0.ɵɵproperty("ngIf", date_r16.selectable || !ctx_r1.disabledDateTemplate && !ctx_r1._disabledDateTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !date_r16.selectable);
     i0.ɵɵadvance();
@@ -1066,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.previousicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.previousIconTemplate && !ctx_r1._previousIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.previousicon);
+    i0.ɵɵproperty("ngIf", ctx_r1.previousIconTemplate || !ctx_r1._previousIconTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
     i0.ɵɵadvance();
@@ -1079,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.nexticon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate && !ctx_r1._decadeTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.nexticon);
+    i0.ɵɵproperty("ngIf", ctx_r1.nextIconTemplate || !ctx_r1._nextIconTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.currentView === "date");
 } }
@@ -1215,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.decrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate || ctx_r1._decrementIconTemplate);
 } }
 function DatePicker_div_3_div_5_div_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 61)(1, "span");
@@ -1264,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.incrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate && !ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate || ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentSecond < 10);
     i0.ɵɵadvance();
@@ -1274,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.decrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate && !ctx_r1._decrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate || ctx_r1._decrementIconTemplate);
 } }
 function DatePicker_div_3_div_5_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 61)(1, "span");
@@ -1319,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.incrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate && !ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate || ctx_r1._incrementIconTemplate);
     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.decrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate && !ctx_r1._decrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate || ctx_r1._decrementIconTemplate);
 } }
 function DatePicker_div_3_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
@@ -1367,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.incrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate && !ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate || ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentHour < 10);
     i0.ɵɵadvance();
@@ -1377,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.decrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate && !ctx_r1._decrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate || ctx_r1._decrementIconTemplate);
     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.incrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.incrementIconTemplate && !ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.incrementIconTemplate || ctx_r1._incrementIconTemplate);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r1.currentMinute < 10);
     i0.ɵɵadvance();
@@ -1395,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.decrementicon);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decrementIconTemplate && !ctx_r1._decrementIconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.decrementicon);
+    i0.ɵɵproperty("ngIf", ctx_r1.decrementIconTemplate || ctx_r1._decrementIconTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.showSeconds);
     i0.ɵɵadvance();
@@ -1437,11 +1437,10 @@ function DatePicker_div_3_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.panelStyleClass);
-    i0.ɵɵstyleProp("position", !ctx_r1.inline && "absolute");
-    i0.ɵɵproperty("ngStyle", ctx_r1.panelStyle)("ngClass", ctx_r1.panelClass)("@overlayAnimation", i0.ɵɵpureFunction1(20, _c20, i0.ɵɵpureFunction2(17, _c19, ctx_r1.showTransitionOptions, ctx_r1.hideTransitionOptions)))("@.disabled", ctx_r1.inline === true);
+    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.headerTemplate || ctx_r1._headerTemplate);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.timeOnly);
     i0.ɵɵadvance();
@@ -1449,7 +1448,7 @@ function DatePicker_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.footerTemplate || ctx_r1._footerTemplate);
 } }
 const DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -2056,37 +2055,49 @@ class DatePicker extends BaseComponent {
      * Custom template for previous month icon.
      * @group Templates
      */
-    previousicon;
+    previousIconTemplate;
     /**
      * Custom template for next month icon.
      * @group Templates
      */
-    nexticon;
+    nextIconTemplate;
     /**
      * Custom template for trigger icon.
      * @group Templates
      */
-    triggericon;
+    triggerIconTemplate;
     /**
      * Custom template for clear icon.
      * @group Templates
      */
-    clearicon;
+    clearIconTemplate;
     /**
      * Custom template for decrement icon.
      * @group Templates
      */
-    decrementicon;
+    decrementIconTemplate;
     /**
      * Custom template for increment icon.
      * @group Templates
      */
-    incrementicon;
+    incrementIconTemplate;
     /**
      * Custom template for input icon.
      * @group Templates
      */
-    inputicon;
+    inputIconTemplate;
+    _dateTemplate;
+    _headerTemplate;
+    _footerTemplate;
+    _disabledDateTemplate;
+    _decadeTemplate;
+    _previousIconTemplate;
+    _nextIconTemplate;
+    _triggerIconTemplate;
+    _clearIconTemplate;
+    _decrementIconTemplate;
+    _incrementIconTemplate;
+    _inputIconTemplate;
     _disabledDates;
     _disabledDays;
     selectElement;
@@ -2175,6 +2186,52 @@ class DatePicker extends BaseComponent {
             }
         }
     }
+    templates;
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'date':
+                    this._dateTemplate = item.template;
+                    break;
+                case 'decade':
+                    this._decadeTemplate = item.template;
+                    break;
+                case 'disabledDate':
+                    this._disabledDateTemplate = item.template;
+                    break;
+                case 'header':
+                    this._headerTemplate = item.template;
+                    break;
+                case 'inputicon':
+                    this._inputIconTemplate = item.template;
+                    break;
+                case 'previousicon':
+                    this._previousIconTemplate = item.template;
+                    break;
+                case 'nexticon':
+                    this._nextIconTemplate = item.template;
+                    break;
+                case 'triggericon':
+                    this._triggerIconTemplate = item.template;
+                    break;
+                case 'clearicon':
+                    this._clearIconTemplate = item.template;
+                    break;
+                case 'decrementicon':
+                    this._decrementIconTemplate = item.template;
+                    break;
+                case 'incrementicon':
+                    this._incrementIconTemplate = item.template;
+                    break;
+                case 'footer':
+                    this._footerTemplate = item.template;
+                    break;
+                default:
+                    this._dateTemplate = item.template;
+                    break;
+            }
+        });
+    }
     getTranslation(option) {
         return this.config.getTranslation(option);
     }
@@ -3806,6 +3863,8 @@ class DatePicker extends BaseComponent {
                 if (!this.inline) {
                     this.overlay = event.element;
                     this.overlay?.setAttribute(this.attributeSelector, '');
+                    const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+                    addStyle(this.overlay, styles);
                     this.appendOverlay();
                     this.updateFocus();
                     if (this.autoZIndex) {
@@ -4404,18 +4463,19 @@ class DatePicker extends BaseComponent {
     }
     static ɵfac = function DatePicker_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatePicker)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.OverlayService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatePicker, selectors: [["p-datePicker"], ["p-datepicker"], ["p-date-picker"]], contentQueries: function DatePicker_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, _c0, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c1, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c2, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c3, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c5, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c6, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c7, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c8, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c9, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c10, 5);
-            i0.ɵɵcontentQuery(dirIndex, _c11, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c2, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c3, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c7, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c8, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c9, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c10, 4);
+            i0.ɵɵcontentQuery(dirIndex, _c11, 4);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dateTemplate = _t.first);
@@ -4423,13 +4483,14 @@ 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.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);
+            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.templates = _t);
         } }, viewQuery: function DatePicker_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c12, 5);
             i0.ɵɵviewQuery(_c13, 5);
@@ -4439,10 +4500,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" }, features: [i0.ɵɵProvidersFeature([DATEPICKER_VALUE_ACCESSOR, DatePickerStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], 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", "pSize"], [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" }, features: [i0.ɵɵProvidersFeature([DATEPICKER_VALUE_ACCESSOR, DatePickerStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c16, decls: 4, vars: 6, consts: [["container", ""], ["inputfield", ""], ["contentWrapper", ""], [3, "ngClass", "ngStyle"], [3, "ngIf"], [3, "class", "ngStyle", "ngClass", "click", 4, "ngIf"], ["pInputText", "", "type", "text", "role", "combobox", "aria-autocomplete", "none", "aria-haspopup", "dialog", "autocomplete", "off", 3, "focus", "keydown", "click", "blur", "input", "value", "readonly", "ngStyle", "ngClass", "placeholder", "disabled", "pAutoFocus", "variant", "fluid"], [4, "ngIf"], ["type", "button", "aria-haspopup", "dialog", "class", "p-datepicker-dropdown", "tabindex", "0", 3, "disabled", "click", 4, "ngIf"], [3, "class", "click", 4, "ngIf"], ["class", "p-datepicker-clear-icon", 3, "click", 4, "ngIf"], [3, "click"], [1, "p-datepicker-clear-icon", 3, "click"], [4, "ngTemplateOutlet"], ["type", "button", "aria-haspopup", "dialog", "tabindex", "0", 1, "p-datepicker-dropdown", 3, "click", "disabled"], [3, "ngClass", 4, "ngIf"], [3, "ngClass"], [1, "p-datepicker-input-icon-container"], [3, "ngClass", "click", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "click", "ngClass"], [3, "click", "ngStyle", "ngClass"], ["class", "p-datepicker-time-picker", 4, "ngIf"], ["class", "p-datepicker-buttonbar", 4, "ngIf"], [1, "p-datepicker-calendar-container"], ["class", "p-datepicker-calendar", 4, "ngFor", "ngForOf"], ["class", "p-datepicker-month-view", 4, "ngIf"], ["class", "p-datepicker-year-view", 4, "ngIf"], [1, "p-datepicker-calendar"], [1, "p-datepicker-header"], ["size", "small", "rounded", "", "text", "", "styleClass", "p-datepicker-prev-button p-button-icon-only", "type", "button", 3, "keydown", "onClick", "ngStyle"], [1, "p-datepicker-title"], ["type", "button", "class", "p-datepicker-select-month", "pRipple", "", 3, "disabled", "click", "keydown", 4, "ngIf"], ["type", "button", "class", "p-datepicker-select-year", "pRipple", "", 3, "disabled", "click", "keydown", 4, "ngIf"], ["class", "p-datepicker-decade", 4, "ngIf"], ["rounded", "", "text", "", "size", "small", "styleClass", "p-datepicker-next-button p-button-icon-only", 3, "keydown", "onClick", "ngStyle"], ["class", "p-datepicker-day-view", "role", "grid", 4, "ngIf"], ["type", "button", "pRipple", "", 1, "p-datepicker-select-month", 3, "click", "keydown", "disabled"], ["type", "button", "pRipple", "", 1, "p-datepicker-select-year", 3, "click", "keydown", "disabled"], [1, "p-datepicker-decade"], ["role", "grid", 1, "p-datepicker-day-view"], ["class", "p-datepicker-weekheader p-disabled", 4, "ngIf"], ["class", "p-datepicker-weekday-cell", "scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], [1, "p-datepicker-weekheader", "p-disabled"], ["scope", "col", 1, "p-datepicker-weekday-cell"], [1, "p-datepicker-weekday"], ["class", "p-datepicker-weeknumber", 4, "ngIf"], [3, "ngClass", 4, "ngFor", "ngForOf"], [1, "p-datepicker-weeknumber"], [1, "p-datepicker-weeklabel-container", "p-disabled"], ["draggable", "false", "pRipple", "", 3, "click", "keydown", "ngClass"], ["class", "p-hidden-accessible", "aria-live", "polite", 4, "ngIf"], ["aria-live", "polite", 1, "p-hidden-accessible"], [1, "p-datepicker-month-view"], ["pRipple", "", 3, "ngClass", "click", "keydown", 4, "ngFor", "ngForOf"], ["pRipple", "", 3, "click", "keydown", "ngClass"], [1, "p-datepicker-year-view"], [1, "p-datepicker-time-picker"], [1, "p-datepicker-hour-picker"], ["rounded", "", "text", "", "size", "small", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "keydown.enter", "keydown.space", "mousedown", "mouseup", "keyup.enter", "keyup.space", "mouseleave"], [1, "p-datepicker-separator"], [1, "p-datepicker-minute-picker"], ["class", "p-datepicker-separator", 4, "ngIf"], ["class", "p-datepicker-second-picker", 4, "ngIf"], ["class", "p-datepicker-ampm-picker", 4, "ngIf"], [1, "p-datepicker-second-picker"], [1, "p-datepicker-ampm-picker"], ["size", "small", "text", "", "rounded", "", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "onClick", "keydown.enter"], ["size", "small", "text", "", "rounded", "", "styleClass", "p-datepicker-increment-button p-button-icon-only", 3, "keydown", "click", "keydown.enter"], [1, "p-datepicker-buttonbar"], ["size", "small", "styleClass", "p-datepicker-today-button", 3, "keydown", "onClick", "label", "ngClass"], ["size", "small", "styleClass", "p-datepicker-clear-button", 3, "keydown", "onClick", "label", "ngClass"]], template: function DatePicker_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef(_c15);
             i0.ɵɵelementStart(0, "span", 3, 0);
-            i0.ɵɵtemplate(2, DatePicker_ng_template_2_Template, 5, 25, "ng-template", 4)(3, DatePicker_div_3_Template, 9, 22, "div", 5);
+            i0.ɵɵtemplate(2, DatePicker_ng_template_2_Template, 5, 24, "ng-template", 4)(3, DatePicker_div_3_Template, 9, 20, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.styleClass);
@@ -4511,12 +4572,11 @@ class DatePicker extends BaseComponent {
                     [pAutoFocus]="autofocus"
                     [variant]="variant"
                     [fluid]="hasFluid"
-                    [pSize]="size"
                 />
                 <ng-container *ngIf="showClear && !disabled && value != null">
-                    <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>
+                    <TimesIcon *ngIf="!clearIconTemplate && !_clearIconTemplate" [class]="'p-datepicker-clear-icon'" (click)="clear()" />
+                    <span *ngIf="clearIconTemplate || _clearIconTemplate" class="p-datepicker-clear-icon" (click)="clear()">
+                        <ng-template *ngTemplateOutlet="clearIconTemplate || _clearIconTemplate"></ng-template>
                     </span>
                 </ng-container>
                 <button
@@ -4533,21 +4593,21 @@ class DatePicker extends BaseComponent {
                 >
                     <span *ngIf="icon" [ngClass]="icon"></span>
                     <ng-container *ngIf="!icon">
-                        <CalendarIcon *ngIf="!triggericon" />
-                        <ng-template *ngTemplateOutlet="triggericon"></ng-template>
+                        <CalendarIcon *ngIf="!triggerIconTemplate && !_triggerIconTemplate" />
+                        <ng-template *ngTemplateOutlet="triggerIconTemplate || _triggerIconTemplate"></ng-template>
                     </ng-container>
                 </button>
                 <ng-container *ngIf="iconDisplay === 'input' && showIcon">
                     <span class="p-datepicker-input-icon-container">
                         <CalendarIcon
                             (click)="onButtonClick($event)"
-                            *ngIf="!inputicon"
+                            *ngIf="!inputIconTemplate && !_inputIconTemplate"
                             [ngClass]="{
                                 'p-datepicker-input-icon': showOnFocus
                             }"
                         />
 
-                        <ng-container *ngTemplateOutlet="inputicon; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
+                        <ng-container *ngTemplateOutlet="inputIconTemplate || _inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
                     </span>
                 </ng-container>
             </ng-template>
@@ -4557,7 +4617,6 @@ class DatePicker extends BaseComponent {
                 [class]="panelStyleClass"
                 [ngStyle]="panelStyle"
                 [ngClass]="panelClass"
-                [style.position]="!inline && 'absolute'"
                 [@overlayAnimation]="{
                     value: 'visible',
                     params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions }
@@ -4572,14 +4631,13 @@ class DatePicker extends BaseComponent {
                 *ngIf="inline || overlayVisible"
             >
                 <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate"></ng-container>
                 <ng-container *ngIf="!timeOnly">
                     <div class="p-datepicker-calendar-container">
                         <div class="p-datepicker-calendar" *ngFor="let month of months; let i = index">
                             <div class="p-datepicker-header">
                                 <p-button
                                     size="small"
-                                    severity="secondary"
                                     rounded
                                     text
                                     (keydown)="onContainerButtonKeydown($event)"
@@ -4589,9 +4647,9 @@ class DatePicker extends BaseComponent {
                                     type="button"
                                     [attr.aria-label]="prevIconAriaLabel"
                                 >
-                                    <ChevronLeftIcon *ngIf="!previousicon" />
-                                    <span *ngIf="previousicon">
-                                        <ng-template *ngTemplateOutlet="previousicon"></ng-template>
+                                    <ChevronLeftIcon *ngIf="!previousIconTemplate && !_previousIconTemplate" />
+                                    <span *ngIf="previousIconTemplate || !_previousIconTemplate">
+                                        <ng-template *ngTemplateOutlet="previousIconTemplate || _previousIconTemplate"></ng-template>
                                     </span>
                                 </p-button>
                                 <div class="p-datepicker-title">
@@ -4620,13 +4678,12 @@ class DatePicker 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="!decadeTemplate && _decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate || _decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
                                     </span>
                                 </div>
                                 <p-button
                                     rounded
-                                    severity="secondary"
                                     text
                                     size="small"
                                     (keydown)="onContainerButtonKeydown($event)"
@@ -4635,10 +4692,10 @@ class DatePicker extends BaseComponent {
                                     [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
                                     [attr.aria-label]="nextIconAriaLabel"
                                 >
-                                    <ChevronRightIcon *ngIf="!nexticon" />
+                                    <ChevronRightIcon *ngIf="!decadeTemplate && !_decadeTemplate" />
 
-                                    <span *ngIf="nexticon">
-                                        <ng-template *ngTemplateOutlet="nexticon"></ng-template>
+                                    <span *ngIf="nextIconTemplate || !_nextIconTemplate">
+                                        <ng-template *ngTemplateOutlet="nextIconTemplate || _nextIconTemplate"></ng-template>
                                     </span>
                                 </p-button>
                             </div>
@@ -4678,12 +4735,12 @@ class DatePicker 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 *ngTemplateOutlet="dateTemplate; context: { $implicit: date }"></ng-container>
+                                                    <ng-container *ngIf="!dateTemplate && !_dateTemplate && (date.selectable || (!disabledDateTemplate && !_disabledDateTemplate))">{{ date.day }}</ng-container>
+                                                    <ng-container *ngIf="date.selectable || (!disabledDateTemplate && !_disabledDateTemplate)">
+                                                        <ng-container *ngTemplateOutlet="dateTemplate || _dateTemplate; context: { $implicit: date }"></ng-container>
                                                     </ng-container>
                                                     <ng-container *ngIf="!date.selectable">
-                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate; context: { $implicit: date }"></ng-container>
+                                                        <ng-container *ngTemplateOutlet="disabledDateTemplate || _disabledDateTemplate; context: { $implicit: date }"></ng-container>
                                                     </ng-container>
                                                 </span>
                                                 <div *ngIf="isSelected(date)" class="p-hidden-accessible" aria-live="polite">
@@ -4750,9 +4807,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('nextHour')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementicon" />
+                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
                         </p-button>
                         <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
                         <p-button
@@ -4770,9 +4827,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('prevHour')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementicon" />
+                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
                         </p-button>
                     </div>
                     <div class="p-datepicker-separator">
@@ -4794,9 +4851,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('nextMinute')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementicon" />
+                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
                         </p-button>
                         <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
                         <p-button
@@ -4814,9 +4871,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('prevMinute')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementicon" />
-                            <ng-container *ngIf="decrementicon">
-                                <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
+                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-container *ngIf="decrementIconTemplate || _decrementIconTemplate">
+                                <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
                             </ng-container>
                         </p-button>
                     </div>
@@ -4839,9 +4896,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('nextSecond')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementicon" />
+                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
                         </p-button>
                         <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
                         <p-button
@@ -4859,9 +4916,9 @@ class DatePicker extends BaseComponent {
                             (mouseleave)="onTimePickerElementMouseLeave()"
                             [attr.aria-label]="getTranslation('prevSecond')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementicon" />
+                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
 
-                            <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
                         </p-button>
                     </div>
                     <div class="p-datepicker-separator" *ngIf="hourFormat == '12'">
@@ -4878,8 +4935,8 @@ class DatePicker extends BaseComponent {
                             (keydown.enter)="toggleAMPM($event)"
                             [attr.aria-label]="getTranslation('am')"
                         >
-                            <ChevronUpIcon *ngIf="!incrementicon" />
-                            <ng-template *ngTemplateOutlet="incrementicon"></ng-template>
+                            <ChevronUpIcon *ngIf="!incrementIconTemplate && !_incrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="incrementIconTemplate || _incrementIconTemplate"></ng-template>
                         </p-button>
                         <span>{{ pm ? 'PM' : 'AM' }}</span>
                         <p-button
@@ -4892,35 +4949,17 @@ class DatePicker extends BaseComponent {
                             (keydown.enter)="toggleAMPM($event)"
                             [attr.aria-label]="getTranslation('pm')"
                         >
-                            <ChevronDownIcon *ngIf="!decrementicon" />
-                            <ng-template *ngTemplateOutlet="decrementicon"></ng-template>
+                            <ChevronDownIcon *ngIf="!decrementIconTemplate && !_decrementIconTemplate" />
+                            <ng-template *ngTemplateOutlet="decrementIconTemplate || _decrementIconTemplate"></ng-template>
                         </p-button>
                     </div>
                 </div>
                 <div class="p-datepicker-buttonbar" *ngIf="showButtonBar">
-                    <p-button
-                        size="small"
-                        text
-                        severity="secondary"
-                        styleClass="p-datepicker-today-button"
-                        [label]="getTranslation('today')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="onTodayButtonClick($event)"
-                        [ngClass]="todayButtonStyleClass"
-                    />
-                    <p-button
-                        size="small"
-                        text
-                        severity="secondary"
-                        styleClass="p-datepicker-clear-button"
-                        [label]="getTranslation('clear')"
-                        (keydown)="onContainerButtonKeydown($event)"
-                        (onClick)="onClearButtonClick($event)"
-                        [ngClass]="clearButtonStyleClass"
-                    />
+                    <p-button size="small" styleClass="p-datepicker-today-button" [label]="getTranslation('today')" (keydown)="onContainerButtonKeydown($event)" (onClick)="onTodayButtonClick($event)" [ngClass]="todayButtonStyleClass" />
+                    <p-button size="small" styleClass="p-datepicker-clear-button" [label]="getTranslation('clear')" (keydown)="onContainerButtonKeydown($event)" (onClick)="onClearButtonClick($event)" [ngClass]="clearButtonStyleClass" />
                 </div>
                 <ng-content select="p-footer"></ng-content>
-                <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
         </span>
     `,
@@ -5148,42 +5187,45 @@ class DatePicker extends BaseComponent {
             args: ['contentWrapper', { static: false }]
         }], dateTemplate: [{
             type: ContentChild,
-            args: ['date']
+            args: ['date', { descendants: false }]
         }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
+            args: ['header', { descendants: false }]
         }], footerTemplate: [{
             type: ContentChild,
-            args: ['footer']
+            args: ['footer', { descendants: false }]
         }], disabledDateTemplate: [{
             type: ContentChild,
-            args: ['disabledDate']
+            args: ['disabledDate', { descendants: false }]
         }], decadeTemplate: [{
             type: ContentChild,
-            args: ['decade']
-        }], previousicon: [{
+            args: ['decade', { descendants: false }]
+        }], previousIconTemplate: [{
             type: ContentChild,
-            args: ['previousicon']
-        }], nexticon: [{
+            args: ['previousicon', { descendants: false }]
+        }], nextIconTemplate: [{
             type: ContentChild,
-            args: ['nexticon']
-        }], triggericon: [{
+            args: ['nexticon', { descendants: false }]
+        }], triggerIconTemplate: [{
             type: ContentChild,
-            args: ['triggericon']
-        }], clearicon: [{
+            args: ['triggericon', { descendants: false }]
+        }], clearIconTemplate: [{
             type: ContentChild,
-            args: ['clearicon']
-        }], decrementicon: [{
+            args: ['clearicon', { descendants: false }]
+        }], decrementIconTemplate: [{
             type: ContentChild,
-            args: ['decrementicon']
-        }], incrementicon: [{
+            args: ['decrementicon', { descendants: false }]
+        }], incrementIconTemplate: [{
             type: ContentChild,
-            args: ['incrementicon']
-        }], inputicon: [{
+            args: ['incrementicon', { descendants: false }]
+        }], inputIconTemplate: [{
             type: ContentChild,
-            args: ['inputicon']
+            args: ['inputicon', { descendants: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatePicker, { className: "DatePicker", filePath: "datepicker.ts", lineNumber: 546 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatePicker, { className: "DatePicker", filePath: "datepicker.ts", lineNumber: 529 }); })();
 class DatePickerModule {
     static ɵfac = function DatePickerModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatePickerModule)(); };
     static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: DatePickerModule });