From 13bfd0795101f90772e1bdeed974023b90506f35 Mon Sep 17 00:00:00 2001
From: Cr3aHal0 <webmastercr3a@gmail.com>
Date: Wed, 20 Dec 2023 18:51:02 +0100
Subject: [PATCH] feat(toast): providing close callback to headless toast
 template

---
 src/app/components/toast/toast.ts         |  4 +--
 src/app/showcase/doc/toast/headlessdoc.ts | 40 ++++++++---------------
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
index f939d0177b4..e71eefe8d0a 100755
--- a/src/app/components/toast/toast.ts
+++ b/src/app/components/toast/toast.ts
@@ -51,7 +51,7 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast
             [attr.data-pc-section]="'root'"
         >
             <ng-container *ngIf="headlessTemplate; else notHeadless">
-                <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message }"></ng-container>
+                <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
             </ng-container>
             <ng-template #notHeadless>
                 <div class="p-toast-message-content" [ngClass]="message?.contentStyleClass" [attr.data-pc-section]="'content'">
@@ -181,7 +181,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
         this.initTimeout();
     }
 
-    onCloseIconClick(event: Event) {
+    onCloseIconClick = (event: Event) => {
         this.clearTimeout();
 
         this.onClose.emit({
diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts
index ae76e129d9d..3e514df3396 100644
--- a/src/app/showcase/doc/toast/headlessdoc.ts
+++ b/src/app/showcase/doc/toast/headlessdoc.ts
@@ -9,8 +9,8 @@ import { Code } from '../../domain/code';
             <p><i>Headless</i> mode allows you to customize the entire user interface instead of the default elements.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-toast position="top-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
-                <ng-template let-message pTemplate="headless">
+            <p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
+                <ng-template let-message pTemplate="headless" let-closeFn="closeFn">
                     <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
                         <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                         <div class="flex flex-column gap-3 w-full">
@@ -21,8 +21,8 @@ import { Code } from '../../domain/code';
                                 <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                             </div>
                             <div class="flex gap-3 mb-3">
-                                <p-button label="Another Upload?" text="true" styleClass="p-0" (click)="onConfirm()"></p-button>
-                                <p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="onReject()"></p-button>
+                                <p-button label="Another Upload?" text="true" styleClass="p-0" (click)="closeFn($event)"></p-button>
+                                <p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="closeFn($event)"></p-button>
                             </div>
                         </div>
                     </section>
@@ -67,19 +67,13 @@ export class HeadlessDoc {
         }
     }
 
-    onConfirm() {
-        this.messageService.clear('confirm');
-        this.visible = false;
-    }
-
-    onReject() {
-        this.messageService.clear('confirm');
+    onClose() {
         this.visible = false;
     }
 
     code: Code = {
-        basic: `<p-toast position="top-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
- <ng-template let-message pTemplate="headless">
+        basic: `<p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
+ <ng-template let-message pTemplate="headless" let-closeFn="closeFn">
      <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
          <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
          <div class="flex flex-column gap-3 w-full">
@@ -90,8 +84,8 @@ export class HeadlessDoc {
                  <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
              </div>
              <div class="flex gap-3 mb-3">
-                 <p-button label="Another Upload?" text="true" styleClass="p-0" (click)="onConfirm()"></p-button>
-                 <p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="onReject()"></p-button>
+                 <p-button label="Another Upload?" text="true" styleClass="p-0" (click)="closeFn($event)"></p-button>
+                 <p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="closeFn($event)"></p-button>
              </div>
          </div>
      </section>
@@ -99,8 +93,8 @@ export class HeadlessDoc {
 </p-toast>
 <button type="button" pButton pRipple (click)="showConfirm()" label="Confirm"></button>`,
         html: `<div class="card flex justify-content-center">
-    <p-toast position="top-center" key="confirm" (onClose)="onReject()" [baseZIndex]="5000">
-    <ng-template let-message pTemplate="headless">
+    <p-toast position="top-center" key="confirm" (onClose)="onClose()" [baseZIndex]="5000">
+    <ng-template let-message pTemplate="headless" let-closeFn="closeFn">
         <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
             <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
             <div class="flex flex-column gap-3 w-full">
@@ -111,8 +105,8 @@ export class HeadlessDoc {
                     <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                 </div>
                 <div class="flex gap-3 mb-3">
-                    <p-button label="Another Upload?" text="true" styleClass="p-0" (click)="onConfirm()"></p-button>
-                    <p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="onReject()"></p-button>
+                    <p-button label="Another Upload?" text="true" styleClass="p-0" (click)="closeFn($event)"></p-button>
+                    <p-button label="Cancel" text="true" styleClass="text-white p-0" (click)="closeFn($event)"></p-button>
                 </div>
             </div>
         </section>
@@ -162,13 +156,7 @@ export class ToastHeadlessDemo {
         }
     }
 
-    onConfirm() {
-        this.messageService.clear('confirm');
-        this.visible = false;
-    }
-
-    onReject() {
-        this.messageService.clear('confirm');
+    onClose() {
         this.visible = false;
     }
 }`