@nova-design-system/nova-webcomponents 3.0.0-beta.45 → 3.0.0-beta.47

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 { 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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\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<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(\n    event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n  ) {\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              label={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          label={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} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/**\n * @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n  readonly placement: Placement = 'bottom-end';\n\n  /**\n   * List of items used to automatically generate dropdown items. This\n   * provides an alternative to using the slot manually.\n   *\n   * @example\n   * items = [{\n   *  \"label\": \"Option 1\",\n   *  \"value\": \"option1\",\n   * },\n   * {\n   *  \"label\": \"Option 2\",\n   *  \"value\": \"option2\",\n   * }]\n   */\n  @Prop({ reflect: true })\n  readonly items?: {\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?: InstanceType<typeof NvMenu>['items'];\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<\n    HTMLNvMenuitemElementEventMap['menuitemSelected']\n  >;\n\n  @Listen('menuitemSelected')\n  handleMenuItemSelect(\n    event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n  ) {\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\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 = () => {\n    return this.items.map(item => {\n      if (item.hasSubmenu && item.submenuItems?.length > 0) {\n        return (\n          <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n            <nv-menuitem\n              slot=\"trigger\"\n              hasSubmenu\n              disabled={item.disabled}\n              icon={item.icon as IconName}\n              shortcut={item.shortcut}\n              id={item.value}\n              name={item.label}\n              label={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          label={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.items ? (\n            <ul slot=\"content\">{this.renderMenuItems()}</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: '2b59ea1b8582c9d5beac1e22c9547bebca9a19c0', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'bd72a3c8ffb0f2bfcecb11017493ee7476a8b34a', name: this.icon }), h("slot", { key: 'a3f396ca95fcb14fba1861f641e11abac06c7fe8' }), this.label && h("span", { key: 'ffffe933ab348dc617bb2d76f96e6e11e6ea5900', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cc76611b2a113cfa309ba3655d5c335d996380b3' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '3e90fdb722f845e24d6588b604f292dd7ee2ea4a', name: "chevron-right" })));
+        return (h(Host, { key: 'd736bc00759cb97fe52d2d6dc091667057a5585c', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: 'cf29c75feedcb61d16d33433f834751c821a4256', name: this.icon }), h("slot", { key: '0ebe8b2faac9981023c224e3c5cd4f131e088c0e' }), this.label && h("span", { key: 'd2659aceb0ecc1cad794ae16d15432379677012c', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: '7d7772b6efda6faccafc425772c905d4aabd2ef5' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: 'c756d3ceffc907fa0c37338595a7fd09f8238a7b', name: "chevron-right" })));
     }
     get el() { return getElement(this); }
 };

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

@@ -2363,7 +2363,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6c72a8b8adc53dea2bd79b4b68afbeebc0281453' }, h("slot", { key: 'c9b7c7327346a53a5e0183785c2ae7f908a46826', name: "trigger" }), h("div", { key: 'd95998b8efc7e3f1c346d4dc516ccdf08bcceb48', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '59a84c8daa368251b10a1f64a4e1335b9f5716dd', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '1ab56763bc4ff602d83042a10c67d633b81e5ae9', name: "content" }))));
+        return (h(Host, { key: '830051c35f7e10dfa4e31d401663bd5727ac988f' }, h("slot", { key: 'a49852a712bf6ab9c8557035ca4618d007939f03', name: "trigger" }), h("div", { key: '6d9cd4bd873cb92b1716a8ea88a3877a029cbe9c', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'f935c9248b602aa1c39e7d28c5503a24067fb744', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '6b682de05037b2d3b60c9139c448620fab963ea1', 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: 'd6f9bbc1ed59bfc59a97728896c0443c8e104e59' }, h("slot", { key: '3d9c1c809524d0a4b9d8ad541ead8978d246c998' })));
+        return (h(Host, { key: '7daaa109808165553e69707c72550f284e087011' }, h("slot", { key: 'a00fd8c81352b485d8508f9bd68af4dd81d959e1' })));
     }
 };
 NvRow.style = NvRowStyle0;

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

@@ -19,7 +19,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aef0e6f873f68880d20b5ae9f4f56ece40e8a0ee', 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: 'd003e23ec3c9b4a5c4496bc9f4c170af467b311e' })));
+        return (h(Host, { key: '02e184fbc9e9ddd4b02b107baf093047fa3697b0', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '1a501fcc419f97f2714be822120072b49590e5ea' })));
     }
 };
 NvStack.style = NvStackStyle0;

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

@@ -1 +1 @@
-{"file":"nv-stack.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,s8BAAs8B,CAAC;AAC19B,sBAAe,UAAU;;MCWZ,OAAO;IALpB;;;;;;;;QAcW,WAAM,GAAW,CAAC,CAAC;KAsD7B;;;;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EAC1D,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,YAAY,IAAI,CAAC,MAAM,EAAE,EACzD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC,IAED,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n\n  nv-col {\n    display: flex;\n  }\n\n  &:not(nv-row) {\n    flex-wrap: nowrap;\n  }\n\n  > .nv-stack-item-flex {\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  > .nv-stack-item-lead {\n    margin-right: auto;\n  }\n\n  > .nv-stack-item-lead + * {\n    margin-left: 0;\n  }\n\n  > .nv-stack-item-center {\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  > .nv-stack-item-tail {\n    margin-left: auto;\n  }\n\n  > .nv-stack-nowrap {\n    white-space: nowrap;\n  }\n\n  // Vertical\n  &.nv-stack-vertical {\n    align-items: stretch;\n    flex-direction: column;\n\n    > .nv-stack-item-lead {\n      margin-right: 0;\n      margin-bottom: auto;\n    }\n\n    > .nv-stack-item-lead + * {\n      margin-top: 0;\n    }\n\n    > .nv-stack-item-tail {\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    > .nv-stack-item-center {\n      margin: auto 0;\n    }\n  }\n\n  &.nv-stack-flex {\n    > * {\n      flex-shrink: 1;\n      flex-grow: 1;\n    }\n  }\n\n  &.nv-stack-fill {\n    > * {\n      height: 100%;\n    }\n\n    &.nv-stack-vertical {\n      > * {\n        height: auto;\n        width: 100%;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gutter-x-${this.gutter}`,\n          this.gutter && this.vertical && `gutter-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-stack.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,s8BAAs8B,CAAC;AAC19B,sBAAe,UAAU;;MCWZ,OAAO;IALpB;;;;;;;;QAcW,WAAM,GAAW,CAAC,CAAC;KAsD7B;;;;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,eAAe,EAC5B,IAAI,CAAC,IAAI,IAAI,QAAQ,EACrB,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE,EACvD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE,EACtD,IAAI,CAAC,QAAQ,IAAI,mBAAmB,CACrC,IAED,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/nv-stack/nv-stack.scss?tag=nv-stack","src/components/nv-stack/nv-stack.tsx"],"sourcesContent":["nv-stack {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n\n  nv-col {\n    display: flex;\n  }\n\n  &:not(nv-row) {\n    flex-wrap: nowrap;\n  }\n\n  > .nv-stack-item-flex {\n    flex-shrink: 1;\n    flex-grow: 1;\n  }\n\n  > .nv-stack-item-lead {\n    margin-right: auto;\n  }\n\n  > .nv-stack-item-lead + * {\n    margin-left: 0;\n  }\n\n  > .nv-stack-item-center {\n    margin-right: auto;\n    margin-left: auto;\n  }\n\n  > .nv-stack-item-tail {\n    margin-left: auto;\n  }\n\n  > .nv-stack-nowrap {\n    white-space: nowrap;\n  }\n\n  // Vertical\n  &.nv-stack-vertical {\n    align-items: stretch;\n    flex-direction: column;\n\n    > .nv-stack-item-lead {\n      margin-right: 0;\n      margin-bottom: auto;\n    }\n\n    > .nv-stack-item-lead + * {\n      margin-top: 0;\n    }\n\n    > .nv-stack-item-tail {\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    > .nv-stack-item-center {\n      margin: auto 0;\n    }\n  }\n\n  &.nv-stack-flex {\n    > * {\n      flex-shrink: 1;\n      flex-grow: 1;\n    }\n  }\n\n  &.nv-stack-fill {\n    > * {\n      height: 100%;\n    }\n\n    &.nv-stack-vertical {\n      > * {\n        height: auto;\n        width: 100%;\n      }\n    }\n  }\n}","import { Component, Host, Prop, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * @deprecated Please use tailwind classes instead\n * @slot default - Content of the stack\n */\n@Component({\n  tag: 'nv-stack',\n  styleUrl: './nv-stack.scss',\n  shadow: false,\n})\nexport class NvStack {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Gutter refers to the space that exists between children components inside\n   * the stack container.\n   */\n  @Prop({ reflect: true })\n  readonly gutter: number = 2;\n\n  /**\n   * Fill will force the children to fill the stack depending of the direction\n   * of the stack. In horizontal position, the children take the height of the\n   * stack. In vertical position, the children take the width of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly fill: boolean;\n\n  /**\n   * Flex will force the children to share the stack between the children\n   * depending of the direction of the stack. In horizontal position, the\n   * children width will share the width of the stack. In vertical position,\n   * the children height will share the height of the stack.\n   */\n  @Prop({ reflect: true })\n  readonly flex: boolean;\n\n  /**\n   * Full set the width of the stack to 100%.\n   * (same effect as WFull props)\n   */\n  @Prop({ reflect: true })\n  readonly full: boolean;\n\n  /**\n   * Display the element of the stack vertically.\n   */\n  @Prop({ reflect: true })\n  readonly vertical: boolean;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.fill && 'nv-stack-fill',\n          this.flex && 'nv-stack-flex',\n          this.full && 'w-full',\n          this.gutter && !this.vertical && `gap-x-${this.gutter}`,\n          this.gutter && this.vertical && `gap-y-${this.gutter}`,\n          this.vertical && 'nv-stack-vertical',\n        )}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

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

@@ -311,14 +311,14 @@ const NvTable = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (h(Host, { key: 'bf96a7c40a0960fc68778c33ec63a1d574993408' }, h("div", { key: '77e4ace0a9925ef6f5f7e1f51a2abc0c381d8ba5', class: "hidden" }, h("slot", { key: 'cdeb4abdd65d0e5de7064af63b1a39e661d4b49b' })), h("slot", { key: '4322aeb2858716be200a8d6851ef1d47ee0c44bb', 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 &&
+        return (h(Host, { key: 'b2962fba4d5a12aa660d0c0f69298c93947ef592' }, h("div", { key: 'f60e5c09d57c0ccf5cb9996ca85fcc8792270b85', class: "hidden" }, h("slot", { key: '9c4aefff542478535b3f342b1c75f68d717c3bf8' })), h("slot", { key: 'bfd0f5406187bcad69d9ed41e2f294314a3572f1', 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: 'e5e490de2ff568c962368f39dbcd5c119e814b0d', name: "after" })));
+        })))))))), h("slot", { key: 'e0039c9af9506bc8f2ded8cc81bbd2667ee1f2c1', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -62,8 +62,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '6728159c0c7f622fbcc5017a116ec0dd1fe28b39', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '2155eacf39771790ca730f264f9c490f6e93794b', class: "input-container" }, h("input", { key: '588a638b678c7d26fd0050a54fbd86ab029c18d0', 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 })), h("div", { key: 'ba543a1282f8244449c3682bc43c8481d0c588dd', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'beab39ef75d445e43bf4d127ea9f0c7130bae25f', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: 'fd60c679cf1514fc2d01c39a8e13e6dc6fd3287e', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '42582783ac08557d55bf8f80fa68f2f565f7208f', class: "description" }, h("slot", { key: '889f7408fd401816ffb6dff0c264e265911e3b79', name: "description" }, this.description))))));
+        return (h(Host, { key: 'e80390a43bab3d55373f6b05db1516210f90c3b5', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '66156f05cc18bb63a8625cdff72d9c177e4cf86b', class: "input-container" }, h("input", { key: 'db0c2c078c23431605befb8dd972a29bfdefb16f', 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 })), h("div", { key: '576df464b48fa11bf8a46bede5f1d822db569636', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f529b009876a5de5061747f78372a66ccfdcac61', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '3ace029242d920b783fe0038f8721b416f54633f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '2eeb41266ee52ef40c1600750084fda0fac8dc6f', class: "description" }, h("slot", { key: '605541594fcc7f3192766a5395c5a81f42de7728', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -32,7 +32,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '8cd2c98bb131f251183acb9af66c9f6f9756ea95' }, h("slot", { key: 'fe6b19ecbf81c75579d2eda7f420dba67d17f6b1' }), h("nv-popover", { key: '4bb59ab06f861d3892de8122ef12eacacb8b4ad5', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '1f6eca5114ef857086f1263adb806894d5e8e49e', slot: "content" }, this.message), h("slot", { key: '7a359b89785621df4fb4f1c499d4a295f4112aed', name: "content" }))));
+        return (h(Host, { key: '8309e08944469fad76997a6dfcb8b434461aa5a3' }, h("slot", { key: 'f3da94e2f2f581f7b8c93f4b3e70de67e305508a' }), h("nv-popover", { key: 'a28c50f59f9a781afd8a8ab60260d065dcadf96d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, h("p", { key: '76f63a5f220de640f4eeada8aeba97e9ead73fc9', slot: "content" }, this.message), h("slot", { key: 'f55f71b357b23c29b40b9c022a5a1718c4c8c8fb', name: "content" }))));
     }
     get el() { return getElement(this); }
 };