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

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

@@ -562,15 +562,15 @@ let NvFielddropdown = class NvFielddropdown {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['valueChanged', 'dropdownItemSelected']);
+        proxyOutputs(this, this.el, ['valueChanged', 'filterTextChanged', 'openChanged', 'dropdownItemSelected']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvFielddropdown, 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: NvFielddropdown, selector: "nv-fielddropdown", inputs: { autocomplete: "autocomplete", autofocus: "autofocus", debounceDelay: "debounceDelay", description: "description", disabled: "disabled", emptyResult: "emptyResult", error: "error", errorDescription: "errorDescription", filterable: "filterable", fluid: "fluid", inputId: "inputId", label: "label", maxHeight: "maxHeight", name: "name", open: "open", options: "options", placeholder: "placeholder", readonly: "readonly", required: "required", 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: "18.2.13", type: NvFielddropdown, selector: "nv-fielddropdown", inputs: { autocomplete: "autocomplete", autofocus: "autofocus", controlledFilter: "controlledFilter", debounceDelay: "debounceDelay", description: "description", disabled: "disabled", emptyResult: "emptyResult", error: "error", errorDescription: "errorDescription", filterable: "filterable", fluid: "fluid", inputId: "inputId", label: "label", maxHeight: "maxHeight", name: "name", openOnSelect: "openOnSelect", options: "options", placeholder: "placeholder", readonly: "readonly", required: "required", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvFielddropdown = __decorate([
     ProxyCmp({
-        inputs: ['autocomplete', 'autofocus', 'debounceDelay', 'description', 'disabled', 'emptyResult', 'error', 'errorDescription', 'filterable', 'fluid', 'inputId', 'label', 'maxHeight', 'name', 'open', 'options', 'placeholder', 'readonly', 'required', 'value'],
-        methods: ['getFilterText']
+        inputs: ['autocomplete', 'autofocus', 'controlledFilter', 'debounceDelay', 'description', 'disabled', 'emptyResult', 'error', 'errorDescription', 'filterable', 'fluid', 'inputId', 'label', 'maxHeight', 'name', 'openOnSelect', 'options', 'placeholder', 'readonly', 'required', 'value'],
+        methods: ['clearFilter', 'toggleDropdown']
     })
 ], NvFielddropdown);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvFielddropdown, decorators: [{
@@ -580,7 +580,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: ['autocomplete', 'autofocus', 'debounceDelay', 'description', 'disabled', 'emptyResult', 'error', 'errorDescription', 'filterable', 'fluid', 'inputId', 'label', 'maxHeight', 'name', 'open', 'options', 'placeholder', 'readonly', 'required', 'value'],
+                    inputs: ['autocomplete', 'autofocus', 'controlledFilter', 'debounceDelay', 'description', 'disabled', 'emptyResult', 'error', 'errorDescription', 'filterable', 'fluid', 'inputId', 'label', 'maxHeight', 'name', 'openOnSelect', 'options', 'placeholder', 'readonly', 'required', 'value'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -592,11 +592,11 @@ let NvFielddropdownitem = class NvFielddropdownitem {
         proxyOutputs(this, this.el, ['dropdownItemSelected']);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvFielddropdownitem, 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: NvFielddropdownitem, selector: "nv-fielddropdownitem", inputs: { disabled: "disabled", label: "label", selected: "selected", 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: "18.2.13", type: NvFielddropdownitem, selector: "nv-fielddropdownitem", inputs: { detached: "detached", disabled: "disabled", label: "label", selected: "selected", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NvFielddropdownitem = __decorate([
     ProxyCmp({
-        inputs: ['disabled', 'label', 'selected', 'value']
+        inputs: ['detached', 'disabled', 'label', 'selected', 'value']
     })
 ], NvFielddropdownitem);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NvFielddropdownitem, decorators: [{
@@ -606,7 +606,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: ['disabled', 'label', 'selected', 'value'],
+                    inputs: ['detached', 'disabled', 'label', 'selected', 'value'],
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
@@ -2094,7 +2094,8 @@ function createAngularTable(options) {
 /* eslint-disable jsdoc/require-jsdoc */
 /* eslint-disable jsdoc/require-returns */
 /**
- * Nova Datatable built on TanStack Table (Angular).
+ * A powerful, flexible datatable component built on TanStack Table.
+ * Supports custom cell rendering, column configuration, pagination, and full TypeScript typing.
  */
 class NvDatatable {
     /** Public getter for table instance. */
@@ -2136,27 +2137,41 @@ class NvDatatable {
             const templateMap = this.cellTemplateMap();
             return 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: (context) => {
+                .map((col) => {
+                // Shared cell renderer
+                const cellRenderer = (context) => {
                     const fieldName = String(col.field);
                     const cellTemplate = templateMap.get(fieldName);
                     // Priority: template > renderCell > default
                     if (cellTemplate) {
-                        // Return TemplateRef directly - FlexRender will handle it
+                        // Return TemplateRef directly - getValue() returns formatted value
                         return cellTemplate;
                     }
                     // Fall back to renderCell if provided
                     if (col.renderCell) {
                         return col.renderCell(context);
                     }
-                    // Default: just return the value
+                    // Default: just return the value (formatted if valueFormatter was used)
                     return context.getValue();
-                },
-            }));
+                };
+                return {
+                    accessorKey: col.field,
+                    accessorFn: col.valueFormatter
+                        ? (row) => {
+                            const rawValue = row[col.field];
+                            return col.valueFormatter({
+                                value: rawValue,
+                                row,
+                                field: col.field,
+                            });
+                        }
+                        : undefined,
+                    header: col.headerName || String(col.field),
+                    size: col.width,
+                    enableResizing: col.resizable ?? true,
+                    cell: cellRenderer,
+                };
+            });
         });
         /** TanStack table instance with Signals */
         this.tableInstance = createAngularTable(() => {
@@ -2468,6 +2483,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: ContentChildren,
                 args: [NvDatatableCellDirective]
             }] } });
+/********************************* 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>();
+ */
+function makeColumn() {
+    return function define(col) {
+        return col;
+    };
+}
 
 class ValueAccessor {
     constructor(el) {
@@ -3695,5 +3735,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDatatableCellDirective, 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, NvFieldtimeValueAccessor, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, flexRenderComponent as nvDatatableRenderComponent, provideNovaComponents };
+export { NotificationService, NotificationServiceComponent, NovaComponentsModule, NovaComponentsValueAccessorModule, NvAccordion, NvAccordionItem, NvAccordionValueAccessor, NvAlert, NvAlertValueAccessor, NvAvatar, NvBadge, NvBreadcrumb, NvBreadcrumbs, NvButton, NvButtongroup, NvCalendar, NvCalendarValueAccessor, NvCol, NvDatagrid, NvDatagridValueAccessor, NvDatagridcolumn, NvDatatable, NvDatatableCellDirective, 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, NvFieldtimeValueAccessor, NvIcon, NvIconbutton, NvLoader, NvMenu, NvMenuitem, NvNotification, NvNotificationValueAccessor, NvNotificationcontainer, NvPopover, NvPopoverValueAccessor, NvRow, NvSplit, NvSplitValueAccessor, NvStack, NvTable, NvToggle, NvToggleValueAccessor, NvTogglebutton, NvTogglebuttongroup, NvTogglebuttongroupValueAccessor, NvTooltip, VALUE_ACCESSORS, makeColumn, flexRenderComponent as nvDatatableRenderComponent, provideNovaComponents };
 //# sourceMappingURL=nova-components.mjs.map