1 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, ElementRef, ChangeDetectorRef, Input, ContentChildren, Output, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { trigger, transition, style, animate } from '@angular/animations';
|
4 | import { MessageService, PrimeTemplate } from 'primeng/api';
|
5 | import { RippleModule } from 'primeng/ripple';
|
6 |
|
7 | class Messages {
|
8 | constructor(messageService, el, cd) {
|
9 | this.messageService = messageService;
|
10 | this.el = el;
|
11 | this.cd = cd;
|
12 | this.closable = true;
|
13 | this.enableService = true;
|
14 | this.escape = true;
|
15 | this.showTransitionOptions = '300ms ease-out';
|
16 | this.hideTransitionOptions = '200ms cubic-bezier(0.86, 0, 0.07, 1)';
|
17 | this.valueChange = new EventEmitter();
|
18 | }
|
19 | ngAfterContentInit() {
|
20 | this.templates.forEach((item) => {
|
21 | switch (item.getType()) {
|
22 | case 'content':
|
23 | this.contentTemplate = item.template;
|
24 | break;
|
25 | default:
|
26 | this.contentTemplate = item.template;
|
27 | break;
|
28 | }
|
29 | });
|
30 | if (this.messageService && this.enableService && !this.contentTemplate) {
|
31 | this.messageSubscription = this.messageService.messageObserver.subscribe((messages) => {
|
32 | if (messages) {
|
33 | if (messages instanceof Array) {
|
34 | let filteredMessages = messages.filter(m => this.key === m.key);
|
35 | this.value = this.value ? [...this.value, ...filteredMessages] : [...filteredMessages];
|
36 | }
|
37 | else if (this.key === messages.key) {
|
38 | this.value = this.value ? [...this.value, ...[messages]] : [messages];
|
39 | }
|
40 | this.cd.markForCheck();
|
41 | }
|
42 | });
|
43 | this.clearSubscription = this.messageService.clearObserver.subscribe(key => {
|
44 | if (key) {
|
45 | if (this.key === key) {
|
46 | this.value = null;
|
47 | }
|
48 | }
|
49 | else {
|
50 | this.value = null;
|
51 | }
|
52 | this.cd.markForCheck();
|
53 | });
|
54 | }
|
55 | }
|
56 | hasMessages() {
|
57 | let parentEl = this.el.nativeElement.parentElement;
|
58 | if (parentEl && parentEl.offsetParent) {
|
59 | return this.contentTemplate != null || this.value && this.value.length > 0;
|
60 | }
|
61 | return false;
|
62 | }
|
63 | clear() {
|
64 | this.value = [];
|
65 | this.valueChange.emit(this.value);
|
66 | }
|
67 | removeMessage(i) {
|
68 | this.value = this.value.filter((msg, index) => index !== i);
|
69 | }
|
70 | get icon() {
|
71 | const severity = this.severity || (this.hasMessages() ? this.value[0].severity : null);
|
72 | if (this.hasMessages()) {
|
73 | switch (severity) {
|
74 | case 'success':
|
75 | return 'pi-check';
|
76 | break;
|
77 | case 'info':
|
78 | return 'pi-info-circle';
|
79 | break;
|
80 | case 'error':
|
81 | return 'pi-times';
|
82 | break;
|
83 | case 'warn':
|
84 | return 'pi-exclamation-triangle';
|
85 | break;
|
86 | default:
|
87 | return 'pi-info-circle';
|
88 | break;
|
89 | }
|
90 | }
|
91 | return null;
|
92 | }
|
93 | ngOnDestroy() {
|
94 | if (this.messageSubscription) {
|
95 | this.messageSubscription.unsubscribe();
|
96 | }
|
97 | if (this.clearSubscription) {
|
98 | this.clearSubscription.unsubscribe();
|
99 | }
|
100 | }
|
101 | }
|
102 | Messages.decorators = [
|
103 | { type: Component, args: [{
|
104 | selector: 'p-messages',
|
105 | template: `
|
106 | <div class="p-messages p-component" role="alert" [ngStyle]="style" [class]="styleClass">
|
107 | <ng-container *ngIf="!contentTemplate; else staticMessage">
|
108 | <div *ngFor="let msg of value; let i=index" [ngClass]="'p-message p-message-' + msg.severity" role="alert"
|
109 | [@messageAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}">
|
110 | <div class="p-message-wrapper">
|
111 | <span class="p-message-icon pi" [ngClass]="{'pi-info-circle': msg.severity === 'info',
|
112 | 'pi-check': msg.severity === 'success',
|
113 | 'pi-exclamation-triangle': msg.severity === 'warn',
|
114 | 'pi-times-circle': msg.severity === 'error'}"></span>
|
115 | <ng-container *ngIf="!escape; else escapeOut">
|
116 | <span *ngIf="msg.summary" class="p-message-summary" [innerHTML]="msg.summary"></span>
|
117 | <span *ngIf="msg.detail" class="p-message-detail" [innerHTML]="msg.detail"></span>
|
118 | </ng-container>
|
119 | <ng-template #escapeOut>
|
120 | <span *ngIf="msg.summary" class="p-message-summary">{{msg.summary}}</span>
|
121 | <span *ngIf="msg.detail" class="p-message-detail">{{msg.detail}}</span>
|
122 | </ng-template>
|
123 | <button class="p-message-close p-link" (click)="removeMessage(i)" *ngIf="closable" type="button" pRipple>
|
124 | <i class="p-message-close-icon pi pi-times"></i>
|
125 | </button>
|
126 | </div>
|
127 | </div>
|
128 | </ng-container>
|
129 | <ng-template #staticMessage>
|
130 | <div [ngClass]="'p-message p-message-' + severity" role="alert">
|
131 | <div class="p-message-wrapper">
|
132 | <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
|
133 | </div>
|
134 | </div>
|
135 | </ng-template>
|
136 | </div>
|
137 | `,
|
138 | animations: [
|
139 | trigger('messageAnimation', [
|
140 | transition(':enter', [
|
141 | style({ opacity: 0, transform: 'translateY(-25%)' }),
|
142 | animate('{{showTransitionParams}}')
|
143 | ]),
|
144 | transition(':leave', [
|
145 | animate('{{hideTransitionParams}}', style({ height: 0, marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, overflow: 'hidden', opacity: 0 }))
|
146 | ])
|
147 | ])
|
148 | ],
|
149 | changeDetection: ChangeDetectionStrategy.OnPush,
|
150 | encapsulation: ViewEncapsulation.None,
|
151 | styles: [".p-message-close,.p-message-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.p-message-close{-ms-flex-pack:center;justify-content:center}.p-message-close.p-link{margin-left:auto;overflow:hidden;position:relative}"]
|
152 | },] }
|
153 | ];
|
154 | Messages.ctorParameters = () => [
|
155 | { type: MessageService, decorators: [{ type: Optional }] },
|
156 | { type: ElementRef },
|
157 | { type: ChangeDetectorRef }
|
158 | ];
|
159 | Messages.propDecorators = {
|
160 | value: [{ type: Input }],
|
161 | closable: [{ type: Input }],
|
162 | style: [{ type: Input }],
|
163 | styleClass: [{ type: Input }],
|
164 | enableService: [{ type: Input }],
|
165 | key: [{ type: Input }],
|
166 | escape: [{ type: Input }],
|
167 | severity: [{ type: Input }],
|
168 | showTransitionOptions: [{ type: Input }],
|
169 | hideTransitionOptions: [{ type: Input }],
|
170 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }],
|
171 | valueChange: [{ type: Output }]
|
172 | };
|
173 | class MessagesModule {
|
174 | }
|
175 | MessagesModule.decorators = [
|
176 | { type: NgModule, args: [{
|
177 | imports: [CommonModule, RippleModule],
|
178 | exports: [Messages],
|
179 | declarations: [Messages]
|
180 | },] }
|
181 | ];
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 | export { Messages, MessagesModule };
|
188 |
|