primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
785 lines (780 loc) • 39.1 kB
JavaScript
export * from 'primeng/types/toast';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 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 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';
// 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';
style = style;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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 = {}));
const TOAST_INSTANCE = new InjectionToken('TOAST_INSTANCE');
class ToastItem extends BaseComponent {
zone;
message;
index;
life;
template;
headlessTemplate;
showTransformOptions;
hideTransformOptions;
showTransitionOptions;
hideTransitionOptions;
motionOptions = input(...(ngDevMode ? [undefined, { debugName: "motionOptions" }] : /* istanbul ignore next */ []));
clearAll = input(null, ...(ngDevMode ? [{ debugName: "clearAll" }] : /* istanbul ignore next */ []));
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" }] : /* istanbul ignore next */ []));
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.visible.set(false);
}, this.message?.life || this.life || 3000);
});
}
}
clearTimeout() {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
}
onMouseEnter() {
this.clearTimeout();
}
onMouseLeave() {
if (!this.isClosing) {
this.initTimeout();
}
}
onCloseIconClick = (event) => {
this.isClosing = true;
this.clearTimeout();
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: "21.2.8", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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)"
(mouseenter)="onMouseEnter()"
(mouseleave)="onMouseLeave()"
role="alert"
aria-live="assertive"
aria-atomic="true"
[attr.data-p]="dataP"
>
(headlessTemplate) {
<ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
} {
<div [pBind]="ptm('messageContent')" [class]="cn(cx('messageContent'), message?.contentStyleClass)">
<ng-container *ngIf="!template">
(message.icon) {
<span [pBind]="ptm('messageIcon')" [class]="cn(cx('messageIcon'), message?.icon)"></span>
} {
(message.severity) {
('success') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="check" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
('info') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
('error') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="times-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
('warn') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="exclamation-triangle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
{
<svg [pBind]="ptm('messageIcon')" data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
}
}
<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')" [attr.data-p]="dataP">{{ message.detail }}</div>
</div>
</ng-container>
<ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
(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
[attr.data-p]="dataP"
>
(message.closeIcon) {
<span [pBind]="ptm('closeIcon')" *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
} {
<svg [pBind]="ptm('closeIcon')" data-p-icon="times" [class]="cx('closeIcon')" [attr.aria-hidden]="true" />
}
</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 }, { 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: "21.2.8", ngImport: i0, type: ToastItem, decorators: [{
type: Component,
args: [{
selector: 'p-toastItem',
standalone: true,
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)"
(mouseenter)="onMouseEnter()"
(mouseleave)="onMouseLeave()"
role="alert"
aria-live="assertive"
aria-atomic="true"
[attr.data-p]="dataP"
>
(headlessTemplate) {
<ng-container *ngTemplateOutlet="headlessTemplate; context: { $implicit: message, closeFn: onCloseIconClick }"></ng-container>
} {
<div [pBind]="ptm('messageContent')" [class]="cn(cx('messageContent'), message?.contentStyleClass)">
<ng-container *ngIf="!template">
(message.icon) {
<span [pBind]="ptm('messageIcon')" [class]="cn(cx('messageIcon'), message?.icon)"></span>
} {
(message.severity) {
('success') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="check" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
('info') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
('error') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="times-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
('warn') {
<svg [pBind]="ptm('messageIcon')" data-p-icon="exclamation-triangle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
{
<svg [pBind]="ptm('messageIcon')" data-p-icon="info-circle" [class]="cx('messageIcon')" [attr.aria-hidden]="true" />
}
}
}
<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')" [attr.data-p]="dataP">{{ message.detail }}</div>
</div>
</ng-container>
<ng-container *ngTemplateOutlet="template; context: { $implicit: message }"></ng-container>
(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
[attr.data-p]="dataP"
>
(message.closeIcon) {
<span [pBind]="ptm('closeIcon')" *ngIf="message.closeIcon" [class]="cn(cx('closeIcon'), message?.closeIcon)"></span>
} {
<svg [pBind]="ptm('closeIcon')" data-p-icon="times" [class]="cx('closeIcon')" [attr.aria-hidden]="true" />
}
</button>
</div>
}
</div>
}
</div>
`,
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
}], 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
}] } });
/**
* Toast is used to display messages in an overlay.
* @group Components
*/
class Toast extends BaseComponent {
componentName = 'Toast';
$pcToast = inject(TOAST_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
/**
* 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
* @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" }] : /* istanbul ignore next */ []));
computedMotionOptions = computed(() => {
return {
...this.ptm('motion'),
...this.motionOptions()
};
}, ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
/**
* 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 message template.
* @param {ToastMessageTemplateContext} context - message context.
* @see {@link ToastMessageTemplateContext}
* @group Templates
*/
template;
/**
* Custom headless template.
* @param {ToastHeadlessTemplateContext} context - headless context.
* @see {@link ToastHeadlessTemplateContext}
* @group Templates
*/
headlessTemplate;
messageSubscription;
clearSubscription;
messages;
messagesArchieve;
_position = 'top-right';
messageService = inject(MessageService);
_componentStyle = inject(ToastStyle);
styleElement;
id = uuid('pn_id_');
templates;
clearAllTrigger = signal(null, ...(ngDevMode ? [{ debugName: "clearAllTrigger" }] : /* istanbul ignore next */ []));
constructor() {
super();
}
onInit() {
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.clearAll();
}
}
else {
this.clearAll();
}
this.cd.markForCheck();
});
}
clearAll() {
// trigger signal to clear all messages
this.clearAllTrigger.set({});
}
_template;
_headlessTemplate;
onAfterContentInit() {
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;
}
});
}
onAfterViewInit() {
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.onAnimationEnd();
this.cd.detectChanges();
}
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() {
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 += `
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;
}
}
onDestroy() {
if (this.messageSubscription) {
this.messageSubscription.unsubscribe();
}
if (this.el && this.autoZIndex) {
ZIndexUtils.clear(this.el.nativeElement);
}
if (this.clearSubscription) {
this.clearSubscription.unsubscribe();
}
this.destroyStyle();
}
get dataP() {
return this.cn({
[this.position]: this.position
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Toast, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", 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"
[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", "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: "21.2.8", 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"
[clearAll]="clearAllTrigger()"
(onClose)="onMessageClose($event)"
(onAnimationEnd)="onAnimationEnd()"
(onAnimationStart)="onAnimationStart()"
[template]="template || _template"
[headlessTemplate]="headlessTemplate || _headlessTemplate"
[pt]="pt"
[unstyled]="unstyled()"
[motionOptions]="computedMotionOptions()"
></p-toastItem>
`,
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')",
'[attr.data-p]': 'dataP'
},
hostDirectives: [Bind]
}]
}], 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
}], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], 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: "21.2.8", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule], exports: [Toast, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ToastModule, imports: [Toast, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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