@nova-design-system/nova-angular-19 3.18.0 → 3.20.0

package/dist/nova-components/lib/components/nv-datatable-cell.directive.d.ts

@@ -4,9 +4,9 @@ import * as i0 from "@angular/core";
 /**
  * Context type for cell templates - uses TanStack Table's CellContext directly
  */
-export type NvDatatableCellContext<T> = {
+export type NvDatatableCellContext<T, V> = {
     /** The cell's actual value */
-    $implicit: CellContext<T, unknown>;
+    $implicit: CellContext<T, V>;
 };
 /**
  * Directive to mark ng-templates as cell templates for specific fields.
@@ -24,14 +24,14 @@ export type NvDatatableCellContext<T> = {
  * </nv-datatable>
  * ```
  */
-export declare class NvDatatableCellDirective<T = any> {
-    template: TemplateRef<NvDatatableCellContext<T>>;
+export declare class NvDatatableCellDirective<T, V> {
+    template: TemplateRef<NvDatatableCellContext<T, V>>;
     /**
      * The field name this template should render.
      * Should match a field in your column definitions.
      */
     nvDatatableCell: string;
-    constructor(template: TemplateRef<NvDatatableCellContext<T>>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<NvDatatableCellDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NvDatatableCellDirective<any>, "ng-template[nvDatatableCell]", never, { "nvDatatableCell": { "alias": "nvDatatableCell"; "required": true; }; }, {}, never, never, true, never>;
+    constructor(template: TemplateRef<NvDatatableCellContext<T, V>>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NvDatatableCellDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NvDatatableCellDirective<any, any>, "ng-template[nvDatatableCell]", never, { "nvDatatableCell": { "alias": "nvDatatableCell"; "required": true; }; }, {}, never, never, true, never>;
 }

package/dist/nova-components/lib/components/nv-datatable.component.d.ts

@@ -1,33 +1,125 @@
 import { TemplateRef, QueryList, AfterViewInit, OnDestroy } from '@angular/core';
 import { NvDatatableCellDirective } from './nv-datatable-cell.directive';
-import { type FlexRenderComponent, type ColumnDef, type CellContext } from './datatable.utils';
+import { type FlexRenderComponent, type ColumnDef, type CellContext, type NoInfer } from './datatable.utils';
 import * as i0 from "@angular/core";
-export type { CellContext as NvDatatableCellContext };
-export { flexRenderComponent as nvDatatableRenderComponent } from './datatable.utils';
-/** Type definition for a datatable row. */
-export type NvDatatableRow = Record<string, string | number | boolean | null | undefined | typeof Date>;
-/** Parameters for custom cell rendering function. */
-export interface NvTableRenderCellParams<T extends NvDatatableRow, V> {
-    value: V;
-    row: T;
-    field: keyof T;
-    rowIndex: number;
+/**
+ * A powerful, flexible datatable component built on TanStack Table.
+ * Supports custom cell rendering, column configuration, pagination, and full TypeScript typing.
+ */
+export declare class NvDatatable<T> implements AfterViewInit, OnDestroy {
+    /** Column definitions */
+    columns: import("@angular/core").InputSignal<NvDatatableColumn<T, keyof T, T[keyof T]>[]>;
+    /** Row data */
+    rows: import("@angular/core").InputSignal<T[]>;
+    /** Optional pagination configuration */
+    pagination: import("@angular/core").InputSignal<NvDatatablePaginationConfig | undefined>;
+    /** Should the header stick to the top of the table when scrolling? */
+    stickyHeader: import("@angular/core").InputSignal<boolean>;
+    /** Template for custom pagination UI */
+    paginationTemplate?: TemplateRef<{
+        $implicit: NvDatatableRenderPaginationAPI;
+    }>;
+    /** Cell templates provided via nvDatatableCell directive */
+    cellTemplates?: QueryList<NvDatatableCellDirective<T, T[keyof T]>>;
+    /** Signal to track cell templates array */
+    private cellTemplatesSignal;
+    /** Map of field names to cell templates */
+    private cellTemplateMap;
+    /** Pagination state for server mode */
+    private paginationState;
+    /** Reference to table rows for infinite scroll observer */
+    private tableRows;
+    /** Intersection observer for infinite scroll */
+    private observer;
+    /** Helper to check if using infinite scroll */
+    isInfiniteScroll: import("@angular/core").Signal<boolean>;
+    /** Computed table columns with proper typing and filtering. */
+    tableColumns: import("@angular/core").Signal<ColumnDef<T, T[keyof T]>[]>;
+    /** TanStack table instance with Signals */
+    private tableInstance;
+    /** Public getter for table instance. */
+    table(): import("@tanstack/table-core").Table<T>;
+    /** Build pagination API for template */
+    paginationAPI: import("@angular/core").Signal<NvDatatableRenderPaginationAPI | null>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NvDatatable<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NvDatatable<any>, "nv-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; }, {}, ["paginationTemplate", "cellTemplates"], never, true, never>;
 }
+/********************************* UTILS **************************************/
+/**
+ * Creates a strongly-typed column factory for a given row type.
+ *
+ * @template Row The row data type (e.g., `Product`)
+ *
+ * @returns {function} A function that accepts a column definition and infers:
+ * - `K` as the field key (`keyof Row`)
+ * - `F` as the return type of `valueFormatter` (defaults to `Row[K]`)
+ *
+ * @example
+ * ```ts
+ * // Define your row type
+ * interface Product {
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * const col = makeColumn<Product>();
+ */
+export declare function makeColumn<Row>(): <K extends keyof Row, F = Row[K]>(col: NvDatatableColumn<Row, K, F>) => NvDatatableColumn<Row>;
+export { flexRenderComponent as nvDatatableRenderComponent } from './datatable.utils';
+/********************************* TYPES **************************************/
+export type { CellContext as NvDatatableCellContext };
 /** Column definition for NvDatatable. */
-export interface NvDatatableColumn<T extends NvDatatableRow> {
-    field: keyof T;
+export interface NvDatatableColumn<Row, K extends keyof Row = keyof Row, F = Row[K]> {
+    /** Field name from row data */
+    field: K;
+    /** Display name for column header */
     headerName?: string;
+    /** Column width in pixels */
     width?: number;
+    /** Whether column is resizable */
     resizable?: boolean;
+    /** Whether column is hidden */
     hidden?: boolean;
+    /**
+     * Transform the raw value before rendering. Receives the cell value and full row object.
+     * This is useful for formatting dates, converting arrays to strings, accessing nested objects, etc.
+     * The transformed value is then passed to renderCell or templates.
+     */
+    valueFormatter?: (params: NvTableValueFormatterParams<Row, Row[K], K>) => F;
     /**
      * Custom cell renderer function that can return either a string or Angular TemplateRef.
      * Use `$implicit` in your template to receive the CellContext.
+     * Note: If valueFormatter is provided, renderCell receives the formatted value.
      */
-    renderCell?: (context: CellContext<T, unknown>) => string | FlexRenderComponent | TemplateRef<{
-        $implicit: CellContext<T, unknown>;
+    renderCell?: (context: CellContext<Row, F>) => string | FlexRenderComponent | TemplateRef<{
+        $implicit: CellContext<Row, F>;
     }>;
 }
+/** Parameters for custom cell rendering function. */
+export interface NvTableRenderCellParams<Row, Value, Field> {
+    /** Cell value */
+    value: Value | NoInfer<Value>;
+    /** Row data */
+    row: Row;
+    /** Field name */
+    field: Field;
+    /** Row index */
+    rowIndex: number;
+}
+/**
+ * Parameters for valueFormatter function.
+ */
+export interface NvTableValueFormatterParams<Row, Value, Field> {
+    /** Cell original value */
+    value: Value;
+    /** Row data */
+    row: Row;
+    /** Field name */
+    field: Field;
+}
 /**
  * Pagination configuration for NvDatatable.
  * Supports three modes: client-side, server-side with buttons, and infinite scroll.
@@ -92,47 +184,3 @@ export interface NvDatatableRenderPaginationAPI {
     /** Whether more items are available (only for infinite scroll) */
     hasMore?: boolean;
 }
-/**
- * Nova Datatable built on TanStack Table (Angular).
- */
-export declare class NvDatatable<T extends NvDatatableRow = NvDatatableRow> implements AfterViewInit, OnDestroy {
-    /** Column definitions */
-    columns: import("@angular/core").InputSignal<NvDatatableColumn<T>[]>;
-    /** Row data */
-    rows: import("@angular/core").InputSignal<T[]>;
-    /** Optional pagination configuration */
-    pagination: import("@angular/core").InputSignal<NvDatatablePaginationConfig | undefined>;
-    /** Should the header stick to the top of the table when scrolling? */
-    stickyHeader: import("@angular/core").InputSignal<boolean>;
-    /** Template for custom pagination UI */
-    paginationTemplate?: TemplateRef<{
-        $implicit: NvDatatableRenderPaginationAPI;
-    }>;
-    /** Cell templates provided via nvDatatableCell directive */
-    cellTemplates?: QueryList<NvDatatableCellDirective<T>>;
-    /** Signal to track cell templates array */
-    private cellTemplatesSignal;
-    /** Map of field names to cell templates */
-    private cellTemplateMap;
-    /** Pagination state for server mode */
-    private paginationState;
-    /** Reference to table rows for infinite scroll observer */
-    private tableRows;
-    /** Intersection observer for infinite scroll */
-    private observer;
-    /** Helper to check if using infinite scroll */
-    isInfiniteScroll: import("@angular/core").Signal<boolean>;
-    /** Computed table columns with proper typing and filtering. */
-    tableColumns: import("@angular/core").Signal<ColumnDef<T>[]>;
-    /** TanStack table instance with Signals */
-    private tableInstance;
-    /** Public getter for table instance. */
-    table(): import("@tanstack/table-core").Table<T>;
-    /** Build pagination API for template */
-    paginationAPI: import("@angular/core").Signal<NvDatatableRenderPaginationAPI | null>;
-    constructor();
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NvDatatable<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NvDatatable<any>, "nv-datatable", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; }, {}, ["paginationTemplate", "cellTemplates"], never, true, never>;
-}

package/dist/nova-components/lib/stencil-generated/components.d.ts

@@ -277,13 +277,21 @@ export declare class NvFielddropdown {
     protected el: HTMLNvFielddropdownElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<NvFielddropdown, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NvFielddropdown, "nv-fielddropdown", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "debounceDelay": { "alias": "debounceDelay"; "required": false; }; "description": { "alias": "description"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "emptyResult": { "alias": "emptyResult"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorDescription": { "alias": "errorDescription"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "name": { "alias": "name"; "required": false; }; "open": { "alias": "open"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NvFielddropdown, "nv-fielddropdown", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "controlledFilter": { "alias": "controlledFilter"; "required": false; }; "debounceDelay": { "alias": "debounceDelay"; "required": false; }; "description": { "alias": "description"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "emptyResult": { "alias": "emptyResult"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorDescription": { "alias": "errorDescription"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "label": { "alias": "label"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "name": { "alias": "name"; "required": false; }; "openOnSelect": { "alias": "openOnSelect"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface NvFielddropdown extends Components.NvFielddropdown {
     /**
      * Emitted when the input value changes. @bind value
      */
     valueChanged: EventEmitter<CustomEvent<string>>;
+    /**
+     * Event emitted when the filter input value changes.
+     */
+    filterTextChanged: EventEmitter<CustomEvent<string>>;
+    /**
+     * Event emitted when the dropdown opened or closed.
+     */
+    openChanged: EventEmitter<CustomEvent<HTMLNvPopoverElementEventMap['openChanged']>>;
     /**
      * Event emitted when an item is clicked.
      */
@@ -294,7 +302,7 @@ export declare class NvFielddropdownitem {
     protected el: HTMLNvFielddropdownitemElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<NvFielddropdownitem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NvFielddropdownitem, "nv-fielddropdownitem", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NvFielddropdownitem, "nv-fielddropdownitem", never, { "detached": { "alias": "detached"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 export declare interface NvFielddropdownitem extends Components.NvFielddropdownitem {
     /**
@@ -302,7 +310,8 @@ export declare interface NvFielddropdownitem extends Components.NvFielddropdowni
      */
     dropdownItemSelected: EventEmitter<CustomEvent<{
         label?: string; /** The value associated with the item. */
-        value: string;
+        value: string; /** Is the item detached? */
+        detached?: boolean;
     }>>;
 }
 export declare class NvFielddropdownitemcheck {
@@ -351,7 +360,7 @@ export declare interface NvFieldnumber extends Components.NvFieldnumber {
     /**
      * Emitted when the input value changes. @bind value
      */
-    valueChanged: EventEmitter<CustomEvent<number>>;
+    valueChanged: EventEmitter<CustomEvent<number | null>>;
 }
 export declare class NvFieldpassword {
     protected z: NgZone;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-angular-19",
-  "version": "3.18.0",
+  "version": "3.20.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",