@nova-design-system/nova-angular-19 3.11.0 → 3.13.0

package/README.md

@@ -2,22 +2,21 @@
 
 **Nova Components Angular** allows you to integrate Nova's native UI elements into your Angular applications. This guide is specifically designed for **Angular 19**. If you are using a different version of Angular, please visit the [@nova-design-system/nova-angular](https://www.npmjs.com/package/@nova-design-system/nova-angular) page for the corresponding documentation and support.
 
-This package leverages Angular's modern features and optimizations, offering a streamlined integration process for both standalone components and Angular forms.
+This package leverages Angular's modern features and optimizations, offering a streamlined integration process for standalone components and Angular forms.
 
 - [Nova Components Angular (Angular 19 Only)](#nova-components-angular-angular-19-only)
   - [Installation](#installation)
-  - [Setup](#setup)
-    - [CSS Integration Using Tailwind (Recommended)](#css-integration-using-tailwind-recommended)
+  - [Setting up Tailwind](#setting-up-tailwind)
+    - [About Tailwind and the Nova Plugin](#about-tailwind-and-the-nova-plugin)
       - [1. Install Tailwind CSS](#1-install-tailwind-css)
       - [2. Configure PostCSS Plugins](#2-configure-postcss-plugins)
       - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
       - [4. Configure Tailwind and Nova Plugin in `styles.css`](#4-configure-tailwind-and-nova-plugin-in-stylescss)
       - [5. Include the Nova Tokens (Spark or Ocean)](#5-include-the-nova-tokens-spark-or-ocean)
-    - [CSS Integration Without Tailwind (Not Recommended)](#css-integration-without-tailwind-not-recommended)
-    - [Nova Font Pro Integration](#nova-font-pro-integration)
-      - [Option 1: Angular.json Configuration (Recommended)](#option-1-angularjson-configuration-recommended)
-      - [Option 2: Import in Styles.css](#option-2-import-in-stylescss)
-      - [Option 3: HTML Integration](#option-3-html-integration)
+  - [Nova Font Pro Integration](#nova-font-pro-integration)
+    - [Option 1: Angular.json Configuration (Recommended)](#option-1-angularjson-configuration-recommended)
+    - [Option 2: Import in Styles.css](#option-2-import-in-stylescss)
+    - [Option 3: HTML Integration](#option-3-html-integration)
   - [Standalone Component Setup](#standalone-component-setup)
     - [1. Provide Nova Components](#1-provide-nova-components)
     - [2. Configuring Standalone Components](#2-configuring-standalone-components)
@@ -42,23 +41,30 @@ yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @n
 ```
 
 > In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
-
-```bash
-npm config set strict-ssl false
-```
+>
+> ```bash
+> npm config set strict-ssl false
+> ```
 
 ---
 
-## Setup
+## Setting up Tailwind
 
-### CSS Integration Using Tailwind (Recommended)
+Nova Angular requires Tailwind CSS for styling. Tailwind provides a powerful utility-first workflow and an optimized bundle size. Nova includes a dedicated Tailwind theme and plugin that map Nova’s design tokens to Tailwind’s theme and utilities, enabling consistent, token-driven styling across your app.
 
-We highly recommend using Tailwind CSS for styling, as it ensures an optimized bundle size and a powerful utility-first workflow. Nova offers a dedicated Tailwind plugin and theme, allowing you to seamlessly integrate Nova’s design tokens with Tailwind’s utility classes for a consistent and efficient styling workflow.
-
-> **Tailwind Version**  
+> **Tailwind Version**
 > This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected.
+> See the official [Angular + Tailwind guide](https://tailwindcss.com/docs/installation/framework-guides/angular) for more details.
+
+### About Tailwind and the Nova Plugin
 
-Visit the official [Tailwind CSS Angular documentation](https://tailwindcss.com/docs/installation/framework-guides/angular) for more detailed installation instructions.
+- **What is Tailwind?** A utility-first CSS framework with low-level, composable classes (flex, grid, spacing, color, typography) to rapidly build UIs.
+- **Nova Tokens**: Nova ships design tokens as CSS variables (via the Spark and Ocean themes) for colors, spacing, typography, radii, shadows, and more.
+- **Integration**:
+  - `novaTailwindTheme` wires Nova tokens into Tailwind’s theme scales.
+  - The Nova Tailwind plugin exposes utilities and variants that reference those tokens, so your Tailwind classes resolve to Nova’s token values at runtime.
+- **Why import tokens CSS?** Import exactly one token CSS file (`spark.css` or `ocean.css`) so the underlying CSS variables exist at runtime. The Tailwind utilities generated by the plugin read from these variables.
+- **Do not mix with legacy utilities**: When using Tailwind, do not import `@nova-design-system/nova-base/dist/css/nova-utils.css` to avoid redundant CSS and larger bundles.
 
 #### 1. Install Tailwind CSS
 
@@ -121,57 +127,39 @@ Add the Nova Tokens CSS file to the `styles` array in your `angular.json` config
 }
 ```
 
-### CSS Integration Without Tailwind (Not Recommended)
-
-If you don’t plan to use Tailwind, Nova provides a large utility CSS file for quick prototyping. Be aware that this approach will increase your CSS bundle size, offer fewer options, and lack the flexibility and optimizations of Tailwind.
-
-To include the Nova theme and utility styles in your Angular project, add the CSS files to the `styles` array in your `angular.json` configuration:
-
-```json
-{
-  ...
-  "styles": [
-    "src/styles.css",
-    "@nova-design-system/nova-base/dist/css/nova-utils.css",
-    "@nova-design-system/nova-base/dist/css/spark.css" // or ocean.css
-  ],
-  ...
-}
-```
-
-This setup ensures that the Nova styles are available throughout your application.
+---
 
-### Nova Font Pro Integration
+## Nova Font Pro Integration
 
-> [!WARNING]  
-> Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project.  
-> To get the Nova Fonts URL, please contact us via Teams or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
+> [!WARNING]
+> Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project.
+> To get the Nova Fonts URL, **contact us via Teams** or see the Nova Design System internal wiki.
 
 Once you have the URL, you can integrate it using any of these methods:
 
-#### Option 1: Angular.json Configuration (Recommended)
+### Option 1: Angular.json Configuration (Recommended)
 
-Add the Nova Font Pro CDN URL to the styles array in your `angular.json` configuration:
+Add the Nova Font Pro URL to the styles array in your `angular.json` configuration:
 
 ```json
 "styles": [
-  "https://novaassets.azureedge.net/fonts/nova-fonts-pro.css"
+  "contact-us-for-URL/nova-fonts-pro.css"
 ]
 ```
 
-#### Option 2: Import in Styles.css
+### Option 2: Import in Styles.css
 
 ```css
-@import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');
+@import url('contact-us-for-URL');
 ```
 
-#### Option 3: HTML Integration
+### Option 3: HTML Integration
 
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
+  <link rel="stylesheet" href="contact-us-for-URL/nova-fonts-pro.css">
 </head>
 <body>
   <app-root></app-root>
@@ -179,6 +167,8 @@ Add the Nova Font Pro CDN URL to the styles array in your `angular.json` configu
 </html>
 ```
 
+The font CSS includes both font definitions and a `body { font-family: ... }` rule to apply fonts across your Angular application.
+
 ---
 
 ## Standalone Component Setup
@@ -190,9 +180,10 @@ Angular 19 encourages the use of standalone components with modern configuration
 To make Nova Web Components available across your application, add the `defineCustomElements` function as an app initializer in your application configuration:
 
 ```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
 import { provideAppInitializer } from '@angular/core';
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
-import { provideRouter } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -223,8 +214,6 @@ export class AppComponent {
 }
 ```
 
-> **Note:** Module-based setup is not supported in Angular 19. Please use the standalone component approach as shown above.
-
 ---
 
 ## Handling Angular Forms with Nova Components
@@ -233,7 +222,7 @@ Nova Components Angular supports seamless integration with Angular's reactive an
 
 ### Standalone Component Setup with Forms
 
-When working with forms in Angular 19, import the `NovaComponentsValueAccessorModule` along with Angular’s `FormsModule` in your standalone component to enable 2 way binding. Ensure to also include the `NovaComponentsModule`:
+When working with forms in Angular 19, import the `NovaComponentsValueAccessorModule` along with Angular’s `FormsModule` in your standalone component to enable two-way binding. Ensure to also include the `NovaComponentsModule`:
 
 ```typescript
 import { Component } from '@angular/core';
@@ -274,4 +263,3 @@ Nova Components Angular provides an easy and flexible way to incorporate Nova's
 If you require support for Angular versions other than 19, please refer to the [@nova-design-system/nova-angular](https://www.npmjs.com/package/@nova-design-system/nova-angular) documentation for the appropriate setup and configuration.
 
 Happy coding with Nova and Angular!
-```

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

@@ -3,6 +3,7 @@ import { Component, ChangeDetectionStrategy, Directive, HostListener, NgModule }
 import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+export * from '@nova-design-system/nova-webcomponents/constants';
 
 /* eslint-disable */
 /* tslint:disable */
@@ -299,11 +300,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);
@@ -314,7 +315,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 }] });
@@ -994,6 +995,33 @@ 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", 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', 'message', 'uid'],
+        methods: ['dismiss']
+    })
+], 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', 'message', 'uid'],
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
 let NvPopover = class NvPopover {
     constructor(c, r, z) {
         this.z = z;
@@ -1002,11 +1030,11 @@ let NvPopover = class NvPopover {
         proxyOutputs(this, this.el, ['openChanged']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvPopover, 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: NvPopover, isStandalone: false, selector: "nv-popover", inputs: { disableFlip: "disableFlip", enterDelay: "enterDelay", groupName: "groupName", hasArrow: "hasArrow", nested: "nested", offset: "offset", open: "open", placement: "placement", shiftPadding: "shiftPadding", triggerMode: "triggerMode" }, 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: NvPopover, isStandalone: false, selector: "nv-popover", inputs: { disableFlip: "disableFlip", enterDelay: "enterDelay", groupName: "groupName", hasArrow: "hasArrow", nested: "nested", offset: "offset", open: "open", placement: "placement", shiftPadding: "shiftPadding", strategy: "strategy", triggerMode: "triggerMode" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvPopover = __decorate([
     ProxyCmp({
-        inputs: ['disableFlip', 'enterDelay', 'groupName', 'hasArrow', 'nested', 'offset', 'open', 'placement', 'shiftPadding', 'triggerMode'],
+        inputs: ['disableFlip', 'enterDelay', 'groupName', 'hasArrow', 'nested', 'offset', 'open', 'placement', 'shiftPadding', 'strategy', 'triggerMode'],
         methods: ['show', 'hide', 'toggle']
     })
 ], NvPopover);
@@ -1017,7 +1045,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: ['disableFlip', 'enterDelay', 'groupName', 'hasArrow', 'nested', 'offset', 'open', 'placement', 'shiftPadding', 'triggerMode'],
+                    inputs: ['disableFlip', 'enterDelay', 'groupName', 'hasArrow', 'nested', 'offset', 'open', 'placement', 'shiftPadding', 'strategy', 'triggerMode'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -1206,11 +1234,11 @@ let NvTooltip = class NvTooltip {
         proxyOutputs(this, this.el, ['openChanged']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvTooltip, 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: NvTooltip, isStandalone: false, selector: "nv-tooltip", inputs: { enterDelay: "enterDelay", message: "message", placement: "placement" }, 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: NvTooltip, isStandalone: false, selector: "nv-tooltip", inputs: { enterDelay: "enterDelay", message: "message", placement: "placement", strategy: "strategy" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvTooltip = __decorate([
     ProxyCmp({
-        inputs: ['enterDelay', 'message', 'placement']
+        inputs: ['enterDelay', 'message', 'placement', 'strategy']
     })
 ], NvTooltip);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NvTooltip, decorators: [{
@@ -1220,7 +1248,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: ['enterDelay', 'message', 'placement'],
+                    inputs: ['enterDelay', 'message', 'placement', 'strategy'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -1262,6 +1290,7 @@ const DIRECTIVES = [
     NvLoader,
     NvMenu,
     NvMenuitem,
+    NvNotification,
     NvPopover,
     NvRow,
     NvStack,
@@ -1872,6 +1901,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);
@@ -1994,6 +2058,7 @@ const VALUE_ACCESSORS = [
     NvFieldsliderValueAccessor,
     NvFieldtextValueAccessor,
     NvFieldtextareaValueAccessor,
+    NvNotificationValueAccessor,
     NvPopoverValueAccessor,
     NvToggleValueAccessor,
     NvTogglebuttongroupValueAccessor,
@@ -2001,7 +2066,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, 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] }); }
     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: [{
@@ -2013,7 +2078,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: [{
@@ -2032,5 +2097,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 { 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 };
 //# sourceMappingURL=nova-components.mjs.map