@progress/kendo-angular-notification 17.0.0-develop.9 → 17.0.1-develop.1

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.
@@ -1,774 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as i0 from '@angular/core';
6
- import { forwardRef, Directive, Input, EventEmitter, ViewContainerRef, Component, ViewChild, HostBinding, TemplateRef, InjectionToken, ApplicationRef, Injectable, Inject, Optional, NgModule } from '@angular/core';
7
- import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
8
- import { take } from 'rxjs/operators';
9
- import { validatePackage } from '@progress/kendo-licensing';
10
- import * as i1 from '@progress/kendo-angular-l10n';
11
- import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
12
- import { xIcon, checkOutlineIcon, exclamationCircleIcon, xOutlineIcon, infoCircleIcon } from '@progress/kendo-svg-icons';
13
- import { guid } from '@progress/kendo-angular-common';
14
- import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
15
- import * as i1$1 from '@angular/animations';
16
- import { style, animate } from '@angular/animations';
17
-
18
- class NotificationSettings {
19
- constructor() {
20
- /**
21
- * Specifies the time in milliseconds after which the
22
- * Notification will hide
23
- * ([see example](slug:hiding_notifications#toc-defining-a-delay-before-hiding)).
24
- * Defaults to `5000`.
25
- */
26
- this.hideAfter = 5000;
27
- /**
28
- * Defines the position of the Notification
29
- * ([see example]({% slug positioning_notification %})).
30
- *
31
- * The possible values are:
32
- * * `horizontal: 'left'|'center'|'right'`
33
- * * `vertical: 'top'|'bottom'`
34
- */
35
- this.position = { horizontal: 'right', vertical: 'top' };
36
- /**
37
- * Specifies the animation settings of the Notification
38
- * ([see example]({% slug animations_notification %})).
39
- *
40
- * The possible values are:
41
- * * `duration`—Accepts a number in milliseconds. Defaults to `500ms`.
42
- * * `type?: 'slide'| (Default) 'fade'`
43
- */
44
- this.animation = { type: 'fade', duration: 500 };
45
- /**
46
- * Specifies if the Notification will require a user action to hide.
47
- * If the property is set to `true`, the Notification renders a **Close** button
48
- * ([see example]({% slug hiding_notifications %}#toc-defining-a-closable-notification)).
49
- *
50
- * The possible values are:
51
- * * (Default) `false`
52
- * * `true`
53
- */
54
- this.closable = false;
55
- /**
56
- * Specifies the type of the Notification
57
- * ([see example]({% slug types_notification %})).
58
- *
59
- * The possible values are:
60
- * * `style: (Default) 'none'|'success'|'error'|'warning'|'info'`
61
- * * `icon: 'true'|'false'`
62
- */
63
- this.type = { style: 'none', icon: true };
64
- /**
65
- * The value of the Notification element `aria-label` attribute.
66
- * @default 'Notification'
67
- */
68
- this.notificationLabel = 'Notification';
69
- }
70
- }
71
-
72
- /**
73
- * @hidden
74
- */
75
- const packageMetadata = {
76
- name: '@progress/kendo-angular-notification',
77
- productName: 'Kendo UI for Angular',
78
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
79
- publishDate: 1729174769,
80
- version: '17.0.0-develop.9',
81
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
82
- };
83
-
84
- /**
85
- * @hidden
86
- */
87
- function slideAnimation(height, duration) {
88
- return [
89
- style({ overflow: 'hidden', height: 0 }),
90
- animate(`${duration}ms ease-in`, style({ height: `${height}px` }))
91
- ];
92
- }
93
- /**
94
- * @hidden
95
- */
96
- function slideCloseAnimation(height, duration) {
97
- return [
98
- style({ height: `${height}px` }),
99
- animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
100
- ];
101
- }
102
- /**
103
- * @hidden
104
- */
105
- function fadeAnimation(duration) {
106
- return [
107
- style({ opacity: 0 }),
108
- animate(`${duration}ms ease-in`, style({ opacity: 1 }))
109
- ];
110
- }
111
- /**
112
- * @hidden
113
- */
114
- function fadeCloseAnimation(duration) {
115
- return [
116
- style({ opacity: 1 }),
117
- animate(`${duration}ms ease-in`, style({ opacity: 0 }))
118
- ];
119
- }
120
-
121
- /**
122
- * @hidden
123
- */
124
- class LocalizedMessagesDirective extends ComponentMessages {
125
- constructor(service) {
126
- super();
127
- this.service = service;
128
- }
129
- }
130
- LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
131
- LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoNotificationLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
132
- {
133
- provide: ComponentMessages,
134
- useExisting: forwardRef(() => LocalizedMessagesDirective)
135
- }
136
- ], usesInheritance: true, ngImport: i0 });
137
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
138
- type: Directive,
139
- args: [{
140
- providers: [
141
- {
142
- provide: ComponentMessages,
143
- useExisting: forwardRef(() => LocalizedMessagesDirective)
144
- }
145
- ],
146
- selector: `[kendoNotificationLocalizedMessages]`,
147
- standalone: true
148
- }]
149
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { closeTitle: [{
150
- type: Input
151
- }] } });
152
-
153
- /**
154
- * @hidden
155
- *
156
- */
157
- class NotificationComponent {
158
- constructor(cdr, element, renderer, builder, localizationService) {
159
- this.cdr = cdr;
160
- this.element = element;
161
- this.renderer = renderer;
162
- this.builder = builder;
163
- this.localizationService = localizationService;
164
- /**
165
- * @hidden
166
- */
167
- this.xIcon = xIcon;
168
- this.contentId = `k-${guid()}`;
169
- this.close = new EventEmitter();
170
- this.width = null;
171
- this.height = null;
172
- this.notificationLabel = 'Notification';
173
- this.defaultHideAfter = 5000;
174
- this.animationEnd = new EventEmitter();
175
- this.rtl = false;
176
- validatePackage(packageMetadata);
177
- this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
178
- this.rtl = rtl;
179
- this.direction = this.rtl ? 'rtl' : 'ltr';
180
- });
181
- }
182
- get closeButtonTitle() {
183
- return this.closeTitle || this.localizationService.get('closeTitle');
184
- }
185
- notificationClasses() {
186
- return `${this.type ? this.typeClass() : ''}
187
- ${this.closable ? 'k-notification-closable' : ''}`;
188
- }
189
- ngOnInit() {
190
- clearTimeout(this.hideTimeout);
191
- }
192
- ngOnDestroy() {
193
- clearTimeout(this.hideTimeout);
194
- if (this.dynamicRTLSubscription) {
195
- this.dynamicRTLSubscription.unsubscribe();
196
- }
197
- }
198
- ngAfterViewInit() {
199
- if (!this.closable && !this.animation) {
200
- this.setHideTimeout();
201
- }
202
- if (!this.closable && this.animation) {
203
- this.animationEnd.pipe(take(1))
204
- .subscribe(() => this.setHideTimeout());
205
- }
206
- if (this.animation) {
207
- this.animate(this.animation);
208
- }
209
- }
210
- typeClass() {
211
- return {
212
- 'none': '',
213
- 'success': 'k-notification-success',
214
- 'warning': 'k-notification-warning',
215
- 'error': 'k-notification-error',
216
- 'info': 'k-notification-info'
217
- }[this.type.style];
218
- }
219
- typeIconClass() {
220
- return {
221
- 'none': '',
222
- 'success': 'check-outline',
223
- 'warning': 'exclamation-circle',
224
- 'error': 'x-outline',
225
- 'info': 'info-circle'
226
- }[this.type.style];
227
- }
228
- typeSVGIcon() {
229
- return {
230
- 'none': null,
231
- 'success': checkOutlineIcon,
232
- 'warning': exclamationCircleIcon,
233
- 'error': xOutlineIcon,
234
- 'info': infoCircleIcon
235
- }[this.type.style];
236
- }
237
- onCloseClick() {
238
- clearTimeout(this.hideTimeout);
239
- this.hide();
240
- }
241
- hide(customComponent) {
242
- const elementHeight = getComputedStyle(this.element.nativeElement).height;
243
- if (this.animation && elementHeight) {
244
- this.animate(this.animation, true);
245
- this.animationEnd.subscribe(() => {
246
- this.emitClose(customComponent);
247
- });
248
- return;
249
- }
250
- this.emitClose(customComponent);
251
- }
252
- setHideTimeout() {
253
- const hideAfter = this.hideAfter || this.defaultHideAfter;
254
- this.hideTimeout = window.setTimeout(() => this.onCloseClick(), hideAfter);
255
- }
256
- emitClose(customComponent) {
257
- if (customComponent) {
258
- customComponent.destroy();
259
- }
260
- this.close.emit();
261
- }
262
- play(animation, animatedElement) {
263
- const factory = this.builder.build(animation);
264
- const element = this.element.nativeElement;
265
- this.renderer.addClass(element, 'k-notification-container-animating');
266
- let player = factory.create(animatedElement);
267
- player.onDone(() => {
268
- this.renderer.removeClass(element, 'k-notification-container-animating');
269
- this.animationEnd.emit();
270
- if (player) {
271
- player.destroy();
272
- player = null;
273
- }
274
- });
275
- player.play();
276
- }
277
- animate(animation, onclose) {
278
- const element = this.element.nativeElement;
279
- const duration = animation.duration;
280
- const height = element.offsetHeight;
281
- const generatedAnimation = animation.type === 'slide' ?
282
- this.slideAnimation(height, duration, onclose) :
283
- this.fadeAnimation(duration, onclose);
284
- this.play(generatedAnimation, element);
285
- }
286
- slideAnimation(height, duration, onclose) {
287
- return onclose ? slideCloseAnimation(height, duration) : slideAnimation(height, duration);
288
- }
289
- fadeAnimation(duration, onclose) {
290
- return onclose ? fadeCloseAnimation(duration) : fadeAnimation(duration);
291
- }
292
- }
293
- NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
294
- NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationComponent, isStandalone: true, selector: "kendo-notification", inputs: { templateRef: "templateRef", templateString: "templateString", width: "width", height: "height", notificationLabel: "notificationLabel", cssClass: "cssClass", hideAfter: "hideAfter", closable: "closable", type: "type", animation: "animation" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
295
- LocalizationService,
296
- {
297
- provide: L10N_PREFIX,
298
- useValue: 'kendo.notification'
299
- }
300
- ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
301
- <ng-container kendoNotificationLocalizedMessages
302
- i18n-closeTitle="kendo.notification.closeTitle|The title of the close button"
303
- closeTitle="Close"
304
- >
305
- </ng-container>
306
- <div class="k-notification k-notification-base {{ notificationClasses() }}"
307
- [ngClass]="cssClass"
308
- [style.height.px]="height"
309
- [style.width.px]="width"
310
- role="alert"
311
- aria-live="polite"
312
- [attr.aria-describedby]="contentId"
313
- [attr.aria-label]="notificationLabel">
314
- <kendo-icon-wrapper
315
- *ngIf="type && type.icon && type.style !== 'none'"
316
- innerCssClass="k-notification-status"
317
- [name]="typeIconClass()"
318
- [svgIcon]="typeSVGIcon()"
319
- >
320
- </kendo-icon-wrapper>
321
- <div [id]="contentId" class="k-notification-content">
322
- <ng-template
323
- [ngIf]="templateRef"
324
- [ngTemplateOutlet]="templateRef">
325
- </ng-template>
326
- <ng-template
327
- [ngIf]="templateString">
328
- {{ templateString }}
329
- </ng-template>
330
- <ng-container #container></ng-container>
331
- </div>
332
-
333
- <span *ngIf="closable" class="k-notification-actions" aria-hidden="true">
334
- <span class="k-notification-action k-notification-close-action" [attr.title]="closeButtonTitle" (click)="onCloseClick()">
335
- <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
336
- </span>
337
- </span>
338
- </div>
339
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoNotificationLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
340
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationComponent, decorators: [{
341
- type: Component,
342
- args: [{
343
- selector: 'kendo-notification',
344
- template: `
345
- <ng-container kendoNotificationLocalizedMessages
346
- i18n-closeTitle="kendo.notification.closeTitle|The title of the close button"
347
- closeTitle="Close"
348
- >
349
- </ng-container>
350
- <div class="k-notification k-notification-base {{ notificationClasses() }}"
351
- [ngClass]="cssClass"
352
- [style.height.px]="height"
353
- [style.width.px]="width"
354
- role="alert"
355
- aria-live="polite"
356
- [attr.aria-describedby]="contentId"
357
- [attr.aria-label]="notificationLabel">
358
- <kendo-icon-wrapper
359
- *ngIf="type && type.icon && type.style !== 'none'"
360
- innerCssClass="k-notification-status"
361
- [name]="typeIconClass()"
362
- [svgIcon]="typeSVGIcon()"
363
- >
364
- </kendo-icon-wrapper>
365
- <div [id]="contentId" class="k-notification-content">
366
- <ng-template
367
- [ngIf]="templateRef"
368
- [ngTemplateOutlet]="templateRef">
369
- </ng-template>
370
- <ng-template
371
- [ngIf]="templateString">
372
- {{ templateString }}
373
- </ng-template>
374
- <ng-container #container></ng-container>
375
- </div>
376
-
377
- <span *ngIf="closable" class="k-notification-actions" aria-hidden="true">
378
- <span class="k-notification-action k-notification-close-action" [attr.title]="closeButtonTitle" (click)="onCloseClick()">
379
- <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
380
- </span>
381
- </span>
382
- </div>
383
- `,
384
- providers: [
385
- LocalizationService,
386
- {
387
- provide: L10N_PREFIX,
388
- useValue: 'kendo.notification'
389
- }
390
- ],
391
- standalone: true,
392
- imports: [LocalizedMessagesDirective, NgClass, NgIf, IconWrapperComponent, NgTemplateOutlet]
393
- }]
394
- }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.AnimationBuilder }, { type: i1.LocalizationService }]; }, propDecorators: { container: [{
395
- type: ViewChild,
396
- args: ['container', { read: ViewContainerRef, static: true }]
397
- }], templateRef: [{
398
- type: Input
399
- }], templateString: [{
400
- type: Input
401
- }], width: [{
402
- type: Input
403
- }], height: [{
404
- type: Input
405
- }], notificationLabel: [{
406
- type: Input
407
- }], cssClass: [{
408
- type: Input
409
- }], hideAfter: [{
410
- type: Input
411
- }], closable: [{
412
- type: Input
413
- }], type: [{
414
- type: Input
415
- }], animation: [{
416
- type: Input
417
- }], direction: [{
418
- type: HostBinding,
419
- args: ['attr.dir']
420
- }] } });
421
-
422
- /**
423
- * @hidden
424
- */
425
- class NotificationContainerComponent {
426
- constructor(element, renderer, resolver, ngZone) {
427
- this.element = element;
428
- this.renderer = renderer;
429
- this.resolver = resolver;
430
- this.ngZone = ngZone;
431
- this.id = '';
432
- this.notifications = [];
433
- /**/
434
- }
435
- ngOnDestroy() {
436
- this.notifications.forEach((notification) => {
437
- if (notification.closeClickSubscription) {
438
- notification.closeClickSubscription.unsubscribe();
439
- }
440
- });
441
- this.notifications = [];
442
- }
443
- addNotification(settings) {
444
- this.position = settings.position;
445
- this.id = `${this.position.horizontal} ${this.position.vertical}`;
446
- const factory = this.resolver.resolveComponentFactory(NotificationComponent);
447
- const notificationRef = this.container.createComponent(factory);
448
- this.applySettings(notificationRef, settings);
449
- let customComponent = null;
450
- if (typeof settings.content === 'function') {
451
- const customFactory = this.resolver.resolveComponentFactory(settings.content);
452
- customComponent = notificationRef.instance.container.createComponent(customFactory);
453
- }
454
- notificationRef.changeDetectorRef.detectChanges();
455
- this.notifications.push(notificationRef.instance);
456
- if (settings.appendTo) {
457
- this.applyAbsolutePosition(settings.appendTo);
458
- }
459
- this.applyPosition();
460
- this.applyContainerWrap();
461
- return {
462
- afterHide: notificationRef.instance.close,
463
- hide: () => notificationRef.instance.hide(customComponent),
464
- notification: notificationRef,
465
- content: customComponent || null,
466
- };
467
- }
468
- hide(notificationRef) {
469
- const instance = notificationRef.instance;
470
- const index = this.notifications.indexOf(instance);
471
- this.notifications.splice(index, 1);
472
- if (instance.closeClickSubscription) {
473
- instance.closeClickSubscription.unsubscribe();
474
- }
475
- instance.templateRef = null;
476
- instance.templateString = null;
477
- notificationRef.destroy();
478
- if (this.notifications.length > 0) {
479
- this.ngZone.onStable
480
- .asObservable()
481
- .pipe(take(1))
482
- .subscribe(() => {
483
- this.applyPosition();
484
- });
485
- }
486
- }
487
- applyContainerWrap() {
488
- const value = this.position.horizontal === 'right' ? 'wrap-reverse' : 'wrap';
489
- this.renderer.setStyle(this.group.nativeElement, 'flex-wrap', value);
490
- }
491
- applySettings(notificationRef, settings) {
492
- const notification = notificationRef.instance;
493
- const content = settings.content;
494
- const animation = settings.animation || null;
495
- notification.closeClickSubscription = notification.close.subscribe(() => this.hide(notificationRef));
496
- if (typeof content === 'string') {
497
- notification.templateString = content;
498
- }
499
- if (content instanceof TemplateRef) {
500
- notification.templateRef = content;
501
- }
502
- notification.animation = animation;
503
- const type = settings.type;
504
- if (type && type.style === undefined) {
505
- type.style = 'none';
506
- }
507
- if (type && type.icon === undefined) {
508
- type.icon = true;
509
- }
510
- notification.type = type;
511
- notification.closeTitle = settings.closeTitle;
512
- if (settings.cssClass) {
513
- notification.cssClass = settings.cssClass;
514
- }
515
- notification.closable = settings.closable;
516
- notification.hideAfter = settings.hideAfter;
517
- notification.width = settings.width;
518
- notification.height = settings.height;
519
- }
520
- applyAbsolutePosition(appendToContainer) {
521
- const appendTo = appendToContainer.element.nativeElement;
522
- const el = this.element.nativeElement.children[0];
523
- if (window.getComputedStyle(appendTo).position === 'static') {
524
- this.renderer.setStyle(appendTo, 'position', 'relative');
525
- }
526
- this.renderer.setStyle(el, 'position', 'absolute');
527
- }
528
- applyPosition() {
529
- const element = this.element.nativeElement.children[0];
530
- const elementHalfWidth = element.getBoundingClientRect().width / 2;
531
- const positionStyles = this.setContainerPosition(this.position, elementHalfWidth);
532
- Object.keys(positionStyles).forEach((cssStyle) => {
533
- element.style[cssStyle] = positionStyles[cssStyle];
534
- });
535
- }
536
- setContainerPosition(position, offsetMargin) {
537
- const positionLayout = {
538
- horizontal: {
539
- left: { left: 0, alignItems: 'flex-start' },
540
- right: { right: 0, alignItems: 'flex-start' },
541
- center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' },
542
- },
543
- vertical: {
544
- top: { top: 0 },
545
- bottom: { bottom: 0 },
546
- },
547
- };
548
- const horizontal = positionLayout.horizontal[position.horizontal];
549
- const vertical = positionLayout.vertical[position.vertical];
550
- return Object.assign({}, horizontal, vertical);
551
- }
552
- }
553
- NotificationContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
554
- NotificationContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationContainerComponent, isStandalone: true, selector: "kendo-notification-container", inputs: { id: "id" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "group", first: true, predicate: ["group"], descendants: true, static: true }], ngImport: i0, template: `
555
- <div #group class="k-notification-group">
556
- <ng-container #container></ng-container>
557
- </div>
558
- `, isInline: true });
559
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationContainerComponent, decorators: [{
560
- type: Component,
561
- args: [{
562
- selector: 'kendo-notification-container',
563
- template: `
564
- <div #group class="k-notification-group">
565
- <ng-container #container></ng-container>
566
- </div>
567
- `,
568
- standalone: true,
569
- }]
570
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }]; }, propDecorators: { container: [{
571
- type: ViewChild,
572
- args: ['container', { read: ViewContainerRef, static: true }]
573
- }], group: [{
574
- type: ViewChild,
575
- args: ['group', { static: true }]
576
- }], id: [{
577
- type: Input
578
- }] } });
579
-
580
- /**
581
- * Used to inject the Notification container. If not provided, the first root component of
582
- * the application is used.
583
- *
584
- * > The `NOTIFICATION_CONTAINER` can be used only with the [`NotificationService`]({% slug api_notification_notificationservice %}) class.
585
- *
586
- * @example
587
- *
588
- * ```ts-no-run
589
- * // Import the Notification module
590
- * import { NotificationModule, NOTIFICATION_CONTAINER } from '@progress/kendo-angular-notification';
591
- *
592
- * // The browser platform with a compiler
593
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
594
- *
595
- * import { ElementRef, NgModule } from '@angular/core';
596
- *
597
- * // Import the app component
598
- * import { AppComponent } from './app.component';
599
- *
600
- * // Define the app module
601
- * _@NgModule({
602
- * declarations: [AppComponent], // declare app component
603
- * imports: [BrowserModule, NotificationModule], // import Notification module
604
- * bootstrap: [AppComponent],
605
- * providers: [{
606
- * provide: NOTIFICATION_CONTAINER,
607
- * useFactory: () => {
608
- * //return the container ElementRef, where the notification will be injected
609
- * return { nativeElement: document.body } as ElementRef;
610
- * }
611
- * }]
612
- * })
613
- * export class AppModule {}
614
- *
615
- * // Compile and launch the module
616
- * platformBrowserDynamic().bootstrapModule(AppModule);
617
- * ```
618
- */
619
- const NOTIFICATION_CONTAINER = new InjectionToken('Notification Container');
620
- /**
621
- * A service for opening Notification components dynamically
622
- * ([see example]({% slug overview_notification %})).
623
- *
624
- * @export
625
- * @class NotificationService
626
- */
627
- class NotificationService {
628
- /**
629
- * @hidden
630
- */
631
- constructor(resolver, injector, container) {
632
- this.resolver = resolver;
633
- this.injector = injector;
634
- this.container = container;
635
- this.notificationContainers = [];
636
- this.position = { horizontal: 'right', vertical: 'top' };
637
- }
638
- /**
639
- * Opens a Notification component. Created Notification are mounted
640
- * in the DOM directly in the root application component.
641
- *
642
- * @param {NotificationSettings} settings - The settings which define the Notification.
643
- *
644
- * @returns {NotificationRef} - A reference to the Notification object and the convenience properties.
645
- */
646
- show(settings) {
647
- if (!settings) {
648
- throw new Error('NotificationSettings settings are required');
649
- }
650
- const target = this.findGroupContainer(settings);
651
- const position = settings.position || this.position;
652
- const currentId = `${position.horizontal} ${position.vertical}`;
653
- let container;
654
- let notificationRef;
655
- let notificationContainer = this.notificationContainers.find(c => target.nativeElement.contains(c.element.nativeElement) && c.id === currentId);
656
- if (!notificationContainer) {
657
- container = this.resolver
658
- .resolveComponentFactory(NotificationContainerComponent)
659
- .create(this.injector);
660
- notificationContainer = container.instance;
661
- this.appRef.attachView(container.hostView);
662
- const hostViewElement = container.location.nativeElement;
663
- const groupContainer = this.findGroupContainer(settings);
664
- if (!groupContainer) {
665
- throw new Error(`
666
- View Container not found! Inject the NOTIFICATION_CONTAINER or define a specific ViewContainerRef via
667
- the appendTo option. See https://www.telerik.com/kendo-angular-ui/components/notification/api/NOTIFICATION_CONTAINER/
668
- for more details.
669
- `);
670
- }
671
- groupContainer.nativeElement.appendChild(hostViewElement);
672
- this.notificationContainers.push(notificationContainer);
673
- }
674
- settings.position = position;
675
- // eslint-disable-next-line prefer-const
676
- notificationRef = notificationContainer.addNotification(settings);
677
- return notificationRef;
678
- }
679
- get appRef() {
680
- if (!this.applicationRef) {
681
- this.applicationRef = this.injector.get(ApplicationRef);
682
- }
683
- return this.applicationRef;
684
- }
685
- findGroupContainer(settings) {
686
- let container;
687
- if (settings.appendTo) {
688
- container = settings.appendTo.element;
689
- }
690
- else if (this.container) {
691
- container = this.container;
692
- }
693
- else {
694
- const appRoot = this.appRef.components && this.appRef.components[0];
695
- container = appRoot ? appRoot.location : null;
696
- }
697
- return container;
698
- }
699
- }
700
- NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: NOTIFICATION_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
701
- NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, providedIn: 'root' });
702
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationService, decorators: [{
703
- type: Injectable,
704
- args: [{
705
- providedIn: 'root'
706
- }]
707
- }], ctorParameters: function () {
708
- return [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ElementRef, decorators: [{
709
- type: Inject,
710
- args: [NOTIFICATION_CONTAINER]
711
- }, {
712
- type: Optional
713
- }] }];
714
- } });
715
-
716
- /**
717
- * Utility array that contains all `@progress/kendo-angular-notification` related components and directives
718
- */
719
- const KENDO_NOTIFICATION = [
720
- NotificationComponent,
721
- NotificationContainerComponent
722
- ];
723
-
724
- // IMPORTANT: NgModule export kept for backwards compatibility
725
- /**
726
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
727
- * definition for the Notification component.
728
- *
729
- * The package exports:
730
- * - `NotificationService`&mdash;The Notification service class.
731
- *
732
- * @example
733
- *
734
- * ```ts-no-run
735
- * // Import the Notification module
736
- * import { NotificationModule } from '@progress/kendo-angular-notification';
737
- *
738
- * // The browser platform with a compiler
739
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
740
- *
741
- * import { NgModule } from '@angular/core';
742
- *
743
- * // Import the app component
744
- * _@NgModule{{
745
- * declarations: [AppComponent], // declare app component
746
- * imports: [BrowserModule, NotificationModule], // import NotificationModule module
747
- * bootstrap: [AppComponent]
748
- * }}
749
- * export class AppModule {}
750
- *
751
- * // Compile and launch the module
752
- * platformBrowserDynamic().bootstrapModule(AppModule);
753
- * ```
754
- */
755
- class NotificationModule {
756
- }
757
- NotificationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
758
- NotificationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NotificationModule, imports: [NotificationComponent, NotificationContainerComponent], exports: [NotificationComponent, NotificationContainerComponent] });
759
- NotificationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationModule, providers: [NotificationService, IconsService], imports: [KENDO_NOTIFICATION] });
760
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationModule, decorators: [{
761
- type: NgModule,
762
- args: [{
763
- imports: [...KENDO_NOTIFICATION],
764
- exports: [...KENDO_NOTIFICATION],
765
- providers: [NotificationService, IconsService]
766
- }]
767
- }] });
768
-
769
- /**
770
- * Generated bundle index. Do not edit.
771
- */
772
-
773
- export { KENDO_NOTIFICATION, NOTIFICATION_CONTAINER, NotificationComponent, NotificationContainerComponent, NotificationModule, NotificationService, NotificationSettings };
774
-