primeng 0.0.0-watch

package/fesm2022/primeng-toast.mjs

@@ -0,0 +1,751 @@
+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, 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';
+
+// Position
+const inlineStyles = {
+    root: ({ instance }) => {
+        const { _position } = instance;
+        return {
+            position: 'fixed',
+            top: _position === 'top-right' || _position === 'top-left' || _position === 'top-center' ? '20px' : _position === 'center' ? '50%' : null,
+            right: (_position === 'top-right' || _position === 'bottom-right') && '20px',
+            bottom: (_position === 'bottom-left' || _position === 'bottom-right' || _position === 'bottom-center') && '20px',
+            left: _position === 'top-left' || _position === 'bottom-left' ? '20px' : _position === 'center' || _position === 'top-center' || _position === 'bottom-center' ? '50%' : null
+        };
+    }
+};
+const classes = {
+    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,
+        'p-toast-message-warn': instance.message.severity === 'warn',
+        'p-toast-message-error': instance.message.severity === 'error',
+        'p-toast-message-success': instance.message.severity === 'success',
+        'p-toast-message-secondary': instance.message.severity === 'secondary',
+        'p-toast-message-contrast': instance.message.severity === 'contrast'
+    }),
+    messageContent: 'p-toast-message-content',
+    messageIcon: ({ instance }) => ({
+        'p-toast-message-icon': true,
+        [`pi ${instance.message.icon}`]: !!instance.message.icon
+    }),
+    messageText: 'p-toast-message-text',
+    summary: 'p-toast-summary',
+    detail: 'p-toast-detail',
+    closeButton: 'p-toast-close-button',
+    closeIcon: ({ instance }) => ({
+        'p-toast-close-icon': true,
+        [`pi ${instance.message.closeIcon}`]: !!instance.message.closeIcon
+    })
+};
+class ToastStyle extends BaseStyle {
+    name = 'toast';
+    theme = style;
+    classes = classes;
+    inlineStyles = inlineStyles;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Toast is used to display messages in an overlay.
+ *
+ * [Live Demo](https://www.primeng.org/toast/)
+ *
+ * @module toaststyle
+ *
+ */
+var ToastClasses;
+(function (ToastClasses) {
+    /**
+     * Class name of the root element
+     */
+    ToastClasses["root"] = "p-toast";
+    /**
+     * Class name of the message element
+     */
+    ToastClasses["message"] = "p-toast-message";
+    /**
+     * Class name of the message content element
+     */
+    ToastClasses["messageContent"] = "p-toast-message-content";
+    /**
+     * Class name of the message icon element
+     */
+    ToastClasses["messageIcon"] = "p-toast-message-icon";
+    /**
+     * Class name of the message text element
+     */
+    ToastClasses["messageText"] = "p-toast-message-text";
+    /**
+     * Class name of the summary element
+     */
+    ToastClasses["summary"] = "p-toast-summary";
+    /**
+     * Class name of the detail element
+     */
+    ToastClasses["detail"] = "p-toast-detail";
+    /**
+     * Class name of the close button element
+     */
+    ToastClasses["closeButton"] = "p-toast-close-button";
+    /**
+     * Class name of the close icon element
+     */
+    ToastClasses["closeIcon"] = "p-toast-close-icon";
+})(ToastClasses || (ToastClasses = {}));
+
+class ToastItem extends BaseComponent {
+    zone;
+    message;
+    index;
+    life;
+    template;
+    headlessTemplate;
+    showTransformOptions;
+    hideTransformOptions;
+    showTransitionOptions;
+    hideTransitionOptions;
+    onClose = new EventEmitter();
+    _componentStyle = inject(ToastStyle);
+    timeout;
+    constructor(zone) {
+        super();
+        this.zone = zone;
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.initTimeout();
+    }
+    initTimeout() {
+        if (!this.message?.sticky) {
+            this.zone.runOutsideAngular(() => {
+                this.timeout = setTimeout(() => {
+                    this.onClose.emit({
+                        index: this.index,
+                        message: this.message
+                    });
+                }, this.message?.life || this.life || 3000);
+            });
+        }
+    }
+    clearTimeout() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+    }
+    onMouseEnter() {
+        this.clearTimeout();
+    }
+    onMouseLeave() {
+        this.initTimeout();
+    }
+    onCloseIconClick = (event) => {
+        this.clearTimeout();
+        this.onClose.emit({
+            index: this.index,
+            message: this.message
+        });
+        event.preventDefault();
+    };
+    get closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
+    ngOnDestroy() {
+        this.clearTimeout();
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.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: `
+        <div
+            #container
+            [attr.id]="message?.id"
+            [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-pc-name]="'toast'"
+            [attr.data-pc-section]="'root'"
+        >
+            @if (headlessTemplate) {
+                <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
+            } @else {
+                <div [class]="cn(cx('messageContent'), message?.contentStyleClass)" [attr.data-pc-section]="'content'">
+                    <ng-container *ngIf="!template">
+                        @if (message.icon) {
+                            <span [class]="cn(cx('messageIcon'), message?.icon)"></span>
+                        } @else {
+                            @switch (message.severity) {
+                                @case ('success') {
+                                    <svg data-p-icon="check" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @case ('info') {
+                                    <svg data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @case ('error') {
+                                    <svg data-p-icon="times-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @case ('warn') {
+                                    <svg data-p-icon="exclamation-triangle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @default {
+                                    <svg data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                            }
+                        }
+                        <div [ngClass]="cx('messageText')" [attr.data-pc-section]="'text'">
+                            <div [ngClass]="cx('summary')" [attr.data-pc-section]="'summary'">
+                                {{ message.summary }}
+                            </div>
+                            <div [ngClass]="cx('detail')" [attr.data-pc-section]="'detail'">{{ message.detail }}</div>
+                        </div>
+                    </ng-container>
+                    <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)" [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" autofocus>
+                                @if (message.closeIcon) {
+                                    <span *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
+                                } @else {
+                                    <svg data-p-icon="times" [class]="cx('closeIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'closeicon'" />
+                                }
+                            </button>
+                        </div>
+                    }
+                </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 }], 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-toastItem',
+                    standalone: true,
+                    imports: [CommonModule, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, SharedModule],
+                    template: `
+        <div
+            #container
+            [attr.id]="message?.id"
+            [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-pc-name]="'toast'"
+            [attr.data-pc-section]="'root'"
+        >
+            @if (headlessTemplate) {
+                <ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
+            } @else {
+                <div [class]="cn(cx('messageContent'), message?.contentStyleClass)" [attr.data-pc-section]="'content'">
+                    <ng-container *ngIf="!template">
+                        @if (message.icon) {
+                            <span [class]="cn(cx('messageIcon'), message?.icon)"></span>
+                        } @else {
+                            @switch (message.severity) {
+                                @case ('success') {
+                                    <svg data-p-icon="check" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @case ('info') {
+                                    <svg data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @case ('error') {
+                                    <svg data-p-icon="times-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @case ('warn') {
+                                    <svg data-p-icon="exclamation-triangle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                                @default {
+                                    <svg data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'icon'" />
+                                }
+                            }
+                        }
+                        <div [ngClass]="cx('messageText')" [attr.data-pc-section]="'text'">
+                            <div [ngClass]="cx('summary')" [attr.data-pc-section]="'summary'">
+                                {{ message.summary }}
+                            </div>
+                            <div [ngClass]="cx('detail')" [attr.data-pc-section]="'detail'">{{ message.detail }}</div>
+                        </div>
+                    </ng-container>
+                    <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)" [attr.aria-label]="closeAriaLabel" [attr.data-pc-section]="'closebutton'" autofocus>
+                                @if (message.closeIcon) {
+                                    <span *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
+                                } @else {
+                                    <svg data-p-icon="times" [class]="cx('closeIcon')" [attr.aria-hidden]="true" [attr.data-pc-section]="'closeicon'" />
+                                }
+                            </button>
+                        </div>
+                    }
+                </div>
+            }
+        </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]
+                }]
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { message: [{
+                type: Input
+            }], index: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], life: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], template: [{
+                type: Input
+            }], headlessTemplate: [{
+                type: Input
+            }], showTransformOptions: [{
+                type: Input
+            }], hideTransformOptions: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }] } });
+/**
+ * Toast is used to display messages in an overlay.
+ * @group Components
+ */
+class Toast extends BaseComponent {
+    /**
+     * Key of the message in case message is targeted to a specific toast component.
+     * @group Props
+     */
+    key;
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
+    autoZIndex = true;
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
+    baseZIndex = 0;
+    /**
+     * The default time to display messages for in milliseconds.
+     * @group Props
+     */
+    life = 3000;
+    /**
+     * Inline class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Position of the toast in viewport.
+     * @group Props
+     */
+    get position() {
+        return this._position;
+    }
+    set position(value) {
+        this._position = value;
+        this.cd.markForCheck();
+    }
+    /**
+     * It does not add the new message if there is already a toast displayed with the same content
+     * @group Props
+     */
+    preventOpenDuplicates = false;
+    /**
+     * Displays only once a message with the same content.
+     * @group Props
+     */
+    preventDuplicates = false;
+    /**
+     * Transform options of the show animation.
+     * @group Props
+     */
+    showTransformOptions = 'translateY(100%)';
+    /**
+     * Transform options of the hide animation.
+     * @group Props
+     */
+    hideTransformOptions = 'translateY(-100%)';
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     */
+    showTransitionOptions = '300ms ease-out';
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     */
+    hideTransitionOptions = '250ms ease-in';
+    /**
+     * Object literal to define styles per screen size.
+     * @group Props
+     */
+    breakpoints;
+    /**
+     * Callback to invoke when a message is closed.
+     * @param {ToastCloseEvent} event - custom close event.
+     * @group Emits
+     */
+    onClose = new EventEmitter();
+    /**
+     * Custom template of message.
+     * @group Templates
+     */
+    template;
+    /**
+     * Custom headless template.
+     * @group Templates
+     */
+    headlessTemplate;
+    messageSubscription;
+    clearSubscription;
+    messages;
+    messagesArchieve;
+    _position = 'top-right';
+    messageService = inject(MessageService);
+    _componentStyle = inject(ToastStyle);
+    styleElement;
+    id = uuid('pn_id_');
+    templates;
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.messageSubscription = this.messageService.messageObserver.subscribe((messages) => {
+            if (messages) {
+                if (Array.isArray(messages)) {
+                    const filteredMessages = messages.filter((m) => this.canAdd(m));
+                    this.add(filteredMessages);
+                }
+                else if (this.canAdd(messages)) {
+                    this.add([messages]);
+                }
+            }
+        });
+        this.clearSubscription = this.messageService.clearObserver.subscribe((key) => {
+            if (key) {
+                if (this.key === key) {
+                    this.messages = null;
+                }
+            }
+            else {
+                this.messages = null;
+            }
+            this.cd.markForCheck();
+        });
+    }
+    _template;
+    _headlessTemplate;
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'message':
+                    this._template = item.template;
+                    break;
+                case 'headless':
+                    this._headlessTemplate = item.template;
+                    break;
+                default:
+                    this._template = item.template;
+                    break;
+            }
+        });
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.breakpoints) {
+            this.createStyle();
+        }
+    }
+    add(messages) {
+        this.messages = this.messages ? [...this.messages, ...messages] : [...messages];
+        if (this.preventDuplicates) {
+            this.messagesArchieve = this.messagesArchieve ? [...this.messagesArchieve, ...messages] : [...messages];
+        }
+        this.cd.markForCheck();
+    }
+    canAdd(message) {
+        let allow = this.key === message.key;
+        if (allow && this.preventOpenDuplicates) {
+            allow = !this.containsMessage(this.messages, message);
+        }
+        if (allow && this.preventDuplicates) {
+            allow = !this.containsMessage(this.messagesArchieve, message);
+        }
+        return allow;
+    }
+    containsMessage(collection, message) {
+        if (!collection) {
+            return false;
+        }
+        return (collection.find((m) => {
+            return m.summary === message.summary && m.detail == message.detail && m.severity === message.severity;
+        }) != null);
+    }
+    onMessageClose(event) {
+        this.messages?.splice(event.index, 1);
+        this.onClose.emit({
+            message: event.message
+        });
+        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);
+            }
+        }
+    }
+    onAnimationEnd(event) {
+        if (event.toState === 'void') {
+            if (this.autoZIndex && isEmpty(this.messages)) {
+                ZIndexUtils.clear(this.el?.nativeElement);
+            }
+        }
+    }
+    createStyle() {
+        if (!this.styleElement) {
+            this.styleElement = this.renderer.createElement('style');
+            this.styleElement.type = 'text/css';
+            setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+            this.renderer.appendChild(this.document.head, this.styleElement);
+            let innerHTML = '';
+            for (let breakpoint in this.breakpoints) {
+                let breakpointStyle = '';
+                for (let styleProp in this.breakpoints[breakpoint]) {
+                    breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + ' !important;';
+                }
+                innerHTML += `
+                    @media screen and (max-width: ${breakpoint}) {
+                        .p-toast[${this.id}] {
+                           ${breakpointStyle}
+                        }
+                    }
+                `;
+            }
+            this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML);
+            setAttribute(this.styleElement, 'nonce', this.config?.csp()?.nonce);
+        }
+    }
+    destroyStyle() {
+        if (this.styleElement) {
+            this.renderer.removeChild(this.document.head, this.styleElement);
+            this.styleElement = null;
+        }
+    }
+    ngOnDestroy() {
+        if (this.messageSubscription) {
+            this.messageSubscription.unsubscribe();
+        }
+        if (this.el && this.autoZIndex) {
+            ZIndexUtils.clear(this.el.nativeElement);
+        }
+        if (this.clearSubscription) {
+            this.clearSubscription.unsubscribe();
+        }
+        this.destroyStyle();
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: Toast, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.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], 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.2.4", ngImport: i0, type: Toast, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-toast',
+                    standalone: true,
+                    imports: [CommonModule, ToastItem, SharedModule],
+                    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>
+    `,
+                    animations: [trigger('toastAnimation', [transition(':enter, :leave', [query('@*', animateChild())])])],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [ToastStyle],
+                    host: {
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[style]': "sx('root')"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { key: [{
+                type: Input
+            }], autoZIndex: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], baseZIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], life: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], styleClass: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], preventOpenDuplicates: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], preventDuplicates: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showTransformOptions: [{
+                type: Input
+            }], hideTransformOptions: [{
+                type: Input
+            }], showTransitionOptions: [{
+                type: Input
+            }], hideTransitionOptions: [{
+                type: Input
+            }], breakpoints: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], template: [{
+                type: ContentChild,
+                args: ['message']
+            }], headlessTemplate: [{
+                type: ContentChild,
+                args: ['headless']
+            }], templates: [{
+                type: ContentChildren,
+                args: [PrimeTemplate]
+            }] } });
+class ToastModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToastModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Toast, SharedModule],
+                    exports: [Toast, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Toast, ToastClasses, ToastItem, ToastModule, ToastStyle };
+//# sourceMappingURL=primeng-toast.mjs.map