@progress/kendo-angular-notification 21.4.1 → 22.0.0-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.
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
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';
6
+ import { forwardRef, Input, Directive, EventEmitter, ViewContainerRef, HostBinding, ViewChild, Component, TemplateRef, InjectionToken, ApplicationRef, Inject, Optional, Injectable, NgModule } from '@angular/core';
7
7
  import { NgClass, NgTemplateOutlet } from '@angular/common';
8
8
  import * as i1$1 from '@angular/animations';
9
9
  import { style, animate } from '@angular/animations';
@@ -11,7 +11,7 @@ import { take } from 'rxjs/operators';
11
11
  import { validatePackage } from '@progress/kendo-licensing';
12
12
  import * as i1 from '@progress/kendo-angular-l10n';
13
13
  import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
14
- import { xIcon, checkOutlineIcon, exclamationCircleIcon, xOutlineIcon, infoCircleIcon } from '@progress/kendo-svg-icons';
14
+ import { xIcon, infoCircleIcon, xOutlineIcon, exclamationCircleIcon, checkOutlineIcon } from '@progress/kendo-svg-icons';
15
15
  import { guid } from '@progress/kendo-angular-common';
16
16
  import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
17
17
 
@@ -117,8 +117,8 @@ const packageMetadata = {
117
117
  productName: 'Kendo UI for Angular',
118
118
  productCode: 'KENDOUIANGULAR',
119
119
  productCodes: ['KENDOUIANGULAR'],
120
- publishDate: 1768393350,
121
- version: '21.4.1',
120
+ publishDate: 1768396061,
121
+ version: '22.0.0-develop.1',
122
122
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
123
123
  };
124
124
 
@@ -172,15 +172,15 @@ class LocalizedMessagesDirective extends ComponentMessages {
172
172
  super();
173
173
  this.service = service;
174
174
  }
175
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
176
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoNotificationLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
175
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
176
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoNotificationLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
177
177
  {
178
178
  provide: ComponentMessages,
179
179
  useExisting: forwardRef(() => LocalizedMessagesDirective)
180
180
  }
181
181
  ], usesInheritance: true, ngImport: i0 });
182
182
  }
183
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
183
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
184
184
  type: Directive,
185
185
  args: [{
186
186
  providers: [
@@ -356,8 +356,8 @@ class NotificationComponent {
356
356
  fadeAnimation(duration, onclose) {
357
357
  return onclose ? fadeCloseAnimation(duration) : fadeAnimation(duration);
358
358
  }
359
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
360
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
359
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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 });
360
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: [
361
361
  LocalizationService,
362
362
  {
363
363
  provide: L10N_PREFIX,
@@ -407,7 +407,7 @@ class NotificationComponent {
407
407
  </div>
408
408
  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoNotificationLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
409
409
  }
410
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationComponent, decorators: [{
410
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationComponent, decorators: [{
411
411
  type: Component,
412
412
  args: [{
413
413
  selector: 'kendo-notification',
@@ -632,14 +632,14 @@ class NotificationContainerComponent {
632
632
  const vertical = positionLayout.vertical[position.vertical];
633
633
  return Object.assign({}, horizontal, vertical);
634
634
  }
635
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
636
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: `
635
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
636
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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: `
637
637
  <div #group class="k-notification-group">
638
638
  <ng-container #container></ng-container>
639
639
  </div>
640
640
  `, isInline: true });
641
641
  }
642
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationContainerComponent, decorators: [{
642
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationContainerComponent, decorators: [{
643
643
  type: Component,
644
644
  args: [{
645
645
  selector: 'kendo-notification-container',
@@ -776,10 +776,10 @@ class NotificationService {
776
776
  }
777
777
  return container;
778
778
  }
779
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: NOTIFICATION_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
780
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationService, providedIn: 'root' });
779
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: NOTIFICATION_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
780
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationService, providedIn: 'root' });
781
781
  }
782
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationService, decorators: [{
782
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationService, decorators: [{
783
783
  type: Injectable,
784
784
  args: [{
785
785
  providedIn: 'root'
@@ -853,11 +853,11 @@ const KENDO_NOTIFICATION = [
853
853
  * ```
854
854
  */
855
855
  class NotificationModule {
856
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
857
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, imports: [NotificationComponent, NotificationContainerComponent], exports: [NotificationComponent, NotificationContainerComponent] });
858
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, providers: [NotificationService, IconsService], imports: [NotificationComponent] });
856
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
857
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: NotificationModule, imports: [NotificationComponent, NotificationContainerComponent], exports: [NotificationComponent, NotificationContainerComponent] });
858
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationModule, providers: [NotificationService, IconsService], imports: [NotificationComponent] });
859
859
  }
860
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, decorators: [{
860
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NotificationModule, decorators: [{
861
861
  type: NgModule,
862
862
  args: [{
863
863
  imports: [...KENDO_NOTIFICATION],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-notification",
3
- "version": "21.4.1",
3
+ "version": "22.0.0-develop.1",
4
4
  "description": "Kendo UI Notification for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -13,28 +13,22 @@
13
13
  "Kendo UI"
14
14
  ],
15
15
  "@progress": {
16
- "friendlyName": "Notification",
17
- "package": {
18
- "productName": "Kendo UI for Angular",
19
- "productCode": "KENDOUIANGULAR",
20
- "publishDate": 1768393350,
21
- "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
22
- }
16
+ "friendlyName": "Notification"
23
17
  },
24
18
  "peerDependencies": {
25
- "@angular/animations": "18 - 21",
26
- "@angular/common": "18 - 21",
27
- "@angular/core": "18 - 21",
28
- "@angular/platform-browser": "18 - 21",
19
+ "@angular/animations": "19 - 21",
20
+ "@angular/common": "19 - 21",
21
+ "@angular/core": "19 - 21",
22
+ "@angular/platform-browser": "19 - 21",
29
23
  "@progress/kendo-licensing": "^1.7.0",
30
- "@progress/kendo-angular-common": "21.4.1",
31
- "@progress/kendo-angular-l10n": "21.4.1",
32
- "@progress/kendo-angular-icons": "21.4.1",
24
+ "@progress/kendo-angular-common": "22.0.0-develop.1",
25
+ "@progress/kendo-angular-l10n": "22.0.0-develop.1",
26
+ "@progress/kendo-angular-icons": "22.0.0-develop.1",
33
27
  "rxjs": "^6.5.3 || ^7.0.0"
34
28
  },
35
29
  "dependencies": {
36
30
  "tslib": "^2.3.1",
37
- "@progress/kendo-angular-schematics": "21.4.1"
31
+ "@progress/kendo-angular-schematics": "22.0.0-develop.1"
38
32
  },
39
33
  "schematics": "./schematics/collection.json",
40
34
  "module": "fesm2022/progress-kendo-angular-notification.mjs",
@@ -45,8 +39,6 @@
45
39
  },
46
40
  ".": {
47
41
  "types": "./index.d.ts",
48
- "esm2022": "./esm2022/progress-kendo-angular-notification.mjs",
49
- "esm": "./esm2022/progress-kendo-angular-notification.mjs",
50
42
  "default": "./fesm2022/progress-kendo-angular-notification.mjs"
51
43
  }
52
44
  },
@@ -1,35 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { NotificationComponent } from "./notification.component";
6
- import { NotificationContainerComponent } from "./notification.container.component";
7
- /**
8
- * Use this utility array to access all `@progress/kendo-angular-notification`-related components and directives in a standalone Angular component.
9
- *
10
- * @example
11
- * ```typescript
12
- * import { Component } from '@angular/core';
13
- * import { KENDO_NOTIFICATION } from '@progress/kendo-angular-notification';
14
- *
15
- * @Component({
16
- * selector: 'my-app',
17
- * standalone: true,
18
- * imports: [KENDO_NOTIFICATION, KENDO_BUTTON],
19
- * template: `<button kendoButton (click)="show()">Save data</button>`
20
- * })
21
- * export class AppComponent {
22
- * constructor(private notificationService: NotificationService) {}
23
- *
24
- * public show(): void {
25
- * this.notificationService.show({
26
- * content: 'Data saved successfully',
27
- * });
28
- * }
29
- * }
30
- * ```
31
- */
32
- export const KENDO_NOTIFICATION = [
33
- NotificationComponent,
34
- NotificationContainerComponent
35
- ];
package/esm2022/index.mjs DELETED
@@ -1,11 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export { NotificationSettings } from './models/notification-settings';
6
- export { NotificationComponent } from './notification.component';
7
- export { NotificationService, NOTIFICATION_CONTAINER } from './services/notification.service';
8
- export { NotificationModule } from './notification.module';
9
- // WRT error NG3001: Unsupported private class
10
- export { NotificationContainerComponent } from './notification.container.component';
11
- export * from './directives';
@@ -1,44 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Directive, forwardRef, Input } from '@angular/core';
6
- import { ComponentMessages, LocalizationService } from '@progress/kendo-angular-l10n';
7
- import * as i0 from "@angular/core";
8
- import * as i1 from "@progress/kendo-angular-l10n";
9
- /**
10
- * @hidden
11
- */
12
- export class LocalizedMessagesDirective extends ComponentMessages {
13
- service;
14
- /**
15
- * The title of the close button.
16
- */
17
- closeTitle;
18
- constructor(service) {
19
- super();
20
- this.service = service;
21
- }
22
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
23
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoNotificationLocalizedMessages]", inputs: { closeTitle: "closeTitle" }, providers: [
24
- {
25
- provide: ComponentMessages,
26
- useExisting: forwardRef(() => LocalizedMessagesDirective)
27
- }
28
- ], usesInheritance: true, ngImport: i0 });
29
- }
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
31
- type: Directive,
32
- args: [{
33
- providers: [
34
- {
35
- provide: ComponentMessages,
36
- useExisting: forwardRef(() => LocalizedMessagesDirective)
37
- }
38
- ],
39
- selector: `[kendoNotificationLocalizedMessages]`,
40
- standalone: true
41
- }]
42
- }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { closeTitle: [{
43
- type: Input
44
- }] } });
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,97 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export class NotificationSettings {
6
- /**
7
- * Defines the content of the Notification.
8
- */
9
- content;
10
- /**
11
- * Specifies the time in milliseconds after which the
12
- * Notification will hide
13
- * ([see example](slug:hiding_notifications#toc-defining-a-delay-before-hiding)).
14
- *
15
- * @default 5000
16
- */
17
- hideAfter = 5000;
18
- /**
19
- * Defines the position of the Notification
20
- * ([see example]({% slug positioning_notification %})).
21
- *
22
- * The possible values are:
23
- * * `horizontal: 'left'|'center'|'right'`
24
- * * `vertical: 'top'|'bottom'`
25
- *
26
- * @default { horizontal: 'right', vertical: 'top' }
27
- */
28
- position = { horizontal: 'right', vertical: 'top' };
29
- /**
30
- * Specifies the animation settings of the Notification
31
- * ([see example]({% slug animations_notification %})).
32
- *
33
- * The possible values are:
34
- * * `duration`&mdash;Accepts a number in milliseconds. Defaults to `500ms`.
35
- * * `type?: 'slide'| (Default) 'fade'`
36
- *
37
- * @default { type: 'fade', duration: 500 }
38
- */
39
- animation = { type: 'fade', duration: 500 };
40
- /**
41
- * Specifies if the Notification will require a user action to hide.
42
- * If you set the property 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
- * @default false
50
- */
51
- closable = false;
52
- /**
53
- * Specifies the title of the close button.
54
- */
55
- closeTitle;
56
- /**
57
- * Specifies the type of the Notification
58
- * ([see example]({% slug types_notification %})).
59
- *
60
- * The possible values are:
61
- * * `style: (Default) 'none'|'success'|'error'|'warning'|'info'`
62
- * * `icon: 'true'|'false'`
63
- *
64
- * @default { style: 'none', icon: true }
65
- */
66
- type = { style: 'none', icon: true };
67
- /**
68
- * Specifies the width of the Notification.
69
- */
70
- width;
71
- /**
72
- * Specifies the height of the Notification.
73
- */
74
- height;
75
- /**
76
- * The value of the Notification element `aria-label` attribute.
77
- *
78
- * @default 'Notification'
79
- */
80
- notificationLabel = 'Notification';
81
- /**
82
- * Specifies a list of CSS classes that you add to the Notification.
83
- * To apply CSS rules to the component, set `encapsulation` to `ViewEncapsulation.None`
84
- * ([see example](slug:overview_notification)).
85
- *
86
- * > To style the content of the Notification, use the `cssClass` property binding.
87
- */
88
- cssClass;
89
- /**
90
- * Defines the container to which the Notification will be appended
91
- * ([see example]({% slug dynamic_containers %})).
92
- *
93
- * If not provided, the Notification will be placed in the root component
94
- * of the application or in the `body` element of the document.
95
- */
96
- appendTo;
97
- }
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,314 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, EventEmitter, HostBinding, Input, TemplateRef, ChangeDetectorRef, ViewChild, ViewContainerRef, ElementRef, Renderer2 } from '@angular/core';
6
- import { NgClass, NgTemplateOutlet } from '@angular/common';
7
- import { AnimationBuilder } from '@angular/animations';
8
- import { take } from 'rxjs/operators';
9
- import { validatePackage } from '@progress/kendo-licensing';
10
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
11
- import { checkOutlineIcon, exclamationCircleIcon, infoCircleIcon, xIcon, xOutlineIcon } from '@progress/kendo-svg-icons';
12
- import { guid } from '@progress/kendo-angular-common';
13
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
14
- import { packageMetadata } from './package-metadata';
15
- import { fadeAnimation, fadeCloseAnimation, slideAnimation, slideCloseAnimation } from './utils/animations';
16
- import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
17
- import * as i0 from "@angular/core";
18
- import * as i1 from "@angular/animations";
19
- import * as i2 from "@progress/kendo-angular-l10n";
20
- /**
21
- * @hidden
22
- *
23
- */
24
- export class NotificationComponent {
25
- cdr;
26
- element;
27
- renderer;
28
- builder;
29
- localizationService;
30
- /**
31
- * @hidden
32
- */
33
- xIcon = xIcon;
34
- contentId = `k-${guid()}`;
35
- container;
36
- closeClickSubscription;
37
- close = new EventEmitter();
38
- templateRef;
39
- templateString;
40
- width = null;
41
- height = null;
42
- notificationLabel = 'Notification';
43
- cssClass;
44
- hideAfter;
45
- closable;
46
- type;
47
- animation;
48
- closeTitle;
49
- /**
50
- * @hidden
51
- */
52
- direction;
53
- get closeButtonTitle() {
54
- return this.closeTitle || this.localizationService.get('closeTitle');
55
- }
56
- defaultHideAfter = 5000;
57
- hideTimeout;
58
- animationEnd = new EventEmitter();
59
- dynamicRTLSubscription;
60
- rtl = false;
61
- constructor(cdr, element, renderer, builder, localizationService) {
62
- this.cdr = cdr;
63
- this.element = element;
64
- this.renderer = renderer;
65
- this.builder = builder;
66
- this.localizationService = localizationService;
67
- validatePackage(packageMetadata);
68
- this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
69
- this.rtl = rtl;
70
- this.direction = this.rtl ? 'rtl' : 'ltr';
71
- });
72
- }
73
- notificationClasses() {
74
- return `${this.type ? this.typeClass() : ''}
75
- ${this.closable ? 'k-notification-closable' : ''}`;
76
- }
77
- ngOnInit() {
78
- clearTimeout(this.hideTimeout);
79
- }
80
- ngOnDestroy() {
81
- clearTimeout(this.hideTimeout);
82
- if (this.dynamicRTLSubscription) {
83
- this.dynamicRTLSubscription.unsubscribe();
84
- }
85
- }
86
- ngAfterViewInit() {
87
- if (!this.closable && !this.animation) {
88
- this.setHideTimeout();
89
- }
90
- if (!this.closable && this.animation) {
91
- this.animationEnd.pipe(take(1))
92
- .subscribe(() => this.setHideTimeout());
93
- }
94
- if (this.animation) {
95
- this.animate(this.animation);
96
- }
97
- }
98
- typeClass() {
99
- return {
100
- 'none': '',
101
- 'success': 'k-notification-success',
102
- 'warning': 'k-notification-warning',
103
- 'error': 'k-notification-error',
104
- 'info': 'k-notification-info'
105
- }[this.type.style];
106
- }
107
- typeIconClass() {
108
- return {
109
- 'none': '',
110
- 'success': 'check-outline',
111
- 'warning': 'exclamation-circle',
112
- 'error': 'x-outline',
113
- 'info': 'info-circle'
114
- }[this.type.style];
115
- }
116
- typeSVGIcon() {
117
- return {
118
- 'none': null,
119
- 'success': checkOutlineIcon,
120
- 'warning': exclamationCircleIcon,
121
- 'error': xOutlineIcon,
122
- 'info': infoCircleIcon
123
- }[this.type.style];
124
- }
125
- onCloseClick() {
126
- clearTimeout(this.hideTimeout);
127
- this.hide();
128
- }
129
- hide(customComponent) {
130
- const elementHeight = getComputedStyle(this.element.nativeElement).height;
131
- if (this.animation && elementHeight) {
132
- this.animate(this.animation, true);
133
- this.animationEnd.subscribe(() => {
134
- this.emitClose(customComponent);
135
- });
136
- return;
137
- }
138
- this.emitClose(customComponent);
139
- }
140
- setHideTimeout() {
141
- const hideAfter = this.hideAfter || this.defaultHideAfter;
142
- this.hideTimeout = window.setTimeout(() => this.onCloseClick(), hideAfter);
143
- }
144
- emitClose(customComponent) {
145
- if (customComponent) {
146
- customComponent.destroy();
147
- }
148
- this.close.emit();
149
- }
150
- play(animation, animatedElement) {
151
- const factory = this.builder.build(animation);
152
- const element = this.element.nativeElement;
153
- this.renderer.addClass(element, 'k-notification-container-animating');
154
- let player = factory.create(animatedElement);
155
- player.onDone(() => {
156
- this.renderer.removeClass(element, 'k-notification-container-animating');
157
- this.animationEnd.emit();
158
- if (player) {
159
- player.destroy();
160
- player = null;
161
- }
162
- });
163
- player.play();
164
- }
165
- animate(animation, onclose) {
166
- const element = this.element.nativeElement;
167
- const duration = animation.duration;
168
- const height = element.offsetHeight;
169
- const generatedAnimation = animation.type === 'slide' ?
170
- this.slideAnimation(height, duration, onclose) :
171
- this.fadeAnimation(duration, onclose);
172
- this.play(generatedAnimation, element);
173
- }
174
- slideAnimation(height, duration, onclose) {
175
- return onclose ? slideCloseAnimation(height, duration) : slideAnimation(height, duration);
176
- }
177
- fadeAnimation(duration, onclose) {
178
- return onclose ? fadeCloseAnimation(duration) : fadeAnimation(duration);
179
- }
180
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.AnimationBuilder }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
181
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
182
- LocalizationService,
183
- {
184
- provide: L10N_PREFIX,
185
- useValue: 'kendo.notification'
186
- }
187
- ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
188
- <ng-container kendoNotificationLocalizedMessages
189
- i18n-closeTitle="kendo.notification.closeTitle|The title of the close button"
190
- closeTitle="Close"
191
- >
192
- </ng-container>
193
- <div class="k-notification k-notification-base {{ notificationClasses() }}"
194
- [ngClass]="cssClass"
195
- [style.height.px]="height"
196
- [style.width.px]="width"
197
- role="alert"
198
- aria-live="polite"
199
- [attr.aria-describedby]="contentId"
200
- [attr.aria-label]="notificationLabel">
201
- @if (type && type.icon && type.style !== 'none') {
202
- <kendo-icon-wrapper
203
- innerCssClass="k-notification-status"
204
- [name]="typeIconClass()"
205
- [svgIcon]="typeSVGIcon()"
206
- >
207
- </kendo-icon-wrapper>
208
- }
209
- <div [id]="contentId" class="k-notification-content">
210
- @if (templateRef) {
211
- <ng-template
212
- [ngTemplateOutlet]="templateRef">
213
- </ng-template>
214
- }
215
- @if (templateString) {
216
- {{ templateString }}
217
- }
218
- <ng-container #container></ng-container>
219
- </div>
220
-
221
- @if (closable) {
222
- <span class="k-notification-actions" aria-hidden="true">
223
- <span class="k-notification-action k-notification-close-action" [attr.title]="closeButtonTitle" (click)="onCloseClick()">
224
- <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
225
- </span>
226
- </span>
227
- }
228
- </div>
229
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoNotificationLocalizedMessages]", inputs: ["closeTitle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
230
- }
231
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationComponent, decorators: [{
232
- type: Component,
233
- args: [{
234
- selector: 'kendo-notification',
235
- template: `
236
- <ng-container kendoNotificationLocalizedMessages
237
- i18n-closeTitle="kendo.notification.closeTitle|The title of the close button"
238
- closeTitle="Close"
239
- >
240
- </ng-container>
241
- <div class="k-notification k-notification-base {{ notificationClasses() }}"
242
- [ngClass]="cssClass"
243
- [style.height.px]="height"
244
- [style.width.px]="width"
245
- role="alert"
246
- aria-live="polite"
247
- [attr.aria-describedby]="contentId"
248
- [attr.aria-label]="notificationLabel">
249
- @if (type && type.icon && type.style !== 'none') {
250
- <kendo-icon-wrapper
251
- innerCssClass="k-notification-status"
252
- [name]="typeIconClass()"
253
- [svgIcon]="typeSVGIcon()"
254
- >
255
- </kendo-icon-wrapper>
256
- }
257
- <div [id]="contentId" class="k-notification-content">
258
- @if (templateRef) {
259
- <ng-template
260
- [ngTemplateOutlet]="templateRef">
261
- </ng-template>
262
- }
263
- @if (templateString) {
264
- {{ templateString }}
265
- }
266
- <ng-container #container></ng-container>
267
- </div>
268
-
269
- @if (closable) {
270
- <span class="k-notification-actions" aria-hidden="true">
271
- <span class="k-notification-action k-notification-close-action" [attr.title]="closeButtonTitle" (click)="onCloseClick()">
272
- <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
273
- </span>
274
- </span>
275
- }
276
- </div>
277
- `,
278
- providers: [
279
- LocalizationService,
280
- {
281
- provide: L10N_PREFIX,
282
- useValue: 'kendo.notification'
283
- }
284
- ],
285
- standalone: true,
286
- imports: [LocalizedMessagesDirective, NgClass, IconWrapperComponent, NgTemplateOutlet]
287
- }]
288
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.AnimationBuilder }, { type: i2.LocalizationService }], propDecorators: { container: [{
289
- type: ViewChild,
290
- args: ['container', { read: ViewContainerRef, static: true }]
291
- }], templateRef: [{
292
- type: Input
293
- }], templateString: [{
294
- type: Input
295
- }], width: [{
296
- type: Input
297
- }], height: [{
298
- type: Input
299
- }], notificationLabel: [{
300
- type: Input
301
- }], cssClass: [{
302
- type: Input
303
- }], hideAfter: [{
304
- type: Input
305
- }], closable: [{
306
- type: Input
307
- }], type: [{
308
- type: Input
309
- }], animation: [{
310
- type: Input
311
- }], direction: [{
312
- type: HostBinding,
313
- args: ['attr.dir']
314
- }] } });
@@ -1,175 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, Input, ElementRef, ComponentFactoryResolver, ViewContainerRef, Renderer2, ViewChild, TemplateRef, NgZone, } from '@angular/core';
6
- import { NotificationComponent } from './notification.component';
7
- import { take } from 'rxjs/operators';
8
- import * as i0 from "@angular/core";
9
- /**
10
- * @hidden
11
- */
12
- export class NotificationContainerComponent {
13
- element;
14
- renderer;
15
- resolver;
16
- ngZone;
17
- container;
18
- group;
19
- id = '';
20
- notifications = [];
21
- position;
22
- constructor(element, renderer, resolver, ngZone) {
23
- this.element = element;
24
- this.renderer = renderer;
25
- this.resolver = resolver;
26
- this.ngZone = ngZone;
27
- /**/
28
- }
29
- ngOnDestroy() {
30
- this.notifications.forEach((notification) => {
31
- if (notification.closeClickSubscription) {
32
- notification.closeClickSubscription.unsubscribe();
33
- }
34
- });
35
- this.notifications = [];
36
- }
37
- addNotification(settings) {
38
- this.position = settings.position;
39
- this.id = `${this.position.horizontal} ${this.position.vertical}`;
40
- const factory = this.resolver.resolveComponentFactory(NotificationComponent);
41
- const notificationRef = this.container.createComponent(factory);
42
- this.applySettings(notificationRef, settings);
43
- let customComponent = null;
44
- if (typeof settings.content === 'function') {
45
- const customFactory = this.resolver.resolveComponentFactory(settings.content);
46
- customComponent = notificationRef.instance.container.createComponent(customFactory);
47
- }
48
- notificationRef.changeDetectorRef.detectChanges();
49
- this.notifications.push(notificationRef.instance);
50
- if (settings.appendTo) {
51
- this.applyAbsolutePosition(settings.appendTo);
52
- }
53
- this.applyPosition();
54
- this.applyContainerWrap();
55
- return {
56
- afterHide: notificationRef.instance.close,
57
- hide: () => notificationRef.instance.hide(customComponent),
58
- notification: notificationRef,
59
- content: customComponent || null,
60
- };
61
- }
62
- hide(notificationRef) {
63
- const instance = notificationRef.instance;
64
- const index = this.notifications.indexOf(instance);
65
- this.notifications.splice(index, 1);
66
- if (instance.closeClickSubscription) {
67
- instance.closeClickSubscription.unsubscribe();
68
- }
69
- instance.templateRef = null;
70
- instance.templateString = null;
71
- notificationRef.destroy();
72
- if (this.notifications.length > 0) {
73
- this.ngZone.onStable
74
- .asObservable()
75
- .pipe(take(1))
76
- .subscribe(() => {
77
- this.applyPosition();
78
- });
79
- }
80
- }
81
- applyContainerWrap() {
82
- const value = this.position.horizontal === 'right' ? 'wrap-reverse' : 'wrap';
83
- this.renderer.setStyle(this.group.nativeElement, 'flex-wrap', value);
84
- }
85
- applySettings(notificationRef, settings) {
86
- const notification = notificationRef.instance;
87
- const content = settings.content;
88
- const animation = settings.animation || null;
89
- notification.closeClickSubscription = notification.close.subscribe(() => this.hide(notificationRef));
90
- if (typeof content === 'string') {
91
- notification.templateString = content;
92
- }
93
- if (content instanceof TemplateRef) {
94
- notification.templateRef = content;
95
- }
96
- notification.animation = animation;
97
- const type = settings.type;
98
- if (type && type.style === undefined) {
99
- type.style = 'none';
100
- }
101
- if (type && type.icon === undefined) {
102
- type.icon = true;
103
- }
104
- notification.type = type;
105
- notification.closeTitle = settings.closeTitle;
106
- if (settings.cssClass) {
107
- notification.cssClass = settings.cssClass;
108
- }
109
- if (settings.notificationLabel) {
110
- notification.notificationLabel = settings.notificationLabel;
111
- }
112
- notification.closable = settings.closable;
113
- notification.hideAfter = settings.hideAfter;
114
- notification.width = settings.width;
115
- notification.height = settings.height;
116
- }
117
- applyAbsolutePosition(appendToContainer) {
118
- const appendTo = appendToContainer.element.nativeElement;
119
- const el = this.element.nativeElement.children[0];
120
- if (window.getComputedStyle(appendTo).position === 'static') {
121
- this.renderer.setStyle(appendTo, 'position', 'relative');
122
- }
123
- this.renderer.setStyle(el, 'position', 'absolute');
124
- }
125
- applyPosition() {
126
- const element = this.element.nativeElement.children[0];
127
- const elementHalfWidth = element.getBoundingClientRect().width / 2;
128
- const positionStyles = this.setContainerPosition(this.position, elementHalfWidth);
129
- Object.keys(positionStyles).forEach((cssStyle) => {
130
- element.style[cssStyle] = positionStyles[cssStyle];
131
- });
132
- }
133
- setContainerPosition(position, offsetMargin) {
134
- const positionLayout = {
135
- horizontal: {
136
- left: { left: 0, alignItems: 'flex-start' },
137
- right: { right: 0, alignItems: 'flex-start' },
138
- center: { left: '50%', marginLeft: `${-offsetMargin}px`, alignItems: 'center' },
139
- },
140
- vertical: {
141
- top: { top: 0 },
142
- bottom: { bottom: 0 },
143
- },
144
- };
145
- const horizontal = positionLayout.horizontal[position.horizontal];
146
- const vertical = positionLayout.vertical[position.vertical];
147
- return Object.assign({}, horizontal, vertical);
148
- }
149
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationContainerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
150
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: `
151
- <div #group class="k-notification-group">
152
- <ng-container #container></ng-container>
153
- </div>
154
- `, isInline: true });
155
- }
156
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationContainerComponent, decorators: [{
157
- type: Component,
158
- args: [{
159
- selector: 'kendo-notification-container',
160
- template: `
161
- <div #group class="k-notification-group">
162
- <ng-container #container></ng-container>
163
- </div>
164
- `,
165
- standalone: true,
166
- }]
167
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.NgZone }], propDecorators: { container: [{
168
- type: ViewChild,
169
- args: ['container', { read: ViewContainerRef, static: true }]
170
- }], group: [{
171
- type: ViewChild,
172
- args: ['group', { static: true }]
173
- }], id: [{
174
- type: Input
175
- }] } });
@@ -1,55 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { NgModule } from '@angular/core';
6
- import { IconsService } from '@progress/kendo-angular-icons';
7
- import { NotificationService } from './services/notification.service';
8
- import { KENDO_NOTIFICATION } from './directives';
9
- import * as i0 from "@angular/core";
10
- import * as i1 from "./notification.component";
11
- import * as i2 from "./notification.container.component";
12
- // IMPORTANT: NgModule export kept for backwards compatibility
13
- /**
14
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
15
- * definition for the Notification component.
16
- *
17
- * The package exports:
18
- * - `NotificationService`&mdash;The Notification service class.
19
- *
20
- * @example
21
- *
22
- * ```ts-no-run
23
- * // Import the Notification module
24
- * import { NotificationModule } from '@progress/kendo-angular-notification';
25
- *
26
- * // The browser platform with a compiler
27
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
28
- *
29
- * import { NgModule } from '@angular/core';
30
- *
31
- * // Import the app component
32
- * _@NgModule{{
33
- * declarations: [AppComponent], // declare app component
34
- * imports: [BrowserModule, NotificationModule], // import NotificationModule module
35
- * bootstrap: [AppComponent]
36
- * }}
37
- * export class AppModule {}
38
- *
39
- * // Compile and launch the module
40
- * platformBrowserDynamic().bootstrapModule(AppModule);
41
- * ```
42
- */
43
- export class NotificationModule {
44
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
45
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, imports: [i1.NotificationComponent, i2.NotificationContainerComponent], exports: [i1.NotificationComponent, i2.NotificationContainerComponent] });
46
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, providers: [NotificationService, IconsService], imports: [i1.NotificationComponent] });
47
- }
48
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationModule, decorators: [{
49
- type: NgModule,
50
- args: [{
51
- imports: [...KENDO_NOTIFICATION],
52
- exports: [...KENDO_NOTIFICATION],
53
- providers: [NotificationService, IconsService]
54
- }]
55
- }] });
@@ -1,16 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * @hidden
7
- */
8
- export const packageMetadata = {
9
- name: '@progress/kendo-angular-notification',
10
- productName: 'Kendo UI for Angular',
11
- productCode: 'KENDOUIANGULAR',
12
- productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1768393350,
14
- version: '21.4.1',
15
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
- };
@@ -1,8 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * Generated bundle index. Do not edit.
7
- */
8
- export * from './index';
@@ -1,137 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, InjectionToken, ElementRef, Inject, Optional } from '@angular/core';
6
- import { NotificationContainerComponent } from '../notification.container.component';
7
- import * as i0 from "@angular/core";
8
- /**
9
- * Injects the Notification container. When not provided, uses the first root component of
10
- * the application.
11
- *
12
- * > Use `NOTIFICATION_CONTAINER` only with the [`NotificationService`]({% slug api_notification_notificationservice %}) class.
13
- *
14
- * @example
15
- *
16
- * ```ts
17
- * import { NgModule, ElementRef } from '@angular/core';
18
- * import { BrowserModule } from '@angular/platform-browser';
19
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
20
- *
21
- * import { NotificationModule, NOTIFICATION_CONTAINER } from '@progress/kendo-angular-notification';
22
- * import { AppComponent } from './app.component';
23
- *
24
- * @NgModule({
25
- * declarations: [AppComponent],
26
- * imports: [BrowserModule, NotificationModule],
27
- * bootstrap: [AppComponent],
28
- * providers: [
29
- * {
30
- * provide: NOTIFICATION_CONTAINER,
31
- * useFactory: () => ({ nativeElement: document.body } as ElementRef)
32
- * }
33
- * ]
34
- * })
35
- * export class AppModule {}
36
- *
37
- * platformBrowserDynamic().bootstrapModule(AppModule);
38
- * ```
39
- */
40
- export const NOTIFICATION_CONTAINER = new InjectionToken('Notification Container');
41
- /**
42
- * A service for opening Notification components dynamically
43
- * ([see example]({% slug overview_notification %})).
44
- *
45
- * @export
46
- * @class NotificationService
47
- */
48
- export class NotificationService {
49
- resolver;
50
- injector;
51
- container;
52
- notificationContainers = [];
53
- position = { horizontal: 'right', vertical: 'top' };
54
- applicationRef;
55
- /**
56
- * @hidden
57
- */
58
- constructor(resolver, injector, container) {
59
- this.resolver = resolver;
60
- this.injector = injector;
61
- this.container = container;
62
- }
63
- /**
64
- * Opens a Notification component. Created Notifications are mounted
65
- * in the DOM directly in the root application component.
66
- *
67
- * @param {NotificationSettings} settings - The settings which define the Notification.
68
- *
69
- * @returns {NotificationRef} - A reference to the Notification object and the convenience properties.
70
- */
71
- show(settings) {
72
- if (!settings) {
73
- throw new Error('NotificationSettings settings are required');
74
- }
75
- const target = this.findGroupContainer(settings);
76
- const position = settings.position || this.position;
77
- const currentId = `${position.horizontal} ${position.vertical}`;
78
- let container;
79
- let notificationRef;
80
- let notificationContainer = this.notificationContainers.find(c => target.nativeElement.contains(c.element.nativeElement) && c.id === currentId);
81
- if (!notificationContainer) {
82
- container = this.resolver
83
- .resolveComponentFactory(NotificationContainerComponent)
84
- .create(this.injector);
85
- notificationContainer = container.instance;
86
- this.appRef.attachView(container.hostView);
87
- const hostViewElement = container.location.nativeElement;
88
- const groupContainer = this.findGroupContainer(settings);
89
- if (!groupContainer) {
90
- throw new Error(`
91
- View Container not found! Inject the NOTIFICATION_CONTAINER or define a specific ViewContainerRef via
92
- the appendTo option. See https://www.telerik.com/kendo-angular-ui/components/notification/api/NOTIFICATION_CONTAINER/
93
- for more details.
94
- `);
95
- }
96
- groupContainer.nativeElement.appendChild(hostViewElement);
97
- this.notificationContainers.push(notificationContainer);
98
- }
99
- settings.position = position;
100
- // eslint-disable-next-line prefer-const
101
- notificationRef = notificationContainer.addNotification(settings);
102
- return notificationRef;
103
- }
104
- get appRef() {
105
- if (!this.applicationRef) {
106
- this.applicationRef = this.injector.get(ApplicationRef);
107
- }
108
- return this.applicationRef;
109
- }
110
- findGroupContainer(settings) {
111
- let container;
112
- if (settings.appendTo) {
113
- container = settings.appendTo.element;
114
- }
115
- else if (this.container) {
116
- container = this.container;
117
- }
118
- else {
119
- const appRoot = this.appRef.components && this.appRef.components[0];
120
- container = appRoot ? appRoot.location : null;
121
- }
122
- return container;
123
- }
124
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: NOTIFICATION_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
125
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationService, providedIn: 'root' });
126
- }
127
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationService, decorators: [{
128
- type: Injectable,
129
- args: [{
130
- providedIn: 'root'
131
- }]
132
- }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ElementRef, decorators: [{
133
- type: Inject,
134
- args: [NOTIFICATION_CONTAINER]
135
- }, {
136
- type: Optional
137
- }] }] });
@@ -1,41 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { style, animate } from '@angular/animations';
6
- /**
7
- * @hidden
8
- */
9
- export function slideAnimation(height, duration) {
10
- return [
11
- style({ overflow: 'hidden', height: 0 }),
12
- animate(`${duration}ms ease-in`, style({ height: `${height}px` }))
13
- ];
14
- }
15
- /**
16
- * @hidden
17
- */
18
- export function slideCloseAnimation(height, duration) {
19
- return [
20
- style({ height: `${height}px` }),
21
- animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
22
- ];
23
- }
24
- /**
25
- * @hidden
26
- */
27
- export function fadeAnimation(duration) {
28
- return [
29
- style({ opacity: 0 }),
30
- animate(`${duration}ms ease-in`, style({ opacity: 1 }))
31
- ];
32
- }
33
- /**
34
- * @hidden
35
- */
36
- export function fadeCloseAnimation(duration) {
37
- return [
38
- style({ opacity: 1 }),
39
- animate(`${duration}ms ease-in`, style({ opacity: 0 }))
40
- ];
41
- }