@nova-design-system/nova-angular-18 3.14.0 → 3.16.0

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

@@ -1,8 +1,11 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, HostListener, Directive, APP_INITIALIZER, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, untracked, computed, InjectionToken, inject, reflectComponentType, ViewContainerRef, Injectable, KeyValueDiffers, ChangeDetectorRef, OutputEmitterRef, TemplateRef, Type, Injector, runInInjectionContext, effect, Input, Inject, Directive, signal, input, CUSTOM_ELEMENTS_SCHEMA, HostListener, APP_INITIALIZER, NgModule, ElementRef, ViewChildren } from '@angular/core';
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 import { __decorate } from 'tslib';
-import { fromEvent } from 'rxjs';
+import { fromEvent, BehaviorSubject } from 'rxjs';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { memo, createTable, getCoreRowModel } from '@tanstack/table-core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export * from '@nova-design-system/nova-webcomponents/constants';
 
@@ -69,7 +72,7 @@ let NvAccordion = class NvAccordion {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['openChanged']);
+        proxyOutputs(this, this.el, ['openIndexesChanged']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvAccordion, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NvAccordion, selector: "nv-accordion", inputs: { data: "data", mode: "mode", openIndexes: "openIndexes" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1004,12 +1007,12 @@ let NvNotification = class NvNotification {
         proxyOutputs(this, this.el, ['hiddenChanged']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: NvNotification, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NvNotification, 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', 'message', 'uid'],
-        methods: ['dismiss']
+        inputs: ['dismissible', 'emphasis', 'feedback', 'heading', 'hidden', 'icon', 'initiallyHidden', 'message', 'uid'],
+        methods: ['dismiss', 'show']
     })
 ], NvNotification);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvNotification, decorators: [{
@@ -1019,7 +1022,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     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'],
+                    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: "18.2.13", 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: "18.2.13", type: NvNotificationcontainer, 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: "18.2.13", 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 }] });
@@ -1103,15 +1131,12 @@ let NvTable = class NvTable {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['action']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvTable, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NvTable, selector: "nv-table", inputs: { columnsConfig: "columnsConfig", columnsConfigJson: "columnsConfigJson", data: "data", dataJson: "dataJson", fallbackValue: "fallbackValue", noColumnsNoDataMessage: "noColumnsNoDataMessage", noDataMessage: "noDataMessage" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NvTable, selector: "nv-table", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvTable = __decorate([
-    ProxyCmp({
-        inputs: ['columnsConfig', 'columnsConfigJson', 'data', 'dataJson', 'fallbackValue', 'noColumnsNoDataMessage', 'noDataMessage']
-    })
+    ProxyCmp({})
 ], NvTable);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvTable, decorators: [{
             type: Component,
@@ -1120,32 +1145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['columnsConfig', 'columnsConfigJson', 'data', 'dataJson', 'fallbackValue', 'noColumnsNoDataMessage', 'noDataMessage'],
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
-let NvTablecolumn = class NvTablecolumn {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvTablecolumn, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NvTablecolumn, selector: "nv-tablecolumn", inputs: { header: "header", name: "name" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-NvTablecolumn = __decorate([
-    ProxyCmp({
-        inputs: ['header', 'name']
-    })
-], NvTablecolumn);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvTablecolumn, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nv-tablecolumn',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['header', { name: 'name', required: true }],
+                    inputs: [],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -1292,17 +1292,895 @@ const DIRECTIVES = [
     NvMenu,
     NvMenuitem,
     NvNotification,
+    NvNotificationcontainer,
     NvPopover,
     NvRow,
     NvStack,
     NvTable,
-    NvTablecolumn,
     NvToggle,
     NvTogglebutton,
     NvTogglebuttongroup,
     NvTooltip
 ];
 
+/**
+ * Implementation from @tanstack/angular-query
+ * {@link https://github.com/TanStack/query/blob/main/packages/angular-query-experimental/src/util/lazy-init/lazy-init.ts}
+ */
+function lazyInit(initializer) {
+    let object = null;
+    const initializeObject = () => {
+        if (!object) {
+            object = untracked(() => initializer());
+        }
+    };
+    queueMicrotask(() => initializeObject());
+    const table = () => { };
+    return new Proxy(table, {
+        apply(target, thisArg, argArray) {
+            initializeObject();
+            if (typeof object === 'function') {
+                return Reflect.apply(object, thisArg, argArray);
+            }
+            return Reflect.apply(target, thisArg, argArray);
+        },
+        get(_, prop, receiver) {
+            initializeObject();
+            return Reflect.get(object, prop, receiver);
+        },
+        has(_, prop) {
+            initializeObject();
+            return Reflect.has(object, prop);
+        },
+        ownKeys() {
+            initializeObject();
+            return Reflect.ownKeys(object);
+        },
+        getOwnPropertyDescriptor() {
+            return {
+                enumerable: true,
+                configurable: true,
+            };
+        },
+    });
+}
+
+function proxifyTable(tableSignal) {
+    const internalState = tableSignal;
+    return new Proxy(internalState, {
+        apply() {
+            return tableSignal();
+        },
+        get(target, property) {
+            if (target[property]) {
+                return target[property];
+            }
+            const table = untracked(tableSignal);
+            /**
+             * Attempt to convert all accessors into computed ones,
+             * excluding handlers as they do not retain any reactive value
+             */
+            if (property.startsWith('get') &&
+                !property.endsWith('Handler')
+            // e.g. getCoreRowModel, getSelectedRowModel etc.
+            // We need that after a signal change even `rowModel` may mark the view as dirty.
+            // This allows to always get the latest `getContext` value while using flexRender
+            // && !property.endsWith('Model')
+            ) {
+                const maybeFn = table[property];
+                if (typeof maybeFn === 'function') {
+                    Object.defineProperty(target, property, {
+                        value: toComputed(tableSignal, maybeFn),
+                        configurable: true,
+                        enumerable: true,
+                    });
+                    return target[property];
+                }
+            }
+            // @ts-expect-error
+            return (target[property] = table[property]);
+        },
+        has(_, prop) {
+            return !!untracked(tableSignal)[prop];
+        },
+        ownKeys() {
+            return Reflect.ownKeys(untracked(tableSignal));
+        },
+        getOwnPropertyDescriptor() {
+            return {
+                enumerable: true,
+                configurable: true,
+            };
+        },
+    });
+}
+/**
+ * Here we'll handle all type of accessors:
+ * - 0 argument -> e.g. table.getCanNextPage())
+ * - 0~1 arguments -> e.g. table.getIsSomeRowsPinned(position?)
+ * - 1 required argument -> e.g. table.getColumn(columnId)
+ * - 1+ argument -> e.g. table.getRow(id, searchAll?)
+ *
+ * Since we are not able to detect automatically the accessors parameters,
+ * we'll wrap all accessors into a cached function wrapping a computed
+ * that return it's value based on the given parameters
+ */
+function toComputed(signal, fn) {
+    const hasArgs = fn.length > 0;
+    if (!hasArgs) {
+        return computed(() => {
+            void signal();
+            return fn();
+        });
+    }
+    const computedCache = {};
+    return (...argsArray) => {
+        const serializedArgs = serializeArgs(...argsArray);
+        if (computedCache.hasOwnProperty(serializedArgs)) {
+            return computedCache[serializedArgs]?.();
+        }
+        const computedSignal = computed(() => {
+            void signal();
+            return fn(...argsArray);
+        });
+        computedCache[serializedArgs] = computedSignal;
+        return computedSignal();
+    };
+}
+function serializeArgs(...args) {
+    return JSON.stringify(args);
+}
+
+const FlexRenderComponentProps = new InjectionToken('[@tanstack/angular-table] Flex render component context props');
+function injectFlexRenderContext() {
+    return inject(FlexRenderComponentProps);
+}
+
+/**
+ * Flags used to manage and optimize the rendering lifecycle of content of the cell,
+ * while using FlexRenderDirective.
+ */
+var FlexRenderFlags;
+(function (FlexRenderFlags) {
+    /**
+     * Indicates that the view is being created for the first time or will be cleared during the next update phase.
+     * This is the initial state and will transition after the first ngDoCheck.
+     */
+    FlexRenderFlags[FlexRenderFlags["ViewFirstRender"] = 1] = "ViewFirstRender";
+    /**
+     * Represents a state where the view is not dirty, meaning no changes require rendering updates.
+     */
+    FlexRenderFlags[FlexRenderFlags["Pristine"] = 2] = "Pristine";
+    /**
+     * Indicates the `content` property has been modified or the view requires a complete re-render.
+     * When this flag is enabled, the view will be cleared and recreated from scratch.
+     */
+    FlexRenderFlags[FlexRenderFlags["ContentChanged"] = 4] = "ContentChanged";
+    /**
+     * Indicates that the `props` property reference has changed.
+     * When this flag is enabled, the view context is updated based on the type of the content.
+     *
+     * For Component view, inputs will be updated and view will be marked as dirty.
+     * For TemplateRef and primitive values, view will be marked as dirty
+     */
+    FlexRenderFlags[FlexRenderFlags["PropsReferenceChanged"] = 8] = "PropsReferenceChanged";
+    /**
+     * Indicates that the current rendered view needs to be checked for changes.
+     */
+    FlexRenderFlags[FlexRenderFlags["DirtyCheck"] = 16] = "DirtyCheck";
+    /**
+     * Indicates that a signal within the `content(props)` result has changed
+     */
+    FlexRenderFlags[FlexRenderFlags["DirtySignal"] = 32] = "DirtySignal";
+    /**
+     * Indicates that the first render effect has been checked at least one time.
+     */
+    FlexRenderFlags[FlexRenderFlags["RenderEffectChecked"] = 64] = "RenderEffectChecked";
+})(FlexRenderFlags || (FlexRenderFlags = {}));
+
+/**
+ * Helper function to create a [@link FlexRenderComponent] instance, with better type-safety.
+ *
+ * - options object must be passed when the given component instance contains at least one required signal input.
+ * - options/inputs is typed with the given component inputs
+ * - options/outputs is typed with the given component outputs
+ */
+function flexRenderComponent(component, ...options) {
+    const { inputs, injector, outputs } = options?.[0] ?? {};
+    return new FlexRenderComponent(component, inputs, injector, outputs);
+}
+/**
+ * Wrapper class for a component that will be used as content for {@link FlexRenderDirective}
+ *
+ * Prefer {@link flexRenderComponent} helper for better type-safety
+ */
+class FlexRenderComponent {
+    constructor(component, inputs, injector, outputs) {
+        this.component = component;
+        this.inputs = inputs;
+        this.injector = injector;
+        this.outputs = outputs;
+        this.allowedInputNames = [];
+        this.allowedOutputNames = [];
+        const mirror = reflectComponentType(component);
+        if (!mirror) {
+            throw new Error(`[@tanstack-table/angular] The provided symbol is not a component`);
+        }
+        this.mirror = mirror;
+        for (const input of this.mirror.inputs) {
+            this.allowedInputNames.push(input.propName);
+        }
+        for (const output of this.mirror.outputs) {
+            this.allowedOutputNames.push(output.propName);
+        }
+    }
+}
+
+class FlexRenderComponentFactory {
+    #viewContainerRef = inject(ViewContainerRef);
+    createComponent(flexRenderComponent, componentInjector) {
+        const componentRef = this.#viewContainerRef.createComponent(flexRenderComponent.component, {
+            injector: componentInjector,
+        });
+        const view = new FlexRenderComponentRef(componentRef, flexRenderComponent, componentInjector);
+        const { inputs, outputs } = flexRenderComponent;
+        if (inputs)
+            view.setInputs(inputs);
+        if (outputs)
+            view.setOutputs(outputs);
+        return view;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlexRenderComponentFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlexRenderComponentFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlexRenderComponentFactory, decorators: [{
+            type: Injectable
+        }] });
+class FlexRenderComponentRef {
+    #keyValueDiffersFactory;
+    #componentData;
+    #inputValueDiffer;
+    #outputRegistry;
+    constructor(componentRef, componentData, componentInjector) {
+        this.componentRef = componentRef;
+        this.componentInjector = componentInjector;
+        this.#componentData = componentData;
+        this.#keyValueDiffersFactory = componentInjector.get(KeyValueDiffers);
+        this.#outputRegistry = new FlexRenderComponentOutputManager(this.#keyValueDiffersFactory, this.outputs);
+        this.#inputValueDiffer = this.#keyValueDiffersFactory
+            .find(this.inputs)
+            .create();
+        this.#inputValueDiffer.diff(this.inputs);
+        this.componentRef.onDestroy(() => this.#outputRegistry.unsubscribeAll());
+    }
+    get component() {
+        return this.#componentData.component;
+    }
+    get inputs() {
+        return this.#componentData.inputs ?? {};
+    }
+    get outputs() {
+        return this.#componentData.outputs ?? {};
+    }
+    /**
+     * Get component input and output diff by the given item
+     */
+    diff(item) {
+        return {
+            inputDiff: this.#inputValueDiffer.diff(item.inputs ?? {}),
+            outputDiff: this.#outputRegistry.diff(item.outputs ?? {}),
+        };
+    }
+    /**
+     *
+     * @param compare Whether the current ref component instance is the same as the given one
+     */
+    eqType(compare) {
+        return compare.component === this.component;
+    }
+    /**
+     * Tries to update current component refs input by the new given content component.
+     */
+    update(content) {
+        const eq = this.eqType(content);
+        if (!eq)
+            return;
+        const { inputDiff, outputDiff } = this.diff(content);
+        if (inputDiff) {
+            inputDiff.forEachAddedItem(item => this.setInput(item.key, item.currentValue));
+            inputDiff.forEachChangedItem(item => this.setInput(item.key, item.currentValue));
+            inputDiff.forEachRemovedItem(item => this.setInput(item.key, undefined));
+        }
+        if (outputDiff) {
+            outputDiff.forEachAddedItem(item => {
+                this.setOutput(item.key, item.currentValue);
+            });
+            outputDiff.forEachChangedItem(item => {
+                if (item.currentValue) {
+                    this.#outputRegistry.setListener(item.key, item.currentValue);
+                }
+                else {
+                    this.#outputRegistry.unsubscribe(item.key);
+                }
+            });
+            outputDiff.forEachRemovedItem(item => {
+                this.#outputRegistry.unsubscribe(item.key);
+            });
+        }
+        this.#componentData = content;
+    }
+    markAsDirty() {
+        this.componentRef.injector.get(ChangeDetectorRef).markForCheck();
+    }
+    setInputs(inputs) {
+        for (const prop in inputs) {
+            this.setInput(prop, inputs[prop]);
+        }
+    }
+    setInput(key, value) {
+        if (this.#componentData.allowedInputNames.includes(key)) {
+            this.componentRef.setInput(key, value);
+        }
+    }
+    setOutputs(outputs) {
+        this.#outputRegistry.unsubscribeAll();
+        for (const prop in outputs) {
+            this.setOutput(prop, outputs[prop]);
+        }
+    }
+    setOutput(outputName, emit) {
+        if (!this.#componentData.allowedOutputNames.includes(outputName))
+            return;
+        if (!emit) {
+            this.#outputRegistry.unsubscribe(outputName);
+            return;
+        }
+        const hasListener = this.#outputRegistry.hasListener(outputName);
+        this.#outputRegistry.setListener(outputName, emit);
+        if (hasListener) {
+            return;
+        }
+        const instance = this.componentRef.instance;
+        const output = instance[outputName];
+        if (output && output instanceof OutputEmitterRef) {
+            output.subscribe(value => {
+                this.#outputRegistry.getListener(outputName)?.(value);
+            });
+        }
+    }
+}
+class FlexRenderComponentOutputManager {
+    #outputSubscribers = {};
+    #outputListeners = {};
+    #valueDiffer;
+    constructor(keyValueDiffers, initialOutputs) {
+        this.#valueDiffer = keyValueDiffers.find(initialOutputs).create();
+        if (initialOutputs) {
+            this.#valueDiffer.diff(initialOutputs);
+        }
+    }
+    hasListener(outputName) {
+        return outputName in this.#outputListeners;
+    }
+    setListener(outputName, callback) {
+        this.#outputListeners[outputName] = callback;
+    }
+    getListener(outputName) {
+        return this.#outputListeners[outputName];
+    }
+    unsubscribeAll() {
+        for (const prop in this.#outputSubscribers) {
+            this.unsubscribe(prop);
+        }
+    }
+    unsubscribe(outputName) {
+        if (outputName in this.#outputSubscribers) {
+            this.#outputSubscribers[outputName]?.unsubscribe();
+            delete this.#outputSubscribers[outputName];
+            delete this.#outputListeners[outputName];
+        }
+    }
+    diff(outputs) {
+        return this.#valueDiffer.diff(outputs ?? {});
+    }
+}
+
+function mapToFlexRenderTypedContent(content) {
+    if (content === null || content === undefined) {
+        return { kind: 'null' };
+    }
+    if (typeof content === 'string' || typeof content === 'number') {
+        return { kind: 'primitive', content };
+    }
+    if (content instanceof FlexRenderComponent) {
+        return { kind: 'flexRenderComponent', content };
+    }
+    else if (content instanceof TemplateRef) {
+        return { kind: 'templateRef', content };
+    }
+    else if (content instanceof Type) {
+        return { kind: 'component', content };
+    }
+    else {
+        return { kind: 'primitive', content };
+    }
+}
+class FlexRenderView {
+    #previousContent;
+    #content;
+    constructor(initialContent, view) {
+        this.#content = initialContent;
+        this.view = view;
+    }
+    get previousContent() {
+        return this.#previousContent ?? { kind: 'null' };
+    }
+    get content() {
+        return this.#content;
+    }
+    set content(content) {
+        this.#previousContent = this.#content;
+        this.#content = content;
+    }
+}
+class FlexRenderTemplateView extends FlexRenderView {
+    constructor(initialContent, view) {
+        super(initialContent, view);
+    }
+    updateProps(props) {
+        this.view.markForCheck();
+    }
+    dirtyCheck() {
+        // Basically a no-op. When the view is created via EmbeddedViewRef, we don't need to do any manual update
+        // since this type of content has a proxy as a context, then every time the root component is checked for changes,
+        // the property getter will be re-evaluated.
+        //
+        // If in a future we need to manually mark the view as dirty, just uncomment next line
+        // this.view.markForCheck()
+    }
+    onDestroy(callback) {
+        this.view.onDestroy(callback);
+    }
+}
+class FlexRenderComponentView extends FlexRenderView {
+    constructor(initialContent, view) {
+        super(initialContent, view);
+    }
+    updateProps(props) {
+        switch (this.content.kind) {
+            case 'component': {
+                this.view.setInputs(props);
+                break;
+            }
+            case 'flexRenderComponent': {
+                // No-op. When FlexRenderFlags.PropsReferenceChanged is set,
+                // FlexRenderComponent will be updated into `dirtyCheck`.
+                break;
+            }
+        }
+    }
+    dirtyCheck() {
+        switch (this.content.kind) {
+            case 'component': {
+                // Component context is currently valuated with the cell context. Since it's reference
+                // shouldn't change, we force mark the component as dirty in order to re-evaluate function invocation in view.
+                // NOTE: this should behave like having a component with ChangeDetectionStrategy.Default
+                this.view.markAsDirty();
+                break;
+            }
+            case 'flexRenderComponent': {
+                // Given context instance will always have a different reference than the previous one,
+                // so instead of recreating the entire view, we will only update the current view
+                if (this.view.eqType(this.content.content)) {
+                    this.view.update(this.content.content);
+                }
+                this.view.markAsDirty();
+                break;
+            }
+        }
+    }
+    onDestroy(callback) {
+        this.view.componentRef.onDestroy(callback);
+    }
+}
+
+class FlexRenderDirective {
+    #flexRenderComponentFactory;
+    #changeDetectorRef;
+    #latestContent;
+    #getContentValue;
+    constructor(viewContainerRef, templateRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.#flexRenderComponentFactory = inject(FlexRenderComponentFactory);
+        this.#changeDetectorRef = inject(ChangeDetectorRef);
+        this.content = undefined;
+        this.props = {};
+        this.injector = inject(Injector);
+        this.renderFlags = FlexRenderFlags.ViewFirstRender;
+        this.renderView = null;
+        this.#latestContent = () => {
+            const { content, props } = this;
+            return typeof content !== 'function'
+                ? content
+                : runInInjectionContext(this.injector, () => content(props));
+        };
+        this.#getContentValue = memo(() => [this.#latestContent(), this.props, this.content], latestContent => {
+            return mapToFlexRenderTypedContent(latestContent);
+        }, { key: 'flexRenderContentValue', debug: () => false });
+        this.#currentEffectRef = null;
+    }
+    ngOnChanges(changes) {
+        if (changes['props']) {
+            this.renderFlags |= FlexRenderFlags.PropsReferenceChanged;
+        }
+        if (changes['content']) {
+            this.renderFlags |=
+                FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender;
+            this.update();
+        }
+    }
+    ngDoCheck() {
+        if (this.renderFlags & FlexRenderFlags.ViewFirstRender) {
+            // On the initial render, the view is created during the `ngOnChanges` hook.
+            // Since `ngDoCheck` is called immediately afterward, there's no need to check for changes in this phase.
+            this.renderFlags &= ~FlexRenderFlags.ViewFirstRender;
+            return;
+        }
+        this.renderFlags |= FlexRenderFlags.DirtyCheck;
+        const latestContent = this.#getContentValue();
+        if (latestContent.kind === 'null' || !this.renderView) {
+            this.renderFlags |= FlexRenderFlags.ContentChanged;
+        }
+        else {
+            this.renderView.content = latestContent;
+            const { kind: previousKind } = this.renderView.previousContent;
+            if (latestContent.kind !== previousKind) {
+                this.renderFlags |= FlexRenderFlags.ContentChanged;
+            }
+        }
+        this.update();
+    }
+    update() {
+        if (this.renderFlags &
+            (FlexRenderFlags.ContentChanged | FlexRenderFlags.ViewFirstRender)) {
+            this.render();
+            return;
+        }
+        if (this.renderFlags & FlexRenderFlags.PropsReferenceChanged) {
+            if (this.renderView)
+                this.renderView.updateProps(this.props);
+            this.renderFlags &= ~FlexRenderFlags.PropsReferenceChanged;
+        }
+        if (this.renderFlags &
+            (FlexRenderFlags.DirtyCheck | FlexRenderFlags.DirtySignal)) {
+            if (this.renderView)
+                this.renderView.dirtyCheck();
+            this.renderFlags &= ~(FlexRenderFlags.DirtyCheck | FlexRenderFlags.DirtySignal);
+        }
+    }
+    #currentEffectRef;
+    render() {
+        if (this.#shouldRecreateEntireView() && this.#currentEffectRef) {
+            this.#currentEffectRef.destroy();
+            this.#currentEffectRef = null;
+            this.renderFlags &= ~FlexRenderFlags.RenderEffectChecked;
+        }
+        this.viewContainerRef.clear();
+        this.renderFlags =
+            FlexRenderFlags.Pristine |
+                (this.renderFlags & FlexRenderFlags.ViewFirstRender) |
+                (this.renderFlags & FlexRenderFlags.RenderEffectChecked);
+        const resolvedContent = this.#getContentValue();
+        if (resolvedContent.kind === 'null') {
+            this.renderView = null;
+        }
+        else {
+            this.renderView = this.#renderViewByContent(resolvedContent);
+        }
+        // If the content is a function `content(props)`, we initialize an effect
+        // in order to react to changes if the given definition use signals.
+        if (!this.#currentEffectRef && typeof this.content === 'function') {
+            this.#currentEffectRef = effect(() => {
+                this.#latestContent();
+                if (!(this.renderFlags & FlexRenderFlags.RenderEffectChecked)) {
+                    this.renderFlags |= FlexRenderFlags.RenderEffectChecked;
+                    return;
+                }
+                this.renderFlags |= FlexRenderFlags.DirtySignal;
+                // This will mark the view as changed,
+                // so we'll try to check for updates into ngDoCheck
+                this.#changeDetectorRef.markForCheck();
+            }, { injector: this.viewContainerRef.injector });
+        }
+    }
+    #shouldRecreateEntireView() {
+        return (this.renderFlags &
+            FlexRenderFlags.ContentChanged &
+            FlexRenderFlags.ViewFirstRender);
+    }
+    #renderViewByContent(content) {
+        if (content.kind === 'primitive') {
+            return this.#renderStringContent(content);
+        }
+        else if (content.kind === 'templateRef') {
+            return this.#renderTemplateRefContent(content);
+        }
+        else if (content.kind === 'flexRenderComponent') {
+            return this.#renderComponent(content);
+        }
+        else if (content.kind === 'component') {
+            return this.#renderCustomComponent(content);
+        }
+        else {
+            return null;
+        }
+    }
+    #renderStringContent(template) {
+        const context = () => {
+            return typeof this.content === 'string' ||
+                typeof this.content === 'number'
+                ? this.content
+                : this.content?.(this.props);
+        };
+        const ref = this.viewContainerRef.createEmbeddedView(this.templateRef, {
+            get $implicit() {
+                return context();
+            },
+        });
+        return new FlexRenderTemplateView(template, ref);
+    }
+    #renderTemplateRefContent(template) {
+        const latestContext = () => this.props;
+        const view = this.viewContainerRef.createEmbeddedView(template.content, {
+            get $implicit() {
+                return latestContext();
+            },
+        });
+        return new FlexRenderTemplateView(template, view);
+    }
+    #renderComponent(flexRenderComponent) {
+        const { inputs, outputs, injector } = flexRenderComponent.content;
+        const getContext = () => this.props;
+        const proxy = new Proxy(this.props, {
+            get: (_, key) => getContext()[key],
+        });
+        const componentInjector = Injector.create({
+            parent: injector ?? this.injector,
+            providers: [{ provide: FlexRenderComponentProps, useValue: proxy }],
+        });
+        const view = this.#flexRenderComponentFactory.createComponent(flexRenderComponent.content, componentInjector);
+        return new FlexRenderComponentView(flexRenderComponent, view);
+    }
+    #renderCustomComponent(component) {
+        const view = this.#flexRenderComponentFactory.createComponent(flexRenderComponent(component.content, {
+            inputs: this.props,
+            injector: this.injector,
+        }), this.injector);
+        return new FlexRenderComponentView(component, view);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlexRenderDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: FlexRenderDirective, isStandalone: true, selector: "[flexRender]", inputs: { content: ["flexRender", "content"], props: ["flexRenderProps", "props"], injector: ["flexRenderInjector", "injector"] }, providers: [FlexRenderComponentFactory], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FlexRenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[flexRender]',
+                    standalone: true,
+                    providers: [FlexRenderComponentFactory],
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef, decorators: [{
+                    type: Inject,
+                    args: [ViewContainerRef]
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }], propDecorators: { content: [{
+                type: Input,
+                args: [{ required: true, alias: 'flexRender' }]
+            }], props: [{
+                type: Input,
+                args: [{ required: true, alias: 'flexRenderProps' }]
+            }], injector: [{
+                type: Input,
+                args: [{ required: false, alias: 'flexRenderInjector' }]
+            }] } });
+
+function createAngularTable(options) {
+    return lazyInit(() => {
+        const resolvedOptions = {
+            state: {},
+            onStateChange: () => { },
+            renderFallbackValue: null,
+            ...options(),
+        };
+        const table = createTable(resolvedOptions);
+        // By default, manage table state here using the table's initial state
+        const state = signal(table.initialState);
+        // Compose table options using computed.
+        // This is to allow `tableSignal` to listen and set table option
+        const updatedOptions = computed(() => {
+            // listen to table state changed
+            const tableState = state();
+            // listen to input options changed
+            const tableOptions = options();
+            return {
+                ...table.options,
+                ...resolvedOptions,
+                ...tableOptions,
+                state: { ...tableState, ...tableOptions.state },
+                onStateChange: updater => {
+                    const value = updater instanceof Function ? updater(tableState) : updater;
+                    state.set(value);
+                    resolvedOptions.onStateChange?.(updater);
+                },
+            };
+        });
+        // convert table instance to signal for proxify to listen to any table state and options changes
+        const tableSignal = computed(() => {
+            table.setOptions(updatedOptions());
+            return table;
+        }, {
+            equal: () => false,
+        });
+        // proxify Table instance to provide ability for consumer to listen to any table state changes
+        return proxifyTable(tableSignal);
+    });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable jsdoc/require-returns */
+/**
+ * Nova Datatable built on TanStack Table (Angular).
+ */
+class NvDatatable {
+    constructor() {
+        /** Column definitions */
+        this.columns = input([]);
+        /** Row data */
+        this.rows = input([]);
+        /** Computed table columns with proper typing and filtering. */
+        this.tableColumns = computed(() => this.columns()
+            .filter((col) => !col.hidden)
+            .map((col) => ({
+            accessorKey: col.field,
+            header: col.headerName || String(col.field),
+            size: col.width,
+            enableResizing: col.resizable ?? true,
+            cell: col.renderCell ??
+                ((context) => context.getValue()),
+        })));
+        /** TanStack table instance with Signals */
+        this.tableInstance = createAngularTable(() => ({
+            data: this.rows(),
+            columns: this.tableColumns(),
+            getCoreRowModel: getCoreRowModel(),
+        }));
+    }
+    /** Public getter for table instance. */
+    table() {
+        return this.tableInstance();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvDatatable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NvDatatable, isStandalone: true, selector: "nv-datatable", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nv-table>
+      <table>
+        <thead>
+          @for (headerGroup of table().getHeaderGroups(); track headerGroup.id)
+          {
+          <tr>
+            @for (header of headerGroup.headers; track header.id) {
+            <th
+              [attr.data-testid]="'datatable-header-' + header.id"
+              [style.width]="
+                header.column.columnDef.size
+                  ? header.column.columnDef.size + 'px'
+                  : null
+              "
+              [attr.data-no-resize]="
+                !header.column.columnDef.enableResizing ? 'true' : null
+              "
+            >
+              @if (!header.isPlaceholder) {
+              {{ header.column.columnDef.header }}
+              }
+            </th>
+            }
+          </tr>
+          }
+        </thead>
+
+        <tbody>
+          @for (row of table().getRowModel().rows; track row.id) {
+          <tr [attr.data-testid]="'datatable-row-' + row.id">
+            @for (cell of row.getVisibleCells(); track cell.id) {
+            <td
+              [attr.data-testid]="'datatable-cell-' + cell.id"
+              style="padding: 8px; border-bottom: 1px solid #eee;"
+            >
+              <!-- Let FlexRender handle strings vs TemplateRef -->
+              <ng-container
+                *flexRender="
+                  cell.column.columnDef.cell;
+                  props: cell.getContext();
+                  let cellContent
+                "
+              >
+                {{ cellContent }}
+              </ng-container>
+            </td>
+            }
+          </tr>
+          }
+        </tbody>
+      </table>
+    </nv-table>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvDatatable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nv-datatable',
+                    standalone: true,
+                    imports: [CommonModule, FlexRenderDirective],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    template: `
+    <nv-table>
+      <table>
+        <thead>
+          @for (headerGroup of table().getHeaderGroups(); track headerGroup.id)
+          {
+          <tr>
+            @for (header of headerGroup.headers; track header.id) {
+            <th
+              [attr.data-testid]="'datatable-header-' + header.id"
+              [style.width]="
+                header.column.columnDef.size
+                  ? header.column.columnDef.size + 'px'
+                  : null
+              "
+              [attr.data-no-resize]="
+                !header.column.columnDef.enableResizing ? 'true' : null
+              "
+            >
+              @if (!header.isPlaceholder) {
+              {{ header.column.columnDef.header }}
+              }
+            </th>
+            }
+          </tr>
+          }
+        </thead>
+
+        <tbody>
+          @for (row of table().getRowModel().rows; track row.id) {
+          <tr [attr.data-testid]="'datatable-row-' + row.id">
+            @for (cell of row.getVisibleCells(); track cell.id) {
+            <td
+              [attr.data-testid]="'datatable-cell-' + cell.id"
+              style="padding: 8px; border-bottom: 1px solid #eee;"
+            >
+              <!-- Let FlexRender handle strings vs TemplateRef -->
+              <ng-container
+                *flexRender="
+                  cell.column.columnDef.cell;
+                  props: cell.getContext();
+                  let cellContent
+                "
+              >
+                {{ cellContent }}
+              </ng-container>
+            </td>
+            }
+          </tr>
+          }
+        </tbody>
+      </table>
+    </nv-table>
+  `,
+                }]
+        }] });
+
 class ValueAccessor {
     constructor(el) {
         this.el = el;
@@ -1342,6 +2220,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['focusout']
             }] } });
 
+class NvAccordionValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+    handleOpenIndexesChanged(event) {
+        this.handleChangeEvent(event.target.openIndexes);
+    }
+    writeValue(value) {
+        this.el.nativeElement.openIndexes = this.lastValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvAccordionValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: NvAccordionValueAccessor, selector: "nv-accordion", host: { listeners: { "openIndexesChanged": "handleOpenIndexesChanged($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: NvAccordionValueAccessor,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvAccordionValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'nv-accordion',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: NvAccordionValueAccessor,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { handleOpenIndexesChanged: [{
+                type: HostListener,
+                args: ['openIndexesChanged', ['$event']]
+            }] } });
 class NvAlertValueAccessor extends ValueAccessor {
     constructor(el) {
         super(el);
@@ -2043,6 +2956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['valueChanged', ['$event']]
             }] } });
 const VALUE_ACCESSORS = [
+    NvAccordionValueAccessor,
     NvAlertValueAccessor,
     NvCalendarValueAccessor,
     NvDatagridValueAccessor,
@@ -2079,20 +2993,21 @@ function provideNovaComponents() {
 }
 class NovaComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: NovaComponentsModule, providers: [provideNovaComponents()] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", 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, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip], imports: [NvDatatable], 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, NvToggle, NvTogglebutton, NvTogglebuttongroup, NvTooltip, NvDatatable] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsModule, providers: [provideNovaComponents()], imports: [NvDatatable] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsModule, decorators: [{
             type: NgModule,
             args: [{
+                    imports: [NvDatatable],
                     declarations: [...DIRECTIVES],
-                    exports: [...DIRECTIVES],
+                    exports: [...DIRECTIVES, NvDatatable],
                     providers: [provideNovaComponents()],
                 }]
         }] });
 class NovaComponentsValueAccessorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsValueAccessorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsValueAccessorModule, declarations: [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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsValueAccessorModule, declarations: [NvAccordionValueAccessor, NvAlertValueAccessor, NvCalendarValueAccessor, NvDatagridValueAccessor, NvDialogValueAccessor, NvFieldcheckboxValueAccessor, NvFielddateValueAccessor, NvFielddaterangeValueAccessor, NvFielddropdownValueAccessor, NvFieldmultiselectValueAccessor, NvFieldnumberValueAccessor, NvFieldpasswordValueAccessor, NvFieldradioValueAccessor, NvFieldselectValueAccessor, NvFieldsliderValueAccessor, NvFieldtextValueAccessor, NvFieldtextareaValueAccessor, NvNotificationValueAccessor, NvPopoverValueAccessor, NvToggleValueAccessor, NvTogglebuttongroupValueAccessor], exports: [NvAccordionValueAccessor, 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: "18.2.13", ngImport: i0, type: NovaComponentsValueAccessorModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NovaComponentsValueAccessorModule, decorators: [{
@@ -2103,6 +3018,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * 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: "18.2.13", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: NotificationServiceComponent, deps: [{ token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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"] }, { 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: "18.2.13", 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
  */
@@ -2111,5 +3335,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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, NvNotification, NvNotificationValueAccessor, NvPopover, NvPopoverValueAccessor, NvRow, NvStack, NvTable, NvTablecolumn, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, provideNovaComponents };
+export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, 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, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent, provideNovaComponents };
 //# sourceMappingURL=nova-components.mjs.map