primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-toast.mjs

@@ -1,265 +1,16 @@
-import { trigger, state, transition, style, animate, query, animateChild } from '@angular/animations';
+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, EventEmitter, inject, numberAttribute, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, booleanAttribute, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, booleanAttribute, ContentChildren, ContentChild, NgModule } from '@angular/core';
 import { uuid, isEmpty, setAttribute } from '@primeuix/utils';
 import { SharedModule, MessageService, PrimeTemplate } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon } from 'primeng/icons';
 import { ZIndexUtils } from 'primeng/utils';
+import { style } from '@primeuix/styles/toast';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
-.p-toast {
-    width: ${dt('toast.width')};
-    white-space: pre-line;
-    word-break: break-word;
-}
-
-.p-toast-message {
-    margin: 0 0 1rem 0;
-}
-
-.p-toast-message-icon {
-    flex-shrink: 0;
-    font-size: ${dt('toast.icon.size')};
-    width: ${dt('toast.icon.size')};
-    height: ${dt('toast.icon.size')};
-}
-
-.p-toast-message-content {
-    display: flex;
-    align-items: flex-start;
-    padding: ${dt('toast.content.padding')};
-    gap: ${dt('toast.content.gap')};
-}
-
-.p-toast-message-text {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    gap: ${dt('toast.text.gap')};
-}
-
-.p-toast-summary {
-    font-weight: ${dt('toast.summary.font.weight')};
-    font-size: ${dt('toast.summary.font.size')};
-}
-
-.p-toast-detail {
-    font-weight: ${dt('toast.detail.font.weight')};
-    font-size: ${dt('toast.detail.font.size')};
-}
-
-.p-toast-close-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-    background: transparent;
-    transition: background ${dt('toast.transition.duration')}, color ${dt('toast.transition.duration')}, outline-color ${dt('toast.transition.duration')}, box-shadow ${dt('toast.transition.duration')};
-    outline-color: transparent;
-    color: inherit;
-    width: ${dt('toast.close.button.width')};
-    height: ${dt('toast.close.button.height')};
-    border-radius: ${dt('toast.close.button.border.radius')};
-    margin: -25% 0 0 0;
-    right: -25%;
-    padding: 0;
-    border: none;
-    user-select: none;
-}
-
-.p-toast-close-button:dir(rtl) {
-    margin: -25% 0 0 auto;
-    left: -25%;
-    right: auto;
-}
-
-.p-toast-message-info,
-.p-toast-message-success,
-.p-toast-message-warn,
-.p-toast-message-error,
-.p-toast-message-secondary,
-.p-toast-message-contrast {
-    border-width: ${dt('toast.border.width')};
-    border-style: solid;
-    backdrop-filter: blur(${dt('toast.blur')});
-    border-radius: ${dt('toast.border.radius')};
-}
-
-.p-toast-close-icon {
-    font-size: ${dt('toast.close.icon.size')};
-    width: ${dt('toast.close.icon.size')};
-    height: ${dt('toast.close.icon.size')};
-}
-
-.p-toast-close-button:focus-visible {
-    outline-width: ${dt('focus.ring.width')};
-    outline-style: ${dt('focus.ring.style')};
-    outline-offset: ${dt('focus.ring.offset')};
-}
-
-.p-toast-message-info {
-    background: ${dt('toast.info.background')};
-    border-color: ${dt('toast.info.border.color')};
-    color: ${dt('toast.info.color')};
-    box-shadow: ${dt('toast.info.shadow')};
-}
-
-.p-toast-message-info .p-toast-detail {
-    color: ${dt('toast.info.detail.color')};
-}
-
-.p-toast-message-info .p-toast-close-button:focus-visible {
-    outline-color: ${dt('toast.info.close.button.focus.ring.color')};
-    box-shadow: ${dt('toast.info.close.button.focus.ring.shadow')};
-}
-
-.p-toast-message-info .p-toast-close-button:hover {
-    background: ${dt('toast.info.close.button.hover.background')};
-}
-
-.p-toast-message-success {
-    background: ${dt('toast.success.background')};
-    border-color: ${dt('toast.success.border.color')};
-    color: ${dt('toast.success.color')};
-    box-shadow: ${dt('toast.success.shadow')};
-}
-
-.p-toast-message-success .p-toast-detail {
-    color: ${dt('toast.success.detail.color')};
-}
-
-.p-toast-message-success .p-toast-close-button:focus-visible {
-    outline-color: ${dt('toast.success.close.button.focus.ring.color')};
-    box-shadow: ${dt('toast.success.close.button.focus.ring.shadow')};
-}
-
-.p-toast-message-success .p-toast-close-button:hover {
-    background: ${dt('toast.success.close.button.hover.background')};
-}
-
-.p-toast-message-warn {
-    background: ${dt('toast.warn.background')};
-    border-color: ${dt('toast.warn.border.color')};
-    color: ${dt('toast.warn.color')};
-    box-shadow: ${dt('toast.warn.shadow')};
-}
-
-.p-toast-message-warn .p-toast-detail {
-    color: ${dt('toast.warn.detail.color')};
-}
-
-.p-toast-message-warn .p-toast-close-button:focus-visible {
-    outline-color: ${dt('toast.warn.close.button.focus.ring.color')};
-    box-shadow: ${dt('toast.warn.close.button.focus.ring.shadow')};
-}
-
-.p-toast-message-warn .p-toast-close-button:hover {
-    background: ${dt('toast.warn.close.button.hover.background')};
-}
-
-.p-toast-message-error {
-    background: ${dt('toast.error.background')};
-    border-color: ${dt('toast.error.border.color')};
-    color: ${dt('toast.error.color')};
-    box-shadow: ${dt('toast.error.shadow')};
-}
-
-.p-toast-message-error .p-toast-detail {
-    color: ${dt('toast.error.detail.color')};
-}
-
-.p-toast-message-error .p-toast-close-button:focus-visible {
-    outline-color: ${dt('toast.error.close.button.focus.ring.color')};
-    box-shadow: ${dt('toast.error.close.button.focus.ring.shadow')};
-}
-
-.p-toast-message-error .p-toast-close-button:hover {
-    background: ${dt('toast.error.close.button.hover.background')};
-}
-
-.p-toast-message-secondary {
-    background: ${dt('toast.secondary.background')};
-    border-color: ${dt('toast.secondary.border.color')};
-    color: ${dt('toast.secondary.color')};
-    box-shadow: ${dt('toast.secondary.shadow')};
-}
-
-.p-toast-message-secondary .p-toast-detail {
-    color: ${dt('toast.secondary.detail.color')};
-}
-
-.p-toast-message-secondary .p-toast-close-button:focus-visible {
-    outline-color: ${dt('toast.secondary.close.button.focus.ring.color')};
-    box-shadow: ${dt('toast.secondary.close.button.focus.ring.shadow')};
-}
-
-.p-toast-message-secondary .p-toast-close-button:hover {
-    background: ${dt('toast.secondary.close.button.hover.background')};
-}
-
-.p-toast-message-contrast {
-    background: ${dt('toast.contrast.background')};
-    border-color: ${dt('toast.contrast.border.color')};
-    color: ${dt('toast.contrast.color')};
-    box-shadow: ${dt('toast.contrast.shadow')};
-}
-
-.p-toast-message-contrast .p-toast-detail {
-    color: ${dt('toast.contrast.detail.color')};
-}
-
-.p-toast-message-contrast .p-toast-close-button:focus-visible {
-    outline-color: ${dt('toast.contrast.close.button.focus.ring.color')};
-    box-shadow: ${dt('toast.contrast.close.button.focus.ring.shadow')};
-}
-
-.p-toast-message-contrast .p-toast-close-button:hover {
-    background: ${dt('toast.contrast.close.button.hover.background')};
-}
-
-.p-toast-top-center {
-    transform: translateX(-50%);
-}
-
-.p-toast-bottom-center {
-    transform: translateX(-50%);
-}
-
-.p-toast-center {
-    min-width: 20vw;
-    transform: translate(-50%, -50%);
-}
-
-.p-toast-message-enter-from {
-    opacity: 0;
-    transform: translateY(50%);
-}
-
-.p-toast-message-leave-from {
-    max-height: 1000px;
-}
-
-.p-toast .p-toast-message.p-toast-message-leave-to {
-    max-height: 0;
-    opacity: 0;
-    margin-bottom: 0;
-    overflow: hidden;
-}
-
-.p-toast-message-enter-active {
-    transition: transform 0.3s, opacity 0.3s;
-}
-
-.p-toast-message-leave-active {
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
-}
-`;
 // Position
 const inlineStyles = {
     root: ({ instance }) => {
@@ -274,7 +25,7 @@ const inlineStyles = {
     }
 };
 const classes = {
-    root: ({ instance }) => ({ 'p-toast p-component': true, [`p-toast-${instance._position}`]: !!instance._position }),
+    root: ({ instance }) => ['p-toast p-component', `p-toast-${instance._position}`],
     message: ({ instance }) => ({
         'p-toast-message': true,
         'p-toast-message-info': instance.message.severity === 'info' || instance.message.severity === undefined,
@@ -300,13 +51,13 @@ const classes = {
 };
 class ToastStyle extends BaseStyle {
     name = 'toast';
-    theme = theme;
+    theme = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -370,7 +121,6 @@ class ToastItem extends BaseComponent {
     showTransitionOptions;
     hideTransitionOptions;
     onClose = new EventEmitter();
-    containerViewChild;
     _componentStyle = inject(ToastStyle);
     timeout;
     constructor(zone) {
@@ -420,13 +170,12 @@ class ToastItem extends BaseComponent {
         this.clearTimeout();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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: `
         <div
             #container
             [attr.id]="message?.id"
-            [class]="message?.styleClass"
-            [ngClass]="cx('message')"
+            [class]="cn(cx('message'), message?.styleClass)"
             [@messageState]="{
                 value: 'visible',
                 params: {
@@ -447,10 +196,10 @@ class ToastItem extends BaseComponent {
             @if (headlessTemplate) {
                 <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
             } @else {
-                <div [ngClass]="cx('messageContent')" [class]="message?.contentStyleClass" [attr.data-pc-section]="'content'">
+                <div [class]="cn(cx('messageContent'), message?.contentStyleClass)" [attr.data-pc-section]="'content'">
                     <ng-container *ngIf="!template">
-                        <span *ngIf="message.icon" [ngClass]="cx('messageIcon')"></span>
-                        <span [ngClass]="cx('messageIcon')" *ngIf="!message.icon" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'">
+                        <span *ngIf="message.icon" [class]="cn(cx('messageIcon'), message?.icon)"></span>
+                        <span [class]="cx('messageIcon')" *ngIf="!message.icon" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'">
                             @switch (message.severity) {
                                 @case ('success') {
                                     <CheckIcon [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
@@ -479,11 +228,11 @@ class ToastItem extends BaseComponent {
                     <ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
                     @if (message?.closable !== false) {
                         <div>
-                            <button type="button" [attr.class]="cx('closeButton')" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [ariaLabel]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" autofocus>
+                            <button type="button" [attr.class]="cx('closeButton')" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" autofocus>
                                 @if (message.closeIcon) {
-                                    <span *ngIf="message.closeIcon" [ngClass]="cx('closeIcon')"></span>
+                                    <span *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
                                 } @else {
-                                    <TimesIcon [ngClass]="cx('closeIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'closeicon'" />
+                                    <TimesIcon [class]="cx('closeIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'closeicon'" />
                                 }
                             </button>
                         </div>
@@ -493,19 +242,19 @@ class ToastItem extends BaseComponent {
         </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: "CheckIcon" }, { kind: "component", type: ExclamationTriangleIcon, selector: "ExclamationTriangleIcon" }, { kind: "component", type: InfoCircleIcon, selector: "InfoCircleIcon" }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: TimesCircleIcon, selector: "TimesCircleIcon" }, { kind: "ngmodule", type: SharedModule }], animations: [
             trigger('messageState', [
-                state('visible', style({
+                state('visible', style$1({
                     transform: 'translateY(0)',
                     opacity: 1
                 })),
                 transition('void => *', [
-                    style({
+                    style$1({
                         transform: '{{showTransformParams}}',
                         opacity: 0
                     }),
                     animate('{{showTransitionParams}}')
                 ]),
                 transition('* => void', [
-                    animate('{{hideTransitionParams}}', style({
+                    animate('{{hideTransitionParams}}', style$1({
                         height: 0,
                         opacity: 0,
                         transform: '{{hideTransformParams}}'
@@ -514,7 +263,7 @@ class ToastItem extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toastItem',
@@ -524,8 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         <div
             #container
             [attr.id]="message?.id"
-            [class]="message?.styleClass"
-            [ngClass]="cx('message')"
+            [class]="cn(cx('message'), message?.styleClass)"
             [@messageState]="{
                 value: 'visible',
                 params: {
@@ -546,10 +294,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             @if (headlessTemplate) {
                 <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
             } @else {
-                <div [ngClass]="cx('messageContent')" [class]="message?.contentStyleClass" [attr.data-pc-section]="'content'">
+                <div [class]="cn(cx('messageContent'), message?.contentStyleClass)" [attr.data-pc-section]="'content'">
                     <ng-container *ngIf="!template">
-                        <span *ngIf="message.icon" [ngClass]="cx('messageIcon')"></span>
-                        <span [ngClass]="cx('messageIcon')" *ngIf="!message.icon" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'">
+                        <span *ngIf="message.icon" [class]="cn(cx('messageIcon'), message?.icon)"></span>
+                        <span [class]="cx('messageIcon')" *ngIf="!message.icon" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'">
                             @switch (message.severity) {
                                 @case ('success') {
                                     <CheckIcon [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
@@ -578,11 +326,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     <ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
                     @if (message?.closable !== false) {
                         <div>
-                            <button type="button" [attr.class]="cx('closeButton')" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [ariaLabel]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" autofocus>
+                            <button type="button" [attr.class]="cx('closeButton')" (click)="onCloseIconClick($event)" (keydown.enter)="onCloseIconClick($event)" [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" autofocus>
                                 @if (message.closeIcon) {
-                                    <span *ngIf="message.closeIcon" [ngClass]="cx('closeIcon')"></span>
+                                    <span *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
                                 } @else {
-                                    <TimesIcon [ngClass]="cx('closeIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'closeicon'" />
+                                    <TimesIcon [class]="cx('closeIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'closeicon'" />
                                 }
                             </button>
                         </div>
@@ -593,19 +341,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     `,
                     animations: [
                         trigger('messageState', [
-                            state('visible', style({
+                            state('visible', style$1({
                                 transform: 'translateY(0)',
                                 opacity: 1
                             })),
                             transition('void => *', [
-                                style({
+                                style$1({
                                     transform: '{{showTransformParams}}',
                                     opacity: 0
                                 }),
                                 animate('{{showTransitionParams}}')
                             ]),
                             transition('* => void', [
-                                animate('{{hideTransitionParams}}', style({
+                                animate('{{hideTransitionParams}}', style$1({
                                     height: 0,
                                     opacity: 0,
                                     transform: '{{hideTransformParams}}'
@@ -639,9 +387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], onClose: [{
                 type: Output
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }] } });
 /**
  * Toast is used to display messages in an overlay.
@@ -668,13 +413,9 @@ class Toast extends BaseComponent {
      * @group Props
      */
     life = 3000;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Inline class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -740,7 +481,6 @@ class Toast extends BaseComponent {
      * @group Templates
      */
     headlessTemplate;
-    containerViewChild;
     messageSubscription;
     clearSubscription;
     messages;
@@ -751,6 +491,9 @@ class Toast extends BaseComponent {
     styleElement;
     id = uuid('pn_id_');
     templates;
+    constructor() {
+        super();
+    }
     ngOnInit() {
         super.ngOnInit();
         this.messageSubscription = this.messageService.messageObserver.subscribe((messages) => {
@@ -833,16 +576,16 @@ class Toast extends BaseComponent {
     }
     onAnimationStart(event) {
         if (event.fromState === 'void') {
-            this.renderer.setAttribute(this.containerViewChild?.nativeElement, this.id, '');
-            if (this.autoZIndex && this.containerViewChild?.nativeElement.style.zIndex === '') {
-                ZIndexUtils.set('modal', this.containerViewChild?.nativeElement, this.baseZIndex || this.config.zIndex.modal);
+            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.containerViewChild?.nativeElement);
+                ZIndexUtils.clear(this.el?.nativeElement);
             }
         }
     }
@@ -879,8 +622,8 @@ class Toast extends BaseComponent {
         if (this.messageSubscription) {
             this.messageSubscription.unsubscribe();
         }
-        if (this.containerViewChild && this.autoZIndex) {
-            ZIndexUtils.clear(this.containerViewChild.nativeElement);
+        if (this.el && this.autoZIndex) {
+            ZIndexUtils.clear(this.el.nativeElement);
         }
         if (this.clearSubscription) {
             this.clearSubscription.unsubscribe();
@@ -888,60 +631,60 @@ class Toast extends BaseComponent {
         this.destroyStyle();
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Toast, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Toast, isStandalone: true, selector: "p-toast", inputs: { key: "key", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], life: ["life", "life", numberAttribute], style: "style", 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" }, providers: [ToastStyle], queries: [{ propertyName: "template", first: true, predicate: ["message"], descendants: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div #container [ngClass]="cx('root')" [ngStyle]="sx('root')" [style]="style" [class]="styleClass">
-            <p-toastItem
-                *ngFor="let msg of messages; let i = index"
-                [message]="msg"
-                [index]="i"
-                [life]="life"
-                (onClose)="onMessageClose($event)"
-                [template]="template || _template"
-                [headlessTemplate]="headlessTemplate || _headlessTemplate"
-                @toastAnimation
-                (@toastAnimation.start)="onAnimationStart($event)"
-                (@toastAnimation.done)="onAnimationEnd($event)"
-                [showTransformOptions]="showTransformOptions"
-                [hideTransformOptions]="hideTransformOptions"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-            ></p-toastItem>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Toast, decorators: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Toast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", 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], queries: [{ propertyName: "template", first: true, predicate: ["message"], descendants: true }, { propertyName: "headlessTemplate", first: true, predicate: ["headless"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: `
+        <p-toastItem
+            *ngFor="let msg of messages; let i = index"
+            [message]="msg"
+            [index]="i"
+            [life]="life"
+            (onClose)="onMessageClose($event)"
+            [template]="template || _template"
+            [headlessTemplate]="headlessTemplate || _headlessTemplate"
+            @toastAnimation
+            (@toastAnimation.start)="onAnimationStart($event)"
+            (@toastAnimation.done)="onAnimationEnd($event)"
+            [showTransformOptions]="showTransformOptions"
+            [hideTransformOptions]="hideTransformOptions"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+        ></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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Toast, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-toast',
                     standalone: true,
                     imports: [CommonModule, ToastItem, SharedModule],
                     template: `
-        <div #container [ngClass]="cx('root')" [ngStyle]="sx('root')" [style]="style" [class]="styleClass">
-            <p-toastItem
-                *ngFor="let msg of messages; let i = index"
-                [message]="msg"
-                [index]="i"
-                [life]="life"
-                (onClose)="onMessageClose($event)"
-                [template]="template || _template"
-                [headlessTemplate]="headlessTemplate || _headlessTemplate"
-                @toastAnimation
-                (@toastAnimation.start)="onAnimationStart($event)"
-                (@toastAnimation.done)="onAnimationEnd($event)"
-                [showTransformOptions]="showTransformOptions"
-                [hideTransformOptions]="hideTransformOptions"
-                [showTransitionOptions]="showTransitionOptions"
-                [hideTransitionOptions]="hideTransitionOptions"
-            ></p-toastItem>
-        </div>
+        <p-toastItem
+            *ngFor="let msg of messages; let i = index"
+            [message]="msg"
+            [index]="i"
+            [life]="life"
+            (onClose)="onMessageClose($event)"
+            [template]="template || _template"
+            [headlessTemplate]="headlessTemplate || _headlessTemplate"
+            @toastAnimation
+            (@toastAnimation.start)="onAnimationStart($event)"
+            (@toastAnimation.done)="onAnimationEnd($event)"
+            [showTransformOptions]="showTransformOptions"
+            [hideTransformOptions]="hideTransformOptions"
+            [showTransitionOptions]="showTransitionOptions"
+            [hideTransitionOptions]="hideTransitionOptions"
+        ></p-toastItem>
     `,
                     animations: [trigger('toastAnimation', [transition(':enter, :leave', [query('@*', animateChild())])])],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    providers: [ToastStyle]
+                    providers: [ToastStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')"
+                    }
                 }]
-        }], propDecorators: { key: [{
+        }], ctorParameters: () => [], propDecorators: { key: [{
                 type: Input
             }], autoZIndex: [{
                 type: Input,
@@ -952,8 +695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], life: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], position: [{
@@ -982,19 +723,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], headlessTemplate: [{
                 type: ContentChild,
                 args: ['headless']
-            }], containerViewChild: [{
-                type: ViewChild,
-                args: ['container']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
             }] } });
 class ToastModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: ToastModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ToastModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Toast, SharedModule],