@nova-design-system/nova-angular-19 3.13.0 → 3.14.0-beta.0
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.
- package/dist/nova-components/fesm2022/nova-components.mjs +345 -8
- package/dist/nova-components/fesm2022/nova-components.mjs.map +1 -1
- package/dist/nova-components/lib/nova-components.module.d.ts +1 -1
- package/dist/nova-components/lib/providers/index.d.ts +2 -0
- package/dist/nova-components/lib/providers/notification-service.component.d.ts +56 -0
- package/dist/nova-components/lib/providers/notification.service.d.ts +116 -0
- package/dist/nova-components/lib/stencil-generated/components.d.ts +10 -1
- package/dist/nova-components/lib/stencil-generated/index.d.ts +1 -1
- package/dist/nova-components/public-api.d.ts +1 -0
- package/package.json +4 -3
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Directive, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Directive, HostListener, NgModule, Injectable, ElementRef, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChildren } from '@angular/core';
|
|
3
3
|
import { __decorate } from 'tslib';
|
|
4
|
-
import { fromEvent } from 'rxjs';
|
|
4
|
+
import { fromEvent, BehaviorSubject } from 'rxjs';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
|
+
import * as i2 from '@angular/common';
|
|
7
|
+
import { CommonModule } from '@angular/common';
|
|
6
8
|
export * from '@nova-design-system/nova-webcomponents/constants';
|
|
7
9
|
|
|
8
10
|
/* eslint-disable */
|
|
@@ -1003,12 +1005,12 @@ let NvNotification = class NvNotification {
|
|
|
1003
1005
|
proxyOutputs(this, this.el, ['hiddenChanged']);
|
|
1004
1006
|
}
|
|
1005
1007
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotification, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1006
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvNotification, isStandalone: false, selector: "nv-notification", inputs: { dismissible: "dismissible", emphasis: "emphasis", feedback: "feedback", heading: "heading", hidden: "hidden", icon: "icon", message: "message", uid: "uid" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1008
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvNotification, isStandalone: false, selector: "nv-notification", inputs: { dismissible: "dismissible", emphasis: "emphasis", feedback: "feedback", heading: "heading", hidden: "hidden", icon: "icon", initiallyHidden: "initiallyHidden", message: "message", uid: "uid" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1007
1009
|
};
|
|
1008
1010
|
NvNotification = __decorate([
|
|
1009
1011
|
ProxyCmp({
|
|
1010
|
-
inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'message', 'uid'],
|
|
1011
|
-
methods: ['dismiss']
|
|
1012
|
+
inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'initiallyHidden', 'message', 'uid'],
|
|
1013
|
+
methods: ['dismiss', 'show']
|
|
1012
1014
|
})
|
|
1013
1015
|
], NvNotification);
|
|
1014
1016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotification, decorators: [{
|
|
@@ -1018,7 +1020,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
1018
1020
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1019
1021
|
template: '<ng-content></ng-content>',
|
|
1020
1022
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
1021
|
-
inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'message', 'uid'],
|
|
1023
|
+
inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'initiallyHidden', 'message', 'uid'],
|
|
1024
|
+
standalone: false
|
|
1025
|
+
}]
|
|
1026
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
1027
|
+
let NvNotificationcontainer = class NvNotificationcontainer {
|
|
1028
|
+
constructor(c, r, z) {
|
|
1029
|
+
this.z = z;
|
|
1030
|
+
c.detach();
|
|
1031
|
+
this.el = r.nativeElement;
|
|
1032
|
+
}
|
|
1033
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotificationcontainer, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvNotificationcontainer, isStandalone: false, selector: "nv-notificationcontainer", inputs: { position: "position" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1035
|
+
};
|
|
1036
|
+
NvNotificationcontainer = __decorate([
|
|
1037
|
+
ProxyCmp({
|
|
1038
|
+
inputs: ['position']
|
|
1039
|
+
})
|
|
1040
|
+
], NvNotificationcontainer);
|
|
1041
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotificationcontainer, decorators: [{
|
|
1042
|
+
type: Component,
|
|
1043
|
+
args: [{
|
|
1044
|
+
selector: 'nv-notificationcontainer',
|
|
1045
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1046
|
+
template: '<ng-content></ng-content>',
|
|
1047
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
1048
|
+
inputs: ['position'],
|
|
1022
1049
|
standalone: false
|
|
1023
1050
|
}]
|
|
1024
1051
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
@@ -1291,6 +1318,7 @@ const DIRECTIVES = [
|
|
|
1291
1318
|
NvMenu,
|
|
1292
1319
|
NvMenuitem,
|
|
1293
1320
|
NvNotification,
|
|
1321
|
+
NvNotificationcontainer,
|
|
1294
1322
|
NvPopover,
|
|
1295
1323
|
NvRow,
|
|
1296
1324
|
NvStack,
|
|
@@ -2066,7 +2094,7 @@ const VALUE_ACCESSORS = [
|
|
|
2066
2094
|
|
|
2067
2095
|
class NovaComponentsModule {
|
|
2068
2096
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2069
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, declarations: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvPopover, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip], exports: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvPopover, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip] }); }
|
|
2097
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, declarations: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationcontainer, NvPopover, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip], exports: [NvAccordion, NvAccordionItem, NvAlert, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCol, NvDatagrid, NvDatagridcolumn, NvDialog, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFielddate, NvFielddaterange, NvFielddropdown, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldnumber, NvFieldpassword, NvFieldradio, NvFieldselect, NvFieldslider, NvFieldtext, NvFieldtextarea, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationcontainer, NvPopover, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip] }); }
|
|
2070
2098
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule }); }
|
|
2071
2099
|
}
|
|
2072
2100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, decorators: [{
|
|
@@ -2089,6 +2117,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2089
2117
|
}]
|
|
2090
2118
|
}] });
|
|
2091
2119
|
|
|
2120
|
+
/**
|
|
2121
|
+
* Utility function to generate unique IDs.
|
|
2122
|
+
*
|
|
2123
|
+
* @returns {string} A unique identifier string
|
|
2124
|
+
*/
|
|
2125
|
+
const generateId = () => {
|
|
2126
|
+
return `notification-${Date.now()}-${Math.random()
|
|
2127
|
+
.toString(36)
|
|
2128
|
+
.substr(2, 9)}`;
|
|
2129
|
+
};
|
|
2130
|
+
/**
|
|
2131
|
+
* Angular service for managing notifications.
|
|
2132
|
+
*/
|
|
2133
|
+
class NotificationService {
|
|
2134
|
+
/**
|
|
2135
|
+
* Current array of notifications.
|
|
2136
|
+
*
|
|
2137
|
+
* @returns {Notification[]} Array of active notifications
|
|
2138
|
+
*/
|
|
2139
|
+
get notifications() {
|
|
2140
|
+
return this._notifications.value;
|
|
2141
|
+
}
|
|
2142
|
+
constructor() {
|
|
2143
|
+
this._notifications = new BehaviorSubject([]);
|
|
2144
|
+
/**
|
|
2145
|
+
* Observable stream of active notifications.
|
|
2146
|
+
*/
|
|
2147
|
+
this.notifications$ = this._notifications.asObservable();
|
|
2148
|
+
// keep track of all notification refs
|
|
2149
|
+
this.elRefs = new Map();
|
|
2150
|
+
this._config = {
|
|
2151
|
+
position: 'top-right',
|
|
2152
|
+
maxNotifications: 50,
|
|
2153
|
+
className: '',
|
|
2154
|
+
};
|
|
2155
|
+
}
|
|
2156
|
+
/**
|
|
2157
|
+
* Configure the notification service.
|
|
2158
|
+
*
|
|
2159
|
+
* @param {NotificationServiceConfig} config Configuration options
|
|
2160
|
+
*/
|
|
2161
|
+
configure(config) {
|
|
2162
|
+
Object.assign(this._config, config);
|
|
2163
|
+
}
|
|
2164
|
+
/**
|
|
2165
|
+
* Get the current configuration.
|
|
2166
|
+
*
|
|
2167
|
+
* @returns {Required<NotificationServiceConfig>} Current configuration
|
|
2168
|
+
*/
|
|
2169
|
+
get config() {
|
|
2170
|
+
return { ...this._config };
|
|
2171
|
+
}
|
|
2172
|
+
registerRef(id, el) {
|
|
2173
|
+
this.elRefs.set(id, el);
|
|
2174
|
+
}
|
|
2175
|
+
unregisterRef(id) {
|
|
2176
|
+
this.elRefs.delete(id);
|
|
2177
|
+
}
|
|
2178
|
+
clearRefs() {
|
|
2179
|
+
this.elRefs.clear();
|
|
2180
|
+
}
|
|
2181
|
+
/**
|
|
2182
|
+
* Show a new notification.
|
|
2183
|
+
*
|
|
2184
|
+
* @param {NotificationOptions} options The notification options
|
|
2185
|
+
* @returns {string} The notification ID
|
|
2186
|
+
*/
|
|
2187
|
+
show(options) {
|
|
2188
|
+
const id = options.id || generateId();
|
|
2189
|
+
const notification = {
|
|
2190
|
+
id,
|
|
2191
|
+
heading: options.heading,
|
|
2192
|
+
message: options.message,
|
|
2193
|
+
dismissible: options.dismissible ?? true,
|
|
2194
|
+
emphasis: options.emphasis ?? 'medium',
|
|
2195
|
+
feedback: options.feedback ?? 'information',
|
|
2196
|
+
icon: options.icon,
|
|
2197
|
+
actions: options.actions ?? [],
|
|
2198
|
+
actionSlot: options.actionSlot,
|
|
2199
|
+
createdAt: Date.now(),
|
|
2200
|
+
};
|
|
2201
|
+
const currentNotifications = this._notifications.value;
|
|
2202
|
+
// Remove oldest notifications if we exceed max
|
|
2203
|
+
const newNotifications = [notification, ...currentNotifications];
|
|
2204
|
+
if (newNotifications.length > this._config.maxNotifications) {
|
|
2205
|
+
this._notifications.next(newNotifications.slice(0, this._config.maxNotifications));
|
|
2206
|
+
}
|
|
2207
|
+
else {
|
|
2208
|
+
this._notifications.next(newNotifications);
|
|
2209
|
+
}
|
|
2210
|
+
setTimeout(() => {
|
|
2211
|
+
const ref = this.elRefs.get(id);
|
|
2212
|
+
ref?.show();
|
|
2213
|
+
}, 0);
|
|
2214
|
+
return id;
|
|
2215
|
+
}
|
|
2216
|
+
/**
|
|
2217
|
+
* Dismiss a specific notification by ID. This will remove the notification
|
|
2218
|
+
* after the animation completes.
|
|
2219
|
+
*
|
|
2220
|
+
* @param {string} id The notification ID to dismiss
|
|
2221
|
+
*/
|
|
2222
|
+
dismiss(id) {
|
|
2223
|
+
this.elRefs.get(id)?.dismiss?.();
|
|
2224
|
+
}
|
|
2225
|
+
/**
|
|
2226
|
+
* Immediately remove a specific notification by ID.
|
|
2227
|
+
*
|
|
2228
|
+
* @param {string} id The notification ID to dismiss
|
|
2229
|
+
*/
|
|
2230
|
+
remove(id) {
|
|
2231
|
+
const currentNotifications = this._notifications.value;
|
|
2232
|
+
const filteredNotifications = currentNotifications.filter((notification) => notification.id !== id);
|
|
2233
|
+
this._notifications.next(filteredNotifications);
|
|
2234
|
+
}
|
|
2235
|
+
/**
|
|
2236
|
+
* Immediately remove all active notifications.
|
|
2237
|
+
*/
|
|
2238
|
+
removeAll() {
|
|
2239
|
+
this._notifications.next([]);
|
|
2240
|
+
}
|
|
2241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2242
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
|
|
2243
|
+
}
|
|
2244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, decorators: [{
|
|
2245
|
+
type: Injectable,
|
|
2246
|
+
args: [{
|
|
2247
|
+
providedIn: 'root',
|
|
2248
|
+
}]
|
|
2249
|
+
}], ctorParameters: () => [] });
|
|
2250
|
+
|
|
2251
|
+
/**
|
|
2252
|
+
* Angular component that renders the notification container with active notifications.
|
|
2253
|
+
*/
|
|
2254
|
+
class NotificationServiceComponent {
|
|
2255
|
+
constructor(notificationService) {
|
|
2256
|
+
this.notificationService = notificationService;
|
|
2257
|
+
/**
|
|
2258
|
+
* Array of active notifications.
|
|
2259
|
+
*/
|
|
2260
|
+
this.notifications = [];
|
|
2261
|
+
}
|
|
2262
|
+
/**
|
|
2263
|
+
* Component initialization.
|
|
2264
|
+
*/
|
|
2265
|
+
ngOnInit() {
|
|
2266
|
+
// Use service config if no input provided
|
|
2267
|
+
this.position ??= this.notificationService.config.position;
|
|
2268
|
+
this.className ??= this.notificationService.config.className;
|
|
2269
|
+
// Subscribe to notification changes
|
|
2270
|
+
this.subscription = this.notificationService.notifications$.subscribe((list) => (this.notifications = list));
|
|
2271
|
+
}
|
|
2272
|
+
/**
|
|
2273
|
+
* Synchronize notification elements/refs with the service.
|
|
2274
|
+
*/
|
|
2275
|
+
ngAfterViewInit() {
|
|
2276
|
+
const sync = () => {
|
|
2277
|
+
this.notificationService.clearRefs();
|
|
2278
|
+
for (const elRef of this.notificationEls.toArray()) {
|
|
2279
|
+
const el = elRef.nativeElement;
|
|
2280
|
+
const id = el.getAttribute('data-id');
|
|
2281
|
+
if (id)
|
|
2282
|
+
this.notificationService.registerRef(id, el);
|
|
2283
|
+
}
|
|
2284
|
+
};
|
|
2285
|
+
sync();
|
|
2286
|
+
this.notificationEls.changes.subscribe(sync);
|
|
2287
|
+
}
|
|
2288
|
+
/**
|
|
2289
|
+
* Component cleanup.
|
|
2290
|
+
*/
|
|
2291
|
+
ngOnDestroy() {
|
|
2292
|
+
this.subscription?.unsubscribe();
|
|
2293
|
+
this.notificationService.clearRefs();
|
|
2294
|
+
}
|
|
2295
|
+
/**
|
|
2296
|
+
* Track function for ngFor to optimize rendering.
|
|
2297
|
+
*
|
|
2298
|
+
* @param {number} index The index of the item
|
|
2299
|
+
* @param {Notification} notification The notification item
|
|
2300
|
+
* @returns {string} The notification ID
|
|
2301
|
+
*/
|
|
2302
|
+
trackByNotificationId(index, notification) {
|
|
2303
|
+
return notification.id;
|
|
2304
|
+
}
|
|
2305
|
+
/**
|
|
2306
|
+
* Handle notification hidden state change.
|
|
2307
|
+
*
|
|
2308
|
+
* @param {CustomEvent<boolean>} event The hidden changed event
|
|
2309
|
+
* @param {string} id The notification ID
|
|
2310
|
+
*/
|
|
2311
|
+
handleHiddenChanged(event, id) {
|
|
2312
|
+
if (event.detail && id) {
|
|
2313
|
+
this.notificationService.remove(id);
|
|
2314
|
+
}
|
|
2315
|
+
}
|
|
2316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationServiceComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NotificationServiceComponent, isStandalone: true, selector: "nv-notification-service", inputs: { position: "position", className: "className" }, viewQueries: [{ propertyName: "notificationEls", predicate: ["notificationEl"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
2318
|
+
<nv-notificationcontainer
|
|
2319
|
+
[position]="position"
|
|
2320
|
+
[class]="className"
|
|
2321
|
+
data-testid="notification-container"
|
|
2322
|
+
>
|
|
2323
|
+
<nv-notification
|
|
2324
|
+
*ngFor="
|
|
2325
|
+
let notification of notifications;
|
|
2326
|
+
trackBy: trackByNotificationId
|
|
2327
|
+
"
|
|
2328
|
+
#notificationEl
|
|
2329
|
+
[attr.data-id]="notification.id"
|
|
2330
|
+
[heading]="notification.heading"
|
|
2331
|
+
[message]="notification.message"
|
|
2332
|
+
[dismissible]="notification.dismissible"
|
|
2333
|
+
[emphasis]="notification.emphasis"
|
|
2334
|
+
[feedback]="notification.feedback"
|
|
2335
|
+
[icon]="notification.icon"
|
|
2336
|
+
[initiallyHidden]="true"
|
|
2337
|
+
(hiddenChanged)="handleHiddenChanged($event, notification.id)"
|
|
2338
|
+
>
|
|
2339
|
+
<!-- Actions slot content for the custom element -->
|
|
2340
|
+
<div
|
|
2341
|
+
slot="actions"
|
|
2342
|
+
class="flex gap-2"
|
|
2343
|
+
*ngIf="notification.actions?.length || notification.actionSlot"
|
|
2344
|
+
>
|
|
2345
|
+
<!-- Config-driven actions -->
|
|
2346
|
+
<nv-button
|
|
2347
|
+
*ngFor="let action of notification.actions"
|
|
2348
|
+
emphasis="low"
|
|
2349
|
+
size="sm"
|
|
2350
|
+
(click)="action.onClick()"
|
|
2351
|
+
>
|
|
2352
|
+
{{ action.label }}
|
|
2353
|
+
</nv-button>
|
|
2354
|
+
|
|
2355
|
+
<!-- Component-driven actions -->
|
|
2356
|
+
<ng-container
|
|
2357
|
+
*ngIf="notification.actionSlot"
|
|
2358
|
+
[ngComponentOutlet]="notification.actionSlot"
|
|
2359
|
+
></ng-container>
|
|
2360
|
+
</div>
|
|
2361
|
+
</nv-notification>
|
|
2362
|
+
</nv-notificationcontainer>
|
|
2363
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2364
|
+
}
|
|
2365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationServiceComponent, decorators: [{
|
|
2366
|
+
type: Component,
|
|
2367
|
+
args: [{
|
|
2368
|
+
selector: 'nv-notification-service',
|
|
2369
|
+
standalone: true,
|
|
2370
|
+
imports: [CommonModule],
|
|
2371
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
2372
|
+
template: `
|
|
2373
|
+
<nv-notificationcontainer
|
|
2374
|
+
[position]="position"
|
|
2375
|
+
[class]="className"
|
|
2376
|
+
data-testid="notification-container"
|
|
2377
|
+
>
|
|
2378
|
+
<nv-notification
|
|
2379
|
+
*ngFor="
|
|
2380
|
+
let notification of notifications;
|
|
2381
|
+
trackBy: trackByNotificationId
|
|
2382
|
+
"
|
|
2383
|
+
#notificationEl
|
|
2384
|
+
[attr.data-id]="notification.id"
|
|
2385
|
+
[heading]="notification.heading"
|
|
2386
|
+
[message]="notification.message"
|
|
2387
|
+
[dismissible]="notification.dismissible"
|
|
2388
|
+
[emphasis]="notification.emphasis"
|
|
2389
|
+
[feedback]="notification.feedback"
|
|
2390
|
+
[icon]="notification.icon"
|
|
2391
|
+
[initiallyHidden]="true"
|
|
2392
|
+
(hiddenChanged)="handleHiddenChanged($event, notification.id)"
|
|
2393
|
+
>
|
|
2394
|
+
<!-- Actions slot content for the custom element -->
|
|
2395
|
+
<div
|
|
2396
|
+
slot="actions"
|
|
2397
|
+
class="flex gap-2"
|
|
2398
|
+
*ngIf="notification.actions?.length || notification.actionSlot"
|
|
2399
|
+
>
|
|
2400
|
+
<!-- Config-driven actions -->
|
|
2401
|
+
<nv-button
|
|
2402
|
+
*ngFor="let action of notification.actions"
|
|
2403
|
+
emphasis="low"
|
|
2404
|
+
size="sm"
|
|
2405
|
+
(click)="action.onClick()"
|
|
2406
|
+
>
|
|
2407
|
+
{{ action.label }}
|
|
2408
|
+
</nv-button>
|
|
2409
|
+
|
|
2410
|
+
<!-- Component-driven actions -->
|
|
2411
|
+
<ng-container
|
|
2412
|
+
*ngIf="notification.actionSlot"
|
|
2413
|
+
[ngComponentOutlet]="notification.actionSlot"
|
|
2414
|
+
></ng-container>
|
|
2415
|
+
</div>
|
|
2416
|
+
</nv-notification>
|
|
2417
|
+
</nv-notificationcontainer>
|
|
2418
|
+
`,
|
|
2419
|
+
}]
|
|
2420
|
+
}], ctorParameters: () => [{ type: NotificationService }], propDecorators: { position: [{
|
|
2421
|
+
type: Input
|
|
2422
|
+
}], className: [{
|
|
2423
|
+
type: Input
|
|
2424
|
+
}], notificationEls: [{
|
|
2425
|
+
type: ViewChildren,
|
|
2426
|
+
args: ['notificationEl', { read: ElementRef }]
|
|
2427
|
+
}] } });
|
|
2428
|
+
|
|
2092
2429
|
/*
|
|
2093
2430
|
* Public API Surface of nova-components
|
|
2094
2431
|
*/
|
|
@@ -2097,5 +2434,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
2097
2434
|
* Generated bundle index. Do not edit.
|
|
2098
2435
|
*/
|
|
2099
2436
|
|
|
2100
|
-
export { NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvPopover, NvPopoverValueAccessor, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS };
|
|
2437
|
+
export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDialog, NvDialogValueAccessor, NvDialogfooter, NvDialogheader, NvFieldcheckbox, NvFieldcheckboxValueAccessor, NvFielddate, NvFielddateValueAccessor, NvFielddaterange, NvFielddaterangeValueAccessor, NvFielddropdown, NvFielddropdownValueAccessor, NvFielddropdownitem, NvFielddropdownitemcheck, NvFieldmultiselect, NvFieldmultiselectValueAccessor, NvFieldnumber, NvFieldnumberValueAccessor, NvFieldpassword, NvFieldpasswordValueAccessor, NvFieldradio, NvFieldradioValueAccessor, NvFieldselect, NvFieldselectValueAccessor, NvFieldslider, NvFieldsliderValueAccessor, NvFieldtext, NvFieldtextValueAccessor, NvFieldtextarea, NvFieldtextareaValueAccessor, NvFieldtime, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS };
|
|
2101
2438
|
//# sourceMappingURL=nova-components.mjs.map
|