primeng 18.0.0 → 18.0.1

package/fesm2022/primeng-calendar.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, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, 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 * 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';
@@ -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.clearicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate || ctx_r1._clearIconTemplate);
 } }
 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.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 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.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 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.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 Calendar_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -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.previousicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.previousIconTemplate || ctx_r1._previousIconTemplate);
 } }
 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.decade);
+    i0.ɵɵproperty("ngIf", !ctx_r1.decadeTemplate && ctx_r1._decadeTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decade)("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 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.nexticon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.nextIconTemplate || !ctx_r1._nextIconTemplate);
 } }
 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");
@@ -765,7 +765,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.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 Calendar_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);
@@ -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.disabledDate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, date_r16));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.disabledDateTemplate || ctx_r1._disabledDateTemplate)("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.disabledDate && (date_r16.selectable || !ctx_r1.disabledDate));
+    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.disabledDate);
+    i0.ɵɵproperty("ngIf", date_r16.selectable || !ctx_r1.disabledDateTemplate && !ctx_r1._disabledDateTemplate);
     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.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();
@@ -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.decade);
+    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");
 } }
@@ -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.decrementicon);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.decrementIconTemplate || ctx_r1._decrementIconTemplate);
 } }
 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.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();
@@ -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.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 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.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 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.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();
@@ -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.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();
@@ -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.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();
@@ -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.header);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate);
     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.footer);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate || ctx_r1._footerTemplate);
 } }
 const CALENDAR_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -1787,57 +1787,57 @@ class Calendar extends BaseComponent {
      * Custom template for header section.
      * @group Templates
      */
-    header;
+    headerTemplate;
     /**
      * Custom template for footer section.
      * @group Templates
      */
-    footer;
+    footerTemplate;
     /**
      * Custom template for disabled date cells.
      * @group Templates
      */
-    disabledDate;
+    disabledDateTemplate;
     /**
      * Custom template for decade view.
      * @group Templates
      */
-    decade;
+    decadeTemplate;
     /**
      * 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;
     containerViewChild;
     inputfieldViewChild;
     set content(content) {
@@ -1854,6 +1854,18 @@ class Calendar extends BaseComponent {
             }
         }
     }
+    _dateTemplate;
+    _headerTemplate;
+    _footerTemplate;
+    _disabledDateTemplate;
+    _decadeTemplate;
+    _previousIconTemplate;
+    _nextIconTemplate;
+    _triggerIconTemplate;
+    _clearIconTemplate;
+    _decrementIconTemplate;
+    _incrementIconTemplate;
+    _inputIconTemplate;
     _componentStyle = inject(CalendarStyle);
     contentViewChild;
     value;
@@ -1979,6 +1991,52 @@ class Calendar 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);
     }
@@ -4202,32 +4260,34 @@ class Calendar extends BaseComponent {
     }
     static ɵfac = function Calendar_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Calendar)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.OverlayService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Calendar, selectors: [["p-calendar"]], contentQueries: function Calendar_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);
-            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);
+            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.templates = _t);
         } }, viewQuery: function Calendar_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c12, 5);
             i0.ɵɵviewQuery(_c13, 5);
@@ -4311,9 +4371,9 @@ class Calendar extends BaseComponent {
                     [fluid]="hasFluid"
                 />
                 <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
@@ -4330,21 +4390,21 @@ class Calendar 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>
@@ -4368,7 +4428,7 @@ class Calendar extends BaseComponent {
                 *ngIf="inline || overlayVisible"
             >
                 <ng-content select="p-header"></ng-content>
-                <ng-container *ngTemplateOutlet="header"></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">
@@ -4384,9 +4444,9 @@ class Calendar 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">
@@ -4415,8 +4475,8 @@ class Calendar extends BaseComponent {
                                         {{ getYear(month) }}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
-                                        <ng-container *ngIf="!decade">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
-                                        <ng-container *ngTemplateOutlet="decade; 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
@@ -4429,10 +4489,10 @@ class Calendar extends BaseComponent {
                                     [ngStyle]="{ visibility: i === months.length - 1 ? 'visible' : 'hidden' }"
                                     [attr.aria-label]="nextIconAriaLabel"
                                 >
-                                    <ChevronRightIcon *ngIf="!decade" />
+                                    <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>
@@ -4472,12 +4532,12 @@ class Calendar extends BaseComponent {
                                                     (keydown)="onDateCellKeydown($event, date, i)"
                                                     pRipple
                                                 >
-                                                    <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 *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="disabledDate; 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">
@@ -4544,9 +4604,9 @@ class Calendar 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
@@ -4564,9 +4624,9 @@ class Calendar 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">
@@ -4588,9 +4648,9 @@ class Calendar 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
@@ -4608,9 +4668,9 @@ class Calendar 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>
@@ -4633,9 +4693,9 @@ class Calendar 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
@@ -4653,9 +4713,9 @@ class Calendar 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'">
@@ -4672,8 +4732,8 @@ class Calendar 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
@@ -4686,8 +4746,8 @@ class Calendar 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>
@@ -4696,7 +4756,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="footer"></ng-container>
+                <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
             </div>
         </span>
     `,
@@ -4913,40 +4973,40 @@ class Calendar extends BaseComponent {
             type: Output
         }], dateTemplate: [{
             type: ContentChild,
-            args: ['date']
-        }], header: [{
+            args: ['date', { descendants: false }]
+        }], headerTemplate: [{
             type: ContentChild,
-            args: ['header']
-        }], footer: [{
+            args: ['header', { descendants: false }]
+        }], footerTemplate: [{
             type: ContentChild,
-            args: ['footer']
-        }], disabledDate: [{
+            args: ['footer', { descendants: false }]
+        }], disabledDateTemplate: [{
             type: ContentChild,
-            args: ['disabledDate']
-        }], decade: [{
+            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 }]
         }], containerViewChild: [{
             type: ViewChild,
             args: ['container', { static: false }]
@@ -4956,6 +5016,9 @@ class Calendar extends BaseComponent {
         }], content: [{
             type: ViewChild,
             args: ['contentWrapper', { static: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Calendar, { className: "Calendar" }); })();
 class CalendarModule {