@nova-design-system/nova-angular-19 3.12.0 → 3.14.0-beta.0

package/dist/nova-components/fesm2022/nova-components.mjs

@@ -1,8 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Directive, HostListener, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Directive, HostListener, NgModule, Injectable, ElementRef, CUSTOM_ELEMENTS_SCHEMA, Input, ViewChildren } from '@angular/core';
 import { __decorate } from 'tslib';
-import { fromEvent } from 'rxjs';
+import { fromEvent, BehaviorSubject } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 export * from '@nova-design-system/nova-webcomponents/constants';
 
 /* eslint-disable */
@@ -300,11 +302,11 @@ let NvCalendar = class NvCalendar {
         proxyOutputs(this, this.el, ['singleDateChange', 'rangeDateChange', 'valueChanged']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvCalendar, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvCalendar, isStandalone: false, selector: "nv-calendar", inputs: { dateFormat: "dateFormat", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", max: "max", min: "min", numberOfCalendars: "numberOfCalendars", rangeValue: "rangeValue", selectionType: "selectionType", shortcuts: "shortcuts", shortcutsPlacement: "shortcutsPlacement", showActions: "showActions", showWeekNumbers: "showWeekNumbers", singleValue: "singleValue", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: NvCalendar, isStandalone: false, selector: "nv-calendar", inputs: { cancelLabel: "cancelLabel", dateFormat: "dateFormat", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", max: "max", min: "min", numberOfCalendars: "numberOfCalendars", primaryLabel: "primaryLabel", rangeValue: "rangeValue", selectionType: "selectionType", shortcuts: "shortcuts", shortcutsPlacement: "shortcutsPlacement", showActions: "showActions", showWeekNumbers: "showWeekNumbers", singleValue: "singleValue", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvCalendar = __decorate([
     ProxyCmp({
-        inputs: ['dateFormat', 'disabledDates', 'firstDayOfWeek', 'locale', 'max', 'min', 'numberOfCalendars', 'rangeValue', 'selectionType', 'shortcuts', 'shortcutsPlacement', 'showActions', 'showWeekNumbers', 'singleValue', 'value'],
+        inputs: ['cancelLabel', 'dateFormat', 'disabledDates', 'firstDayOfWeek', 'locale', 'max', 'min', 'numberOfCalendars', 'primaryLabel', 'rangeValue', 'selectionType', 'shortcuts', 'shortcutsPlacement', 'showActions', 'showWeekNumbers', 'singleValue', 'value'],
         methods: ['clear']
     })
 ], NvCalendar);
@@ -315,7 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['dateFormat', 'disabledDates', 'firstDayOfWeek', 'locale', 'max', 'min', 'numberOfCalendars', 'rangeValue', 'selectionType', 'shortcuts', 'shortcutsPlacement', 'showActions', 'showWeekNumbers', 'singleValue', 'value'],
+                    inputs: ['cancelLabel', 'dateFormat', 'disabledDates', 'firstDayOfWeek', 'locale', 'max', 'min', 'numberOfCalendars', 'primaryLabel', 'rangeValue', 'selectionType', 'shortcuts', 'shortcutsPlacement', 'showActions', 'showWeekNumbers', 'singleValue', 'value'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -995,6 +997,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+let NvNotification = class NvNotification {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['hiddenChanged']);
+    }
+    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 }); }
+    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 }); }
+};
+NvNotification = __decorate([
+    ProxyCmp({
+        inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'initiallyHidden', 'message', 'uid'],
+        methods: ['dismiss', 'show']
+    })
+], NvNotification);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotification, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-notification',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'initiallyHidden', 'message', 'uid'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+let NvNotificationcontainer = class NvNotificationcontainer {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    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 }); }
+    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 }); }
+};
+NvNotificationcontainer = __decorate([
+    ProxyCmp({
+        inputs: ['position']
+    })
+], NvNotificationcontainer);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotificationcontainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-notificationcontainer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['position'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
 let NvPopover = class NvPopover {
     constructor(c, r, z) {
         this.z = z;
@@ -1263,6 +1317,8 @@ const DIRECTIVES = [
     NvLoader,
     NvMenu,
     NvMenuitem,
+    NvNotification,
+    NvNotificationcontainer,
     NvPopover,
     NvRow,
     NvStack,
@@ -1873,6 +1929,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: HostListener,
                 args: ['valueChanged', ['$event']]
             }] } });
+class NvNotificationValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    handleHiddenChanged(event) {
+        this.handleChangeEvent(event.target.hidden);
+    }
+    writeValue(value) {
+        this.el.nativeElement.hidden = this.lastValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotificationValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: NvNotificationValueAccessor, isStandalone: true, selector: "nv-notification", host: { listeners: { "hiddenChanged": "handleHiddenChanged($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NvNotificationValueAccessor,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvNotificationValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nv-notification',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NvNotificationValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleHiddenChanged: [{
+                type: HostListener,
+                args: ['hiddenChanged', ['$event']]
+            }] } });
 class NvPopoverValueAccessor extends ValueAccessor {
     constructor(el) {
         super(el);
@@ -1995,6 +2086,7 @@ const VALUE_ACCESSORS = [
     NvFieldsliderValueAccessor,
     NvFieldtextValueAccessor,
     NvFieldtextareaValueAccessor,
+    NvNotificationValueAccessor,
     NvPopoverValueAccessor,
     NvToggleValueAccessor,
     NvTogglebuttongroupValueAccessor,
@@ -2002,7 +2094,7 @@ const VALUE_ACCESSORS = [
 
 class NovaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    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, 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, NvPopover, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip] }); }
+    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] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsModule, decorators: [{
@@ -2014,7 +2106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }] });
 class NovaComponentsValueAccessorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, imports: [NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvPopoverValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvPopoverValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, imports: [NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NovaComponentsValueAccessorModule, decorators: [{
@@ -2025,6 +2117,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
+/**
+ * Utility function to generate unique IDs.
+ *
+ * @returns {string} A unique identifier string
+ */
+const generateId = () => {
+    return `notification-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+};
+/**
+ * Angular service for managing notifications.
+ */
+class NotificationService {
+    /**
+     * Current array of notifications.
+     *
+     * @returns {Notification[]} Array of active notifications
+     */
+    get notifications() {
+        return this._notifications.value;
+    }
+    constructor() {
+        this._notifications = new BehaviorSubject([]);
+        /**
+         * Observable stream of active notifications.
+         */
+        this.notifications$ = this._notifications.asObservable();
+        // keep track of all notification refs
+        this.elRefs = new Map();
+        this._config = {
+            position: 'top-right',
+            maxNotifications: 50,
+            className: '',
+        };
+    }
+    /**
+     * Configure the notification service.
+     *
+     * @param {NotificationServiceConfig} config Configuration options
+     */
+    configure(config) {
+        Object.assign(this._config, config);
+    }
+    /**
+     * Get the current configuration.
+     *
+     * @returns {Required<NotificationServiceConfig>} Current configuration
+     */
+    get config() {
+        return { ...this._config };
+    }
+    registerRef(id, el) {
+        this.elRefs.set(id, el);
+    }
+    unregisterRef(id) {
+        this.elRefs.delete(id);
+    }
+    clearRefs() {
+        this.elRefs.clear();
+    }
+    /**
+     * Show a new notification.
+     *
+     * @param {NotificationOptions} options The notification options
+     * @returns {string} The notification ID
+     */
+    show(options) {
+        const id = options.id || generateId();
+        const notification = {
+            id,
+            heading: options.heading,
+            message: options.message,
+            dismissible: options.dismissible ?? true,
+            emphasis: options.emphasis ?? 'medium',
+            feedback: options.feedback ?? 'information',
+            icon: options.icon,
+            actions: options.actions ?? [],
+            actionSlot: options.actionSlot,
+            createdAt: Date.now(),
+        };
+        const currentNotifications = this._notifications.value;
+        // Remove oldest notifications if we exceed max
+        const newNotifications = [notification, ...currentNotifications];
+        if (newNotifications.length > this._config.maxNotifications) {
+            this._notifications.next(newNotifications.slice(0, this._config.maxNotifications));
+        }
+        else {
+            this._notifications.next(newNotifications);
+        }
+        setTimeout(() => {
+            const ref = this.elRefs.get(id);
+            ref?.show();
+        }, 0);
+        return id;
+    }
+    /**
+     * Dismiss a specific notification by ID. This will remove the notification
+     * after the animation completes.
+     *
+     * @param {string} id The notification ID to dismiss
+     */
+    dismiss(id) {
+        this.elRefs.get(id)?.dismiss?.();
+    }
+    /**
+     * Immediately remove a specific notification by ID.
+     *
+     * @param {string} id The notification ID to dismiss
+     */
+    remove(id) {
+        const currentNotifications = this._notifications.value;
+        const filteredNotifications = currentNotifications.filter((notification) => notification.id !== id);
+        this._notifications.next(filteredNotifications);
+    }
+    /**
+     * Immediately remove all active notifications.
+     */
+    removeAll() {
+        this._notifications.next([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Angular component that renders the notification container with active notifications.
+ */
+class NotificationServiceComponent {
+    constructor(notificationService) {
+        this.notificationService = notificationService;
+        /**
+         * Array of active notifications.
+         */
+        this.notifications = [];
+    }
+    /**
+     * Component initialization.
+     */
+    ngOnInit() {
+        // Use service config if no input provided
+        this.position ??= this.notificationService.config.position;
+        this.className ??= this.notificationService.config.className;
+        // Subscribe to notification changes
+        this.subscription = this.notificationService.notifications$.subscribe((list) => (this.notifications = list));
+    }
+    /**
+     * Synchronize notification elements/refs with the service.
+     */
+    ngAfterViewInit() {
+        const sync = () => {
+            this.notificationService.clearRefs();
+            for (const elRef of this.notificationEls.toArray()) {
+                const el = elRef.nativeElement;
+                const id = el.getAttribute('data-id');
+                if (id)
+                    this.notificationService.registerRef(id, el);
+            }
+        };
+        sync();
+        this.notificationEls.changes.subscribe(sync);
+    }
+    /**
+     * Component cleanup.
+     */
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.notificationService.clearRefs();
+    }
+    /**
+     * Track function for ngFor to optimize rendering.
+     *
+     * @param {number} index The index of the item
+     * @param {Notification} notification The notification item
+     * @returns {string} The notification ID
+     */
+    trackByNotificationId(index, notification) {
+        return notification.id;
+    }
+    /**
+     * Handle notification hidden state change.
+     *
+     * @param {CustomEvent<boolean>} event The hidden changed event
+     * @param {string} id The notification ID
+     */
+    handleHiddenChanged(event, id) {
+        if (event.detail && id) {
+            this.notificationService.remove(id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationServiceComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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: `
+    <nv-notificationcontainer
+      [position]="position"
+      [class]="className"
+      data-testid="notification-container"
+    >
+      <nv-notification
+        *ngFor="
+          let notification of notifications;
+          trackBy: trackByNotificationId
+        "
+        #notificationEl
+        [attr.data-id]="notification.id"
+        [heading]="notification.heading"
+        [message]="notification.message"
+        [dismissible]="notification.dismissible"
+        [emphasis]="notification.emphasis"
+        [feedback]="notification.feedback"
+        [icon]="notification.icon"
+        [initiallyHidden]="true"
+        (hiddenChanged)="handleHiddenChanged($event, notification.id)"
+      >
+        <!-- Actions slot content for the custom element -->
+        <div
+          slot="actions"
+          class="flex gap-2"
+          *ngIf="notification.actions?.length || notification.actionSlot"
+        >
+          <!-- Config-driven actions -->
+          <nv-button
+            *ngFor="let action of notification.actions"
+            emphasis="low"
+            size="sm"
+            (click)="action.onClick()"
+          >
+            {{ action.label }}
+          </nv-button>
+
+          <!-- Component-driven actions -->
+          <ng-container
+            *ngIf="notification.actionSlot"
+            [ngComponentOutlet]="notification.actionSlot"
+          ></ng-container>
+        </div>
+      </nv-notification>
+    </nv-notificationcontainer>
+  `, 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NotificationServiceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-notification-service',
+                    standalone: true,
+                    imports: [CommonModule],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: `
+    <nv-notificationcontainer
+      [position]="position"
+      [class]="className"
+      data-testid="notification-container"
+    >
+      <nv-notification
+        *ngFor="
+          let notification of notifications;
+          trackBy: trackByNotificationId
+        "
+        #notificationEl
+        [attr.data-id]="notification.id"
+        [heading]="notification.heading"
+        [message]="notification.message"
+        [dismissible]="notification.dismissible"
+        [emphasis]="notification.emphasis"
+        [feedback]="notification.feedback"
+        [icon]="notification.icon"
+        [initiallyHidden]="true"
+        (hiddenChanged)="handleHiddenChanged($event, notification.id)"
+      >
+        <!-- Actions slot content for the custom element -->
+        <div
+          slot="actions"
+          class="flex gap-2"
+          *ngIf="notification.actions?.length || notification.actionSlot"
+        >
+          <!-- Config-driven actions -->
+          <nv-button
+            *ngFor="let action of notification.actions"
+            emphasis="low"
+            size="sm"
+            (click)="action.onClick()"
+          >
+            {{ action.label }}
+          </nv-button>
+
+          <!-- Component-driven actions -->
+          <ng-container
+            *ngIf="notification.actionSlot"
+            [ngComponentOutlet]="notification.actionSlot"
+          ></ng-container>
+        </div>
+      </nv-notification>
+    </nv-notificationcontainer>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: NotificationService }], propDecorators: { position: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], notificationEls: [{
+                type: ViewChildren,
+                args: ['notificationEl', { read: ElementRef }]
+            }] } });
+
 /*
  * Public API Surface of nova-components
  */
@@ -2033,5 +2434,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, NvPopover, NvPopoverValueAccessor, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS };
+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 };
 //# sourceMappingURL=nova-components.mjs.map