UNPKG

16.9 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/dom'), require('primeng/api'), require('@angular/animations')) :
3 typeof define === 'function' && define.amd ? define('primeng/toast', ['exports', '@angular/core', '@angular/common', 'primeng/dom', 'primeng/api', '@angular/animations'], factory) :
4 (global = global || self, factory((global.primeng = global.primeng || {}, global.primeng.toast = {}), global.ng.core, global.ng.common, global.primeng.dom, global.primeng.api, global.ng.animations));
5}(this, (function (exports, core, common, dom, api, animations) { 'use strict';
6
7 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
11 return c > 3 && r && Object.defineProperty(target, key, r), r;
12 };
13 var __read = (this && this.__read) || function (o, n) {
14 var m = typeof Symbol === "function" && o[Symbol.iterator];
15 if (!m) return o;
16 var i = m.call(o), r, ar = [], e;
17 try {
18 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
19 }
20 catch (error) { e = { error: error }; }
21 finally {
22 try {
23 if (r && !r.done && (m = i["return"])) m.call(i);
24 }
25 finally { if (e) throw e.error; }
26 }
27 return ar;
28 };
29 var __spread = (this && this.__spread) || function () {
30 for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
31 return ar;
32 };
33 var ToastItem = /** @class */ (function () {
34 function ToastItem(zone) {
35 this.zone = zone;
36 this.onClose = new core.EventEmitter();
37 }
38 ToastItem.prototype.ngAfterViewInit = function () {
39 this.initTimeout();
40 };
41 ToastItem.prototype.initTimeout = function () {
42 var _this = this;
43 if (!this.message.sticky) {
44 this.zone.runOutsideAngular(function () {
45 _this.timeout = setTimeout(function () {
46 _this.onClose.emit({
47 index: _this.index,
48 message: _this.message
49 });
50 }, _this.message.life || 3000);
51 });
52 }
53 };
54 ToastItem.prototype.clearTimeout = function () {
55 if (this.timeout) {
56 clearTimeout(this.timeout);
57 this.timeout = null;
58 }
59 };
60 ToastItem.prototype.onMouseEnter = function () {
61 this.clearTimeout();
62 };
63 ToastItem.prototype.onMouseLeave = function () {
64 this.initTimeout();
65 };
66 ToastItem.prototype.onCloseIconClick = function (event) {
67 this.clearTimeout();
68 this.onClose.emit({
69 index: this.index,
70 message: this.message
71 });
72 event.preventDefault();
73 };
74 ToastItem.prototype.ngOnDestroy = function () {
75 this.clearTimeout();
76 };
77 ToastItem.ctorParameters = function () { return [
78 { type: core.NgZone }
79 ]; };
80 __decorate([
81 core.Input()
82 ], ToastItem.prototype, "message", void 0);
83 __decorate([
84 core.Input()
85 ], ToastItem.prototype, "index", void 0);
86 __decorate([
87 core.Input()
88 ], ToastItem.prototype, "template", void 0);
89 __decorate([
90 core.Input()
91 ], ToastItem.prototype, "showTransformOptions", void 0);
92 __decorate([
93 core.Input()
94 ], ToastItem.prototype, "hideTransformOptions", void 0);
95 __decorate([
96 core.Input()
97 ], ToastItem.prototype, "showTransitionOptions", void 0);
98 __decorate([
99 core.Input()
100 ], ToastItem.prototype, "hideTransitionOptions", void 0);
101 __decorate([
102 core.Output()
103 ], ToastItem.prototype, "onClose", void 0);
104 __decorate([
105 core.ViewChild('container')
106 ], ToastItem.prototype, "containerViewChild", void 0);
107 ToastItem = __decorate([
108 core.Component({
109 selector: 'p-toastItem',
110 template: "\n <div #container [attr.id]=\"message.id\" class=\"ui-toast-message ui-shadow\" [@messageState]=\"{value: 'visible', params: {showTransformParams: showTransformOptions, hideTransformParams: hideTransformOptions, showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n [ngClass]=\"{'ui-toast-message-info': message.severity == 'info','ui-toast-message-warn': message.severity == 'warn',\n 'ui-toast-message-error': message.severity == 'error','ui-toast-message-success': message.severity == 'success'}\"\n (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\">\n <div class=\"ui-toast-message-content\">\n <a tabindex=\"0\" class=\"ui-toast-close-icon pi pi-times\" (click)=\"onCloseIconClick($event)\" (keydown.enter)=\"onCloseIconClick($event)\" *ngIf=\"message.closable !== false\"></a>\n <ng-container *ngIf=\"!template\">\n <span class=\"ui-toast-icon pi\"\n [ngClass]=\"{'pi-info-circle': message.severity == 'info', 'pi-exclamation-triangle': message.severity == 'warn',\n 'pi-times-circle': message.severity == 'error', 'pi-check' :message.severity == 'success'}\"></span>\n <div class=\"ui-toast-message-text-content\">\n <div class=\"ui-toast-summary\">{{message.summary}}</div>\n <div class=\"ui-toast-detail\">{{message.detail}}</div>\n </div>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"template; context: {$implicit: message}\"></ng-container>\n </div>\n </div>\n ",
111 animations: [
112 animations.trigger('messageState', [
113 animations.state('visible', animations.style({
114 transform: 'translateY(0)',
115 opacity: 1
116 })),
117 animations.transition('void => *', [
118 animations.style({ transform: '{{showTransformParams}}', opacity: 0 }),
119 animations.animate('{{showTransitionParams}}')
120 ]),
121 animations.transition('* => void', [
122 animations.animate(('{{hideTransitionParams}}'), animations.style({
123 height: 0,
124 opacity: 0,
125 transform: '{{hideTransformParams}}'
126 }))
127 ])
128 ])
129 ]
130 })
131 ], ToastItem);
132 return ToastItem;
133 }());
134 var Toast = /** @class */ (function () {
135 function Toast(messageService, cd) {
136 this.messageService = messageService;
137 this.cd = cd;
138 this.autoZIndex = true;
139 this.baseZIndex = 0;
140 this.position = 'top-right';
141 this.preventOpenDuplicates = false;
142 this.preventDuplicates = false;
143 this.showTransformOptions = 'translateY(100%)';
144 this.hideTransformOptions = 'translateY(-100%)';
145 this.showTransitionOptions = '300ms ease-out';
146 this.hideTransitionOptions = '250ms ease-in';
147 this.onClose = new core.EventEmitter();
148 }
149 Toast.prototype.ngOnInit = function () {
150 var _this = this;
151 this.messageSubscription = this.messageService.messageObserver.subscribe(function (messages) {
152 if (messages) {
153 if (messages instanceof Array) {
154 var filteredMessages = messages.filter(function (m) { return _this.canAdd(m); });
155 _this.add(filteredMessages);
156 }
157 else if (_this.canAdd(messages)) {
158 _this.add([messages]);
159 }
160 if (_this.modal && _this.messages && _this.messages.length) {
161 _this.enableModality();
162 }
163 }
164 });
165 this.clearSubscription = this.messageService.clearObserver.subscribe(function (key) {
166 if (key) {
167 if (_this.key === key) {
168 _this.messages = null;
169 }
170 }
171 else {
172 _this.messages = null;
173 }
174 if (_this.modal) {
175 _this.disableModality();
176 }
177 });
178 };
179 Toast.prototype.add = function (messages) {
180 this.messages = this.messages ? __spread(this.messages, messages) : __spread(messages);
181 if (this.preventDuplicates) {
182 this.messagesArchieve = this.messagesArchieve ? __spread(this.messagesArchieve, messages) : __spread(messages);
183 }
184 };
185 Toast.prototype.canAdd = function (message) {
186 var allow = this.key === message.key;
187 if (allow && this.preventOpenDuplicates) {
188 allow = !this.containsMessage(this.messages, message);
189 }
190 if (allow && this.preventDuplicates) {
191 allow = !this.containsMessage(this.messagesArchieve, message);
192 }
193 return allow;
194 };
195 Toast.prototype.containsMessage = function (collection, message) {
196 if (!collection) {
197 return false;
198 }
199 return collection.find(function (m) {
200 return ((m.summary === message.summary) && (m.detail == message.detail) && (m.severity === message.severity));
201 }) != null;
202 };
203 Toast.prototype.ngAfterContentInit = function () {
204 var _this = this;
205 this.templates.forEach(function (item) {
206 switch (item.getType()) {
207 case 'message':
208 _this.template = item.template;
209 break;
210 default:
211 _this.template = item.template;
212 break;
213 }
214 });
215 };
216 Toast.prototype.onMessageClose = function (event) {
217 this.messages.splice(event.index, 1);
218 if (this.messages.length === 0) {
219 this.disableModality();
220 }
221 this.onClose.emit({
222 message: event.message
223 });
224 this.cd.detectChanges();
225 };
226 Toast.prototype.enableModality = function () {
227 if (!this.mask) {
228 this.mask = document.createElement('div');
229 this.mask.style.zIndex = String(parseInt(this.containerViewChild.nativeElement.style.zIndex) - 1);
230 this.mask.style.display = 'block';
231 var maskStyleClass = 'ui-widget-overlay ui-dialog-mask';
232 dom.DomHandler.addMultipleClasses(this.mask, maskStyleClass);
233 document.body.appendChild(this.mask);
234 }
235 };
236 Toast.prototype.disableModality = function () {
237 if (this.mask) {
238 document.body.removeChild(this.mask);
239 this.mask = null;
240 }
241 };
242 Toast.prototype.onAnimationStart = function (event) {
243 if (event.fromState === 'void' && this.autoZIndex) {
244 this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++dom.DomHandler.zindex));
245 }
246 };
247 Toast.prototype.ngOnDestroy = function () {
248 if (this.messageSubscription) {
249 this.messageSubscription.unsubscribe();
250 }
251 if (this.clearSubscription) {
252 this.clearSubscription.unsubscribe();
253 }
254 this.disableModality();
255 };
256 Toast.ctorParameters = function () { return [
257 { type: api.MessageService },
258 { type: core.ChangeDetectorRef }
259 ]; };
260 __decorate([
261 core.Input()
262 ], Toast.prototype, "key", void 0);
263 __decorate([
264 core.Input()
265 ], Toast.prototype, "autoZIndex", void 0);
266 __decorate([
267 core.Input()
268 ], Toast.prototype, "baseZIndex", void 0);
269 __decorate([
270 core.Input()
271 ], Toast.prototype, "style", void 0);
272 __decorate([
273 core.Input()
274 ], Toast.prototype, "styleClass", void 0);
275 __decorate([
276 core.Input()
277 ], Toast.prototype, "position", void 0);
278 __decorate([
279 core.Input()
280 ], Toast.prototype, "modal", void 0);
281 __decorate([
282 core.Input()
283 ], Toast.prototype, "preventOpenDuplicates", void 0);
284 __decorate([
285 core.Input()
286 ], Toast.prototype, "preventDuplicates", void 0);
287 __decorate([
288 core.Input()
289 ], Toast.prototype, "showTransformOptions", void 0);
290 __decorate([
291 core.Input()
292 ], Toast.prototype, "hideTransformOptions", void 0);
293 __decorate([
294 core.Input()
295 ], Toast.prototype, "showTransitionOptions", void 0);
296 __decorate([
297 core.Input()
298 ], Toast.prototype, "hideTransitionOptions", void 0);
299 __decorate([
300 core.Output()
301 ], Toast.prototype, "onClose", void 0);
302 __decorate([
303 core.ViewChild('container')
304 ], Toast.prototype, "containerViewChild", void 0);
305 __decorate([
306 core.ContentChildren(api.PrimeTemplate)
307 ], Toast.prototype, "templates", void 0);
308 Toast = __decorate([
309 core.Component({
310 selector: 'p-toast',
311 template: "\n <div #container [ngClass]=\"{'ui-toast ui-widget': true, \n 'ui-toast-top-right': position === 'top-right',\n 'ui-toast-top-left': position === 'top-left',\n 'ui-toast-bottom-right': position === 'bottom-right',\n 'ui-toast-bottom-left': position === 'bottom-left',\n 'ui-toast-top-center': position === 'top-center',\n 'ui-toast-bottom-center': position === 'bottom-center',\n 'ui-toast-center': position === 'center'}\" \n [ngStyle]=\"style\" [class]=\"styleClass\">\n <p-toastItem *ngFor=\"let msg of messages; let i=index\" [message]=\"msg\" [index]=\"i\" (onClose)=\"onMessageClose($event)\"\n [template]=\"template\" @toastAnimation (@toastAnimation.start)=\"onAnimationStart($event)\" \n [showTransformOptions]=\"showTransformOptions\" [hideTransformOptions]=\"hideTransformOptions\" \n [showTransitionOptions]=\"showTransitionOptions\" [hideTransitionOptions]=\"hideTransitionOptions\"></p-toastItem>\n </div>\n ",
312 animations: [
313 animations.trigger('toastAnimation', [
314 animations.transition(':enter, :leave', [
315 animations.query('@*', animations.animateChild())
316 ])
317 ])
318 ],
319 changeDetection: core.ChangeDetectionStrategy.Default
320 })
321 ], Toast);
322 return Toast;
323 }());
324 var ToastModule = /** @class */ (function () {
325 function ToastModule() {
326 }
327 ToastModule = __decorate([
328 core.NgModule({
329 imports: [common.CommonModule],
330 exports: [Toast, api.SharedModule],
331 declarations: [Toast, ToastItem]
332 })
333 ], ToastModule);
334 return ToastModule;
335 }());
336
337 exports.Toast = Toast;
338 exports.ToastItem = ToastItem;
339 exports.ToastModule = ToastModule;
340
341 Object.defineProperty(exports, '__esModule', { value: true });
342
343})));
344//# sourceMappingURL=primeng-toast.umd.js.map