import * as i0 from '@angular/core'; import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i3 from 'primeng/api'; import { PrimeTemplate, SharedModule } from 'primeng/api'; import { UniqueComponentId, ZIndexUtils } from 'primeng/utils'; import * as i2 from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple'; import { trigger, state, style, transition, animate, query, animateChild } from '@angular/animations'; class ToastItem { constructor(zone) { this.zone = zone; this.onClose = new EventEmitter(); } 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 || 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(); } ngOnDestroy() { this.clearTimeout(); } } ToastItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ToastItem, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); ToastItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: ToastItem, selector: "p-toastItem", inputs: { message: "message", index: "index", template: "template", showTransformOptions: "showTransformOptions", hideTransformOptions: "hideTransformOptions", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onClose: "onClose" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
`, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.Ripple, selector: "[pRipple]" }], animations: [ trigger('messageState', [ state('visible', style({ transform: 'translateY(0)', opacity: 1 })), transition('void => *', [ style({ transform: '{{showTransformParams}}', opacity: 0 }), animate('{{showTransitionParams}}') ]), transition('* => void', [ animate(('{{hideTransitionParams}}'), style({ height: 0, opacity: 0, transform: '{{hideTransformParams}}' })) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ToastItem, decorators: [{ type: Component, args: [{ selector: 'p-toastItem', template: `
`, animations: [ trigger('messageState', [ state('visible', style({ transform: 'translateY(0)', opacity: 1 })), transition('void => *', [ style({ transform: '{{showTransformParams}}', opacity: 0 }), animate('{{showTransitionParams}}') ]), transition('* => void', [ animate(('{{hideTransitionParams}}'), style({ height: 0, opacity: 0, transform: '{{hideTransformParams}}' })) ]) ]) ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'p-element' } }] }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { message: [{ type: Input }], index: [{ type: Input }], template: [{ type: Input }], showTransformOptions: [{ type: Input }], hideTransformOptions: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], onClose: [{ type: Output }], containerViewChild: [{ type: ViewChild, args: ['container'] }] } }); class Toast { constructor(messageService, cd, config) { this.messageService = messageService; this.cd = cd; this.config = config; this.autoZIndex = true; this.baseZIndex = 0; this.position = 'top-right'; this.preventOpenDuplicates = false; this.preventDuplicates = false; this.showTransformOptions = 'translateY(100%)'; this.hideTransformOptions = 'translateY(-100%)'; this.showTransitionOptions = '300ms ease-out'; this.hideTransitionOptions = '250ms ease-in'; this.onClose = new EventEmitter(); this.id = UniqueComponentId(); } ngOnInit() { this.messageSubscription = this.messageService.messageObserver.subscribe(messages => { if (messages) { if (messages instanceof Array) { 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(); }); } 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; } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'message': this.template = item.template; break; default: this.template = item.template; break; } }); } onMessageClose(event) { this.messages.splice(event.index, 1); this.onClose.emit({ message: event.message }); this.cd.detectChanges(); } onAnimationStart(event) { if (event.fromState === 'void') { this.containerViewChild.nativeElement.setAttribute(this.id, ''); if (this.autoZIndex) { ZIndexUtils.set('modal', this.containerViewChild.nativeElement, this.baseZIndex || this.config.zIndex.modal); } } } onAnimationEnd(event) { if (event.toState === 'void') { if (this.autoZIndex) { ZIndexUtils.clear(this.containerViewChild.nativeElement); } } } createStyle() { if (!this.styleElement) { this.styleElement = document.createElement('style'); this.styleElement.type = 'text/css'; document.head.appendChild(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.styleElement.innerHTML = innerHTML; } } destroyStyle() { if (this.styleElement) { document.head.removeChild(this.styleElement); this.styleElement = null; } } ngOnDestroy() { if (this.messageSubscription) { this.messageSubscription.unsubscribe(); } if (this.containerViewChild && this.autoZIndex) { ZIndexUtils.clear(this.containerViewChild.nativeElement); } if (this.clearSubscription) { this.clearSubscription.unsubscribe(); } this.destroyStyle(); } } Toast.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Toast, deps: [{ token: i3.MessageService }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component }); Toast.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Toast, selector: "p-toast", inputs: { key: "key", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", style: "style", styleClass: "styleClass", position: "position", preventOpenDuplicates: "preventOpenDuplicates", preventDuplicates: "preventDuplicates", showTransformOptions: "showTransformOptions", hideTransformOptions: "hideTransformOptions", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", breakpoints: "breakpoints" }, outputs: { onClose: "onClose" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
`, isInline: true, styles: [".p-toast{position:fixed;width:25rem}.p-toast-message{overflow:hidden}.p-toast-message-content{display:flex;align-items:flex-start}.p-toast-message-text{flex:1 1 auto}.p-toast-top-right{top:20px;right:20px}.p-toast-top-left{top:20px;left:20px}.p-toast-bottom-left{bottom:20px;left:20px}.p-toast-bottom-right{bottom:20px;right:20px}.p-toast-top-center{top:20px;left:50%;transform:translate(-50%)}.p-toast-bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.p-toast-center{left:50%;top:50%;min-width:20vw;transform:translate(-50%,-50%)}.p-toast-icon-close{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-toast-icon-close.p-link{cursor:pointer}\n"], components: [{ type: ToastItem, selector: "p-toastItem", inputs: ["message", "index", "template", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onClose"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [ trigger('toastAnimation', [ transition(':enter, :leave', [ query('@*', animateChild()) ]) ]) ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Toast, decorators: [{ type: Component, args: [{ selector: 'p-toast', template: `
`, animations: [ trigger('toastAnimation', [ transition(':enter, :leave', [ query('@*', animateChild()) ]) ]) ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-toast{position:fixed;width:25rem}.p-toast-message{overflow:hidden}.p-toast-message-content{display:flex;align-items:flex-start}.p-toast-message-text{flex:1 1 auto}.p-toast-top-right{top:20px;right:20px}.p-toast-top-left{top:20px;left:20px}.p-toast-bottom-left{bottom:20px;left:20px}.p-toast-bottom-right{bottom:20px;right:20px}.p-toast-top-center{top:20px;left:50%;transform:translate(-50%)}.p-toast-bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.p-toast-center{left:50%;top:50%;min-width:20vw;transform:translate(-50%,-50%)}.p-toast-icon-close{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-toast-icon-close.p-link{cursor:pointer}\n"] }] }], ctorParameters: function () { return [{ type: i3.MessageService }, { type: i0.ChangeDetectorRef }, { type: i3.PrimeNGConfig }]; }, propDecorators: { key: [{ type: Input }], autoZIndex: [{ type: Input }], baseZIndex: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], position: [{ type: Input }], preventOpenDuplicates: [{ type: Input }], preventDuplicates: [{ type: Input }], showTransformOptions: [{ type: Input }], hideTransformOptions: [{ type: Input }], showTransitionOptions: [{ type: Input }], hideTransitionOptions: [{ type: Input }], breakpoints: [{ type: Input }], onClose: [{ type: Output }], containerViewChild: [{ type: ViewChild, args: ['container'] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }] } }); class ToastModule { } ToastModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); ToastModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ToastModule, declarations: [Toast, ToastItem], imports: [CommonModule, RippleModule], exports: [Toast, SharedModule] }); ToastModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ToastModule, imports: [[CommonModule, RippleModule], SharedModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ToastModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule, RippleModule], exports: [Toast, SharedModule], declarations: [Toast, ToastItem] }] }] }); /** * Generated bundle index. Do not edit. */ export { Toast, ToastItem, ToastModule };