@progress/kendo-angular-notification 16.10.1-develop.1 → 16.10.1-develop.2

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 (6) hide show
  1. package/esm2020/notification.container.component.mjs +29 -19
  2. package/esm2020/package-metadata.mjs +2 -2
  3. package/fesm2015/progress-kendo-angular-notification.mjs +29 -20
  4. package/fesm2020/progress-kendo-angular-notification.mjs +29 -20
  5. package/notification.container.component.d.ts +3 -2
  6. package/package.json +5 -5
package/esm2020/notification.container.component.mjs CHANGED
@@ -2,19 +2,22 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, Input, ElementRef, ComponentFactoryResolver, ViewContainerRef, Renderer2, ViewChild, TemplateRef } from '@angular/core';
5
+ import { Component, Input, ElementRef, ComponentFactoryResolver, ViewContainerRef, Renderer2, ViewChild, TemplateRef, NgZone, } from '@angular/core';
6
6
  import { NotificationComponent } from './notification.component';
7
+ import { take } from 'rxjs/operators';
7
8
  import * as i0 from "@angular/core";
8
9
  /**
9
10
  * @hidden
10
11
  */
11
12
  export class NotificationContainerComponent {
12
- constructor(element, renderer, resolver) {
13
+ constructor(element, renderer, resolver, ngZone) {
13
14
  this.element = element;
14
15
  this.renderer = renderer;
15
16
  this.resolver = resolver;
17
+ this.ngZone = ngZone;
16
18
  this.id = '';
17
19
  this.notifications = [];
20
+ /**/
18
21
  }
19
22
  ngOnDestroy() {
20
23
  this.notifications.forEach((notification) => {
@@ -46,7 +49,7 @@ export class NotificationContainerComponent {
46
49
  afterHide: notificationRef.instance.close,
47
50
  hide: () => notificationRef.instance.hide(customComponent),
48
51
  notification: notificationRef,
49
- content: customComponent || null
52
+ content: customComponent || null,
50
53
  };
51
54
  }
52
55
  hide(notificationRef) {
@@ -59,6 +62,14 @@ export class NotificationContainerComponent {
59
62
  instance.templateRef = null;
60
63
  instance.templateString = null;
61
64
  notificationRef.destroy();
65
+ if (this.notifications.length > 0) {
66
+ this.ngZone.onStable
67
+ .asObservable()
68
+ .pipe(take(1))
69
+ .subscribe(() => {
70
+ this.applyPosition();
71
+ });
72
+ }
62
73
  }
63
74
  applyContainerWrap() {
64
75
  const value = this.position.horizontal === 'right' ? 'wrap-reverse' : 'wrap';
@@ -68,8 +79,7 @@ export class NotificationContainerComponent {
68
79
  const notification = notificationRef.instance;
69
80
  const content = settings.content;
70
81
  const animation = settings.animation || null;
71
- notification.closeClickSubscription = notification.close
72
- .subscribe(() => this.hide(notificationRef));
82
+ notification.closeClickSubscription = notification.close.subscribe(() => this.hide(notificationRef));
73
83
  if (typeof content === 'string') {
74
84
  notification.templateString = content;
75
85
  }
@@ -115,36 +125,36 @@ export class NotificationContainerComponent {
115
125
  horizontal: {
116
126
  left: { left: 0, alignItems: 'flex-start' },
117
127
  right: { right: 0, alignItems: 'flex-start' },
118
- center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' }
128
+ center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' },
119
129
  },
120
130
  vertical: {
121
131
  top: { top: 0 },
122
- bottom: { bottom: 0 }
123
- }
132
+ bottom: { bottom: 0 },
133
+ },
124
134
  };
125
135
  const horizontal = positionLayout.horizontal[position.horizontal];
126
136
  const vertical = positionLayout.vertical[position.vertical];
127
137
  return Object.assign({}, horizontal, vertical);
128
138
  }
129
139
  }
130
- 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 }], target: i0.ɵɵFactoryTarget.Component });
140
+ 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 });
131
141
  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: `
132
- <div #group class="k-notification-group">
133
- <ng-container #container></ng-container>
134
- </div>
135
- `, isInline: true });
142
+ <div #group class="k-notification-group">
143
+ <ng-container #container></ng-container>
144
+ </div>
145
+ `, isInline: true });
136
146
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationContainerComponent, decorators: [{
137
147
  type: Component,
138
148
  args: [{
139
149
  selector: 'kendo-notification-container',
140
150
  template: `
141
- <div #group class="k-notification-group">
142
- <ng-container #container></ng-container>
143
- </div>
144
- `,
145
- standalone: true
151
+ <div #group class="k-notification-group">
152
+ <ng-container #container></ng-container>
153
+ </div>
154
+ `,
155
+ standalone: true,
146
156
  }]
147
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { container: [{
157
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }]; }, propDecorators: { container: [{
148
158
  type: ViewChild,
149
159
  args: ['container', { read: ViewContainerRef, static: true }]
150
160
  }], group: [{
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-notification',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1727264670,
13
- version: '16.10.1-develop.1',
12
+ publishDate: 1727268134,
13
+ version: '16.10.1-develop.2',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2015/progress-kendo-angular-notification.mjs CHANGED
@@ -76,8 +76,8 @@ const packageMetadata = {
76
76
  name: '@progress/kendo-angular-notification',
77
77
  productName: 'Kendo UI for Angular',
78
78
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
79
- publishDate: 1727264670,
80
- version: '16.10.1-develop.1',
79
+ publishDate: 1727268134,
80
+ version: '16.10.1-develop.2',
81
81
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
82
82
  };
83
83
 
@@ -423,12 +423,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
423
423
  * @hidden
424
424
  */
425
425
  class NotificationContainerComponent {
426
- constructor(element, renderer, resolver) {
426
+ constructor(element, renderer, resolver, ngZone) {
427
427
  this.element = element;
428
428
  this.renderer = renderer;
429
429
  this.resolver = resolver;
430
+ this.ngZone = ngZone;
430
431
  this.id = '';
431
432
  this.notifications = [];
433
+ /**/
432
434
  }
433
435
  ngOnDestroy() {
434
436
  this.notifications.forEach((notification) => {
@@ -460,7 +462,7 @@ class NotificationContainerComponent {
460
462
  afterHide: notificationRef.instance.close,
461
463
  hide: () => notificationRef.instance.hide(customComponent),
462
464
  notification: notificationRef,
463
- content: customComponent || null
465
+ content: customComponent || null,
464
466
  };
465
467
  }
466
468
  hide(notificationRef) {
@@ -473,6 +475,14 @@ class NotificationContainerComponent {
473
475
  instance.templateRef = null;
474
476
  instance.templateString = null;
475
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
+ }
476
486
  }
477
487
  applyContainerWrap() {
478
488
  const value = this.position.horizontal === 'right' ? 'wrap-reverse' : 'wrap';
@@ -482,8 +492,7 @@ class NotificationContainerComponent {
482
492
  const notification = notificationRef.instance;
483
493
  const content = settings.content;
484
494
  const animation = settings.animation || null;
485
- notification.closeClickSubscription = notification.close
486
- .subscribe(() => this.hide(notificationRef));
495
+ notification.closeClickSubscription = notification.close.subscribe(() => this.hide(notificationRef));
487
496
  if (typeof content === 'string') {
488
497
  notification.templateString = content;
489
498
  }
@@ -529,36 +538,36 @@ class NotificationContainerComponent {
529
538
  horizontal: {
530
539
  left: { left: 0, alignItems: 'flex-start' },
531
540
  right: { right: 0, alignItems: 'flex-start' },
532
- center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' }
541
+ center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' },
533
542
  },
534
543
  vertical: {
535
544
  top: { top: 0 },
536
- bottom: { bottom: 0 }
537
- }
545
+ bottom: { bottom: 0 },
546
+ },
538
547
  };
539
548
  const horizontal = positionLayout.horizontal[position.horizontal];
540
549
  const vertical = positionLayout.vertical[position.vertical];
541
550
  return Object.assign({}, horizontal, vertical);
542
551
  }
543
552
  }
544
- 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 }], target: i0.ɵɵFactoryTarget.Component });
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 });
545
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: `
546
- <div #group class="k-notification-group">
547
- <ng-container #container></ng-container>
548
- </div>
549
- `, isInline: true });
555
+ <div #group class="k-notification-group">
556
+ <ng-container #container></ng-container>
557
+ </div>
558
+ `, isInline: true });
550
559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationContainerComponent, decorators: [{
551
560
  type: Component,
552
561
  args: [{
553
562
  selector: 'kendo-notification-container',
554
563
  template: `
555
- <div #group class="k-notification-group">
556
- <ng-container #container></ng-container>
557
- </div>
558
- `,
559
- standalone: true
564
+ <div #group class="k-notification-group">
565
+ <ng-container #container></ng-container>
566
+ </div>
567
+ `,
568
+ standalone: true,
560
569
  }]
561
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { container: [{
570
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }]; }, propDecorators: { container: [{
562
571
  type: ViewChild,
563
572
  args: ['container', { read: ViewContainerRef, static: true }]
564
573
  }], group: [{
package/fesm2020/progress-kendo-angular-notification.mjs CHANGED
@@ -76,8 +76,8 @@ const packageMetadata = {
76
76
  name: '@progress/kendo-angular-notification',
77
77
  productName: 'Kendo UI for Angular',
78
78
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
79
- publishDate: 1727264670,
80
- version: '16.10.1-develop.1',
79
+ publishDate: 1727268134,
80
+ version: '16.10.1-develop.2',
81
81
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
82
82
  };
83
83
 
@@ -423,12 +423,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
423
423
  * @hidden
424
424
  */
425
425
  class NotificationContainerComponent {
426
- constructor(element, renderer, resolver) {
426
+ constructor(element, renderer, resolver, ngZone) {
427
427
  this.element = element;
428
428
  this.renderer = renderer;
429
429
  this.resolver = resolver;
430
+ this.ngZone = ngZone;
430
431
  this.id = '';
431
432
  this.notifications = [];
433
+ /**/
432
434
  }
433
435
  ngOnDestroy() {
434
436
  this.notifications.forEach((notification) => {
@@ -460,7 +462,7 @@ class NotificationContainerComponent {
460
462
  afterHide: notificationRef.instance.close,
461
463
  hide: () => notificationRef.instance.hide(customComponent),
462
464
  notification: notificationRef,
463
- content: customComponent || null
465
+ content: customComponent || null,
464
466
  };
465
467
  }
466
468
  hide(notificationRef) {
@@ -473,6 +475,14 @@ class NotificationContainerComponent {
473
475
  instance.templateRef = null;
474
476
  instance.templateString = null;
475
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
+ }
476
486
  }
477
487
  applyContainerWrap() {
478
488
  const value = this.position.horizontal === 'right' ? 'wrap-reverse' : 'wrap';
@@ -482,8 +492,7 @@ class NotificationContainerComponent {
482
492
  const notification = notificationRef.instance;
483
493
  const content = settings.content;
484
494
  const animation = settings.animation || null;
485
- notification.closeClickSubscription = notification.close
486
- .subscribe(() => this.hide(notificationRef));
495
+ notification.closeClickSubscription = notification.close.subscribe(() => this.hide(notificationRef));
487
496
  if (typeof content === 'string') {
488
497
  notification.templateString = content;
489
498
  }
@@ -529,36 +538,36 @@ class NotificationContainerComponent {
529
538
  horizontal: {
530
539
  left: { left: 0, alignItems: 'flex-start' },
531
540
  right: { right: 0, alignItems: 'flex-start' },
532
- center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' }
541
+ center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' },
533
542
  },
534
543
  vertical: {
535
544
  top: { top: 0 },
536
- bottom: { bottom: 0 }
537
- }
545
+ bottom: { bottom: 0 },
546
+ },
538
547
  };
539
548
  const horizontal = positionLayout.horizontal[position.horizontal];
540
549
  const vertical = positionLayout.vertical[position.vertical];
541
550
  return Object.assign({}, horizontal, vertical);
542
551
  }
543
552
  }
544
- 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 }], target: i0.ɵɵFactoryTarget.Component });
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 });
545
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: `
546
- <div #group class="k-notification-group">
547
- <ng-container #container></ng-container>
548
- </div>
549
- `, isInline: true });
555
+ <div #group class="k-notification-group">
556
+ <ng-container #container></ng-container>
557
+ </div>
558
+ `, isInline: true });
550
559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationContainerComponent, decorators: [{
551
560
  type: Component,
552
561
  args: [{
553
562
  selector: 'kendo-notification-container',
554
563
  template: `
555
- <div #group class="k-notification-group">
556
- <ng-container #container></ng-container>
557
- </div>
558
- `,
559
- standalone: true
564
+ <div #group class="k-notification-group">
565
+ <ng-container #container></ng-container>
566
+ </div>
567
+ `,
568
+ standalone: true,
560
569
  }]
561
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { container: [{
570
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }]; }, propDecorators: { container: [{
562
571
  type: ViewChild,
563
572
  args: ['container', { read: ViewContainerRef, static: true }]
564
573
  }], group: [{
package/notification.container.component.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { ElementRef, ComponentFactoryResolver, ViewContainerRef, OnDestroy, Renderer2, ComponentRef } from '@angular/core';
5
+ import { ElementRef, ComponentFactoryResolver, ViewContainerRef, OnDestroy, Renderer2, ComponentRef, NgZone } from '@angular/core';
6
6
  import { NotificationSettings } from './models/notification-settings';
7
7
  import { NotificationComponent } from './notification.component';
8
8
  import { NotificationRef } from './models/notification-ref';
@@ -14,12 +14,13 @@ export declare class NotificationContainerComponent implements OnDestroy {
14
14
  element: ElementRef;
15
15
  renderer: Renderer2;
16
16
  private resolver;
17
+ private ngZone;
17
18
  container: ViewContainerRef;
18
19
  group: ElementRef;
19
20
  id: string;
20
21
  notifications: NotificationComponent[];
21
22
  private position;
22
- constructor(element: ElementRef, renderer: Renderer2, resolver: ComponentFactoryResolver);
23
+ constructor(element: ElementRef, renderer: Renderer2, resolver: ComponentFactoryResolver, ngZone: NgZone);
23
24
  ngOnDestroy(): void;
24
25
  addNotification(settings: NotificationSettings): NotificationRef;
25
26
  hide(notificationRef: ComponentRef<NotificationComponent>): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-notification",
3
- "version": "16.10.1-develop.1",
3
+ "version": "16.10.1-develop.2",
4
4
  "description": "Kendo UI Notification for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -21,14 +21,14 @@
21
21
  "@angular/core": "15 - 18",
22
22
  "@angular/platform-browser": "15 - 18",
23
23
  "@progress/kendo-licensing": "^1.0.2",
24
- "@progress/kendo-angular-common": "16.10.1-develop.1",
25
- "@progress/kendo-angular-l10n": "16.10.1-develop.1",
26
- "@progress/kendo-angular-icons": "16.10.1-develop.1",
24
+ "@progress/kendo-angular-common": "16.10.1-develop.2",
25
+ "@progress/kendo-angular-l10n": "16.10.1-develop.2",
26
+ "@progress/kendo-angular-icons": "16.10.1-develop.2",
27
27
  "rxjs": "^6.5.3 || ^7.0.0"
28
28
  },
29
29
  "dependencies": {
30
30
  "tslib": "^2.3.1",
31
- "@progress/kendo-angular-schematics": "16.10.1-develop.1"
31
+ "@progress/kendo-angular-schematics": "16.10.1-develop.2"
32
32
  },
33
33
  "schematics": "./schematics/collection.json",
34
34
  "module": "fesm2015/progress-kendo-angular-notification.mjs",