Demo update

angular.json

@@ -118,5 +118,8 @@
                 }
             }
         }
+    },
+    "cli": {
+      "analytics": false
     }
 }

src/app/components/calendar/calendar.interface.ts

@@ -34,6 +34,16 @@ export interface CalendarTemplates {
      * Custom header template.
      */
     header(): TemplateRef<any>;
+    /**
+     * Custom input icon template.
+     * @param {Object} context - input icon template params.
+     */
+    inputIconTemplate(context: {
+        /**
+         * Click callback
+         */
+        clickCallBack: () => void;
+    }): TemplateRef<{ clickCallBack: Function }>;
     /**
      * Custom previous icon template.
      */

src/app/components/calendar/calendar.ts

@@ -49,7 +49,19 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
 @Component({
     selector: 'p-calendar',
     template: `
-        <span #container [ngClass]="{ 'p-calendar': true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled': disabled, 'p-focus': focus || overlayVisible }" [ngStyle]="style" [class]="styleClass">
+        <span
+            #container
+            [ngClass]="{
+                'p-calendar': true,
+                'p-input-icon-right': showIcon && iconDisplay === 'input',
+                'p-calendar-w-btn': showIcon && iconDisplay === 'button',
+                'p-calendar-timeonly': timeOnly,
+                'p-calendar-disabled': disabled,
+                'p-focus': focus || overlayVisible
+            }"
+            [ngStyle]="style"
+            [class]="styleClass"
+        >
             <ng-template [ngIf]="!inline">
                 <input
                     #inputfield
@@ -95,7 +107,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                     [attr.aria-controls]="panelId"
                     pButton
                     pRipple
-                    *ngIf="showIcon"
+                    *ngIf="showIcon && iconDisplay === 'button'"
                     (click)="onButtonClick($event, inputfield)"
                     class="p-datepicker-trigger p-button-icon-only"
                     [disabled]="disabled"
@@ -107,6 +119,10 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
                         <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
                     </ng-container>
                 </button>
+                <ng-container *ngIf="iconDisplay === 'input' && showIcon">
+                    <CalendarIcon *ngIf="!inputIconTemplate" (click)="onButtonClick($event)" />
+                    <ng-container *ngTemplateOutlet="inputIconTemplate; context: { clickCallBack: onButtonClick.bind(this) }"></ng-container>
+                </ng-container>
             </ng-template>
             <div
                 #contentWrapper
@@ -442,6 +458,7 @@ export const CALENDAR_VALUE_ACCESSOR: any = {
     styleUrls: ['./calendar.css']
 })
 export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
+    @Input() iconDisplay: 'input' | 'button' = 'button';
     /**
      * Inline style of the component.
      * @group Props
@@ -1048,6 +1065,8 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
 
     incrementIconTemplate: Nullable<TemplateRef<any>>;
 
+    inputIconTemplate: Nullable<TemplateRef<any>>;
+
     _disabledDates!: Array<Date>;
 
     _disabledDays!: Array<number>;
@@ -1156,6 +1175,10 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
                     this.headerTemplate = item.template;
                     break;
 
+                case 'inputicon':
+                    this.inputIconTemplate = item.template;
+                    break;
+
                 case 'previousicon':
                     this.previousIconTemplate = item.template;
                     break;
@@ -1884,7 +1907,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         this.onModelTouched();
     }
 
-    onButtonClick(event: Event, inputfield: any) {
+    onButtonClick(event: Event, inputfield: any = this.inputfieldViewChild?.nativeElement) {
         if (!this.overlayVisible) {
             inputfield.focus();
             this.showOverlay();

src/app/components/confirmdialog/confirmdialog.interface.ts

@@ -15,7 +15,9 @@ export interface ConfirmDialogTemplates {
     /**
      * Custom template of message.
      */
-    message(): TemplateRef<any>;
+    message(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
     /**
      * Custom template of icon.
      */
@@ -28,4 +30,10 @@ export interface ConfirmDialogTemplates {
      * Custom template of accepticon.
      */
     accepticon(): TemplateRef<any>;
+    /**
+     * Headless template.
+     */
+    headless(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
 }

src/app/components/confirmdialog/confirmdialog.ts

@@ -56,71 +56,76 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
                 [attr.aria-labelledby]="getAriaLabelledBy()"
                 [attr.aria-modal]="true"
             >
-                <div class="p-dialog-header" *ngIf="headerTemplate">
-                    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-                </div>
-                <div class="p-dialog-header" *ngIf="!headerTemplate">
-                    <span class="p-dialog-title" [id]="getAriaLabelledBy()" *ngIf="option('header')">{{ option('header') }}</span>
-                    <div class="p-dialog-header-icons">
-                        <button *ngIf="closable" type="button" role="button" [attr.aria-label]="closeAriaLabel" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-close p-link': true }" (click)="close($event)" (keydown.enter)="close($event)">
-                            <TimesIcon />
-                        </button>
+                <ng-container *ngIf="headlessTemplate; else notHeadless">
+                    <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: confirmation }"></ng-container>
+                </ng-container>
+                <ng-template #notHeadless>
+                    <div class="p-dialog-header" *ngIf="headerTemplate">
+                        <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+                    </div>
+                    <div class="p-dialog-header" *ngIf="!headerTemplate">
+                        <span class="p-dialog-title" [id]="getAriaLabelledBy()" *ngIf="option('header')">{{ option('header') }}</span>
+                        <div class="p-dialog-header-icons">
+                            <button *ngIf="closable" type="button" role="button" [attr.aria-label]="closeAriaLabel" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-close p-link': true }" (click)="close($event)" (keydown.enter)="close($event)">
+                                <TimesIcon />
+                            </button>
+                        </div>
                     </div>
-                </div>
-                <div #content class="p-dialog-content">
-                    <i [ngClass]="'p-confirm-dialog-icon'" [class]="option('icon')" *ngIf="!iconTemplate && option('icon')"></i>
-                    <ng-container *ngIf="iconTemplate">
-                        <ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
-                    </ng-container>
-                    <span class="p-confirm-dialog-message" *ngIf="!messageTemplate" [innerHTML]="option('message')"></span>
-                    <ng-container *ngIf="messageTemplate">
-                        <ng-template *ngTemplateOutlet="messageTemplate"></ng-template>
-                    </ng-container>
-                </div>
-                <div class="p-dialog-footer" *ngIf="footer || footerTemplate">
-                    <ng-content select="p-footer"></ng-content>
-                    <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
-                </div>
-                <div class="p-dialog-footer" *ngIf="!footer && !footerTemplate">
-                    <button
-                        type="button"
-                        pRipple
-                        pButton
-                        [label]="rejectButtonLabel"
-                        (click)="reject()"
-                        [ngClass]="'p-confirm-dialog-reject'"
-                        [class]="option('rejectButtonStyleClass')"
-                        *ngIf="option('rejectVisible')"
-                        [attr.aria-label]="rejectAriaLabel"
-                    >
-                        <ng-container *ngIf="!rejectIconTemplate">
-                            <i *ngIf="option('rejectIcon')" [class]="option('rejectIcon')"></i>
-                            <TimesIcon *ngIf="!option('rejectIcon')" [styleClass]="'p-button-icon-left'" />
+                    <div #content class="p-dialog-content">
+                        <i [ngClass]="'p-confirm-dialog-icon'" [class]="option('icon')" *ngIf="!iconTemplate && option('icon')"></i>
+                        <ng-container *ngIf="iconTemplate">
+                            <ng-template *ngTemplateOutlet="iconTemplate"></ng-template>
                         </ng-container>
-                        <span *ngIf="rejectIconTemplate" class="p-button-icon-left">
-                            <ng-template *ngTemplateOutlet="rejectIconTemplate"></ng-template>
-                        </span>
-                    </button>
-                    <button
-                        type="button"
-                        pRipple
-                        pButton
-                        [label]="acceptButtonLabel"
-                        (click)="accept()"
-                        [ngClass]="'p-confirm-dialog-accept'"
-                        [class]="option('acceptButtonStyleClass')"
-                        *ngIf="option('acceptVisible')"
-                        [attr.aria-label]="acceptAriaLabel"
-                    >
-                        <ng-container *ngIf="!acceptIconTemplate">
-                            <i *ngIf="option('acceptIcon')" [class]="option('acceptIcon')"></i>
-                            <CheckIcon *ngIf="!option('acceptIcon')" [styleClass]="'p-button-icon-left'" />
+                        <span class="p-confirm-dialog-message" *ngIf="!messageTemplate" [innerHTML]="option('message')"></span>
+                        <ng-container *ngIf="messageTemplate">
+                            <ng-template *ngTemplateOutlet="messageTemplate; context: { $implicit: confirmation }"></ng-template>
                         </ng-container>
-                        <span *ngIf="acceptIconTemplate" class="p-button-icon-left">
-                            <ng-template *ngTemplateOutlet="acceptIconTemplate"></ng-template>
-                        </span>
-                    </button>
-                </div>
+                    </div>
+                    <div class="p-dialog-footer" *ngIf="footer || footerTemplate">
+                        <ng-content select="p-footer"></ng-content>
+                        <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+                    </div>
+                    <div class="p-dialog-footer" *ngIf="!footer && !footerTemplate">
+                        <button
+                            type="button"
+                            pRipple
+                            pButton
+                            [label]="rejectButtonLabel"
+                            (click)="reject()"
+                            [ngClass]="'p-confirm-dialog-reject'"
+                            [class]="option('rejectButtonStyleClass')"
+                            *ngIf="option('rejectVisible')"
+                            [attr.aria-label]="rejectAriaLabel"
+                        >
+                            <ng-container *ngIf="!rejectIconTemplate">
+                                <i *ngIf="option('rejectIcon')" [class]="option('rejectIcon')"></i>
+                                <TimesIcon *ngIf="!option('rejectIcon')" [styleClass]="'p-button-icon-left'" />
+                            </ng-container>
+                            <span *ngIf="rejectIconTemplate" class="p-button-icon-left">
+                                <ng-template *ngTemplateOutlet="rejectIconTemplate"></ng-template>
+                            </span>
+                        </button>
+                        <button
+                            type="button"
+                            pRipple
+                            pButton
+                            [label]="acceptButtonLabel"
+                            (click)="accept()"
+                            [ngClass]="'p-confirm-dialog-accept'"
+                            [class]="option('acceptButtonStyleClass')"
+                            *ngIf="option('acceptVisible')"
+                            [attr.aria-label]="acceptAriaLabel"
+                        >
+                            <ng-container *ngIf="!acceptIconTemplate">
+                                <i *ngIf="option('acceptIcon')" [class]="option('acceptIcon')"></i>
+                                <CheckIcon *ngIf="!option('acceptIcon')" [styleClass]="'p-button-icon-left'" />
+                            </ng-container>
+                            <span *ngIf="acceptIconTemplate" class="p-button-icon-left">
+                                <ng-template *ngTemplateOutlet="acceptIconTemplate"></ng-template>
+                            </span>
+                        </button>
+                    </div>
+                </ng-template>
             </div>
         </div>
     `,
@@ -377,6 +382,10 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
                 case 'accepticon':
                     this.acceptIconTemplate = item.template;
                     break;
+
+                case 'headless':
+                    this.headlessTemplate = item.template;
+                    break;
             }
         });
     }
@@ -393,6 +402,8 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     iconTemplate: Nullable<TemplateRef<any>>;
 
+    headlessTemplate: Nullable<TemplateRef<any>>;
+
     confirmation: Nullable<Confirmation>;
 
     _visible: boolean | undefined;

src/app/components/confirmpopup/confirmpopup.interface.ts

@@ -5,6 +5,12 @@ import { TemplateRef } from '@angular/core';
  * @group Templates
  */
 export interface ConfirmPopupTemplates {
+    /**
+     * Custom content template.
+     */
+    content(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
     /**
      * Custom template of rejecticon.
      */
@@ -13,4 +19,10 @@ export interface ConfirmPopupTemplates {
      * Custom template of accepticon.
      */
     accepticon(): TemplateRef<any>;
+    /**
+     * Headless template.
+     */
+    headless(context:{
+        $implicit?:any
+    }): TemplateRef<any>;
 }

src/app/components/confirmpopup/confirmpopup.ts

@@ -42,9 +42,18 @@ import { Subscription } from 'rxjs';
             (@animation.start)="onAnimationStart($event)"
             (@animation.done)="onAnimationEnd($event)"
         >
-            <div #content class="p-confirm-popup-content">
-                <i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation?.icon" *ngIf="confirmation?.icon"></i>
-                <span class="p-confirm-popup-message">{{ confirmation?.message }}</span>
+         <ng-container *ngIf="headlessTemplate; else notHeadless">
+            <ng-container *ngTemplateOutlet="headlessTemplate; context:{$implicit:confirmation}"></ng-container>
+         </ng-container>
+         <ng-template #notHeadless>
+         <div #content class="p-confirm-popup-content">
+                <ng-container *ngIf="contentTemplate; else withoutContentTemplate">
+                    <ng-container *ngTemplateOutlet="contentTemplate; context:{$implicit:confirmation}"></ng-container>
+                </ng-container>
+                <ng-template #withoutContentTemplate>
+                    <i [ngClass]="'p-confirm-popup-icon'" [class]="confirmation?.icon" *ngIf="confirmation?.icon"></i>
+                    <span class="p-confirm-popup-message">{{ confirmation?.message }}</span>
+                </ng-template>
             </div>
             <div class="p-confirm-popup-footer">
                 <button
@@ -74,6 +83,7 @@ import { Subscription } from 'rxjs';
                     <ng-template #accepticon *ngTemplateOutlet="acceptIconTemplate"></ng-template>
                 </button>
             </div>
+         </ng-template>
         </div>
     `,
     animations: [
@@ -164,10 +174,14 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy {
 
     confirmation: Nullable<Confirmation>;
 
+    contentTemplate: Nullable<TemplateRef<any>>;
+
     acceptIconTemplate: Nullable<TemplateRef<any>>;
 
     rejectIconTemplate: Nullable<TemplateRef<any>>;
 
+    headlessTemplate: Nullable<TemplateRef<any>>;
+
     _visible: boolean | undefined;
 
     documentClickListener: VoidListener;
@@ -214,13 +228,21 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy {
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
+                case 'content':
+                    this.contentTemplate = item.template;
+                    break;
+
                 case 'rejecticon':
                     this.rejectIconTemplate = item.template;
                     break;
 
                 case 'accepticon':
                     this.acceptIconTemplate = item.template;
                     break;
+
+                case 'headless':
+                    this.headlessTemplate = item.template;
+                    break;
             }
         });
     }