@nova-design-system/nova-webcomponents 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/collection/components/nv-popover/nv-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-popover.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  h,\n  Method,\n  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n} from '@floating-ui/dom';\nimport { createStore } from '@stencil/store';\n\nimport { useGrow, useFade } from '../../animations';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\n\nconst { state } = createStore<{\n  groups: Map<string, { openedBy: HTMLNvPopoverElement }>;\n}>({\n  groups: new Map(),\n});\n\n/**\n * @slot trigger - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover.\n */\n@Component({\n  tag: 'nv-popover',\n  styleUrl: 'nv-popover.scss',\n  shadow: false,\n})\nexport class NvPopover {\n  @Element() el: HTMLNvPopoverElement;\n  private popoverElement!: HTMLDivElement;\n  private arrowElement!: HTMLDivElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ mutable: true })\n  triggerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the popover. Set to true to show\n   * the popover and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Sets the interaction mode for triggering the popover. Options include:\n   * - `hover`: The popover is shown on trigger hover.\n   * - `click`: The popover toggles on trigger click.\n   * - `controlled`: The visibility is managed manually through methods or the\n   *   open prop.\n   */\n  @Prop()\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Use this to group popovers together so that opening one will not animate\n   * the closing of another. This is helpful when popovers are placed close\n   * together, preventing animation overlap.\n   */\n  @Prop()\n  readonly groupName: string;\n\n  /**\n   * Adjust the gap between the popover and its trigger element by setting how\n   * many pixels they should be apart.\n   */\n  @Prop()\n  readonly offset: number = 12;\n\n  /**\n   * Use this to decide if the popover should include a small arrow pointing to\n   * the trigger element, making the connection between them more clear.\n   */\n  @Prop()\n  readonly hasArrow: boolean = false;\n\n  /**\n   * Disables the automatic flipping of the popover when the trigger element is\n   * out of the viewport. The popover will flip automatically by default.\n   */\n  @Prop()\n  readonly disableFlip: boolean = false;\n\n  /**\n   * Sets how many pixels the popover should stay from the edge of the viewport.\n   */\n  @Prop()\n  readonly shiftPadding: number = 16;\n\n  /**\n   * Use this to set a delay before the popover appears on hover. If the mouse\n   * leaves before this time, the popover won’t show. This only works when the\n   * trigger mode is set to `hover`.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  /**\n   * Use this to set the popover to be nested inside another popover. This will\n   * prevent the parent popover from closing when the child popover is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the popover, making it visible on the screen.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Use this method to hide the popover, making it disappear from view.\n   */\n  @Method()\n  async hide() {\n    this.open = false;\n  }\n\n  /**\n   * Call this method to toggle between showing and hiding the popover, based on\n   * its current state.\n   */\n  @Method()\n  async toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Calculates the position of the popover relative to the trigger.\n   * @docs https://floating-ui.com/docs/computePosition\n   */\n  private positionPopover() {\n    if (!this.triggerElement) return;\n\n    computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [\n        offset(this.offset),\n        !this.disableFlip &&\n          flip({\n            fallbackStrategy: 'bestFit',\n            crossAxis: true,\n            fallbackPlacements: ['bottom'],\n          }),\n        shift({ padding: this.shiftPadding }),\n        this.hasArrow && arrow({ element: this.arrowElement }),\n      ],\n    }).then(({ x, y, placement, middlewareData }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.hasArrow) {\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const transform = {\n          top: 'rotate(225deg)',\n          right: 'rotate(315deg)',\n          bottom: 'rotate(45deg)',\n          left: 'rotate(135deg)',\n        }[placement.split('-')[0]];\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        Object.assign(this.arrowElement.style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          transform,\n          [staticSide]: '-4px',\n        });\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the popover is toggled.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  @Listen('openChanged', { target: 'document' })\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (this.triggerMode === 'controlled') return;\n    if (this.nested) return;\n    if ((event.target as Element)?.hasAttribute('nested')) return;\n    // This popover should close when another one is opened.\n    if (event.target !== this.el && event.detail === true) this.hide();\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (this.triggerMode === 'controlled') return;\n    this.handleClickOutside(event);\n  }\n\n  @Listen('touchstart', { target: 'document' })\n  handleDocumentTouch(event: TouchEvent) {\n    if (this.triggerMode === 'controlled') return;\n    this.handleClickOutside(event);\n  }\n\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    // This popover should close when the user clicks outside of it.\n    if (this.el.contains(event.target as Node)) return;\n    if (this.triggerElement.contains(event.target as Node)) return;\n    this.hide();\n  };\n\n  private clickEvents: EventsAndListeners = [\n    ['click', this.toggle],\n    ['touchstart', this.toggle],\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          this.toggle();\n        }\n      },\n    ],\n  ];\n\n  private hideTimeout: ReturnType<typeof setTimeout>;\n  private showTimeout: ReturnType<typeof setTimeout>;\n  private hoverEvents: EventsAndListeners = [\n    [\n      'focus',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.hide();\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n  private isAnimating = false;\n\n  @Watch('open')\n  async handleOpenChange(open: boolean) {\n    // Prevent multiple animations from running at the same time.\n    while (this.isAnimating) {\n      await new Promise(resolve => setTimeout(resolve, 50));\n    }\n\n    this.isAnimating = true;\n\n    const group = state.groups.get(this.groupName);\n    const isOtherMemberOpen = group && group.openedBy !== this.el;\n    const isThisMemberOpen = group && group.openedBy === this.el;\n\n    if (open) this.popoverElement.style.removeProperty('display');\n    if (isThisMemberOpen && !open) state.groups.delete(this.groupName);\n    if (this.groupName && open)\n      state.groups.set(this.groupName, { openedBy: this.el });\n\n    const { growIn } = useGrow(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n      amount: 0.85,\n    });\n\n    const { fadeOut } = useFade(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n    });\n\n    if (open === true) {\n      this.popoverElement.removeAttribute('hidden');\n      this.positionPopover();\n      await growIn();\n    }\n    if (open === false) {\n      await fadeOut();\n      this.popoverElement.setAttribute('hidden', '');\n    }\n\n    this.isAnimating = false;\n    this.openChanged.emit(open);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === 'trigger',\n      );\n  }\n\n  componentDidLoad() {\n    // Initial inline style setup\n    if (!this.open) {\n      const { setGrowOut } = useGrow(this.popoverElement);\n      setGrowOut();\n    } else {\n      const { setFadeIn } = useFade(this.popoverElement);\n      setFadeIn();\n      this.popoverElement.removeAttribute('hidden');\n    }\n\n    this.positionPopover();\n\n    addEventListeners(this.closeEvents, document, this);\n    if (this.triggerMode === 'click')\n      addEventListeners(this.clickEvents, this.triggerElement, this);\n    if (this.triggerMode === 'hover')\n      addEventListeners(this.hoverEvents, this.triggerElement, this);\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n    if (this.triggerMode === 'click')\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div data-scope=\"popover\" hidden ref={el => (this.popoverElement = el)}>\n          {this.hasArrow && (\n            <div data-scope=\"arrow\" ref={el => (this.arrowElement = el)}></div>\n          )}\n\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nv-popover.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  h,\n  Method,\n  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n} from '@floating-ui/dom';\nimport { createStore } from '@stencil/store';\n\nimport { useGrow, useFade } from '../../animations';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\n\nconst { state } = createStore<{\n  /**\n   * A map of popover groups, used to manage the opening and closing of multiple\n   */\n  groups: Map<\n    string,\n    {\n      /**\n       * The popover element that opened the group.\n       */\n      openedBy: HTMLNvPopoverElement;\n    }\n  >;\n}>({\n  groups: new Map(),\n});\n\n/**\n * @slot trigger - Content to be placed as the trigger.\n * @slot content - Content to be placed within the popover.\n */\n@Component({\n  tag: 'nv-popover',\n  styleUrl: 'nv-popover.scss',\n  shadow: false,\n})\nexport class NvPopover {\n  @Element() el: HTMLNvPopoverElement;\n  private popoverElement!: HTMLDivElement;\n  private arrowElement!: HTMLDivElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * @internal\n   * Accepts a reference to the DOM element acting as the popover trigger. This\n   * should be used when the slot for the trigger is not defined.\n   */\n  @Prop({ mutable: true })\n  triggerElement: Element;\n\n  /**\n   * Use this prop to toggle the visibility of the popover. Set to true to show\n   * the popover and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * Sets the interaction mode for triggering the popover. Options include:\n   * - `hover`: The popover is shown on trigger hover.\n   * - `click`: The popover toggles on trigger click.\n   * - `controlled`: The visibility is managed manually through methods or the\n   *   open prop.\n   */\n  @Prop()\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop()\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Use this to group popovers together so that opening one will not animate\n   * the closing of another. This is helpful when popovers are placed close\n   * together, preventing animation overlap.\n   */\n  @Prop()\n  readonly groupName: string;\n\n  /**\n   * Adjust the gap between the popover and its trigger element by setting how\n   * many pixels they should be apart.\n   */\n  @Prop()\n  readonly offset: number = 12;\n\n  /**\n   * Use this to decide if the popover should include a small arrow pointing to\n   * the trigger element, making the connection between them more clear.\n   */\n  @Prop()\n  readonly hasArrow: boolean = false;\n\n  /**\n   * Disables the automatic flipping of the popover when the trigger element is\n   * out of the viewport. The popover will flip automatically by default.\n   */\n  @Prop()\n  readonly disableFlip: boolean = false;\n\n  /**\n   * Sets how many pixels the popover should stay from the edge of the viewport.\n   */\n  @Prop()\n  readonly shiftPadding: number = 16;\n\n  /**\n   * Use this to set a delay before the popover appears on hover. If the mouse\n   * leaves before this time, the popover won’t show. This only works when the\n   * trigger mode is set to `hover`.\n   */\n  @Prop()\n  readonly enterDelay: number = 0;\n\n  /**\n   * Use this to set the popover to be nested inside another popover. This will\n   * prevent the parent popover from closing when the child popover is opened.\n   */\n  @Prop({ reflect: true })\n  readonly nested: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the popover, making it visible on the screen.\n   */\n  @Method()\n  async show() {\n    this.open = true;\n  }\n\n  /**\n   * Use this method to hide the popover, making it disappear from view.\n   */\n  @Method()\n  async hide() {\n    this.open = false;\n  }\n\n  /**\n   * Call this method to toggle between showing and hiding the popover, based on\n   * its current state.\n   */\n  @Method()\n  async toggle() {\n    this.open = !this.open;\n  }\n\n  /**\n   * Calculates the position of the popover relative to the trigger.\n   * @docs https://floating-ui.com/docs/computePosition\n   */\n  private positionPopover() {\n    if (!this.triggerElement) return;\n\n    computePosition(this.triggerElement, this.popoverElement, {\n      placement: this.placement,\n      middleware: [\n        offset(this.offset),\n        !this.disableFlip &&\n          flip({\n            fallbackStrategy: 'bestFit',\n            crossAxis: true,\n            fallbackPlacements: ['bottom'],\n          }),\n        shift({ padding: this.shiftPadding }),\n        this.hasArrow && arrow({ element: this.arrowElement }),\n      ],\n    }).then(({ x, y, placement, middlewareData }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n\n      if (this.hasArrow) {\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const transform = {\n          top: 'rotate(225deg)',\n          right: 'rotate(315deg)',\n          bottom: 'rotate(45deg)',\n          left: 'rotate(135deg)',\n        }[placement.split('-')[0]];\n\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        Object.assign(this.arrowElement.style, {\n          left: arrowX != null ? `${arrowX}px` : '',\n          top: arrowY != null ? `${arrowY}px` : '',\n          right: '',\n          bottom: '',\n          transform,\n          [staticSide]: '-4px',\n        });\n      }\n    });\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the popover is toggled.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n\n  @Listen('openChanged', { target: 'document' })\n  handleOpenChanged(event: CustomEvent<boolean>) {\n    if (this.triggerMode === 'controlled') return;\n    if (this.nested) return;\n    if ((event.target as Element)?.hasAttribute('nested')) return;\n    // This popover should close when another one is opened.\n    if (event.target !== this.el && event.detail === true) this.hide();\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (this.triggerMode === 'controlled') return;\n    this.handleClickOutside(event);\n  }\n\n  @Listen('touchstart', { target: 'document' })\n  handleDocumentTouch(event: TouchEvent) {\n    if (this.triggerMode === 'controlled') return;\n    this.handleClickOutside(event);\n  }\n\n  private handleClickOutside = (event: MouseEvent | TouchEvent) => {\n    // This popover should close when the user clicks outside of it.\n    if (this.el.contains(event.target as Node)) return;\n    if (this.triggerElement.contains(event.target as Node)) return;\n    this.hide();\n  };\n\n  private clickEvents: EventsAndListeners = [\n    ['click', this.toggle],\n    ['touchstart', this.toggle],\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          this.toggle();\n        }\n      },\n    ],\n  ];\n\n  private hideTimeout: ReturnType<typeof setTimeout>;\n  private showTimeout: ReturnType<typeof setTimeout>;\n  private hoverEvents: EventsAndListeners = [\n    [\n      'focus',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(() => this.show(), this.enterDelay);\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => this.hide(), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.hide();\n        }\n      },\n    ],\n  ];\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n  private isAnimating = false;\n\n  @Watch('open')\n  async handleOpenChange(open: boolean) {\n    // Prevent multiple animations from running at the same time.\n    while (this.isAnimating) {\n      await new Promise(resolve => setTimeout(resolve, 50));\n    }\n\n    this.isAnimating = true;\n\n    const group = state.groups.get(this.groupName);\n    const isOtherMemberOpen = group && group.openedBy !== this.el;\n    const isThisMemberOpen = group && group.openedBy === this.el;\n\n    if (open) this.popoverElement.style.removeProperty('display');\n    if (isThisMemberOpen && !open) state.groups.delete(this.groupName);\n    if (this.groupName && open)\n      state.groups.set(this.groupName, { openedBy: this.el });\n\n    const { growIn } = useGrow(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n      amount: 0.85,\n    });\n\n    const { fadeOut } = useFade(this.popoverElement, {\n      duration: isOtherMemberOpen ? 0 : 100,\n    });\n\n    if (open === true) {\n      this.popoverElement.removeAttribute('hidden');\n      this.positionPopover();\n      await growIn();\n    }\n    if (open === false) {\n      await fadeOut();\n      this.popoverElement.setAttribute('hidden', '');\n    }\n\n    this.isAnimating = false;\n    this.openChanged.emit(open);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (!this.triggerElement)\n      this.triggerElement = Array.from(this.el.children).find(\n        child => child.getAttribute('slot') === 'trigger',\n      );\n  }\n\n  componentDidLoad() {\n    // Initial inline style setup\n    if (!this.open) {\n      const { setGrowOut } = useGrow(this.popoverElement);\n      setGrowOut();\n    } else {\n      const { setFadeIn } = useFade(this.popoverElement);\n      setFadeIn();\n      this.popoverElement.removeAttribute('hidden');\n    }\n\n    this.positionPopover();\n\n    addEventListeners(this.closeEvents, document, this);\n    if (this.triggerMode === 'click')\n      addEventListeners(this.clickEvents, this.triggerElement, this);\n    if (this.triggerMode === 'hover')\n      addEventListeners(this.hoverEvents, this.triggerElement, this);\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n    if (this.triggerMode === 'click')\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div data-scope=\"popover\" hidden ref={el => (this.popoverElement = el)}>\n          {this.hasArrow && (\n            <div data-scope=\"arrow\" ref={el => (this.arrowElement = el)}></div>\n          )}\n\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-row/nv-row.js

@@ -6,7 +6,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0509e4652dd679fbfb5b4eadb3aaef8979d879e7' }, h("slot", { key: '75a3a0b83eec4f573a3e54340b3679dc8f529fda' })));
+        return (h(Host, { key: '559c93b3961fdee5d278df42693dd4faae1f1eaf' }, h("slot", { key: '3cbf2c0ed7a07e23537ae6fb3cc999fef27561ea' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-row/nv-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-row.js","sourceRoot":"","sources":["../../../src/components/nv-row/nv-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,KAAK;IAChB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - The row content.\n */\n@Component({\n  tag: 'nv-row',\n  styleUrl: './nv-row.scss',\n  shadow: false,\n})\nexport class NvRow {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nv-row.js","sourceRoot":"","sources":["../../../src/components/nv-row/nv-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,KAAK;IAChB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;CAGF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * @slot default - The row content.\n */\n@Component({\n  tag: 'nv-row',\n  styleUrl: './nv-row.scss',\n  shadow: false,\n})\nexport class NvRow {\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/collection/components/nv-stack/nv-stack.js

@@ -16,7 +16,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c644c9312f247c75b8eecc0903fb16d36e9ed4e5', 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: '654459698308057e20afc68fc046364cd32c2512' })));
+        return (h(Host, { key: '900b3afd3b0394433a719769797b4275998be59d', 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: 'de28519746e3c18f04bdaea3f13258bc3d3d49a9' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-stack/nv-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-stack.js","sourceRoot":"","sources":["../../../src/components/nv-stack/nv-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;GAGG;AAMH,MAAM,OAAO,OAAO;;sBASQ,CAAC;;;;;;IAgC3B,uBAAuB;IACvB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,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;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"nv-stack.js","sourceRoot":"","sources":["../../../src/components/nv-stack/nv-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB;;;GAGG;AAMH,MAAM,OAAO,OAAO;;sBASQ,CAAC;;;;;;IAgC3B,uBAAuB;IACvB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,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;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["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"]}

package/dist/collection/components/nv-table/nv-table.css

@@ -0,0 +1,5 @@
+nv-table table {
+  border-collapse: collapse;
+  border-color: inherit;
+  text-indent: 0;
+}

package/dist/collection/components/nv-table/nv-table.docs.js

@@ -0,0 +1,178 @@
+import { h } from "@stencil/core";
+const NvTableDocs = {
+    component: 'nv-table',
+    subcomponents: [
+        'nv-tablehead',
+        'nv-tablebody',
+        'nv-tablerow',
+        'nv-tablecolumn',
+        'nv-tabledatacell',
+        'nv-icon',
+    ],
+    composedComponents: [
+        'nv-tablehead',
+        'nv-tablebody',
+        'nv-tablerow',
+        'nv-tablecolumn',
+        'nv-tabledatacell',
+        'nv-icon',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'No Columns No Data Message',
+            args: {
+                noColumnsNoDataMessage: 'Nothing to display.',
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'No Data Message',
+            args: {
+                noDataMessage: 'No element available to display.',
+                columnsJson: `["Name", "Age", "Email"]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Array And Empty Data',
+            args: {
+                columns: ['Name', 'Age', 'Email'],
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns JSON And Empty Data',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Data Array And Empty Columns',
+            args: {
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Data JSON And Empty Columns',
+            args: {
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Array And Data Array',
+            args: {
+                columns: ['Name', 'Age', 'Email'],
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns JSON And Data JSON',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: h("nv-table", { "data-storybook-args": true }),
+        },
+        {
+            name: 'Columns Decomposed And Empty Data',
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data Array',
+            args: {
+                data: [
+                    { name: 'Alice', age: '25', email: 'alice@mail.com' },
+                    { name: 'Bob', age: '30', email: 'bob@mail.com' },
+                ],
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data JSON',
+            args: {
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))))),
+        },
+        {
+            name: 'Data Decomposed And Empty Columns',
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, "alice@mail.com")), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Data Decomposed And Columns Array',
+            args: {
+                columns: ['Name', 'Age', 'Email'],
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, "alice@mail.com")), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Data Decomposed And Columns JSON',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, "alice@mail.com")), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Columns Decomposed And Data Decomposed',
+            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablehead", { slot: "head" }, h("nv-tablerow", null, h("nv-tablecolumn", null, "Name"), h("nv-tablecolumn", null, "Age"), h("nv-tablecolumn", null, "Email"))), h("nv-tablebody", { slot: "body" }, h("nv-tablerow", null, h("nv-tabledatacell", null, "Alice"), h("nv-tabledatacell", null, "25"), h("nv-tabledatacell", null, h("nv-icon", { name: "mail" }), h("a", { href: "mailto:alice@mail.com", class: "text-amber-500" }, "alice@mail.com"))), h("nv-tablerow", null, h("nv-tabledatacell", null, "Bob"), h("nv-tabledatacell", null, "30"), h("nv-tabledatacell", null, "bob@mail.com"))))),
+        },
+        {
+            name: 'Slot Before',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"))),
+        },
+        {
+            name: 'Slot After',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "after" }, "After"))),
+        },
+        {
+            name: 'Slot Before And After',
+            args: {
+                columnsJson: `["Name", "Age", "Email"]`,
+                dataJson: `[
+          { "name": "Alice", "age": "25", "email": "alice@mail.com" },
+          { "name": "Bob", "age": "30", "email": "bob@mail.com" }
+        ]`,
+            },
+            template: (h("nv-table", { "data-storybook-args": true }, h("div", { slot: "before" }, "Before"), h("div", { slot: "after" }, "After"))),
+        },
+    ],
+};
+export default NvTableDocs;
+//# sourceMappingURL=nv-table.docs.js.map

package/dist/collection/components/nv-table/nv-table.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-table.docs.js","sourceRoot":"","sources":["../../../src/components/nv-table/nv-table.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvTableDocs: NovaDocs<Components.NvTable> = {\n  component: 'nv-table',\n  subcomponents: [\n    'nv-tablehead',\n    'nv-tablebody',\n    'nv-tablerow',\n    'nv-tablecolumn',\n    'nv-tabledatacell',\n    'nv-icon',\n  ],\n  composedComponents: [\n    'nv-tablehead',\n    'nv-tablebody',\n    'nv-tablerow',\n    'nv-tablecolumn',\n    'nv-tabledatacell',\n    'nv-icon',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'No Columns No Data Message',\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'No Data Message',\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns Array And Empty Data',\n      args: {\n        columns: ['Name', 'Age', 'Email'],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns JSON And Empty Data',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Data Array And Empty Columns',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Data JSON And Empty Columns',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns Array And Data Array',\n      args: {\n        columns: ['Name', 'Age', 'Email'],\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns JSON And Data JSON',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: 'Columns Decomposed And Empty Data',\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Array',\n      args: {\n        data: [\n          { name: 'Alice', age: '25', email: 'alice@mail.com' },\n          { name: 'Bob', age: '30', email: 'bob@mail.com' },\n        ],\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data JSON',\n      args: {\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Empty Columns',\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns Array',\n      args: {\n        columns: ['Name', 'Age', 'Email'],\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Data Decomposed And Columns JSON',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>alice@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Columns Decomposed And Data Decomposed',\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablehead slot=\"head\">\n            <nv-tablerow>\n              <nv-tablecolumn>Name</nv-tablecolumn>\n              <nv-tablecolumn>Age</nv-tablecolumn>\n              <nv-tablecolumn>Email</nv-tablecolumn>\n            </nv-tablerow>\n          </nv-tablehead>\n          <nv-tablebody slot=\"body\">\n            <nv-tablerow>\n              <nv-tabledatacell>Alice</nv-tabledatacell>\n              <nv-tabledatacell>25</nv-tabledatacell>\n              <nv-tabledatacell>\n                <nv-icon name=\"mail\"></nv-icon>\n                <a href=\"mailto:alice@mail.com\" class=\"text-amber-500\">\n                  alice@mail.com\n                </a>\n              </nv-tabledatacell>\n            </nv-tablerow>\n            <nv-tablerow>\n              <nv-tabledatacell>Bob</nv-tabledatacell>\n              <nv-tabledatacell>30</nv-tabledatacell>\n              <nv-tabledatacell>bob@mail.com</nv-tabledatacell>\n            </nv-tablerow>\n          </nv-tablebody>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Slot Before',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <div slot=\"before\">Before</div>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Slot After',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <div slot=\"after\">After</div>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'Slot Before And After',\n      args: {\n        columnsJson: `[\"Name\", \"Age\", \"Email\"]`,\n        dataJson: `[\n          { \"name\": \"Alice\", \"age\": \"25\", \"email\": \"alice@mail.com\" },\n          { \"name\": \"Bob\", \"age\": \"30\", \"email\": \"bob@mail.com\" }\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <div slot=\"before\">Before</div>\n          <div slot=\"after\">After</div>\n        </nv-table>\n      ),\n    },\n  ],\n};\n\nexport default NvTableDocs;\n"]}