primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-toast.mjs

@@ -1,15 +1,16 @@
 export * from 'primeng/types/toast';
-import { trigger, state, transition, style as style$1, animate, query, animateChild } from '@angular/animations';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, EventEmitter, inject, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, booleanAttribute, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, input, output, EventEmitter, inject, signal, effect, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, computed, booleanAttribute, ContentChildren, ContentChild, NgModule } from '@angular/core';
 import { uuid, isEmpty, setAttribute } from '@primeuix/utils';
 import { SharedModule, MessageService, PrimeTemplate } from 'primeng/api';
 import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
-import * as i2 from 'primeng/bind';
+import * as i3 from 'primeng/bind';
 import { Bind } from 'primeng/bind';
 import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon } from 'primeng/icons';
+import * as i2 from 'primeng/motion';
+import { MotionModule } from 'primeng/motion';
 import { ZIndexUtils } from 'primeng/utils';
 import { style } from '@primeuix/styles/toast';
 import { BaseStyle } from 'primeng/base';
@@ -57,10 +58,10 @@ class ToastStyle extends BaseStyle {
     style = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -124,25 +125,50 @@ class ToastItem extends BaseComponent {
     hideTransformOptions;
     showTransitionOptions;
     hideTransitionOptions;
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    clearAll = input(null, { ...(ngDevMode ? { debugName: "clearAll" } : {}) });
+    onAnimationStart = output();
+    onAnimationEnd = output();
+    onBeforeEnter(event) {
+        this.onAnimationStart.emit(event.element);
+    }
+    onAfterLeave(event) {
+        if (!this.visible() && !this.isDestroyed) {
+            this.onClose.emit({
+                index: this.index,
+                message: this.message
+            });
+            if (!this.isDestroyed) {
+                this.onAnimationEnd.emit(event.element);
+            }
+        }
+    }
     onClose = new EventEmitter();
     _componentStyle = inject(ToastStyle);
     timeout;
+    visible = signal(undefined, { ...(ngDevMode ? { debugName: "visible" } : {}) });
+    isDestroyed = false;
+    isClosing = false;
     constructor(zone) {
         super();
         this.zone = zone;
+        effect(() => {
+            if (this.clearAll()) {
+                this.visible.set(false);
+            }
+        });
     }
     onAfterViewInit() {
+        this.message?.sticky && this.visible.set(true);
         this.initTimeout();
     }
     initTimeout() {
         if (!this.message?.sticky) {
             this.clearTimeout();
             this.zone.runOutsideAngular(() => {
+                this.visible.set(true);
                 this.timeout = setTimeout(() => {
-                    this.onClose.emit({
-                        index: this.index,
-                        message: this.message
-                    });
+                    this.visible.set(false);
                 }, this.message?.life || this.life || 3000);
             });
         }
@@ -157,43 +183,48 @@ class ToastItem extends BaseComponent {
         this.clearTimeout();
     }
     onMouseLeave() {
-        this.initTimeout();
+        if (!this.isClosing) {
+            this.initTimeout();
+        }
     }
     onCloseIconClick = (event) => {
+        this.isClosing = true;
         this.clearTimeout();
-        this.onClose.emit({
-            index: this.index,
-            message: this.message
-        });
+        this.visible.set(false);
         event.preventDefault();
     };
     get closeAriaLabel() {
         return this.config.translation.aria ? this.config.translation.aria.close : undefined;
     }
     onDestroy() {
+        this.isDestroyed = true;
         this.clearTimeout();
+        this.visible.set(false);
+    }
+    get dataP() {
+        return this.cn({
+            [this.message?.severity]: this.message?.severity
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ToastItem, isStandalone: true, selector: "p-toastItem", inputs: { message: "message", index: ["index", "index", numberAttribute], life: ["life", "life", numberAttribute], template: "template", headlessTemplate: "headlessTemplate", showTransformOptions: "showTransformOptions", hideTransformOptions: "hideTransformOptions", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onClose: "onClose" }, providers: [ToastStyle], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ToastItem, isStandalone: true, selector: "p-toastItem", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: false, isRequired: false, transformFunction: numberAttribute }, life: { classPropertyName: "life", publicName: "life", isSignal: false, isRequired: false, transformFunction: numberAttribute }, template: { classPropertyName: "template", publicName: "template", isSignal: false, isRequired: false, transformFunction: null }, headlessTemplate: { classPropertyName: "headlessTemplate", publicName: "headlessTemplate", isSignal: false, isRequired: false, transformFunction: null }, showTransformOptions: { classPropertyName: "showTransformOptions", publicName: "showTransformOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransformOptions: { classPropertyName: "hideTransformOptions", publicName: "hideTransformOptions", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, clearAll: { classPropertyName: "clearAll", publicName: "clearAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAnimationStart: "onAnimationStart", onAnimationEnd: "onAnimationEnd", onClose: "onClose" }, providers: [ToastStyle], usesInheritance: true, ngImport: i0, template: `
         <div
             #container
+            [pMotion]="visible()"
+            [pMotionAppear]="true"
+            [pMotionName]="'p-toast-message'"
+            [pMotionOptions]="motionOptions()"
+            (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+            (pMotionOnAfterLeave)="onAfterLeave($event)"
             [attr.id]="message?.id"
             [pBind]="ptm('message')"
             [class]="cn(cx('message'), message?.styleClass)"
-            [@messageState]="{
-                value: 'visible',
-                params: {
-                    showTransformParams: showTransformOptions,
-                    hideTransformParams: hideTransformOptions,
-                    showTransitionParams: showTransitionOptions,
-                    hideTransitionParams: hideTransitionOptions
-                }
-            }"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
+            [attr.data-p]="dataP"
         >
             @if (headlessTemplate) {
                 <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
@@ -221,17 +252,26 @@ class ToastItem extends BaseComponent {
                                 }
                             }
                         }
-                        <div [pBind]="ptm('messageText')" [ngClass]="cx('messageText')">
-                            <div [pBind]="ptm('summary')" [ngClass]="cx('summary')">
+                        <div [pBind]="ptm('messageText')" [ngClass]="cx('messageText')" [attr.data-p]="dataP">
+                            <div [pBind]="ptm('summary')" [ngClass]="cx('summary')" [attr.data-p]="dataP">
                                 {{ message.summary }}
                             </div>
-                            <div [pBind]="ptm('detail')" [ngClass]="cx('detail')">{{ message.detail }}</div>
+                            <div [pBind]="ptm('detail')" [ngClass]="cx('detail')" [attr.data-p]="dataP">{{ message.detail }}</div>
                         </div>
                     </ng-container>
                     <ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
                     @if (message?.closable !== false) {
                         <div>
-                            <button [pBind]="ptm('closeButton')" type="button" [attr.class]="cx('closeButton')" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [attr.aria-label]="closeAriaLabel" autofocus>
+                            <button
+                                [pBind]="ptm('closeButton')"
+                                type="button"
+                                [attr.class]="cx('closeButton')"
+                                (click)="onCloseIconClick($event)"
+                                (keydown.enter)="onCloseIconClick($event)"
+                                [attr.aria-label]="closeAriaLabel"
+                                autofocus
+                                [attr.data-p]="dataP"
+                            >
                                 @if (message.closeIcon) {
                                     <span [pBind]="ptm('closeIcon')" *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
                                 } @else {
@@ -243,55 +283,32 @@ class ToastItem extends BaseComponent {
                 </div>
             }
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: ExclamationTriangleIcon, selector: "[data-p-icon=\"exclamation-triangle\"]" }, { kind: "component", type: InfoCircleIcon, selector: "[data-p-icon=\"info-circle\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: TimesCircleIcon, selector: "[data-p-icon=\"times-circle\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], animations: [
-            trigger('messageState', [
-                state('visible', style$1({
-                    transform: 'translateY(0)',
-                    opacity: 1
-                })),
-                transition('void => *', [
-                    style$1({
-                        transform: '{{showTransformParams}}',
-                        opacity: 0
-                    }),
-                    animate('{{showTransitionParams}}')
-                ]),
-                transition('* => void', [
-                    animate('{{hideTransitionParams}}', style$1({
-                        height: 0,
-                        opacity: 0,
-                        transform: '{{hideTransformParams}}'
-                    }))
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: ExclamationTriangleIcon, selector: "[data-p-icon=\"exclamation-triangle\"]" }, { kind: "component", type: InfoCircleIcon, selector: "[data-p-icon=\"info-circle\"]" }, { kind: "component", type: TimesIcon, selector: "[data-p-icon=\"times\"]" }, { kind: "component", type: TimesCircleIcon, selector: "[data-p-icon=\"times-circle\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "directive", type: i2.MotionDirective, selector: "[pMotion]", inputs: ["pMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toastItem',
                     standalone: true,
-                    imports: [CommonModule, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, SharedModule, Bind],
+                    imports: [CommonModule, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, SharedModule, Bind, MotionModule],
                     template: `
         <div
             #container
+            [pMotion]="visible()"
+            [pMotionAppear]="true"
+            [pMotionName]="'p-toast-message'"
+            [pMotionOptions]="motionOptions()"
+            (pMotionOnBeforeEnter)="onBeforeEnter($event)"
+            (pMotionOnAfterLeave)="onAfterLeave($event)"
             [attr.id]="message?.id"
             [pBind]="ptm('message')"
             [class]="cn(cx('message'), message?.styleClass)"
-            [@messageState]="{
-                value: 'visible',
-                params: {
-                    showTransformParams: showTransformOptions,
-                    hideTransformParams: hideTransformOptions,
-                    showTransitionParams: showTransitionOptions,
-                    hideTransitionParams: hideTransitionOptions
-                }
-            }"
             (mouseenter)="onMouseEnter()"
             (mouseleave)="onMouseLeave()"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
+            [attr.data-p]="dataP"
         >
             @if (headlessTemplate) {
                 <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
@@ -319,17 +336,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                                 }
                             }
                         }
-                        <div [pBind]="ptm('messageText')" [ngClass]="cx('messageText')">
-                            <div [pBind]="ptm('summary')" [ngClass]="cx('summary')">
+                        <div [pBind]="ptm('messageText')" [ngClass]="cx('messageText')" [attr.data-p]="dataP">
+                            <div [pBind]="ptm('summary')" [ngClass]="cx('summary')" [attr.data-p]="dataP">
                                 {{ message.summary }}
                             </div>
-                            <div [pBind]="ptm('detail')" [ngClass]="cx('detail')">{{ message.detail }}</div>
+                            <div [pBind]="ptm('detail')" [ngClass]="cx('detail')" [attr.data-p]="dataP">{{ message.detail }}</div>
                         </div>
                     </ng-container>
                     <ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
                     @if (message?.closable !== false) {
                         <div>
-                            <button [pBind]="ptm('closeButton')" type="button" [attr.class]="cx('closeButton')" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [attr.aria-label]="closeAriaLabel" autofocus>
+                            <button
+                                [pBind]="ptm('closeButton')"
+                                type="button"
+                                [attr.class]="cx('closeButton')"
+                                (click)="onCloseIconClick($event)"
+                                (keydown.enter)="onCloseIconClick($event)"
+                                [attr.aria-label]="closeAriaLabel"
+                                autofocus
+                                [attr.data-p]="dataP"
+                            >
                                 @if (message.closeIcon) {
                                     <span [pBind]="ptm('closeIcon')" *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
                                 } @else {
@@ -342,28 +368,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }
         </div>
     `,
-                    animations: [
-                        trigger('messageState', [
-                            state('visible', style$1({
-                                transform: 'translateY(0)',
-                                opacity: 1
-                            })),
-                            transition('void => *', [
-                                style$1({
-                                    transform: '{{showTransformParams}}',
-                                    opacity: 0
-                                }),
-                                animate('{{showTransitionParams}}')
-                            ]),
-                            transition('* => void', [
-                                animate('{{hideTransitionParams}}', style$1({
-                                    height: 0,
-                                    opacity: 0,
-                                    transform: '{{hideTransformParams}}'
-                                }))
-                            ])
-                        ])
-                    ],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [ToastStyle]
@@ -388,7 +392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
-            }], onClose: [{
+            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], clearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAll", required: false }] }], onAnimationStart: [{ type: i0.Output, args: ["onAnimationStart"] }], onAnimationEnd: [{ type: i0.Output, args: ["onAnimationEnd"] }], onClose: [{
                 type: Output
             }] } });
 /**
@@ -451,23 +455,38 @@ class Toast extends BaseComponent {
     /**
      * Transform options of the show animation.
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     showTransformOptions = 'translateY(100%)';
     /**
      * Transform options of the hide animation.
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     hideTransformOptions = 'translateY(-100%)';
     /**
      * Transition options of the show animation.
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     showTransitionOptions = '300ms ease-out';
     /**
      * Transition options of the hide animation.
      * @group Props
+     * @deprecated since v21.0.0. Use `motionOptions` instead.
      */
     hideTransitionOptions = '250ms ease-in';
+    /**
+     * The motion options.
+     * @group Props
+     */
+    motionOptions = input(undefined, { ...(ngDevMode ? { debugName: "motionOptions" } : {}) });
+    computedMotionOptions = computed(() => {
+        return {
+            ...this.ptm('motion'),
+            ...this.motionOptions()
+        };
+    }, { ...(ngDevMode ? { debugName: "computedMotionOptions" } : {}) });
     /**
      * Object literal to define styles per screen size.
      * @group Props
@@ -480,12 +499,16 @@ class Toast extends BaseComponent {
      */
     onClose = new EventEmitter();
     /**
-     * Custom template of message.
+     * Custom message template.
+     * @param {ToastMessageTemplateContext} context - message context.
+     * @see {@link ToastMessageTemplateContext}
      * @group Templates
      */
     template;
     /**
      * Custom headless template.
+     * @param {ToastHeadlessTemplateContext} context - headless context.
+     * @see {@link ToastHeadlessTemplateContext}
      * @group Templates
      */
     headlessTemplate;
@@ -499,6 +522,7 @@ class Toast extends BaseComponent {
     styleElement;
     id = uuid('pn_id_');
     templates;
+    clearAllTrigger = signal(null, { ...(ngDevMode ? { debugName: "clearAllTrigger" } : {}) });
     constructor() {
         super();
     }
@@ -517,15 +541,19 @@ class Toast extends BaseComponent {
         this.clearSubscription = this.messageService.clearObserver.subscribe((key) => {
             if (key) {
                 if (this.key === key) {
-                    this.messages = null;
+                    this.clearAll();
                 }
             }
             else {
-                this.messages = null;
+                this.clearAll();
             }
             this.cd.markForCheck();
         });
     }
+    clearAll() {
+        // trigger signal to clear all messages
+        this.clearAllTrigger.set({});
+    }
     _template;
     _headlessTemplate;
     onAfterContentInit() {
@@ -578,21 +606,18 @@ class Toast extends BaseComponent {
         this.onClose.emit({
             message: event.message
         });
+        this.onAnimationEnd();
         this.cd.detectChanges();
     }
-    onAnimationStart(event) {
-        if (event.fromState === 'void') {
-            this.renderer.setAttribute(this.el?.nativeElement, this.id, '');
-            if (this.autoZIndex && this.el?.nativeElement.style.zIndex === '') {
-                ZIndexUtils.set('modal', this.el?.nativeElement, this.baseZIndex || this.config.zIndex.modal);
-            }
+    onAnimationStart() {
+        this.renderer.setAttribute(this.el?.nativeElement, this.id, '');
+        if (this.autoZIndex && this.el?.nativeElement.style.zIndex === '') {
+            ZIndexUtils.set('modal', this.el?.nativeElement, this.baseZIndex || this.config.zIndex.modal);
         }
     }
-    onAnimationEnd(event) {
-        if (event.toState === 'void') {
-            if (this.autoZIndex && isEmpty(this.messages)) {
-                ZIndexUtils.clear(this.el?.nativeElement);
-            }
+    onAnimationEnd() {
+        if (this.autoZIndex && isEmpty(this.messages)) {
+            ZIndexUtils.clear(this.el?.nativeElement);
         }
     }
     createStyle() {
@@ -637,28 +662,31 @@ class Toast extends BaseComponent {
         }
         this.destroyStyle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Toast, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.4", type: Toast, isStandalone: true, selector: "p-toast", inputs: { key: "key", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], life: ["life", "life", numberAttribute], styleClass: "styleClass", position: "position", preventOpenDuplicates: ["preventOpenDuplicates", "preventOpenDuplicates", booleanAttribute], preventDuplicates: ["preventDuplicates", "preventDuplicates", booleanAttribute], showTransformOptions: "showTransformOptions", hideTransformOptions: "hideTransformOptions", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", breakpoints: "breakpoints" }, outputs: { onClose: "onClose" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')" } }, providers: [ToastStyle, { provide: TOAST_INSTANCE, useExisting: Toast }, { provide: PARENT_INSTANCE, useExisting: Toast }], queries: [{ propertyName: "template", first: true, predicate: ["message"], descendants: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: `
+    get dataP() {
+        return this.cn({
+            [this.position]: this.position
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Toast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: Toast, isStandalone: true, selector: "p-toast", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: false, isRequired: false, transformFunction: null }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, life: { classPropertyName: "life", publicName: "life", isSignal: false, isRequired: false, transformFunction: numberAttribute }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, preventOpenDuplicates: { classPropertyName: "preventOpenDuplicates", publicName: "preventOpenDuplicates", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventDuplicates: { classPropertyName: "preventDuplicates", publicName: "preventDuplicates", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showTransformOptions: { classPropertyName: "showTransformOptions", publicName: "showTransformOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransformOptions: { classPropertyName: "hideTransformOptions", publicName: "hideTransformOptions", isSignal: false, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: false, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "class": "cn(cx('root'), styleClass)", "style": "sx('root')", "attr.data-p": "dataP" } }, providers: [ToastStyle, { provide: TOAST_INSTANCE, useExisting: Toast }, { provide: PARENT_INSTANCE, useExisting: Toast }], queries: [{ propertyName: "template", first: true, predicate: ["message"], descendants: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
         <p-toastItem
             *ngFor="let msg of messages; let i = index"
             [message]="msg"
             [index]="i"
             [life]="life"
+            [clearAll]="clearAllTrigger()"
             (onClose)="onMessageClose($event)"
+            (onAnimationEnd)="onAnimationEnd()"
+            (onAnimationStart)="onAnimationStart()"
             [template]="template || _template"
             [headlessTemplate]="headlessTemplate || _headlessTemplate"
-            @toastAnimation
-            (@toastAnimation.start)="onAnimationStart($event)"
-            (@toastAnimation.done)="onAnimationEnd($event)"
-            [showTransformOptions]="showTransformOptions"
-            [hideTransformOptions]="hideTransformOptions"
-            [showTransitionOptions]="showTransitionOptions"
-            [hideTransitionOptions]="hideTransitionOptions"
             [pt]="pt"
+            [unstyled]="unstyled()"
+            [motionOptions]="computedMotionOptions()"
         ></p-toastItem>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToastItem, selector: "p-toastItem", inputs: ["message", "index", "life", "template", "headlessTemplate", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClose"] }, { kind: "ngmodule", type: SharedModule }], animations: [trigger('toastAnimation', [transition(':enter, :leave', [query('@*', animateChild())])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ToastItem, selector: "p-toastItem", inputs: ["message", "index", "life", "template", "headlessTemplate", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "motionOptions", "clearAll"], outputs: ["onAnimationStart", "onAnimationEnd", "onClose"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Toast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Toast, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toast',
@@ -670,26 +698,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             [message]="msg"
             [index]="i"
             [life]="life"
+            [clearAll]="clearAllTrigger()"
             (onClose)="onMessageClose($event)"
+            (onAnimationEnd)="onAnimationEnd()"
+            (onAnimationStart)="onAnimationStart()"
             [template]="template || _template"
             [headlessTemplate]="headlessTemplate || _headlessTemplate"
-            @toastAnimation
-            (@toastAnimation.start)="onAnimationStart($event)"
-            (@toastAnimation.done)="onAnimationEnd($event)"
-            [showTransformOptions]="showTransformOptions"
-            [hideTransformOptions]="hideTransformOptions"
-            [showTransitionOptions]="showTransitionOptions"
-            [hideTransitionOptions]="hideTransitionOptions"
             [pt]="pt"
+            [unstyled]="unstyled()"
+            [motionOptions]="computedMotionOptions()"
         ></p-toastItem>
     `,
-                    animations: [trigger('toastAnimation', [transition(':enter, :leave', [query('@*', animateChild())])])],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                     providers: [ToastStyle, { provide: TOAST_INSTANCE, useExisting: Toast }, { provide: PARENT_INSTANCE, useExisting: Toast }],
                     host: {
                         '[class]': "cn(cx('root'), styleClass)",
-                        '[style]': "sx('root')"
+                        '[style]': "sx('root')",
+                        '[attr.data-p]': 'dataP'
                     },
                     hostDirectives: [Bind]
                 }]
@@ -722,7 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
-            }], breakpoints: [{
+            }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], breakpoints: [{
                 type: Input
             }], onClose: [{
                 type: Output
@@ -737,11 +763,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: [PrimeTemplate]
             }] } });
 class ToastModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Toast, SharedModule],