primeng 20.3.0 → 21.0.0-beta.1

package/fesm2022/primeng-timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-timeline.mjs","sources":["../../src/timeline/style/timelinestyle.ts","../../src/timeline/timeline.ts","../../src/timeline/primeng-timeline.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/timeline';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    root: ({ instance }) => ['p-timeline p-component', 'p-timeline-' + instance.align, 'p-timeline-' + instance.layout],\n    event: 'p-timeline-event',\n    eventOpposite: 'p-timeline-event-opposite',\n    eventSeparator: 'p-timeline-event-separator',\n    eventMarker: 'p-timeline-event-marker',\n    eventConnector: 'p-timeline-event-connector',\n    eventContent: 'p-timeline-event-content'\n};\n\n@Injectable()\nexport class TimelineStyle extends BaseStyle {\n    name = 'timeline';\n\n    style = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Timeline visualizes a series of chained events.\n *\n * [Live Demo](https://primeng.org/timeline)\n *\n * @module timelinestyle\n *\n */\nexport enum TimelineClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-timeline',\n    /**\n     * Class name of the event element\n     */\n    event = 'p-timeline-event',\n    /**\n     * Class name of the event opposite element\n     */\n    eventOpposite = 'p-timeline-event-opposite',\n    /**\n     * Class name of the event separator element\n     */\n    eventSeparator = 'p-timeline-event-separator',\n    /**\n     * Class name of the event marker element\n     */\n    eventMarker = 'p-timeline-event-marker',\n    /**\n     * Class name of the event connector element\n     */\n    eventConnector = 'p-timeline-event-connector',\n    /**\n     * Class name of the event content element\n     */\n    eventContent = 'p-timeline-event-content'\n}\n\nexport interface TimelineStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, InjectionToken, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { TimelinePassThrough } from 'primeng/types/timeline';\nimport { TimelineStyle } from './style/timelinestyle';\n\nconst TIMELINE_INSTANCE = new InjectionToken<Timeline>('TIMELINE_INSTANCE');\n\n/**\n * Timeline visualizes a series of chained events.\n * @group Components\n */\n@Component({\n    selector: 'p-timeline',\n    standalone: true,\n    imports: [CommonModule, SharedModule, Bind],\n    template: `\n        <div [pBind]=\"ptm('event')\" *ngFor=\"let event of value; let last = last\" [class]=\"cx('event')\">\n            <div [pBind]=\"ptm('eventOpposite')\" [class]=\"cx('eventOpposite')\">\n                <ng-container *ngTemplateOutlet=\"oppositeTemplate || _oppositeTemplate; context: { $implicit: event }\"></ng-container>\n            </div>\n            <div [pBind]=\"ptm('eventSeparator')\" [class]=\"cx('eventSeparator')\">\n                <ng-container *ngIf=\"markerTemplate || _markerTemplate; else marker\">\n                    <ng-container *ngTemplateOutlet=\"markerTemplate || _markerTemplate; context: { $implicit: event }\"></ng-container>\n                </ng-container>\n                <ng-template #marker>\n                    <div [pBind]=\"ptm('eventMarker')\" [class]=\"cx('eventMarker')\"></div>\n                </ng-template>\n                <div [pBind]=\"ptm('eventConnector')\" *ngIf=\"!last\" [class]=\"cx('eventConnector')\"></div>\n            </div>\n            <div [pBind]=\"ptm('eventContent')\" [class]=\"cx('eventContent')\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate || _contentTemplate; context: { $implicit: event }\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [TimelineStyle, { provide: TIMELINE_INSTANCE, useExisting: Timeline }, { provide: PARENT_INSTANCE, useExisting: Timeline }],\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\"\n    },\n    hostDirectives: [Bind]\n})\nexport class Timeline extends BaseComponent<TimelinePassThrough> implements BlockableUI {\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    $pcTimeline: Timeline | undefined = inject(TIMELINE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;\n\n    onAfterViewChecked(): void {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n    /**\n     * An array of events to display.\n     * @group Props\n     */\n    @Input() value: any[] | undefined;\n    /**\n     * Style class of the component.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Position of the timeline bar relative to the content. Valid values are \"left\", \"right\" for vertical layout and \"top\", \"bottom\" for horizontal layout.\n     * @group Props\n     */\n    @Input() align: string = 'left';\n    /**\n     * Orientation of the timeline.\n     * @group Props\n     */\n    @Input() layout: 'vertical' | 'horizontal' = 'vertical';\n    /**\n     * Custom content template.\n     * @group Templates\n     */\n    @ContentChild('content', { descendants: false }) contentTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom opposite item template.\n     * @group Templates\n     */\n    @ContentChild('opposite', { descendants: false }) oppositeTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom marker template.\n     * @group Templates\n     */\n    @ContentChild('marker', { descendants: false }) markerTemplate: Nullable<TemplateRef<any>>;\n\n    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<any>>;\n\n    _contentTemplate: TemplateRef<any> | undefined;\n\n    _oppositeTemplate: TemplateRef<any> | undefined;\n\n    _markerTemplate: TemplateRef<any> | undefined;\n\n    _componentStyle = inject(TimelineStyle);\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    onAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this._contentTemplate = item.template;\n                    break;\n\n                case 'opposite':\n                    this._oppositeTemplate = item.template;\n                    break;\n\n                case 'marker':\n                    this._markerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [Timeline, SharedModule],\n    exports: [Timeline, SharedModule]\n})\nexport class TimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-timeline.mjs","sources":["../../src/timeline/style/timelinestyle.ts","../../src/timeline/timeline.ts","../../src/timeline/primeng-timeline.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { style } from '@primeuix/styles/timeline';\nimport { BaseStyle } from 'primeng/base';\n\nconst classes = {\n    root: ({ instance }) => ['p-timeline p-component', 'p-timeline-' + instance.align, 'p-timeline-' + instance.layout],\n    event: 'p-timeline-event',\n    eventOpposite: 'p-timeline-event-opposite',\n    eventSeparator: 'p-timeline-event-separator',\n    eventMarker: 'p-timeline-event-marker',\n    eventConnector: 'p-timeline-event-connector',\n    eventContent: 'p-timeline-event-content'\n};\n\n@Injectable()\nexport class TimelineStyle extends BaseStyle {\n    name = 'timeline';\n\n    style = style;\n\n    classes = classes;\n}\n\n/**\n *\n * Timeline visualizes a series of chained events.\n *\n * [Live Demo](https://primeng.org/timeline)\n *\n * @module timelinestyle\n *\n */\nexport enum TimelineClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-timeline',\n    /**\n     * Class name of the event element\n     */\n    event = 'p-timeline-event',\n    /**\n     * Class name of the event opposite element\n     */\n    eventOpposite = 'p-timeline-event-opposite',\n    /**\n     * Class name of the event separator element\n     */\n    eventSeparator = 'p-timeline-event-separator',\n    /**\n     * Class name of the event marker element\n     */\n    eventMarker = 'p-timeline-event-marker',\n    /**\n     * Class name of the event connector element\n     */\n    eventConnector = 'p-timeline-event-connector',\n    /**\n     * Class name of the event content element\n     */\n    eventContent = 'p-timeline-event-content'\n}\n\nexport interface TimelineStyle extends BaseStyle {}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, inject, InjectionToken, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, PrimeTemplate, SharedModule } from 'primeng/api';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { TimelinePassThrough } from 'primeng/types/timeline';\nimport { TimelineStyle } from './style/timelinestyle';\n\nconst TIMELINE_INSTANCE = new InjectionToken<Timeline>('TIMELINE_INSTANCE');\n\n/**\n * Timeline visualizes a series of chained events.\n * @group Components\n */\n@Component({\n    selector: 'p-timeline',\n    standalone: true,\n    imports: [CommonModule, SharedModule, Bind],\n    template: `\n        <div [pBind]=\"ptm('event')\" *ngFor=\"let event of value; let last = last\" [class]=\"cx('event')\" [attr.data-p]=\"dataP\">\n            <div [pBind]=\"ptm('eventOpposite')\" [class]=\"cx('eventOpposite')\" [attr.data-p]=\"dataP\">\n                <ng-container *ngTemplateOutlet=\"oppositeTemplate || _oppositeTemplate; context: { $implicit: event }\"></ng-container>\n            </div>\n            <div [pBind]=\"ptm('eventSeparator')\" [class]=\"cx('eventSeparator')\" [attr.data-p]=\"dataP\">\n                <ng-container *ngIf=\"markerTemplate || _markerTemplate; else marker\">\n                    <ng-container *ngTemplateOutlet=\"markerTemplate || _markerTemplate; context: { $implicit: event }\"></ng-container>\n                </ng-container>\n                <ng-template #marker>\n                    <div [pBind]=\"ptm('eventMarker')\" [class]=\"cx('eventMarker')\" [attr.data-p]=\"dataP\"></div>\n                </ng-template>\n                <div [pBind]=\"ptm('eventConnector')\" *ngIf=\"!last\" [class]=\"cx('eventConnector')\" [attr.data-p]=\"dataP\"></div>\n            </div>\n            <div [pBind]=\"ptm('eventContent')\" [class]=\"cx('eventContent')\" [attr.data-p]=\"dataP\">\n                <ng-container *ngTemplateOutlet=\"contentTemplate || _contentTemplate; context: { $implicit: event }\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [TimelineStyle, { provide: TIMELINE_INSTANCE, useExisting: Timeline }, { provide: PARENT_INSTANCE, useExisting: Timeline }],\n    host: {\n        '[class]': \"cn(cx('root'), styleClass)\",\n        '[attr.data-p]': 'dataP'\n    },\n    hostDirectives: [Bind]\n})\nexport class Timeline extends BaseComponent<TimelinePassThrough> implements BlockableUI {\n    bindDirectiveInstance = inject(Bind, { self: true });\n\n    $pcTimeline: Timeline | undefined = inject(TIMELINE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;\n\n    onAfterViewChecked(): void {\n        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));\n    }\n    /**\n     * An array of events to display.\n     * @group Props\n     */\n    @Input() value: any[] | undefined;\n    /**\n     * Style class of the component.\n     * @deprecated since v20.0.0, use `class` instead.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Position of the timeline bar relative to the content. Valid values are \"left\", \"right\" for vertical layout and \"top\", \"bottom\" for horizontal layout.\n     * @group Props\n     */\n    @Input() align: string = 'left';\n    /**\n     * Orientation of the timeline.\n     * @group Props\n     */\n    @Input() layout: 'vertical' | 'horizontal' = 'vertical';\n    /**\n     * Custom content template.\n     * @group Templates\n     */\n    @ContentChild('content', { descendants: false }) contentTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom opposite item template.\n     * @group Templates\n     */\n    @ContentChild('opposite', { descendants: false }) oppositeTemplate: Nullable<TemplateRef<any>>;\n\n    /**\n     * Custom marker template.\n     * @group Templates\n     */\n    @ContentChild('marker', { descendants: false }) markerTemplate: Nullable<TemplateRef<any>>;\n\n    @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<any>>;\n\n    _contentTemplate: TemplateRef<any> | undefined;\n\n    _oppositeTemplate: TemplateRef<any> | undefined;\n\n    _markerTemplate: TemplateRef<any> | undefined;\n\n    _componentStyle = inject(TimelineStyle);\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    onAfterContentInit() {\n        (this.templates as QueryList<PrimeTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'content':\n                    this._contentTemplate = item.template;\n                    break;\n\n                case 'opposite':\n                    this._oppositeTemplate = item.template;\n                    break;\n\n                case 'marker':\n                    this._markerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    get dataP() {\n        return this.cn({\n            [this.layout]: this.layout,\n            [this.align]: this.align\n        });\n    }\n}\n\n@NgModule({\n    imports: [Timeline, SharedModule],\n    exports: [Timeline, SharedModule]\n})\nexport class TimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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.0", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", 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.0", ngImport: i0, type: ToastStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -124,25 +125,50 @@ class ToastItem extends BaseComponent {
     hideTransformOptions;
     showTransitionOptions;
     hideTransitionOptions;
+    motionOptions = input(...(ngDevMode ? [undefined, { 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.0", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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.0", 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
@@ -499,6 +518,7 @@ class Toast extends BaseComponent {
     styleElement;
     id = uuid('pn_id_');
     templates;
+    clearAllTrigger = signal(null, ...(ngDevMode ? [{ debugName: "clearAllTrigger" }] : []));
     constructor() {
         super();
     }
@@ -517,15 +537,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 +602,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 +658,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.0", ngImport: i0, type: Toast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", 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.0", ngImport: i0, type: Toast, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toast',
@@ -670,26 +694,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 +744,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 +759,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.0", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", 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.0", ngImport: i0, type: ToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Toast, SharedModule],