@progress/kendo-angular-notification 3.0.3 → 4.0.0-next.202202241714

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/LICENSE.md +1 -1
  2. package/NOTICE.txt +119 -79
  3. package/README.md +1 -1
  4. package/bundles/kendo-angular-notification.umd.js +5 -0
  5. package/{dist/es/models/notification-ref.js → esm2015/kendo-angular-notification.js} +4 -0
  6. package/esm2015/localization/localized-messages.directive.js +38 -0
  7. package/{dist/es → esm2015}/main.js +2 -0
  8. package/{dist/es2015 → esm2015}/models/animation.js +1 -0
  9. package/{dist/es2015 → esm2015}/models/notification-ref.js +1 -0
  10. package/{dist/es2015 → esm2015}/models/notification-settings.js +0 -0
  11. package/{dist/es → esm2015}/models/position.js +1 -0
  12. package/{dist/es2015 → esm2015}/models/type.js +1 -0
  13. package/{dist/es2015 → esm2015}/notification.component.js +85 -73
  14. package/{dist/es2015 → esm2015}/notification.container.component.js +25 -27
  15. package/{dist/es → esm2015}/notification.module.js +16 -16
  16. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  17. package/{dist/es2015 → esm2015}/services/notification.service.js +14 -12
  18. package/{dist/es2015 → esm2015}/utils/animations.js +0 -0
  19. package/{dist/fesm2015/index.js → fesm2015/kendo-angular-notification.js} +170 -146
  20. package/{dist/es/models/animation.js → kendo-angular-notification.d.ts} +5 -0
  21. package/{dist/es2015/localization → localization}/localized-messages.directive.d.ts +3 -0
  22. package/{dist/es2015/main.d.ts → main.d.ts} +1 -0
  23. package/{dist/es2015/models → models}/animation.d.ts +0 -0
  24. package/{dist/es2015/models → models}/notification-ref.d.ts +0 -0
  25. package/{dist/es2015/models → models}/notification-settings.d.ts +0 -0
  26. package/{dist/es2015/models → models}/position.d.ts +0 -0
  27. package/{dist/es2015/models → models}/type.d.ts +0 -0
  28. package/{dist/es2015/notification.component.d.ts → notification.component.d.ts} +5 -2
  29. package/{dist/es2015/notification.container.component.d.ts → notification.container.component.d.ts} +3 -1
  30. package/{dist/es2015/notification.module.d.ts → notification.module.d.ts} +8 -0
  31. package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  32. package/package.json +33 -93
  33. package/schematics/ngAdd/index.js +5 -2
  34. package/schematics/ngAdd/index.js.map +1 -1
  35. package/{dist/es2015/services → services}/notification.service.d.ts +4 -1
  36. package/{dist/es2015/utils → utils}/animations.d.ts +0 -0
  37. package/dist/cdn/js/kendo-angular-notification.js +0 -20
  38. package/dist/cdn/main.js +0 -5
  39. package/dist/es/index.js +0 -10
  40. package/dist/es/localization/localized-messages.directive.js +0 -38
  41. package/dist/es/models/notification-settings.js +0 -54
  42. package/dist/es/models/type.js +0 -4
  43. package/dist/es/notification.component.js +0 -222
  44. package/dist/es/notification.container.component.js +0 -154
  45. package/dist/es/package-metadata.js +0 -15
  46. package/dist/es/services/notification.service.js +0 -135
  47. package/dist/es/utils/animations.js +0 -41
  48. package/dist/es2015/index.d.ts +0 -10
  49. package/dist/es2015/index.js +0 -10
  50. package/dist/es2015/index.metadata.json +0 -1
  51. package/dist/es2015/localization/localized-messages.directive.js +0 -34
  52. package/dist/es2015/main.js +0 -8
  53. package/dist/es2015/models/position.js +0 -4
  54. package/dist/es2015/notification.module.js +0 -53
  55. package/dist/fesm5/index.js +0 -677
  56. package/dist/npm/index.js +0 -15
  57. package/dist/npm/localization/localized-messages.directive.js +0 -40
  58. package/dist/npm/main.js +0 -15
  59. package/dist/npm/models/animation.js +0 -6
  60. package/dist/npm/models/notification-ref.js +0 -6
  61. package/dist/npm/models/notification-settings.js +0 -56
  62. package/dist/npm/models/position.js +0 -6
  63. package/dist/npm/models/type.js +0 -6
  64. package/dist/npm/notification.component.js +0 -224
  65. package/dist/npm/notification.container.component.js +0 -156
  66. package/dist/npm/notification.module.js +0 -58
  67. package/dist/npm/package-metadata.js +0 -17
  68. package/dist/npm/services/notification.service.js +0 -137
  69. package/dist/npm/utils/animations.js +0 -47
  70. package/dist/systemjs/kendo-angular-notification.js +0 -5
@@ -1,677 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { __decorate, __metadata, __param, __extends } from 'tslib';
6
- import { ViewChild, ViewContainerRef, Input, TemplateRef, HostBinding, Component, ChangeDetectorRef, ElementRef, Renderer2, EventEmitter, ComponentFactoryResolver, InjectionToken, ApplicationRef, Injectable, Inject, Optional, Injector, Directive, forwardRef, NgModule } from '@angular/core';
7
- import { style, animate, AnimationBuilder } from '@angular/animations';
8
- import { take } from 'rxjs/operators';
9
- import { validatePackage } from '@progress/kendo-licensing';
10
- import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
11
- import { CommonModule } from '@angular/common';
12
-
13
- var NotificationSettings = /** @class */ (function () {
14
- function NotificationSettings() {
15
- /**
16
- * Specifies the time in milliseconds after which the
17
- * Notification will hide
18
- * ([see example]({% slug hiding_notifications %}#toc-definig-a-delay-before-hiding)).
19
- * Defaults to `5000`.
20
- */
21
- this.hideAfter = 5000;
22
- /**
23
- * Defines the position of the Notification
24
- * ([see example]({% slug positioning_notification %})).
25
- *
26
- * The possible values are:
27
- * * `horizontal: 'left'|'center'|'right'`
28
- * * `vertical: 'top'|'bottom'`
29
- */
30
- this.position = { horizontal: 'right', vertical: 'top' };
31
- /**
32
- * Specifies the animation settings of the Notification
33
- * ([see example]({% slug animations_notification %})).
34
- *
35
- * The possible values are:
36
- * * `duration`—Accepts a number in milliseconds. Defaults to `500ms`.
37
- * * `type?: 'slide'| (Default) 'fade'`
38
- */
39
- this.animation = { type: 'fade', duration: 500 };
40
- /**
41
- * Specifies if the Notification will require a user action to hide.
42
- * If the property is set to `true`, the Notification renders a **Close** button
43
- * ([see example]({% slug hiding_notifications %}#toc-defining-a-closable-notification)).
44
- *
45
- * The possible values are:
46
- * * (Default) `false`
47
- * * `true`
48
- */
49
- this.closable = false;
50
- /**
51
- * Specifies the type of the Notification
52
- * ([see example]({% slug types_notification %})).
53
- *
54
- * The possible values are:
55
- * * `style: (Default) 'none'|'success'|'error'|'warning'|'info'`
56
- * * `icon: 'true'|'false'`
57
- */
58
- this.type = { style: 'none', icon: true };
59
- }
60
- return NotificationSettings;
61
- }());
62
-
63
- /**
64
- * @hidden
65
- */
66
- var packageMetadata = {
67
- name: '@progress/kendo-angular-notification',
68
- productName: 'Kendo UI for Angular',
69
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
70
- publishDate: 1635939877,
71
- version: '',
72
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
73
- };
74
-
75
- /**
76
- * @hidden
77
- */
78
- function slideAnimation(height, duration) {
79
- return [
80
- style({ overflow: 'hidden', height: 0 }),
81
- animate(duration + "ms ease-in", style({ height: height + "px" }))
82
- ];
83
- }
84
- /**
85
- * @hidden
86
- */
87
- function slideCloseAnimation(height, duration) {
88
- return [
89
- style({ height: height + "px" }),
90
- animate(duration + "ms ease-in", style({ overflow: 'hidden', height: 0 }))
91
- ];
92
- }
93
- /**
94
- * @hidden
95
- */
96
- function fadeAnimation(duration) {
97
- return [
98
- style({ opacity: 0 }),
99
- animate(duration + "ms ease-in", style({ opacity: 1 }))
100
- ];
101
- }
102
- /**
103
- * @hidden
104
- */
105
- function fadeCloseAnimation(duration) {
106
- return [
107
- style({ opacity: 1 }),
108
- animate(duration + "ms ease-in", style({ opacity: 0 }))
109
- ];
110
- }
111
-
112
- /**
113
- * @hidden
114
- *
115
- */
116
- var NotificationComponent = /** @class */ (function () {
117
- function NotificationComponent(cdr, element, renderer, builder, localizationService) {
118
- var _this = this;
119
- this.cdr = cdr;
120
- this.element = element;
121
- this.renderer = renderer;
122
- this.builder = builder;
123
- this.localizationService = localizationService;
124
- this.close = new EventEmitter();
125
- this.width = null;
126
- this.height = null;
127
- this.defaultHideAfter = 5000;
128
- this.animationEnd = new EventEmitter();
129
- this.rtl = false;
130
- validatePackage(packageMetadata);
131
- this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
132
- var rtl = _a.rtl;
133
- _this.rtl = rtl;
134
- _this.direction = _this.rtl ? 'rtl' : 'ltr';
135
- });
136
- }
137
- Object.defineProperty(NotificationComponent.prototype, "containerClass", {
138
- get: function () {
139
- return true;
140
- },
141
- enumerable: true,
142
- configurable: true
143
- });
144
- Object.defineProperty(NotificationComponent.prototype, "closeButtonTitle", {
145
- get: function () {
146
- return this.closeTitle || this.localizationService.get('closeTitle');
147
- },
148
- enumerable: true,
149
- configurable: true
150
- });
151
- NotificationComponent.prototype.notificationClasses = function () {
152
- return (this.type ? this.typeClass() : '') + "\n " + (this.closable ? 'k-notification-closable' : '');
153
- };
154
- NotificationComponent.prototype.ngOnInit = function () {
155
- clearTimeout(this.hideTimeout);
156
- };
157
- NotificationComponent.prototype.ngOnDestroy = function () {
158
- clearTimeout(this.hideTimeout);
159
- if (this.dynamicRTLSubscription) {
160
- this.dynamicRTLSubscription.unsubscribe();
161
- }
162
- };
163
- NotificationComponent.prototype.ngAfterViewInit = function () {
164
- var _this = this;
165
- if (!this.closable && !this.animation) {
166
- this.setHideTimeout();
167
- }
168
- if (!this.closable && this.animation) {
169
- this.animationEnd.pipe(take(1))
170
- .subscribe(function () { return _this.setHideTimeout(); });
171
- }
172
- if (this.animation) {
173
- this.animate(this.animation);
174
- }
175
- };
176
- NotificationComponent.prototype.typeClass = function () {
177
- return {
178
- 'none': '',
179
- 'success': 'k-notification-success',
180
- 'warning': 'k-notification-warning',
181
- 'error': 'k-notification-error',
182
- 'info': 'k-notification-info'
183
- }[this.type.style];
184
- };
185
- NotificationComponent.prototype.typeIconClass = function () {
186
- return {
187
- 'none': '',
188
- 'success': 'k-i-success',
189
- 'warning': 'k-i-warning',
190
- 'error': 'k-i-error',
191
- 'info': 'k-i-info'
192
- }[this.type.style];
193
- };
194
- NotificationComponent.prototype.onCloseClick = function () {
195
- clearTimeout(this.hideTimeout);
196
- this.hide();
197
- };
198
- NotificationComponent.prototype.hide = function (customComponent) {
199
- var _this = this;
200
- var elementHeight = getComputedStyle(this.element.nativeElement).height;
201
- if (this.animation && elementHeight) {
202
- this.animate(this.animation, true);
203
- this.animationEnd.subscribe(function () {
204
- _this.emitClose(customComponent);
205
- });
206
- return;
207
- }
208
- this.emitClose(customComponent);
209
- };
210
- NotificationComponent.prototype.setHideTimeout = function () {
211
- var _this = this;
212
- var hideAfter = this.hideAfter || this.defaultHideAfter;
213
- this.hideTimeout = window.setTimeout(function () { return _this.onCloseClick(); }, hideAfter);
214
- };
215
- NotificationComponent.prototype.emitClose = function (customComponent) {
216
- if (customComponent) {
217
- customComponent.destroy();
218
- }
219
- this.close.emit();
220
- };
221
- NotificationComponent.prototype.play = function (animation, animatedElement) {
222
- var _this = this;
223
- var factory = this.builder.build(animation);
224
- var element = this.element.nativeElement;
225
- this.renderer.addClass(element, 'k-notification-container-animating');
226
- var player = factory.create(animatedElement);
227
- player.onDone(function () {
228
- _this.renderer.removeClass(element, 'k-notification-container-animating');
229
- _this.animationEnd.emit();
230
- if (player) {
231
- player.destroy();
232
- player = null;
233
- }
234
- });
235
- player.play();
236
- };
237
- NotificationComponent.prototype.animate = function (animation, onclose) {
238
- var element = this.element.nativeElement;
239
- var duration = animation.duration;
240
- var height = element.offsetHeight;
241
- var generatedAnimation = animation.type === 'slide' ?
242
- this.slideAnimation(height, duration, onclose) :
243
- this.fadeAnimation(duration, onclose);
244
- this.play(generatedAnimation, element);
245
- };
246
- NotificationComponent.prototype.slideAnimation = function (height, duration, onclose) {
247
- return onclose ? slideCloseAnimation(height, duration) : slideAnimation(height, duration);
248
- };
249
- NotificationComponent.prototype.fadeAnimation = function (duration, onclose) {
250
- return onclose ? fadeCloseAnimation(duration) : fadeAnimation(duration);
251
- };
252
- __decorate([
253
- ViewChild('container', { read: ViewContainerRef, static: true }),
254
- __metadata("design:type", ViewContainerRef)
255
- ], NotificationComponent.prototype, "container", void 0);
256
- __decorate([
257
- Input(),
258
- __metadata("design:type", TemplateRef)
259
- ], NotificationComponent.prototype, "templateRef", void 0);
260
- __decorate([
261
- Input(),
262
- __metadata("design:type", String)
263
- ], NotificationComponent.prototype, "templateString", void 0);
264
- __decorate([
265
- Input(),
266
- __metadata("design:type", Number)
267
- ], NotificationComponent.prototype, "width", void 0);
268
- __decorate([
269
- Input(),
270
- __metadata("design:type", Number)
271
- ], NotificationComponent.prototype, "height", void 0);
272
- __decorate([
273
- Input(),
274
- __metadata("design:type", Object)
275
- ], NotificationComponent.prototype, "cssClass", void 0);
276
- __decorate([
277
- Input(),
278
- __metadata("design:type", Number)
279
- ], NotificationComponent.prototype, "hideAfter", void 0);
280
- __decorate([
281
- Input(),
282
- __metadata("design:type", Boolean)
283
- ], NotificationComponent.prototype, "closable", void 0);
284
- __decorate([
285
- Input(),
286
- __metadata("design:type", Object)
287
- ], NotificationComponent.prototype, "type", void 0);
288
- __decorate([
289
- Input(),
290
- __metadata("design:type", Object)
291
- ], NotificationComponent.prototype, "animation", void 0);
292
- __decorate([
293
- HostBinding('attr.dir'),
294
- __metadata("design:type", String)
295
- ], NotificationComponent.prototype, "direction", void 0);
296
- __decorate([
297
- HostBinding('class.k-notification-container'),
298
- __metadata("design:type", Boolean),
299
- __metadata("design:paramtypes", [])
300
- ], NotificationComponent.prototype, "containerClass", null);
301
- NotificationComponent = __decorate([
302
- Component({
303
- selector: 'kendo-notification',
304
- template: "\n <ng-container kendoNotificationLocalizedMessages\n i18n-closeTitle=\"kendo.notification.closeTitle|The title of the close button\"\n closeTitle=\"Close\"\n >\n </ng-container>\n <div class=\"k-widget k-notification {{ notificationClasses() }}\"\n [ngClass]=\"cssClass\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\">\n <div class=\"k-notification-wrap k-hstack\">\n <span *ngIf=\"type && type.icon && type.style !== 'none'\" class=\"k-icon\" [ngClass]=\"typeIconClass()\"></span>\n\n <div class=\"k-notification-content\">\n <ng-template\n [ngIf]=\"templateRef\"\n [ngTemplateOutlet]=\"templateRef\">\n </ng-template>\n <ng-template\n [ngIf]=\"templateString\">\n {{ templateString }}\n </ng-template>\n <ng-container #container></ng-container>\n </div>\n\n <a *ngIf=\"closable\" class=\"k-icon k-i-close\" [attr.title]=\"closeButtonTitle\" (click)=\"onCloseClick()\"></a>\n </div>\n </div>\n ",
305
- providers: [
306
- LocalizationService,
307
- {
308
- provide: L10N_PREFIX,
309
- useValue: 'kendo.notification'
310
- }
311
- ]
312
- }),
313
- __metadata("design:paramtypes", [ChangeDetectorRef,
314
- ElementRef,
315
- Renderer2,
316
- AnimationBuilder,
317
- LocalizationService])
318
- ], NotificationComponent);
319
- return NotificationComponent;
320
- }());
321
-
322
- /**
323
- * @hidden
324
- *
325
- */
326
- var NotificationContainerComponent = /** @class */ (function () {
327
- function NotificationContainerComponent(element, renderer, resolver) {
328
- this.element = element;
329
- this.renderer = renderer;
330
- this.resolver = resolver;
331
- this.id = '';
332
- this.notifications = [];
333
- }
334
- NotificationContainerComponent.prototype.ngOnDestroy = function () {
335
- this.notifications.forEach(function (notification) {
336
- if (notification.closeClickSubscription) {
337
- notification.closeClickSubscription.unsubscribe();
338
- }
339
- });
340
- this.notifications = [];
341
- };
342
- NotificationContainerComponent.prototype.addNotification = function (settings) {
343
- this.position = settings.position;
344
- this.id = this.position.horizontal + " " + this.position.vertical;
345
- var factory = this.resolver.resolveComponentFactory(NotificationComponent);
346
- var notificationRef = this.container.createComponent(factory);
347
- this.applySettings(notificationRef, settings);
348
- var customComponent = null;
349
- if (typeof settings.content === 'function') {
350
- var customFactory = this.resolver.resolveComponentFactory(settings.content);
351
- customComponent = notificationRef.instance.container.createComponent(customFactory);
352
- }
353
- notificationRef.changeDetectorRef.detectChanges();
354
- this.notifications.push(notificationRef.instance);
355
- if (settings.appendTo) {
356
- this.applyAbsolutePosition(settings.appendTo);
357
- }
358
- this.applyPosition();
359
- this.applyContainerWrap();
360
- return {
361
- afterHide: notificationRef.instance.close,
362
- hide: function () { return notificationRef.instance.hide(customComponent); },
363
- notification: notificationRef,
364
- content: customComponent || null
365
- };
366
- };
367
- NotificationContainerComponent.prototype.hide = function (notificationRef) {
368
- var instance = notificationRef.instance;
369
- var index = this.notifications.indexOf(instance);
370
- this.notifications.splice(index, 1);
371
- if (instance.closeClickSubscription) {
372
- instance.closeClickSubscription.unsubscribe();
373
- }
374
- instance.templateRef = null;
375
- instance.templateString = null;
376
- notificationRef.destroy();
377
- };
378
- NotificationContainerComponent.prototype.applyContainerWrap = function () {
379
- var value = this.position.horizontal === 'right' ? 'wrap-reverse' : 'wrap';
380
- this.renderer.setStyle(this.group.nativeElement, 'flex-wrap', value);
381
- };
382
- NotificationContainerComponent.prototype.applySettings = function (notificationRef, settings) {
383
- var _this = this;
384
- var notification = notificationRef.instance;
385
- var content = settings.content;
386
- var animation = settings.animation || null;
387
- notification.closeClickSubscription = notification.close
388
- .subscribe(function () { return _this.hide(notificationRef); });
389
- if (typeof content === 'string') {
390
- notification.templateString = content;
391
- }
392
- if (content instanceof TemplateRef) {
393
- notification.templateRef = content;
394
- }
395
- notification.animation = animation;
396
- var type = settings.type;
397
- if (type && type.style === undefined) {
398
- type.style = 'none';
399
- }
400
- if (type && type.icon === undefined) {
401
- type.icon = true;
402
- }
403
- notification.type = type;
404
- notification.closeTitle = settings.closeTitle;
405
- if (settings.cssClass) {
406
- notification.cssClass = settings.cssClass;
407
- }
408
- notification.closable = settings.closable;
409
- notification.hideAfter = settings.hideAfter;
410
- notification.width = settings.width;
411
- notification.height = settings.height;
412
- };
413
- NotificationContainerComponent.prototype.applyAbsolutePosition = function (appendToContainer) {
414
- var appendTo = appendToContainer.element.nativeElement;
415
- var el = this.element.nativeElement.children[0];
416
- if (window.getComputedStyle(appendTo).position === 'static') {
417
- this.renderer.setStyle(appendTo, 'position', 'relative');
418
- }
419
- this.renderer.setStyle(el, 'position', 'absolute');
420
- };
421
- NotificationContainerComponent.prototype.applyPosition = function () {
422
- var element = this.element.nativeElement.children[0];
423
- var elementHalfWidth = element.getBoundingClientRect().width / 2;
424
- var positionStyles = this.setContainerPosition(this.position, elementHalfWidth);
425
- Object.keys(positionStyles).forEach(function (cssStyle) {
426
- element.style[cssStyle] = positionStyles[cssStyle];
427
- });
428
- };
429
- NotificationContainerComponent.prototype.setContainerPosition = function (position, offsetMargin) {
430
- var positionLayout = {
431
- horizontal: {
432
- left: { left: 0, alignItems: 'flex-start' },
433
- right: { right: 0, alignItems: 'flex-start' },
434
- center: { left: '50%', marginLeft: -offsetMargin + "px", alignItems: 'center' }
435
- },
436
- vertical: {
437
- top: { top: 0 },
438
- bottom: { bottom: 0 }
439
- }
440
- };
441
- var horizontal = positionLayout.horizontal[position.horizontal];
442
- var vertical = positionLayout.vertical[position.vertical];
443
- return Object.assign({}, horizontal, vertical);
444
- };
445
- __decorate([
446
- ViewChild('container', { read: ViewContainerRef, static: true }),
447
- __metadata("design:type", ViewContainerRef)
448
- ], NotificationContainerComponent.prototype, "container", void 0);
449
- __decorate([
450
- ViewChild('group', { static: true }),
451
- __metadata("design:type", ElementRef)
452
- ], NotificationContainerComponent.prototype, "group", void 0);
453
- __decorate([
454
- Input(),
455
- __metadata("design:type", String)
456
- ], NotificationContainerComponent.prototype, "id", void 0);
457
- NotificationContainerComponent = __decorate([
458
- Component({
459
- selector: 'kendo-notification-container',
460
- template: "\n <div #group class=\"k-notification-group\">\n <ng-container #container></ng-container>\n </div>\n "
461
- }),
462
- __metadata("design:paramtypes", [ElementRef,
463
- Renderer2,
464
- ComponentFactoryResolver])
465
- ], NotificationContainerComponent);
466
- return NotificationContainerComponent;
467
- }());
468
-
469
- /**
470
- * Used to inject the Notification container. If not provided, the first root component of
471
- * the application is used.
472
- *
473
- * > The `NOTIFICATION_CONTAINER` can be used only with the [`NotificationService`]({% slug api_notification_notificationservice %}) class.
474
- *
475
- * @example
476
- *
477
- * ```ts-no-run
478
- * // Import the Notification module
479
- * import { NotificationModule, NOTIFICATION_CONTAINER } from '@progress/kendo-angular-notification';
480
- *
481
- * // The browser platform with a compiler
482
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
483
- *
484
- * import { ElementRef, NgModule } from '@angular/core';
485
- *
486
- * // Import the app component
487
- * import { AppComponent } from './app.component';
488
- *
489
- * // Define the app module
490
- * _@NgModule({
491
- * declarations: [AppComponent], // declare app component
492
- * imports: [BrowserModule, NotificationModule], // import Notification module
493
- * bootstrap: [AppComponent],
494
- * providers: [{
495
- * provide: NOTIFICATION_CONTAINER,
496
- * useFactory: () => {
497
- * //return the container ElementRef, where the notification will be injected
498
- * return { nativeElement: document.body } as ElementRef;
499
- * }
500
- * }]
501
- * })
502
- * export class AppModule {}
503
- *
504
- * // Compile and launch the module
505
- * platformBrowserDynamic().bootstrapModule(AppModule);
506
- * ```
507
- */
508
- var NOTIFICATION_CONTAINER = new InjectionToken('Notification Container');
509
- /**
510
- * A service for opening Notification components dynamically
511
- * ([see example]({% slug overview_notification %})).
512
- *
513
- * @export
514
- * @class NotificationService
515
- */
516
- var NotificationService = /** @class */ (function () {
517
- /**
518
- * @hidden
519
- */
520
- function NotificationService(resolver, injector, container) {
521
- this.resolver = resolver;
522
- this.injector = injector;
523
- this.container = container;
524
- this.notificationContainers = [];
525
- this.position = { horizontal: 'right', vertical: 'top' };
526
- }
527
- /**
528
- * Opens a Notification component. Created Notification are mounted
529
- * in the DOM directly in the root application component.
530
- *
531
- * @param {NotificationSettings} settings - The settings which define the Notification.
532
- *
533
- * @returns {NotificationRef} - A reference to the Notification object and the convenience properties.
534
- */
535
- NotificationService.prototype.show = function (settings) {
536
- if (!settings) {
537
- throw new Error('NotificationSettings settings are required');
538
- }
539
- var target = this.findGroupContainer(settings);
540
- var position = settings.position || this.position;
541
- var currentId = position.horizontal + " " + position.vertical;
542
- var container;
543
- var notificationRef;
544
- var notificationContainer = this.notificationContainers.find(function (c) { return target.nativeElement.contains(c.element.nativeElement) && c.id === currentId; });
545
- if (!notificationContainer) {
546
- container = this.resolver
547
- .resolveComponentFactory(NotificationContainerComponent)
548
- .create(this.injector);
549
- notificationContainer = container.instance;
550
- this.appRef.attachView(container.hostView);
551
- var hostViewElement = container.location.nativeElement;
552
- var groupContainer = this.findGroupContainer(settings);
553
- if (!groupContainer) {
554
- throw new Error("\n View Container not found! Inject the NOTIFICATION_CONTAINER or define a specific ViewContainerRef via\n the appendTo option. See http://www.telerik.com/kendo-angular-ui/components/notification/api/NOTIFICATION_CONTAINER/\n for more details.\n ");
555
- }
556
- groupContainer.nativeElement.appendChild(hostViewElement);
557
- this.notificationContainers.push(notificationContainer);
558
- }
559
- settings.position = position;
560
- notificationRef = notificationContainer.addNotification(settings);
561
- return notificationRef;
562
- };
563
- Object.defineProperty(NotificationService.prototype, "appRef", {
564
- get: function () {
565
- if (!this.applicationRef) {
566
- this.applicationRef = this.injector.get(ApplicationRef);
567
- }
568
- return this.applicationRef;
569
- },
570
- enumerable: true,
571
- configurable: true
572
- });
573
- NotificationService.prototype.findGroupContainer = function (settings) {
574
- var container;
575
- if (settings.appendTo) {
576
- container = settings.appendTo.element;
577
- }
578
- else if (this.container) {
579
- container = this.container;
580
- }
581
- else {
582
- var appRoot = this.appRef.components && this.appRef.components[0];
583
- container = appRoot ? appRoot.location : null;
584
- }
585
- return container;
586
- };
587
- NotificationService = __decorate([
588
- Injectable(),
589
- __param(2, Inject(NOTIFICATION_CONTAINER)), __param(2, Optional()),
590
- __metadata("design:paramtypes", [ComponentFactoryResolver,
591
- Injector,
592
- ElementRef])
593
- ], NotificationService);
594
- return NotificationService;
595
- }());
596
-
597
- /**
598
- * @hidden
599
- */
600
- var LocalizedMessagesDirective = /** @class */ (function (_super) {
601
- __extends(LocalizedMessagesDirective, _super);
602
- function LocalizedMessagesDirective(service) {
603
- var _this = _super.call(this) || this;
604
- _this.service = service;
605
- return _this;
606
- }
607
- LocalizedMessagesDirective_1 = LocalizedMessagesDirective;
608
- var LocalizedMessagesDirective_1;
609
- __decorate([
610
- Input(),
611
- __metadata("design:type", String)
612
- ], LocalizedMessagesDirective.prototype, "closeTitle", void 0);
613
- LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
614
- Directive({
615
- providers: [
616
- {
617
- provide: ComponentMessages,
618
- useExisting: forwardRef(function () { return LocalizedMessagesDirective_1; })
619
- }
620
- ],
621
- selector: "[kendoNotificationLocalizedMessages]"
622
- }),
623
- __metadata("design:paramtypes", [LocalizationService])
624
- ], LocalizedMessagesDirective);
625
- return LocalizedMessagesDirective;
626
- }(ComponentMessages));
627
-
628
- /**
629
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
630
- * definition for the Notification component.
631
- *
632
- * The package exports:
633
- * - `NotificationService`&mdash;The Notification service class.
634
- *
635
- * @example
636
- *
637
- * ```ts-no-run
638
- * // Import the Notification module
639
- * import { NotificationModule } from '@progress/kendo-angular-notification';
640
- *
641
- * // The browser platform with a compiler
642
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
643
- *
644
- * import { NgModule } from '@angular/core';
645
- *
646
- * // Import the app component
647
- * _@NgModule{{
648
- * declarations: [AppComponent], // declare app component
649
- * imports: [BrowserModule, NotificationModule], // import NotificationModule module
650
- * bootstrap: [AppComponent]
651
- * }}
652
- * export class AppModule {}
653
- *
654
- * // Compile and launch the module
655
- * platformBrowserDynamic().bootstrapModule(AppModule);
656
- * ```
657
- */
658
- var NotificationModule = /** @class */ (function () {
659
- function NotificationModule() {
660
- }
661
- NotificationModule = __decorate([
662
- NgModule({
663
- declarations: [NotificationComponent, NotificationContainerComponent, LocalizedMessagesDirective],
664
- entryComponents: [NotificationComponent, NotificationContainerComponent],
665
- imports: [CommonModule],
666
- exports: [NotificationComponent, NotificationContainerComponent],
667
- providers: [NotificationService]
668
- })
669
- ], NotificationModule);
670
- return NotificationModule;
671
- }());
672
-
673
- /**
674
- * Generated bundle index. Do not edit.
675
- */
676
-
677
- export { LocalizedMessagesDirective, NotificationContainerComponent, NotificationSettings, NotificationComponent, NotificationService, NOTIFICATION_CONTAINER, NotificationModule };
package/dist/npm/index.js DELETED
@@ -1,15 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- "use strict";
6
- /**
7
- * Generated bundle index. Do not edit.
8
- */
9
- Object.defineProperty(exports, "__esModule", { value: true });
10
- var tslib_1 = require("tslib");
11
- tslib_1.__exportStar(require("./main"), exports);
12
- var localized_messages_directive_1 = require("./localization/localized-messages.directive");
13
- exports.LocalizedMessagesDirective = localized_messages_directive_1.LocalizedMessagesDirective
14
- var notification_container_component_1 = require("./notification.container.component");
15
- exports.NotificationContainerComponent = notification_container_component_1.NotificationContainerComponent