@nova-design-system/nova-webcomponents 3.0.0-beta.39 → 3.0.0-beta.40

package/dist/native/{p-2151f564.entry.js → p-fde56f9c.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as t,a as n,g as r}from"./p-5439afb8.js";import{c as i}from"./p-8a1a6e56.js";import{v as a}from"./p-f5ff676c.js";const c='nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=c;const s=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=a();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"75e37c699cfc3b0488dfb660ff7e1dc8bc4fcec7",class:i(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"a34755c8cfa921ffbc7e60cff93f89b2eb451007",class:"input-container"},t("input",{key:"dbfc3021614001f1fd2d2fb3dd1352fc33078fb2",type:"checkbox",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly})),t("div",{key:"afac6bb640ba44af0d9fc3841dae90bfb3130c89",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"eac00ea14d7181b17cc06d48f69dcd46d891d9b9",htmlFor:this.inputId,class:i(this.hideLabel&&"visually-hidden")},t("slot",{key:"52f3e6ee4c7fed8218a2c782b1cdedd4230ce8ac",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"861fc6d2e9abf58e43e45e91dfdd2da7705c5e1a",class:"description"},t("slot",{key:"cb218ac2d197f84202c668621ee9e56c936ca50f",name:"description"},this.description))))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=l;export{s as nv_toggle};
-//# sourceMappingURL=p-2151f564.entry.js.map
+import{r as e,c as o,h as t,a as n,g as r}from"./p-5439afb8.js";import{c as a}from"./p-8a1a6e56.js";import{v as i}from"./p-f5ff676c.js";const c='nv-toggle{display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-toggle:not([disabled],[readonly]) input,nv-toggle:not([disabled],[readonly]) label{cursor:pointer}nv-toggle.label-placement-before{flex-direction:row-reverse}nv-toggle[disabled]{opacity:0.5}nv-toggle label{align-self:stretch;color:var(--components-form-text-label-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-toggle .input-container{position:relative;color:var(--components-form-shape-foreground-default)}nv-toggle .input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--components-form-shape-foreground-disabled)}nv-toggle .input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-toggle-width);height:var(--form-toggle-height);flex-direction:column;align-items:flex-start;border-radius:var(--form-toggle-radius);border-width:var(--form-toggle-border-width);border-style:solid;border-color:var(--components-form-field-border-default);background:var(--components-form-field-background-default)}nv-toggle .input-container input[type=checkbox]::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-switch-dot);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:25%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:hover{border-color:var(--components-form-field-border-hover)}nv-toggle .input-container input[type=checkbox]:focus{border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:focus,nv-toggle .input-container input[type=checkbox]:focus-within{outline:none}nv-toggle .input-container input[type=checkbox]:focus-visible,nv-toggle .input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-toggle .input-container input[type=checkbox]:checked{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-background-checked)}nv-toggle .input-container input[type=checkbox]:checked::after{content:"";display:block;width:var(--form-toggle-switch-dot-default);height:var(--form-toggle-switch-dot-default);background-color:var(--components-form-shape-foreground-default);border-radius:var(--radius-rounded-full);position:absolute;top:50%;left:75%;transform:translate(-50%, -50%)}nv-toggle .input-container input[type=checkbox]:checked:focus{background:var(--components-form-field-background-checked);border-color:var(--components-form-field-border-focus)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]){box-shadow:unset;background:var(--components-form-field-background-disabled);border-color:var(--components-form-field-border-default)}nv-toggle .input-container input[type=checkbox]:disabled:not([readonly]):checked::after{background-color:var(--components-form-shape-foreground-disabled)}nv-toggle .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:"TT Norms Pro", sans-serif;font-size:var(--form-description-font-size);font-style:normal;font-weight:450;line-height:var(--form-description-line-height)}nv-toggle .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}';const l=c;const s=class{constructor(t){e(this,t);this.checkedChanged=o(this,"checkedChanged",7);this.inputId=i();this.hideLabel=false;this.checked=false;this.disabled=false;this.readonly=false}onCheckedChanged(e){this.checkedChanged.emit(e)}handleChange(e){const o=e.target;if(o.type==="checkbox"&&o.id===this.inputId){if(this.readonly||this.disabled){e.preventDefault();return}this.checked=o.checked}}render(){return t(n,{key:"0ea7a73c5b656d0d7f9342a9526dc00a66a94f83",class:a(this.labelPlacement==="before"&&"label-placement-before")},t("div",{key:"eb294c704b9f3568e03af1817a302d2edfe24486",class:"input-container"},t("input",{key:"777b6e7172691aba435751364c5908f381390f23",type:"checkbox",id:this.inputId,name:this.name,autocomplete:"off",value:this.value,checked:Boolean(this.checked),disabled:this.disabled||this.readonly,readonly:this.readonly})),t("div",{key:"92dbdb51e8c9fc231572009d37e274e070334292",class:"text-container"},(this.label||this.el.querySelector('[slot="label"]'))&&t("label",{key:"9d50bac5932e25c3b3c8dd04fe44e2622e22b6ac",htmlFor:this.inputId,class:a(this.hideLabel&&"visually-hidden")},t("slot",{key:"bf6cb8ff071c11d7809580a5dee61a1dfd89c112",name:"label"},this.label)),(this.description||this.el.querySelector('[slot="description"]'))&&t("div",{key:"db77b501162725dcf3b05b3d7c4b26d0f933ac8b",class:"description"},t("slot",{key:"a201c736b5237e88ee0d8caa3999874caa7f85f3",name:"description"},this.description))))}static get formAssociated(){return true}get el(){return r(this)}static get watchers(){return{checked:["onCheckedChanged"]}}};s.style=l;export{s as nv_toggle};
+//# sourceMappingURL=p-fde56f9c.entry.js.map

package/dist/types/components/nv-alert/nv-alert.d.ts

@@ -44,6 +44,10 @@ export declare class NvAlert {
      * Controls the visibility of the alert. Will animate with fade and collapse.
      */
     hidden: boolean;
+    /**
+     * When true, the alert will not animate when it is hidden or shown.
+     */
+    readonly hasNoAnimations: boolean;
     /****************************************************************************/
     /**
      * Emits when the 'hidden' prop changes, reflecting a change in visibility.
@@ -78,6 +82,16 @@ export declare class NvAlert {
      * @returns {string} - The default icon name.
      */
     private getDefaultIcon;
+    /**
+     * Updates the visibility state of the alert with optional animations
+     * @param {boolean} hidden - Whether the alert should be hidden
+     */
+    private updateVisibility;
+    /**
+     * Toggles the 'hidden' class on the element
+     * @param {boolean} hidden - Whether to add or remove the hidden class
+     */
+    private toggleHiddenClass;
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/

package/dist/types/components/nv-base/nv-base.docs.d.ts

@@ -1,5 +1,5 @@
 declare const _default: {
-    component: string;
+    component: "nv-base";
     skip: true;
 };
 export default _default;

package/dist/types/components/nv-button/nv-button.d.ts

@@ -47,17 +47,28 @@ export declare class NvButton {
     /**
      * Sets the button type to control its function in forms. Use 'submit' to send
      * form data, 'reset' to clear the form, or 'button' for a standard button
-     * that doesn’t interact with form submission by default.
+     * that doesn't interact with form submission by default.
      */
     readonly type: `${ButtonType}`;
+    /**
+     * Sets the form associated with the button in case the (submit) button is not a child of a form.
+     * Matches the native HTML button 'form' attribute behavior.
+     */
+    readonly form: string;
     /****************************************************************************/
     /**
-     * Handles form-related actions when the button is clicked.
-     * - Submits the form if the button type is 'submit'.
-     * - Resets the form if the button type is 'reset'.
+     * Handles button click events, managing form actions and disabled states.
+     * Prevents default behavior when button is disabled or loading, and
+     * processes form submissions/resets when appropriate.
      * @param {Event} event - The click event.
      */
-    private handleClick;
+    private handleButtonClick;
+    /**
+     * Processes form-related actions by finding the associated form element
+     * and triggering the appropriate action (submit/reset) based on button type.
+     * Falls back to ElementInternals form if no explicit form ID is provided.
+     */
+    private processFormAction;
     /****************************************************************************/
     handleKeyDown(event: KeyboardEvent): void;
     handleTouchStart(event: TouchEvent): void;

package/dist/types/components/nv-datagrid/nv-datagrid.d.ts

@@ -1,24 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import { Column } from '../../interfaces/Column';
+import { ActionEvent } from '../../interfaces/actionEvent';
 /**
  * A flexible data grid component powered by `@tanstack/table-core`.
  * @slot default - Use this slot to insert HTML into the data grid content.
- * @slot head - Use this slot to insert HTML into the data grid header.
  * @slot before - Use this slot to insert HTML before the data grid.
  * @slot after - Use this slot to insert HTML after the data grid.
- * @slot body - Use this slot to insert HTML into the data grid body.
  *
  * @deprecated [EXPERIMENTAL]
  * @experimental - This component is still under development and is not ready for use.
  */
 export declare class NvDatagrid {
     el: HTMLNvDatagridElement;
+    private readonly templateCache;
+    private readonly headerTemplateCache;
     /****************************************************************************/
     private table;
     parsedColumns: Column[];
     parsedData: any[];
-    hasSlotHead: boolean;
-    hasSlotBody: boolean;
     /****************************************************************************/
+    /**
+     * The data to display in the data grid.
+     * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
+     * @default []
+     */
+    readonly data: any[];
     /**
      * The columns to display in the data grid.
      * @example
@@ -30,28 +36,25 @@ export declare class NvDatagrid {
      * @default []
      */
     readonly columns: Column[];
+    /**
+     * The data to display in the data grid.
+     * It can be passed directly as an array of objects or as a JSON string.
+     * If both `data` and `dataJson` are provided, `data` takes precedence.
+     * @example `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`
+     */
+    readonly dataJson?: string;
     /**
      * The columns to display in the data grid.
-     * It can be passed directly as an array of objects or as a JSON string
-     * (e.g., `[{"header":"Name","accessor":"name"},{"header":"Age","accessor":"age"},{"header":"Email","accessor":"email"}]`).
+     * It can be passed directly as an array of objects or as a JSON string.
      * If both `columns` and `columnsJson` are provided, `columns` takes precedence.
      * @example `[{"header":"Name","accessor":"name"},{"header":"Age","accessor":"age"},{"header":"Email","accessor":"email"}]`
      */
     readonly columnsJson?: string;
     /**
-     * The data to display in the data grid.
-     * @example [{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]
-     * @default []
+     * Fallback value to be displayed when data is not available
+     * @default 'N/A'
      */
-    readonly data: any[];
-    /**
-     * The data to display in the data grid.
-     * It can be passed directly as an array of objects or as a JSON string
-     * (e.g., `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`).
-     * If both `data` and `dataJson` are provided, `data` takes precedence.
-     * @example `[{ "name": "Alice", "age": 25 }, { "name": "Bob", "age": 30 }]`
-     */
-    readonly dataJson?: string;
+    readonly fallbackValue: string;
     /**
      * The message to display when there is no data available.
      * @default 'No data available'
@@ -63,28 +66,42 @@ export declare class NvDatagrid {
      */
     readonly noColumnsNoDataMessage: string;
     /****************************************************************************/
-    parseColumns(newValue: Column[], oldValue: Column[]): void;
-    parseJsonColumns(newValue: string | undefined): void;
-    parseData(newValue: any[], oldValue: any[]): void;
-    parseJsonData(newValue: string | undefined): void;
-    handleParsedChange(): void;
-    /****************************************************************************/
-    private initializeTable;
     /**
-     * Parses the columns array.
-     * @param {Column[]} newValue - The new value of the columns array.
-     * @param {Column[]} oldValue - The old value of the columns array.
+     * Caches templates for cells and headers upfront to improve performance.
      */
-    private parseColumnsArray;
+    private cacheTemplates;
+    private parseDataAndColumns;
+    private deepEqual;
     /**
-     * Parses the data array.
+     * Parses the data array and sets the state accordingly
      * @param {any[]} newValue - The new value of the data array.
      * @param {any[]} oldValue - The old value of the data array.
      */
     private parseDataArray;
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {Column[]} newValue - The new value of the columns array.
+     * @param {Column[]} oldValue - The old value of the columns array.
+     */
+    private parseColumnsArray;
+    private initializeTable;
+    private generateColumns;
+    private getTableData;
+    private renderTemplate;
+    private replaceKeyWithValue;
+    private replacePlaceholdersTextContent;
+    private replacePlaceholdersAttributes;
+    private replacePlaceholdersProperties;
+    /****************************************************************************/
+    parseColumns(newValue: Column[], oldValue?: Column[]): void;
+    parseJsonColumns(newValue: string | undefined, oldValue: Column[]): void;
+    parseData(newValue: any[], oldValue?: any[]): void;
+    parseJsonData(newValue: string | undefined): void;
+    handleParsedChange(): void;
     /****************************************************************************/
     componentWillLoad(): void;
-    componentDidLoad(): void;
+    /****************************************************************************/
+    action: EventEmitter<ActionEvent>;
     /****************************************************************************/
     render(): any;
 }

package/dist/types/components/nv-datagridcolumn/nv-datagridcolumn.d.ts

@@ -1,12 +1,13 @@
 /**
- * @slot default - Use this slot to insert HTML into the data grid column.
+ * @slot header - Defines how to render the header of the column.
+ * @slot cell - Defines how to render every cell of the column.
  */
 export declare class NvDatagridcolumn {
     /****************************************************************************/
     /**
      * Defines the header of the column.
      */
-    readonly header: string;
+    readonly header?: string;
     /**
      * Defines the accessor of the column.
      */

package/dist/types/components/nv-dialog/nv-dialog.d.ts

@@ -9,6 +9,7 @@ export declare class NvDialog {
     el: HTMLNvDialogElement;
     private dialogElement;
     private eventsAttached;
+    private form;
     /****************************************************************************/
     /**
      * @internal
@@ -41,12 +42,6 @@ export declare class NvDialog {
      * If true, the dialog will be closed when the backdrop is clicked.
      */
     readonly clickOutside: boolean;
-    /**
-     * Controls the dialog's autofocus behavior. When false (default), the dialog will
-     * automatically focus the first focusable element. When true, automatic focus is
-     * disabled and you must manually set focus on an element for accessibility compliance.
-     */
-    readonly manualFocus: boolean;
     /**
      * If true, the dialog visibility is managed manually through methods or the open prop.
      */
@@ -99,7 +94,6 @@ export declare class NvDialog {
     private handleDialogClose;
     /**
      * Handles the keydown event to optionally prevent the native dialog from closing when the escape key is pressed.
-  
      * @param {KeyboardEvent} event - The keydown event.
      */
     handleKeyDown(event: KeyboardEvent): void;

package/dist/types/components/nv-dialogfooter/nv-dialogfooter.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { ButtonType } from '../../utils/constants';
 /**
  * @slot default - Custom content for the dialog footer. When provided, the default buttons will not be rendered.
  */
@@ -8,7 +9,7 @@ export declare class NvDialogfooter {
     private hasSlot;
     /****************************************************************************/
     /**
-     * Disables the confirm button, preventing user interaction.
+     * Disables the primary button, preventing user interaction.
      */
     readonly disabled: boolean;
     /**
@@ -17,15 +18,15 @@ export declare class NvDialogfooter {
      */
     readonly undismissable: boolean;
     /**
-     * Sets the leading icon for the submit button.
+     * Sets the leading icon for the primary button.
      */
     readonly leadingIcon: string;
     /**
-     * Sets the trailing icon for the submit button.
+     * Sets the trailing icon for the primary button.
      */
     readonly trailingIcon: string;
     /**
-     * Sets the danger state for the submit button.
+     * Sets the danger state for the primary button.
      */
     readonly danger: boolean;
     /**
@@ -33,24 +34,32 @@ export declare class NvDialogfooter {
      */
     readonly cancelLabel: string;
     /**
-     * Sets the label for the submit button.
+     * Sets the label for the primary button.
      */
-    readonly submitLabel: string;
+    readonly primaryLabel: string;
+    /**
+     * Sets the type of the primary button.
+     */
+    readonly primaryButtonType: `${ButtonType}`;
+    /**
+     * Sets the form for the dialog footer.
+     */
+    readonly form: string;
     /****************************************************************************/
     /**
      * Emitted when the cancel button is clicked. This will close the dialog.
      */
     nvDialogCanceled: EventEmitter<void>;
     /**
-     * Emitted when the submit button is clicked. This allows to handle the submit action and potential data capture before closing the dialog.
+     * Emitted when the primary button is clicked. This allows to handle the primary action and potential data capture before closing the dialog.
      */
-    nvDialogConfirmed: EventEmitter<void>;
+    nvDialogPrimaryClicked: EventEmitter<void>;
     /****************************************************************************/
     /**
-     * Handles the submit action when the submit button is clicked.
+     * Handles the primary action when the primary button is clicked.
      * @param {Event} event - The click event.
      */
-    private handleConfirm;
+    private handlePrimary;
     /**
      * Handles the cancel action when the cancel button is clicked. This will close the dialog.
      * @param {Event} event - The click event.

package/dist/types/components/nv-table/nv-table.d.ts

@@ -1,48 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ColumnConfig } from '../../interfaces/ColumnConfig';
+import { ActionEvent } from '../../interfaces/actionEvent';
 /**
- * @slot default - Use this slot to insert HTML into the table content.
- * @slot head - Use this slot to insert HTML into the table header.
+ * @slot default - Slot for the composed table columns
  * @slot before - Use this slot to insert HTML before the table.
  * @slot after - Use this slot to insert HTML after the table.
- * @slot body - Use this slot to insert HTML into the table body.
- *
- * @deprecated [EXPERIMENTAL]
- * @experimental - This component is still under development and is not ready for use.
  */
 export declare class NvTable {
     el: HTMLNvTableElement;
+    private readonly templateCache;
+    private readonly headerTemplateCache;
     /****************************************************************************/
-    parsedColumns: string[];
+    parsedColumns: ColumnConfig[];
     parsedData: any[];
-    hasSlotHead: boolean;
-    hasSlotBody: boolean;
+    private table;
     /****************************************************************************/
     /**
-     * Defines the table columns.
-     * @example ['Name', 'Age', 'Email']
-     * @default []
+     * Data to be displayed in the table
      */
-    readonly columns: string[];
+    readonly data: any[];
     /**
-     * Defines the table columns.
-     * It can be passed directly as an array of strings or as a JSON string.
-     * @example '["Name", "Age", "Email"]'
+     * Configuration of the columns of the table
      */
-    readonly columnsJson?: string;
+    readonly columnsConfig: ColumnConfig[];
     /**
-     * Defines the table data.
-     * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]
-     * @default []
+     * Data to be displayed in the table
      */
-    readonly data: any[];
+    readonly dataJson?: string;
     /**
-     * Defines the table data.
-     * It can be passed directly as an array of objects or as a JSON string.
-     * @example '[{ "name": "Alice", "age": "25", "email": "alice@mail.com" },{ "name": "Bob", "age": "30", "email": "bob@mail.com" }]'
+     * Configuration of the columns of the table
      */
-    readonly dataJson?: string;
+    readonly columnsConfigJson?: string;
     /**
-     * The message to display when there is no data available.
-     * @default 'No data available'
+     * Fallback value to be displayed when data is not available
+     */
+    readonly fallbackValue: string;
+    /**
+     * Message to be displayed when no data is available
      */
     readonly noDataMessage: string;
     /**
@@ -51,25 +45,43 @@ export declare class NvTable {
      */
     readonly noColumnsNoDataMessage: string;
     /****************************************************************************/
-    parseColumns(newValue: string[], oldValue: string[]): void;
-    parseJsonColumns(newValue: string | undefined): void;
-    parseData(newValue: any[], oldValue: any[]): void;
-    parseJsonData(newValue: string | undefined): void;
-    /****************************************************************************/
     /**
-     * Parses the columns array.
-     * @param {string[]} newValue - The new value of the columns array.
-     * @param {string[]} oldValue - The old value of the columns array.
+     * Caches templates for cells and headers upfront to improve performance.
      */
-    private parseColumnsArray;
+    private cacheTemplates;
+    private parseDataAndColumns;
+    private deepEqual;
     /**
-     * Parses the data array.
-     * @param {any[]} newValue - The new value of the data array.
-     * @param {any[]} oldValue - The old value of the data array.
+     * Parses the data array and sets the state accordingly
+     * @param {any[]} newValue - New value of the data array
+     * @param {any[]} oldValue - Old value of the data array
+     * @returns {void}
      */
     private parseDataArray;
+    /**
+     * Parses the columns array and sets the state accordingly
+     * @param {ColumnConfig[]} newValue - New value of the columns array
+     * @param {ColumnConfig[]} oldValue - Old value of the columns array
+     * @returns {void}
+     */
+    private parseColumnsArray;
+    private initializeTable;
+    private getTableData;
+    private replaceKeyWithValue;
+    private renderTemplate;
+    private replacePlaceholdersTextContent;
+    private replacePlaceholdersAttributes;
+    private replacePlaceholdersProperties;
+    /****************************************************************************/
+    parseColumns(newValue: ColumnConfig[], oldValue: ColumnConfig[]): void;
+    parseJsonColumns(newValue: string | undefined, oldValue: ColumnConfig[]): void;
+    parseData(newValue: any[], oldValue: any[]): void;
+    parseJsonData(newValue: string | undefined): void;
+    handleParsedChange(): void;
     /****************************************************************************/
     componentWillLoad(): void;
     /****************************************************************************/
+    action: EventEmitter<ActionEvent>;
+    /****************************************************************************/
     render(): any;
 }

package/dist/types/components/nv-tablecolumn/nv-tablecolumn.d.ts

@@ -1,51 +1,13 @@
-/**
- * @slot default - Use this slot to insert HTML into the table column.
- */
 export declare class NvTablecolumn {
     /****************************************************************************/
     /**
-     * A short, abbreviated description of the header cell's content provided as an
-     * alternative label to use for the header cell when referencing the cell in other
-     * contexts. Some user-agents, such as speech readers, may present this description
-     * before the content itself.
+     * Name of the column and data accessor
      */
-    readonly abbr: string;
+    readonly name: string;
     /**
-     * A non-negative integer value indicating how many columns the header cell spans
-     * or extends. The default value is 1. User agents dismiss values higher than 1000
-     * as incorrect, defaulting such values to 1.
-     * @default 1
+     * Header of the column to be displayed
      */
-    readonly colspan: number;
-    /**
-     * A non-negative integer value indicating how many rows the header cell spans or
-     * extends. The default value is 1; if its value is set to 0, the header cell will
-     * extends to the end of the table grouping section (`<thead>`, `<tbody>`, `<tfoot>`,
-     * even if implicitly defined), that the `<th>` belongs to. Values higher than 65534
-     * are clipped at 65534.
-     * @default 1
-     */
-    readonly rowspan: number;
-    /**
-     * A list of space-separated strings corresponding to the id attributes of the `<th>`
-     * elements that provide the headers for this header cell.
-     * @example 'col1 col2'
-     */
-    readonly headers: string;
-    /**
-     * Defines the cells that the header (defined in the `<th>`) element relates to.
-     * Possible enumerated values are:
-     *
-     * - `col`: The header relates to all cells of the column it belongs to.
-     * - `row`: The header relates to all cells of the row it belongs to.
-     * - `colgroup`: The header relates to all cells of the column group it belongs to.
-     * - `rowgroup`: The header relates to all cells of the row group it belongs to.
-     *
-     * If the `scope` attribute is not specified, or its value is not `row`, `col`,
-     * `rowgroup`, or `colgroup`, then browsers automatically select the set of cells to
-     * which the header cell applies.
-     */
-    readonly scope: 'col' | 'row' | 'colgroup' | 'rowgroup';
+    readonly header?: string;
     /****************************************************************************/
     render(): any;
 }