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

package/dist/esm/nv-iconbutton.entry.js

@@ -105,7 +105,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '4d3b2d965d1c31c17565da237664d553f726140b', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '3e3220fba9ff271c062d5295256c024a8295cc76', size: this.size }), !this.loading && h("nv-icon", { key: 'af550128cb7d6da4df6c200ebb814683235ab03b', name: this.name, size: this.size }), h("slot", { key: 'd7b418281a5c50779f16ed1a446b4ad2807c0fb0' })));
+        return (h(Host, { key: '58e0f2e1cb0180250086f4cb68bcf8c01e192648', role: "button", type: this.type, tabindex: "0", disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: 'b74e4504553621de583e3257387b820fd731e4ab', size: this.size }), !this.loading && h("nv-icon", { key: '5cc7474666cfefe2691907cff1e2c062293dee7d', name: this.name, size: this.size }), h("slot", { key: '6f084b32248d3f92ce74f630e8465218907468a0' })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-loader.entry.js

@@ -21,7 +21,7 @@ const NvLoader = class {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '7d0d6e58dd8ac84ff91086301beb04eddbd8478d', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '3061eccded64d25321cd49c2a03e1117779f61c0', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
 };
 NvLoader.style = NvLoaderStyle0;

package/dist/esm/nv-menu.entry.js

@@ -30,7 +30,7 @@ const NvMenu = class {
          * below, to the sides). If there isn’t enough room, it will adjust its
          * position on the axis to fit on the screen, so users can always see it.
          */
-        this.placement = this.nested ? 'right-start' : 'bottom-end';
+        this.placement = 'bottom-end';
         /**
          * Parsed items stored in state.
          */
@@ -212,7 +212,7 @@ const NvMenu = class {
         });
     }
     render() {
-        return (h(Host, { key: 'c7bf4fb2e52917697e7250e557b195ab1674d32c' }, h("slot", { key: 'aaa984dd4c6a1de24962138a681195731049f0c1', name: "trigger" }), h("nv-popover", { key: '4c808244edbb4252b498f9e58ad6d6b236701d28', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (h("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: '63955f0dfd09984650fae2e67a1a52e97485c742' }, h("slot", { key: 'edeaea189977961a8a77e20f6afe31ffebdebf9d', name: "trigger" }), h("nv-popover", { key: '51ded6ba14423c18e9db8053c5c8048d68a3e835', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.parsedItems.length > 0 ? (h("ul", { slot: "content" }, this.renderMenuItems(this.parsedItems))) : (h("slot", { name: "content" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-menu.entry.js.map

@@ -1 +1 @@
-{"file":"nv-menu.entry.js","mappings":"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","names":[],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)\n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)\n          var(--menu-contextual-divider-padding-x)\n          var(--menu-contextual-divider-padding-bottom)\n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n\n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * Interface to define the structure of a menu item\n */\ninterface MenuItem {\n  /**\n   * The label of the menu item.\n   */\n  label: string;\n  /**\n   * The value of the menu item.\n   */\n  value?: string;\n  /**\n   * Whether the menu item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the menu item has a submenu.\n   */\n  hasSubmenu?: boolean;\n  /**\n   * The icon of the menu item.\n   */\n  icon?: string;\n  /**\n   * The shortcut of the menu item.\n   */\n  shortcut?: string;\n  /**\n   * Whether the menu item is nested.\n   */\n  nested?: boolean;\n  /**\n   * The submenu items of the menu item.\n   */\n  submenuItems?: MenuItem[];\n}\n\n/**\n * @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an &lt;ul&gt;&lt;/ul&gt; tag for the slot, and place &lt;nv-menuitem&gt; elements inside.\n */\n@Component({\n  tag: 'nv-menu',\n  styleUrl: 'nv-menu.scss',\n  shadow: false,\n})\nexport class NvMenu {\n  @Element() el: HTMLNvMenuElement;\n  private triggerElement!: HTMLElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private isHandlingKeyDown: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Use this to toggle the initial visibility of the menu, by default the menu\n   * is hidden.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Use this if the menu is nested inside another menu. This will prevent the\n   * parent menu from closing when the child menu is opened.\n   */\n  @Prop()\n  readonly nested: boolean = false;\n\n  /**\n   * Use this to disable the menu from closing automatically when a menu item is\n   * selected.\n   */\n  @Prop()\n  readonly disableCloseOnSelect: boolean = false;\n\n  /**\n   * Decides where the menu shows up next to the button it’s linked to (above,\n   * below, to the sides). If there isn’t enough room, it will adjust its\n   * position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = this.nested ? 'right-start' : 'bottom-end';\n\n  /**\n   * (New feature) Items to display in the menu, provided as a JSON string.\n   * Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]\n   */\n  @Prop()\n  readonly items?: string;\n\n  /**\n   * Parsed items stored in state.\n   */\n  @State()\n  private parsedItems: MenuItem[] = [];\n\n  /**\n   * Watcher to parse the items when the `items` property changes.\n   * @param {string} newValue - The new value of the `items` property.\n   */\n  @Watch('items')\n  handleItemsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        this.parsedItems = JSON.parse(newValue);\n      } catch (error) {\n        console.error('Error parsing menu items:', error);\n        this.parsedItems = [];\n      }\n    }\n  }\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens the menu.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close() {\n    this.open = false;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted from nv-menuitem elements with the corresponding id and name when\n   * selected (via click or keyboard). This event listener can be attached to\n   * either the nv-menu or the nv-menuitem element.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(event: CustomEvent<MenuitemSelectedEventDetail>) {\n    if (this.disableCloseOnSelect) return;\n    if (event.detail.hasSubmenu) return;\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    // If the menu is not open, check if the trigger is focused\n    // and the user presses Enter or ArrowDown, open the menu\n    if (!this.open) {\n      if (\n        (event.key === 'Enter' ||\n          event.key === 'ArrowDown' ||\n          event.key === ' ') &&\n        document.activeElement === this.triggerElement\n      ) {\n        event.preventDefault();\n        this.show();\n        // Then, put the focus on the first menuitem\n        const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n        if (firstMenuItem) {\n          requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n        }\n      }\n      return;\n    }\n\n    if (this.isHandlingKeyDown) return;\n    this.isHandlingKeyDown = true;\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight' ||\n      event.key === 'Escape'\n    ) {\n      event.preventDefault();\n    }\n\n    if (event.key === 'Escape' && !this.nested) {\n      this.close();\n      this.triggerElement.focus();\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    const menuContent = this.el.querySelector('[slot=\"content\"]');\n    const menuItems = (\n      Array.from(menuContent.childNodes) as Array<\n        HTMLNvMenuitemElement | HTMLNvMenuElement\n      >\n    ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n    let currentIndex = menuItems.indexOf(\n      document.activeElement as HTMLNvMenuitemElement,\n    );\n    if (currentIndex === -1)\n      currentIndex = menuItems.indexOf(\n        document.activeElement.parentElement as HTMLNvMenuitemElement,\n      );\n    if (\n      currentIndex === -1 &&\n      menuItems.find(item => item.matches('nv-menu[open]'))\n    ) {\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      menuItems.forEach(item => {\n        if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n      });\n    }\n\n    if (event.key === 'ArrowDown') {\n      let nextIndex = (currentIndex + 1) % menuItems.length;\n      while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n        nextIndex = (nextIndex + 1) % menuItems.length;\n      }\n      const nextFocusable = menuItems[nextIndex];\n      if (nextFocusable.matches('nv-menuitem')) {\n        nextFocusable.focus();\n      } else if (nextFocusable.matches('nv-menu')) {\n        nextFocusable.querySelector('nv-menuitem').focus();\n      }\n    }\n\n    if (event.key === 'ArrowUp') {\n      let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n      while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n        prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n      }\n      const prevFocusable = menuItems[prevIndex];\n      if (prevFocusable.matches('nv-menuitem')) {\n        prevFocusable.focus();\n      } else if (prevFocusable.matches('nv-menu')) {\n        prevFocusable.querySelector('nv-menuitem').focus();\n      }\n    }\n\n    if (event.key === 'ArrowRight') {\n      const submenu = menuItems[currentIndex];\n      if (!submenu.matches('nv-menu')) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      (submenu as HTMLNvMenuElement).show();\n    }\n\n    if (event.key === 'ArrowLeft' && this.nested) {\n      if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      this.close();\n      this.triggerElement.focus();\n    }\n\n    this.isHandlingKeyDown = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (event.target === this.el.querySelector('nv-popover')) {\n      this.open = event.detail;\n    }\n    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\n    if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n  }\n\n  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n\n    // If the items attribute is provided, parse its value.\n    if (this.items) {\n      this.handleItemsChange(this.items);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Generates menu items from the `items` property.\n   * @param {MenuItem[]} items - The items to display in the menu.\n   * @returns {HTMLElement[]} The rendered items.\n   */\n  private renderMenuItems(items: MenuItem[]) {\n    return items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu\n            nested\n            placement=\"right-start\"\n            items={JSON.stringify(item.submenuItems)}\n          >\n            <nv-menuitem\n              slot=\"trigger\"\n              has-submenu\n              disabled={item.disabled}\n              icon={item.icon as IconName}\n              shortcut={item.shortcut}\n              id={item.value}\n              name={item.label}\n            >\n              {item.label}\n            </nv-menuitem>\n          </nv-menu>\n        );\n      }\n      return (\n        <nv-menuitem\n          disabled={item.disabled}\n          icon={item.icon as IconName}\n          shortcut={item.shortcut}\n          id={item.value}\n          name={item.label}\n        >\n          {item.label}\n        </nv-menuitem>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"click\"\n          triggerElement={this.triggerElement}\n          placement={this.placement}\n          nested={this.nested}\n          open={this.open}\n        >\n          {this.parsedItems.length > 0 ? (\n            <ul slot=\"content\">{this.renderMenuItems(this.parsedItems)}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-menu.entry.js","mappings":"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","names":[],"sources":["src/components/nv-menu/nv-menu.scss?tag=nv-menu","src/components/nv-menu/nv-menu.tsx"],"sourcesContent":["@use \"../nv-menuitem/nv-menuitem\" as nv-menuitem;\n\n@mixin root-styles() {\n  display: inline-block;\n  position: relative;\n\n  &:has([fluid]:not([fluid=\"false\"])) {\n    display: block;\n  }\n}\n\n@mixin content-styles() {\n  padding: var(--menu-contextual-padding-y)\n          var(--menu-contextual-padding-x);\n  border-radius: var(--menu-contextual-radius);\n  gap: var(--menu-contextual-gap-y);\n  background-color: var(--components-menu-contextual-background);\n  border-color: var(--components-menu-contextual-border);\n  display: flex;\n  flex-direction: column;\n}\n\n@mixin separator-styles() {\n  display: block;\n  margin: var(--menu-contextual-divider-padding-top)\n          var(--menu-contextual-divider-padding-x)\n          var(--menu-contextual-divider-padding-bottom)\n          var(--menu-contextual-divider-padding-x) ;\n}\n\nnv-menu {\n  @include root-styles();\n\n  nv-popover {\n    display: unset;\n\n    [data-scope=popover]{\n      background-color: transparent !important;\n      padding: 0 !important;\n    }\n  }\n\n  [slot=\"content\"] {\n    @include content-styles();\n  }\n\n  nv-menu[open]:not([open=\"false\"]) {\n    > nv-menuitem {\n      @include nv-menuitem.focused-styles();\n    }\n  }\n\n  hr {\n    @include separator-styles();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Event,\n  EventEmitter,\n  Method,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport type { MenuitemSelectedEventDetail } from '../nv-menuitem/nv-menuitem';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * Interface to define the structure of a menu item\n */\ninterface MenuItem {\n  /**\n   * The label of the menu item.\n   */\n  label: string;\n  /**\n   * The value of the menu item.\n   */\n  value?: string;\n  /**\n   * Whether the menu item is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the menu item has a submenu.\n   */\n  hasSubmenu?: boolean;\n  /**\n   * The icon of the menu item.\n   */\n  icon?: string;\n  /**\n   * The shortcut of the menu item.\n   */\n  shortcut?: string;\n  /**\n   * Whether the menu item is nested.\n   */\n  nested?: boolean;\n  /**\n   * The submenu items of the menu item.\n   */\n  submenuItems?: MenuItem[];\n}\n\n/**\n * @slot trigger - Button to toggle the menu popover.\n * @slot content - Use an &lt;ul&gt;&lt;/ul&gt; tag for the slot, and place &lt;nv-menuitem&gt; elements inside.\n */\n@Component({\n  tag: 'nv-menu',\n  styleUrl: 'nv-menu.scss',\n  shadow: false,\n})\nexport class NvMenu {\n  @Element() el: HTMLNvMenuElement;\n  private triggerElement!: HTMLElement;\n  private popoverElement!: HTMLNvPopoverElement;\n  private isHandlingKeyDown: boolean = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Use this to toggle the initial visibility of the menu, by default the menu\n   * is hidden.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Use this if the menu is nested inside another menu. This will prevent the\n   * parent menu from closing when the child menu is opened.\n   */\n  @Prop()\n  readonly nested: boolean = false;\n\n  /**\n   * Use this to disable the menu from closing automatically when a menu item is\n   * selected.\n   */\n  @Prop()\n  readonly disableCloseOnSelect: boolean = false;\n\n  /**\n   * Decides where the menu shows up next to the button it’s linked to (above,\n   * below, to the sides). If there isn’t enough room, it will adjust its\n   * position on the axis to fit on the screen, so users can always see it.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom-end';\n\n  /**\n   * (New feature) Items to display in the menu, provided as a JSON string.\n   * Format: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]\n   */\n  @Prop()\n  readonly items?: string;\n\n  /**\n   * Parsed items stored in state.\n   */\n  @State()\n  private parsedItems: MenuItem[] = [];\n\n  /**\n   * Watcher to parse the items when the `items` property changes.\n   * @param {string} newValue - The new value of the `items` property.\n   */\n  @Watch('items')\n  handleItemsChange(newValue: string) {\n    if (typeof newValue === 'string') {\n      try {\n        this.parsedItems = JSON.parse(newValue);\n      } catch (error) {\n        console.error('Error parsing menu items:', error);\n        this.parsedItems = [];\n      }\n    }\n  }\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Opens the menu.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close() {\n    this.open = false;\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted from nv-menuitem elements with the corresponding id and name when\n   * selected (via click or keyboard). This event listener can be attached to\n   * either the nv-menu or the nv-menuitem element.\n   */\n  @Event()\n  menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(event: CustomEvent<MenuitemSelectedEventDetail>) {\n    if (this.disableCloseOnSelect) return;\n    if (event.detail.hasSubmenu) return;\n    this.open = false;\n  }\n\n  @Listen('keydown', { passive: false })\n  handleKeydown(event: KeyboardEvent) {\n    // If the menu is not open, check if the trigger is focused\n    // and the user presses Enter or ArrowDown, open the menu\n    if (!this.open) {\n      if (\n        (event.key === 'Enter' ||\n          event.key === 'ArrowDown' ||\n          event.key === ' ') &&\n        document.activeElement === this.triggerElement\n      ) {\n        event.preventDefault();\n        this.show();\n        // Then, put the focus on the first menuitem\n        const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n        if (firstMenuItem) {\n          requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n        }\n      }\n      return;\n    }\n\n    if (this.isHandlingKeyDown) return;\n    this.isHandlingKeyDown = true;\n\n    if (\n      event.key === 'ArrowDown' ||\n      event.key === 'ArrowUp' ||\n      event.key === 'ArrowLeft' ||\n      event.key === 'ArrowRight' ||\n      event.key === 'Escape'\n    ) {\n      event.preventDefault();\n    }\n\n    if (event.key === 'Escape' && !this.nested) {\n      this.close();\n      this.triggerElement.focus();\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    const menuContent = this.el.querySelector('[slot=\"content\"]');\n    const menuItems = (\n      Array.from(menuContent.childNodes) as Array<\n        HTMLNvMenuitemElement | HTMLNvMenuElement\n      >\n    ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n    let currentIndex = menuItems.indexOf(\n      document.activeElement as HTMLNvMenuitemElement,\n    );\n    if (currentIndex === -1)\n      currentIndex = menuItems.indexOf(\n        document.activeElement.parentElement as HTMLNvMenuitemElement,\n      );\n    if (\n      currentIndex === -1 &&\n      menuItems.find(item => item.matches('nv-menu[open]'))\n    ) {\n      this.isHandlingKeyDown = false;\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      menuItems.forEach(item => {\n        if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n      });\n    }\n\n    if (event.key === 'ArrowDown') {\n      let nextIndex = (currentIndex + 1) % menuItems.length;\n      while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n        nextIndex = (nextIndex + 1) % menuItems.length;\n      }\n      const nextFocusable = menuItems[nextIndex];\n      if (nextFocusable.matches('nv-menuitem')) {\n        nextFocusable.focus();\n      } else if (nextFocusable.matches('nv-menu')) {\n        nextFocusable.querySelector('nv-menuitem').focus();\n      }\n    }\n\n    if (event.key === 'ArrowUp') {\n      let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n      while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n        prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n      }\n      const prevFocusable = menuItems[prevIndex];\n      if (prevFocusable.matches('nv-menuitem')) {\n        prevFocusable.focus();\n      } else if (prevFocusable.matches('nv-menu')) {\n        prevFocusable.querySelector('nv-menuitem').focus();\n      }\n    }\n\n    if (event.key === 'ArrowRight') {\n      const submenu = menuItems[currentIndex];\n      if (!submenu.matches('nv-menu')) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      (submenu as HTMLNvMenuElement).show();\n    }\n\n    if (event.key === 'ArrowLeft' && this.nested) {\n      if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n        this.isHandlingKeyDown = false;\n        return;\n      }\n      this.close();\n      this.triggerElement.focus();\n    }\n\n    this.isHandlingKeyDown = false;\n  }\n\n  @Listen('openChanged')\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (event.target === this.el.querySelector('nv-popover')) {\n      this.open = event.detail;\n    }\n    const triggerHasFocus = this.triggerElement === document.activeElement;\n    const triggerHasFocusVisible =\n      this.triggerElement.matches(':focus-visible');\n    if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n  }\n\n  private focusFirstItem() {\n    const firstButton = this.popoverElement.querySelector('nv-menuitem');\n    if (firstButton) {\n      requestAnimationFrame(() => firstButton.focus());\n    }\n  }\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n\n    // If the items attribute is provided, parse its value.\n    if (this.items) {\n      this.handleItemsChange(this.items);\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  /**\n   * Generates menu items from the `items` property.\n   * @param {MenuItem[]} items - The items to display in the menu.\n   * @returns {HTMLElement[]} The rendered items.\n   */\n  private renderMenuItems(items: MenuItem[]) {\n    return items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu\n            nested\n            placement=\"right-start\"\n            items={JSON.stringify(item.submenuItems)}\n          >\n            <nv-menuitem\n              slot=\"trigger\"\n              has-submenu\n              disabled={item.disabled}\n              icon={item.icon as IconName}\n              shortcut={item.shortcut}\n              id={item.value}\n              name={item.label}\n            >\n              {item.label}\n            </nv-menuitem>\n          </nv-menu>\n        );\n      }\n      return (\n        <nv-menuitem\n          disabled={item.disabled}\n          icon={item.icon as IconName}\n          shortcut={item.shortcut}\n          id={item.value}\n          name={item.label}\n        >\n          {item.label}\n        </nv-menuitem>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n        <nv-popover\n          ref={el => (this.popoverElement = el)}\n          triggerMode=\"click\"\n          triggerElement={this.triggerElement}\n          placement={this.placement}\n          nested={this.nested}\n          open={this.open}\n        >\n          {this.parsedItems.length > 0 ? (\n            <ul slot=\"content\">{this.renderMenuItems(this.parsedItems)}</ul>\n          ) : (\n            <slot name=\"content\"></slot>\n          )}\n        </nv-popover>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/esm/nv-menuitem.entry.js

@@ -46,7 +46,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '00eb86ae218c3c5f26d8cca8b2b6dd01c188e892', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3e724d9b9ca5c4217d4e7bbbc89987b437465633', name: this.icon }), h("span", { key: '0528eb7b9248a23d198ec14a300b4b6fa8b9807f', "data-scope": "text" }, h("slot", { key: 'eab9b1545c566888160daaac5382c0617950a3d6' })), this.shortcut && !this.hasSubmenu && h("kbd", { key: '665a6d3016a6ecb45556b8cb693d495e39d9ade6' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '1e6dc4e78295910947598fdf82625e275ef43f61', name: "chevron-right" })));
+        return (h(Host, { key: '48927594d07e47785b4f5fa3fe9c9de124639a04', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3aebb72e0253570ccac2b56df6105a2369d9eb25', name: this.icon }), h("span", { key: '7fa806cb1466cd163176d9803cbb19ce82de95f6', "data-scope": "text" }, h("slot", { key: '9ba63eea4a78a7f92c060235f0a2835d28ce2a51' })), this.shortcut && !this.hasSubmenu && h("kbd", { key: '40d2e13a6599ed865b86af496730f7d940a6e7c6' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '11dec66dff350a59f5a3199dd6983ac578218468', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/nv-popover.entry.js

@@ -2348,7 +2348,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '70a86c895bd48aaa2df3e4a2f6c09970349beb82' }, h("slot", { key: '3454968dd835224f8d714c04c44140cdb1b78be8', name: "trigger" }), h("div", { key: '40d13a1026201f162c160208dc4632f15a3dbd5e', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '84729e3a457d4c261c482279cea99a51c5bd917d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'd840299c028d29ca188126f4ab1d81bc6c4a12bb', name: "content" }))));
+        return (h(Host, { key: 'c3befa1e8d317dd2a934de3a3bc8bcf032f547f3' }, h("slot", { key: 'ed004517edbd180e3e4d6f6adddc7f282a59fe64', name: "trigger" }), h("div", { key: '3c55ca065c9c1f293572a297078da4296b4a5a3f', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'e356e91d35f468ed1f98eb44e6974d3438f9d532', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '2a71c9727ae7e3cbf13595ffb4b9d56c6966bd46', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/nv-row.entry.js

@@ -10,7 +10,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2c3b123ef4d7b9f5ad8dbf6aea7e28f193814f35' }, h("slot", { key: '56fa851396d284c9c38c6d05d6bafa8123e97416' })));
+        return (h(Host, { key: '9baad27eb331d2e0d68be8cb2e3dd2cacc7f913c' }, h("slot", { key: 'f346a7568b71a1de72ddc7c36bbf0df21f8e9968' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/esm/nv-stack.entry.js

@@ -19,7 +19,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '4bccce6f6bebe0998262e7642a0c2f7abe9a1d16', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '63e31c94c88baaaaada221e1682d128f4edfa76c' })));
+        return (h(Host, { key: 'c8b211684fe80277d45e7c69304eb80fa0bc78d1', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gutter-x-${this.gutter}`, this.gutter && this.vertical && `gutter-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'adce599bad0bfcbbf4fde1c6e01cd605e5161ce8' })));
     }
 };
 NvStack.style = NvStackStyle0;

package/dist/esm/nv-table.entry.js

@@ -1,35 +1,37 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-fac2d5d2.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-fac2d5d2.js';
+import { d as deepCopyElement, e as excludedProps } from './dom.utils-ac71e0ef.js';
 
-const nvTableCss = "nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0}";
+const nvTableCss = "nv-table{display:block}nv-table .hidden{display:none}nv-table table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-table th{text-align:left;border-bottom:1px solid var(--components-datagrid-border-header);height:var(--spacing-12);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md);font-weight:700;color:var(--components-datagrid-content-header)}nv-table td{border-bottom:1px solid var(--components-datagrid-border-body);height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-md);font-weight:400;color:var(--components-datagrid-content-text);white-space:nowrap;text-overflow:ellipsis}nv-table tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}";
 const NvTableStyle0 = nvTableCss;
 
 const NvTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.action = createEvent(this, "action", 7);
+        this.templateCache = new Map();
+        this.headerTemplateCache = new Map();
         /****************************************************************************/
         //#region STATES
-        this.parsedColumns = []; // Parsed array of column headers
-        this.parsedData = []; // Parsed array of data rows
-        this.hasSlotHead = false;
-        this.hasSlotBody = false;
+        this.parsedColumns = [];
+        this.parsedData = [];
+        this.table = null;
         //#endregion STATES
         /****************************************************************************/
         //#region PROPERTIES
         /**
-         * Defines the table columns.
-         * @example ['Name', 'Age', 'Email']
-         * @default []
+         * Data to be displayed in the table
          */
-        this.columns = [];
+        this.data = [];
         /**
-         * Defines the table data.
-         * @example [{ name: 'Alice', age: 25, email: 'alice@mail.com' }, { name: 'Bob', age: 30, email: 'bob@mail.com' }]
-         * @default []
+         * Configuration of the columns of the table
          */
-        this.data = [];
+        this.columnsConfig = [];
         /**
-         * The message to display when there is no data available.
-         * @default 'No data available'
+         * Fallback value to be displayed when data is not available
+         */
+        this.fallbackValue = 'N/A';
+        /**
+         * Message to be displayed when no data is available
          */
         this.noDataMessage = 'No data available';
         /**
@@ -40,17 +42,239 @@ const NvTable = class {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
+    //#region METHODS
+    /**
+     * Caches templates for cells and headers upfront to improve performance.
+     */
+    cacheTemplates() {
+        const columns = Array.from(this.el.querySelectorAll('nv-tablecolumn'));
+        columns.forEach((col) => {
+            const key = col.name;
+            const cellSlot = col.querySelector('[slot="cell"]');
+            if (cellSlot) {
+                const element = deepCopyElement(cellSlot);
+                this.templateCache.set(key, element);
+            }
+            const headerSlot = col.querySelector('[slot="header"]');
+            if (headerSlot) {
+                const element = deepCopyElement(headerSlot);
+                this.headerTemplateCache.set(key, element);
+            }
+            else {
+                const header = col.header;
+                if (header) {
+                    const headerDiv = document.createElement('div');
+                    headerDiv.textContent = header;
+                    this.headerTemplateCache.set(key, headerDiv);
+                }
+            }
+        });
+    }
+    parseDataAndColumns() {
+        if (this.dataJson) {
+            this.parseJsonData(this.dataJson);
+        }
+        else if (this.data && this.data.length > 0) {
+            this.parseDataArray(this.data, this.parsedData);
+        }
+        if (this.columnsConfigJson) {
+            this.parseJsonColumns(this.columnsConfigJson, this.parsedColumns);
+        }
+        else if (this.columnsConfig && this.columnsConfig.length > 0) {
+            this.parseColumnsArray(this.columnsConfig, this.parsedColumns);
+        }
+        else if (this.headerTemplateCache.size > 0) {
+            const headerKeys = Array.from(this.headerTemplateCache.keys());
+            const arrayColumnsConfig = headerKeys.map(key => (Object.assign({}, { name: key, header: key ? key.charAt(0).toUpperCase() + key.slice(1) : '' })));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+        else if (this.parsedData.length > 0) {
+            const firstRow = this.parsedData[0];
+            const arrayColumnsConfig = Object.keys(firstRow).map(key => ({
+                name: key,
+                header: key.charAt(0).toUpperCase() + key.slice(1),
+            }));
+            this.parseColumnsArray(arrayColumnsConfig, this.parsedColumns);
+        }
+    }
+    deepEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    /**
+     * 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}
+     */
+    parseDataArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return; // Deep comparison
+        }
+        this.parsedData = Array.isArray(newValue) ? newValue : [];
+    }
+    /**
+     * 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}
+     */
+    parseColumnsArray(newValue, oldValue) {
+        // Ensure both are arrays for proper comparison
+        const safeNewValue = Array.isArray(newValue) ? newValue : [];
+        const safeOldValue = Array.isArray(oldValue) ? oldValue : [];
+        // Use a proper deep comparison function (e.g., Lodash's isEqual)
+        if (this.deepEqual(safeNewValue, safeOldValue)) {
+            return;
+        }
+        // Assign only after confirming changes
+        this.parsedColumns = safeNewValue;
+    }
+    initializeTable() {
+        // Clear the previous table instance (if any)
+        this.table = null;
+        if (this.parsedColumns.length > 0) {
+            this.table = {
+                columns: this.parsedColumns,
+                data: this.getTableData(),
+            };
+        }
+        else {
+            this.table = null;
+        }
+    }
+    getTableData() {
+        if (this.parsedData &&
+            Array.isArray(this.parsedData) &&
+            this.parsedData.length > 0) {
+            return [...this.parsedData];
+        }
+        else {
+            return [];
+        }
+    }
+    // Helper function to get nested property value
+    replaceKeyWithValue(obj, path) {
+        var _a;
+        return ((_a = path
+            .split('.')
+            .reduce((acc, key) => (acc && acc[key] !== undefined ? acc[key] : undefined), obj)) !== null && _a !== void 0 ? _a : this.fallbackValue);
+    }
+    renderTemplate(template, row) {
+        if (!template) {
+            return null;
+        }
+        // Handle <template> elements correctly
+        const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
+        const element = deepCopyElement(templateContent);
+        // Replace placeholders in text content, attributes, and properties
+        element.querySelectorAll('*').forEach(el => {
+            // Replace placeholders in text content
+            this.replacePlaceholdersTextContent(el, row);
+            // Replace placeholders in attributes
+            this.replacePlaceholdersAttributes(el, row);
+            // Replace placeholders in properties
+            this.replacePlaceholdersProperties(el, row);
+        });
+        // Handle `data-bind-event`
+        element.querySelectorAll('[data-bind-event]').forEach(el => {
+            const bindEvent = el.getAttribute('data-bind-event') || '';
+            const splitted = bindEvent.split(':');
+            if (!bindEvent.includes(':') || splitted.length < 2) {
+                console.warn('Invalid data-bind-event format:', bindEvent);
+                return;
+            }
+            const eventType = splitted[0];
+            const keyAction = splitted[1];
+            const details = splitted.length > 2 ? splitted[2] : null;
+            el.addEventListener(eventType, () => {
+                var _a;
+                const keys = (_a = details === null || details === void 0 ? void 0 : details.split(',')) !== null && _a !== void 0 ? _a : [];
+                // Convert keys into a single object instead of an array of objects
+                const keyValue = keys.reduce((acc, key) => {
+                    acc[key] = row === null || row === void 0 ? void 0 : row[key];
+                    return acc;
+                }, {});
+                const action = { keyAction, details: keyValue };
+                this.action.emit(action);
+            });
+        });
+        // Ensure Web Components are properly connected
+        setTimeout(() => {
+            element.querySelectorAll('*').forEach(child => {
+                if (typeof child.connectedCallback === 'function') {
+                    child.connectedCallback();
+                }
+            });
+        }, 0);
+        return (h("div", { ref: el => {
+                if (el) {
+                    el.innerHTML = ''; // Remove existing content
+                    el.appendChild(element); // Append new element
+                }
+            } }));
+    }
+    replacePlaceholdersTextContent(element, row) {
+        // ✅ Replace placeholders in text content
+        element.childNodes.forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.textContent = node.textContent.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersAttributes(element, row) {
+        // ✅ Replace placeholders in attributes
+        Array.from(element.attributes).forEach(attr => {
+            if (attr.value.includes('__')) {
+                attr.value = attr.value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key));
+            }
+        });
+    }
+    replacePlaceholdersProperties(element, row) {
+        // ✅ Dynamically extract relevant properties
+        const properties = new Set();
+        // Collect only own enumerable properties
+        Object.keys(element).forEach(key => properties.add(key));
+        // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
+        let proto = Object.getPrototypeOf(element);
+        while (proto && proto !== HTMLElement.prototype) {
+            Object.keys(proto).forEach(key => properties.add(key));
+            proto = Object.getPrototypeOf(proto);
+        }
+        // ✅ Filter and copy only non-function properties and exclude irrelevant ones
+        properties.forEach(prop => {
+            if (typeof element[prop] !== 'function' && // Ignore methods
+                !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
+                !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+            ) {
+                try {
+                    const value = element[prop];
+                    // ✅ Replace placeholders only if the value is a string
+                    if (typeof value === 'string' && value.includes('__')) {
+                        element[prop] = value.replace(/__([\w.]+)__/g, (_, key) => this.replaceKeyWithValue(row, key)); // ✅ TypeScript safe
+                    }
+                }
+                catch (error) {
+                    console.warn(`Could not assign property ${prop}:`, error.message);
+                }
+            }
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
     //#region WATCHERS
     parseColumns(newValue, oldValue) {
         this.parseColumnsArray(newValue, oldValue);
     }
-    parseJsonColumns(newValue) {
+    parseJsonColumns(newValue, oldValue) {
         try {
             const newItems = newValue ? JSON.parse(newValue) : [];
-            this.parseColumnsArray(newItems, this.parsedColumns);
+            this.parseColumnsArray(newItems, oldValue);
         }
         catch (e) {
-            console.error('Invalid JSON format for columnsJson:', e.message);
+            console.error('Invalid JSON format for columnsConfigJson:', e.message);
             this.parsedColumns = [];
         }
     }
@@ -67,81 +291,43 @@ const NvTable = class {
             this.parsedData = [];
         }
     }
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Parses the columns array.
-     * @param {string[]} newValue - The new value of the columns array.
-     * @param {string[]} oldValue - The old value of the columns array.
-     */
-    parseColumnsArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedColumns = Array.isArray(newValue) ? newValue : [];
+    handleParsedChange() {
+        this.initializeTable();
     }
-    /**
-     * Parses the data array.
-     * @param {any[]} newValue - The new value of the data array.
-     * @param {any[]} oldValue - The old value of the data array.
-     */
-    parseDataArray(newValue, oldValue) {
-        if (JSON.stringify(newValue) === JSON.stringify(oldValue))
-            return; // Deep comparison
-        this.parsedData = Array.isArray(newValue) ? newValue : [];
-    }
-    //#endregion METHODS
+    //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        this.hasSlotHead = !!this.el.querySelector('[slot="head"]');
-        this.hasSlotBody = !!this.el.querySelector('[slot="body"]');
-        if (this.columnsJson) {
-            this.parseJsonColumns(this.columnsJson);
-        }
-        else {
-            this.parseColumns(this.columns, this.parsedColumns);
-        }
-        if (this.dataJson) {
-            this.parseJsonData(this.dataJson);
-        }
-        else {
-            this.parseData(this.data, this.parsedData);
-        }
+        this.cacheTemplates();
+        this.parseDataAndColumns();
     }
-    //#endregion LIFECYCLE
+    //#endregion EVENTS
     /****************************************************************************/
     //#region RENDER
     render() {
-        const headerRows = this.hasSlotHead
-            ? Array.from(this.el
-                .querySelector('[slot="head"]')
-                .querySelectorAll('nv-tablerow'))
-            : [];
-        const bodyRows = this.hasSlotBody
-            ? Array.from(this.el
-                .querySelector('[slot="body"]')
-                .querySelectorAll('nv-tablerow'))
-            : [];
-        return (h(Host, { key: 'b445be90862bb95df560d26215d0a175b2c5f02d' }, h("div", { key: 'fc50c87d2b4e9d233bc90ef16c9c6701fbca0467', class: "hidden" }, h("slot", { key: '03429a816585ffa3e36066bfd06d2d320714b9b5' }), h("slot", { key: '06d30f5c55e34f0be4212c3153874475fc93be2c', name: "head" }), h("slot", { key: '64d73c406a6d72187ab0cb7434ed8c5894564076', name: "body" })), h("slot", { key: '038d7e7f5fd6125b101c286558e61afb3b493d88', name: "before" }), this.parsedColumns.length === 0 &&
-            this.parsedData.length === 0 &&
-            headerRows.length === 0 &&
-            bodyRows.length === 0 ? (h("p", null, this.noColumnsNoDataMessage)) : (h("table", null, this.parsedColumns.length > 0 ? (h("thead", null, h("tr", null, this.parsedColumns.map(column => (h("th", null, column)))))) : headerRows.length > 0 ? (h("thead", null, headerRows.map(row => {
-            const cells = Array.from(row.querySelectorAll('nv-tablecolumn'));
-            return (h("tr", null, cells.map(cell => (h("th", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, scope: cell.scope, innerHTML: cell.innerHTML })))));
-        }))) : null, h("tbody", null, this.parsedData.length === 0 && bodyRows.length === 0 ? (h("tr", null, h("td", { colSpan: this.parsedColumns.length || 12 }, this.noDataMessage))) : this.parsedData.length > 0 ? (this.parsedData.map(row => (h("tr", null, this.parsedColumns.length > 0
-            ? this.parsedColumns.map(column => (h("td", null, row[column.toLowerCase()] || '')))
-            : Object.values(row).map(value => h("td", null, value)))))) : bodyRows.length > 0 ? (bodyRows.map(row => {
-            const cells = Array.from(row.querySelectorAll('nv-tabledatacell'));
-            return (h("tr", null, cells.map(cell => (h("td", { colSpan: cell.colspan, rowSpan: cell.rowspan, headers: cell.headers, innerHTML: cell.innerHTML })))));
-        })) : null))), h("slot", { key: 'd24abb3236e2d1019d2316da1d1cc2f19d33902b', name: "after" })));
+        const headerGroups = !this.table || this.table === undefined || this.parsedColumns.length === 0
+            ? []
+            : this.table.columns;
+        const rows = !this.table || this.table === undefined || this.parsedData.length === 0
+            ? []
+            : this.table.data;
+        return (h(Host, { key: 'b740dfd8e0db88881f7ca062eaab5b3373b236c2' }, h("div", { key: '784d4b910c00ce5dc6b91768f457d0e649b70431', class: "hidden" }, h("slot", { key: '0891b88350c4f4e50634870ae5bafab7f8bdb46a' })), h("slot", { key: 'bc895b4327694ba7b660fce776e6ce1c1817c5dc', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (h("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (h("thead", { class: "table-header" }, h("tr", null, headerGroups &&
+            headerGroups.map(col => {
+                return (h("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
+            })))), h("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (h("tr", null, h("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (h("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
+            var _a;
+            return (h("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
+                ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
+        })))))))), h("slot", { key: 'b4b5a8442f3a6982fb6d268c8b076a4d361b933c', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "columns": ["parseColumns"],
-        "columnsJson": ["parseJsonColumns"],
+        "columnsConfig": ["parseColumns"],
+        "columnsConfigJson": ["parseJsonColumns"],
         "data": ["parseData"],
-        "dataJson": ["parseJsonData"]
+        "dataJson": ["parseJsonData"],
+        "parsedColumns": ["handleParsedChange"],
+        "parsedData": ["handleParsedChange"]
     }; }
 };
 NvTable.style = NvTableStyle0;