import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, NgZone, Input, Output, ViewChild, ChangeDetectorRef, ContentChildren, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DomHandler } from 'primeng/dom'; import { MessageService, PrimeTemplate, SharedModule } from 'primeng/api'; 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.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 },] } ]; ToastItem.ctorParameters = () => [ { type: NgZone } ]; ToastItem.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) { this.messageService = messageService; this.cd = cd; 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(); } 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(); }); } 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.autoZIndex) { this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex)); } } ngOnDestroy() { if (this.messageSubscription) { this.messageSubscription.unsubscribe(); } if (this.clearSubscription) { this.clearSubscription.unsubscribe(); } } } Toast.decorators = [ { type: Component, args: [{ selector: 'p-toast', template: `