@nova-design-system/nova-webcomponents 3.14.0 → 3.16.0

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

@@ -13,6 +13,50 @@ const { state } = createStore({
 export class NvPopover {
     constructor() {
         this.eventsAttached = false;
+        this.isAnimating = false;
+        this.clickEvents = [
+            ['click', () => (this.open = !this.open)],
+        ];
+        this.hoverEvents = [
+            [
+                'focus',
+                () => {
+                    clearTimeout(this.hideTimeout);
+                    this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
+                },
+            ],
+            [
+                'blur',
+                () => {
+                    clearTimeout(this.showTimeout);
+                    this.hideTimeout = setTimeout(() => (this.open = false), 50);
+                },
+            ],
+            [
+                'mouseenter',
+                () => {
+                    clearTimeout(this.hideTimeout);
+                    this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
+                },
+            ],
+            [
+                'mouseleave',
+                () => {
+                    clearTimeout(this.showTimeout);
+                    this.hideTimeout = setTimeout(() => (this.open = false), 100);
+                },
+            ],
+        ];
+        this.closeEvents = [
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Escape') {
+                        this.open = false;
+                    }
+                },
+            ],
+        ];
         /**
          * Use this prop to toggle the visibility of the popover. Set to true to show
          * the popover and false to hide it.
@@ -82,57 +126,13 @@ export class NvPopover {
                 return;
             this.open = false;
         };
-        this.clickEvents = [
-            ['click', () => (this.open = !this.open)],
-        ];
+        //#endregion METHODS
+        /****************************************************************************/
+        //#region HELPERS
         this.outsideClickEvents = [
             ['click', this.handleClickOutside],
             ['touchstart', this.handleClickOutside],
         ];
-        this.hoverEvents = [
-            [
-                'focus',
-                () => {
-                    clearTimeout(this.hideTimeout);
-                    this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
-                },
-            ],
-            [
-                'blur',
-                () => {
-                    clearTimeout(this.showTimeout);
-                    this.hideTimeout = setTimeout(() => (this.open = false), 50);
-                },
-            ],
-            [
-                'mouseenter',
-                () => {
-                    clearTimeout(this.hideTimeout);
-                    this.showTimeout = setTimeout(() => (this.open = true), this.enterDelay);
-                },
-            ],
-            [
-                'mouseleave',
-                () => {
-                    clearTimeout(this.showTimeout);
-                    this.hideTimeout = setTimeout(() => (this.open = false), 100);
-                },
-            ],
-        ];
-        this.closeEvents = [
-            [
-                'keydown',
-                (e) => {
-                    if (e.key === 'Escape') {
-                        this.open = false;
-                    }
-                },
-            ],
-        ];
-        //#endregion EVENTS
-        /****************************************************************************/
-        //#region WATCHERS
-        this.isAnimating = false;
     }
     //#endregion PROPERTIES
     /****************************************************************************/
@@ -226,18 +226,9 @@ export class NvPopover {
             }
         });
     }
-    handleOpenChanged(event) {
-        var _a;
-        if (this.triggerMode === 'controlled')
-            return;
-        if (this.nested)
-            return;
-        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.hasAttribute('nested'))
-            return;
-        // This popover should close when another one is opened.
-        if (event.target !== this.el && event.detail === true)
-            this.open = false;
-    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
     async handleOpenChange(open) {
         // Prevent multiple animations from running at the same time.
         while (this.isAnimating) {
@@ -279,6 +270,21 @@ export class NvPopover {
     }
     //#endregion WATCHERS
     /****************************************************************************/
+    //#region LISTENERS
+    handleOpenChanged(event) {
+        var _a;
+        if (this.triggerMode === 'controlled')
+            return;
+        if (this.nested)
+            return;
+        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.hasAttribute('nested'))
+            return;
+        // This popover should close when another one is opened.
+        if (event.target !== this.el && event.detail === true)
+            this.open = false;
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
         if (!this.triggerElement)
@@ -322,7 +328,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, h("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), h("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
+        return (h(Host, { key: '0644e319053ca1f216aac89f5737805008b097be' }, h("slot", { key: '7f03080c300378be09e6fce9a44fa2a4a8730f40', name: "trigger" }), h("div", { key: '801b7f1dd8c87db5eb06bcabddda8936c89a6ab2', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'd8e40589a4c53d4ac0c313f3d97cf61ef928f56d', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'af0743b1a94c44dd161712e080dbf54a69c9d4a4', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

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  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n  Method,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n  type Strategy,\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  private eventsAttached = false;\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({ reflect: false, 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({ reflect: true })\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Sets the positioning strategy for the popover. Options include:\n   * - `absolute`: Positions the popover relative to the trigger element\n   *   (default).\n   * - `fixed`: Positions the popover relative to the viewport, useful when you\n   *   need the popover to break out of overflow hidden containers, it will not\n   *   scroll inside a scroll container due to the fixed positioning.\n   */\n  @Prop({ reflect: true })\n  readonly strategy: Strategy = 'absolute';\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({ reflect: true })\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({ reflect: true })\n  readonly offset: number = 6;\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n  readonly shiftPadding: number = 0;\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({ reflect: true })\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   * Attaches event listeners to the trigger element, and makes sure this only\n   * happens once.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached) {\n      addEventListeners(this.closeEvents, document, this);\n\n      if (this.triggerMode === 'click') {\n        addEventListeners(this.clickEvents, this.triggerElement, this);\n\n        // Add document click and touch listeners\n        addEventListeners(this.outsideClickEvents, document, this);\n      }\n\n      if (this.triggerMode === 'hover') {\n        addEventListeners(this.hoverEvents, this.triggerElement, this);\n      }\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Handles the click outside event.\n   * @param {MouseEvent | TouchEvent} event - The event object.\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.open = false;\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      strategy: this.strategy,\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, strategy }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n        position: strategy,\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.open = false;\n  }\n\n  private clickEvents: EventsAndListeners = [\n    ['click', () => (this.open = !this.open)],\n  ];\n\n  private outsideClickEvents: EventsAndListeners = [\n    ['click', this.handleClickOutside],\n    ['touchstart', this.handleClickOutside],\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(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.open = false;\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  @Watch('strategy')\n  handleStrategyChange() {\n    if (this.open) {\n      this.positionPopover();\n    }\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  componentWillUpdate() {\n    this.attachEventListeners();\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    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n\n    if (this.triggerMode === 'click') {\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n      // Remove document listeners\n      removeEventListeners(this.outsideClickEvents, document, this);\n    }\n\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n\n    // Reset flag so events can be reattached if component is reconnected\n    this.eventsAttached = false;\n\n    // Clean up any pending timeouts\n    if (this.hideTimeout) clearTimeout(this.hideTimeout);\n    if (this.showTimeout) clearTimeout(this.showTimeout);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div\n          data-scope=\"popover\"\n          data-strategy={this.strategy}\n          hidden\n          ref={el => (this.popoverElement = el)}\n        >\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"]}
+{"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  EventEmitter,\n  Event,\n  Watch,\n  Listen,\n  Element,\n  Method,\n} from '@stencil/core';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  arrow,\n  type Placement,\n  type Strategy,\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  private eventsAttached = false;\n  private isAnimating = false;\n  private clickEvents: EventsAndListeners = [\n    ['click', () => (this.open = !this.open)],\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(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'blur',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 50);\n      },\n    ],\n    [\n      'mouseenter',\n      () => {\n        clearTimeout(this.hideTimeout);\n        this.showTimeout = setTimeout(\n          () => (this.open = true),\n          this.enterDelay,\n        );\n      },\n    ],\n    [\n      'mouseleave',\n      () => {\n        clearTimeout(this.showTimeout);\n        this.hideTimeout = setTimeout(() => (this.open = false), 100);\n      },\n    ],\n  ];\n\n  private closeEvents: EventsAndListeners = [\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.open = false;\n        }\n      },\n    ],\n  ];\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({ reflect: false, 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({ reflect: true })\n  readonly triggerMode: 'hover' | 'click' | 'controlled' = 'click';\n\n  /**\n   * Defines where the popover appears relative to the trigger.\n   */\n  @Prop({ reflect: true })\n  readonly placement: Placement = 'bottom';\n\n  /**\n   * Sets the positioning strategy for the popover. Options include:\n   * - `absolute`: Positions the popover relative to the trigger element\n   *   (default).\n   * - `fixed`: Positions the popover relative to the viewport, useful when you\n   *   need the popover to break out of overflow hidden containers, it will not\n   *   scroll inside a scroll container due to the fixed positioning.\n   */\n  @Prop({ reflect: true })\n  readonly strategy: Strategy = 'absolute';\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({ reflect: true })\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({ reflect: true })\n  readonly offset: number = 6;\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({ reflect: true })\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({ reflect: true })\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({ reflect: true })\n  readonly shiftPadding: number = 0;\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({ reflect: true })\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   * Attaches event listeners to the trigger element, and makes sure this only\n   * happens once.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached) {\n      addEventListeners(this.closeEvents, document, this);\n\n      if (this.triggerMode === 'click') {\n        addEventListeners(this.clickEvents, this.triggerElement, this);\n\n        // Add document click and touch listeners\n        addEventListeners(this.outsideClickEvents, document, this);\n      }\n\n      if (this.triggerMode === 'hover') {\n        addEventListeners(this.hoverEvents, this.triggerElement, this);\n      }\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Handles the click outside event.\n   * @param {MouseEvent | TouchEvent} event - The event object.\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.open = false;\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      strategy: this.strategy,\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, strategy }) => {\n      Object.assign(this.popoverElement.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n        position: strategy,\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 HELPERS\n\n  private outsideClickEvents: EventsAndListeners = [\n    ['click', this.handleClickOutside],\n    ['touchstart', this.handleClickOutside],\n  ];\n\n  //#endregion HELPERS\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  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\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  @Watch('strategy')\n  handleStrategyChange() {\n    if (this.open) {\n      this.positionPopover();\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LISTENERS\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.open = false;\n  }\n\n  //#endregion LISTENERS\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  componentWillUpdate() {\n    this.attachEventListeners();\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    this.attachEventListeners();\n  }\n\n  disconnectedCallback() {\n    removeEventListeners(this.closeEvents, document, this);\n\n    if (this.triggerMode === 'click') {\n      removeEventListeners(this.clickEvents, this.triggerElement, this);\n      // Remove document listeners\n      removeEventListeners(this.outsideClickEvents, document, this);\n    }\n\n    if (this.triggerMode === 'hover')\n      removeEventListeners(this.hoverEvents, this.triggerElement, this);\n\n    // Reset flag so events can be reattached if component is reconnected\n    this.eventsAttached = false;\n\n    // Clean up any pending timeouts\n    if (this.hideTimeout) clearTimeout(this.hideTimeout);\n    if (this.showTimeout) clearTimeout(this.showTimeout);\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <div\n          data-scope=\"popover\"\n          data-strategy={this.strategy}\n          hidden\n          ref={el => (this.popoverElement = el)}\n        >\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: '8415bdad0106bd3d836996c617a749294e0c19e2' }, h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
+        return (h(Host, { key: '9623a4c73a5a2557b2ba7eb346ae0740ca7291c5' }, h("slot", { key: '502ea804deec9e91057bfaf6f2fa4fdb4a5822c3' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

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

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', 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: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
+        return (h(Host, { key: '8f771805224c769b5a87f5c550ddbcb8f888d002', 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: '6fcd46cfd74415d2f07c762b065e3aa0f0194764' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

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

@@ -1,172 +1,33 @@
 import { h } from "@stencil/core";
-import { nameof } from "../../utils/class.utils";
 const NvTableDocs = {
     component: 'nv-table',
-    subcomponents: ['nv-tablecolumn', 'nv-iconbutton', 'nv-badge'],
-    composedComponents: ['nv-tablecolumn'],
-    badge: 'beta',
     stories: [
         {
             name: 'Default',
-            template: h("nv-table", { "data-storybook-args": true }),
+            description: 'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", null, "Name"), h("th", null, "Age"), h("th", null, "Email"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "25"), h("td", null, "alice.johnson@example.com")), h("tr", null, h("td", null, "Bob Smith"), h("td", null, "30"), h("td", null, "bob.smith@example.com")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "35"), h("td", null, "charlie.brown@example.com")))))),
         },
         {
-            name: nameof(x => x.noColumnsNoDataMessage),
-            args: {
-                noColumnsNoDataMessage: 'Nothing to display.',
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
+            name: 'ColumnResizingWidthClasses',
+            description: 'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", { "data-class": "w-10" }, "Name"), h("th", { "data-class": "w-10" }, "Age"), h("th", { "data-no-resize": true }, "Email (grows to fill space)"), h("th", { "data-class": "w-10", "data-no-resize": true }, "Actions"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "25"), h("td", null, "alice.johnson@company.example.com"), h("td", null, "Edit")), h("tr", null, h("td", null, "Bob Smith"), h("td", null, "30"), h("td", null, "bob.smith@company.example.com"), h("td", null, "Edit")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "35"), h("td", null, "charlie.brown@company.example.com"), h("td", null, "Edit")))))),
         },
         {
-            name: nameof(x => x.noDataMessage),
-            args: {
-                noDataMessage: 'No element available to display.',
-                columnsConfigJson: `[
-              {"header":"Name","name":"name"},
-              {"header":"Age","name":"age"},
-              {"header":"Email","name":"email"}
-            ]`,
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
+            name: 'RowSelection',
+            description: 'Use the data-selected attribute on table rows to apply selection styling and indicate the currently selected row.',
+            template: (h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", null, "Name"), h("th", null, "Department"), h("th", null, "Status"))), h("tbody", null, h("tr", null, h("td", null, "Alice Johnson"), h("td", null, "Engineering"), h("td", null, "Active")), h("tr", { "data-selected": true }, h("td", null, "Bob Smith"), h("td", null, "Design"), h("td", null, "Active")), h("tr", null, h("td", null, "Charlie Brown"), h("td", null, "Product"), h("td", null, "Inactive")))))),
         },
         {
-            name: nameof(x => x.columnsConfig),
-            args: {
-                columnsConfig: [
-                    { header: 'Name', name: 'name' },
-                    { header: 'Age', name: 'age' },
-                    { header: 'Email', name: 'email' },
-                ],
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
+            name: 'StickyHeader',
+            description: 'Use data-sticky-top on thead elements to make the header stick to the top during vertical scrolling. This is useful for long tables where you want to keep column headers visible.',
+            template: (h("div", { "data-class": "h-40 overflow-y-auto" }, h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", { "data-sticky-top": true }, h("tr", null, h("th", null, "Name"), h("th", null, "Position"), h("th", null, "Department"))), h("tbody", null, Array(10)
+                .fill(0)
+                .map((_, index) => (h("tr", { key: index }, h("td", null, "Employee ", index + 1), h("td", null, "Developer"), h("td", null, "Engineering"))))))))),
         },
         {
-            name: nameof(x => x.columnsConfigJson),
-            args: {
-                columnsConfigJson: `[
-              {"header":"Name","name":"name"},
-              {"header":"Age","name":"age"},
-              {"header":"Email","name":"email"}
-            ]`,
-            },
-            template: h("nv-table", { "data-storybook-args": true }),
-        },
-        {
-            name: nameof(x => x.data),
-            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: nameof(x => x.dataJson),
-            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: 'ColumnsArrayAndDataArray',
-            args: {
-                columnsConfig: [
-                    { header: 'Name', name: 'name' },
-                    { header: 'Age', name: 'age' },
-                    { header: 'Email', name: '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: 'ColumnsJSONAndDataJSON',
-            args: {
-                columnsConfigJson: `[
-          {"header":"Name","name":"name"},
-          {"header":"Age","name":"age"},
-          {"header":"Email","name":"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: 'WithDataAndTemplate',
-            args: {
-                dataJson: `[
-        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com"},
-        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com"}
-        ]`,
-            },
-            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablecolumn", { name: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-tablecolumn", { name: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-tablecolumn", { name: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-tablecolumn", { name: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
-        },
-        {
-            name: 'WithDataAndTemplateComplexData',
-            args: {
-                dataJson: `[
-        {"id":1,"name":"John Doe","age":25,"email":"john.doe@mail.com", "address": {"city": "New York", "country": "USA"}, "status": {"label": "success", "color": "1", "icon": "check"}},
-        {"id":2,"name":"Jane Doe","age":30,"email":"jane.doe@mail.com", "address": {"city": "Los Angeles", "country": "USA"}, "status": {"label": "warning", "color": "2", "icon": "alert-circle"}},
-        {"id":3,"name":"John Smith","age":35,"email":"john.smith@mail.com", "address": {"city": "London", "country": "UK"}, "status": {"label": "error", "color": "3", "icon": "loader"}},
-        {"id":4,"name":"Jane Smith","age":40,"email":"jane.smith@mail.com", "address": {"city": "Paris", "country": "France"}, "status": {"label": "info", "color": "5", "icon": "info-circle"}}
-        ]`,
-            },
-            template: (h("nv-table", { "data-storybook-args": true }, h("nv-tablecolumn", { name: "name", header: "Name" }, h("div", { slot: "header" }, h("strong", null, "Name")), h("div", { slot: "cell" }, h("strong", null, "__name__"))), h("nv-tablecolumn", { name: "age", header: "Age" }, h("div", { slot: "header" }, h("em", null, "Age")), h("div", { slot: "cell" }, h("span", null, "__age__ years old"))), h("nv-tablecolumn", { name: "email", header: "Mail Address" }, h("div", { slot: "cell" }, h("a", { href: "mailto:__email__" }, "__email__"))), h("nv-tablecolumn", { name: "address", header: "Address" }, h("div", { slot: "cell" }, h("span", null, "__address.city__, __address.country__"))), h("nv-tablecolumn", { name: "status", header: "Status" }, h("div", { slot: "header" }, h("span", { class: "text-md font-bold text-low" }, "Status")), h("div", { slot: "cell" }, h("nv-badge", { color: "__status.color__", "lead-icon": "__status.icon__" }, "__status.label__"))), h("nv-tablecolumn", { name: "actions" }, h("div", { slot: "header" }), h("div", { slot: "cell" }, h("nv-iconbutton", { size: "xs", name: "pencil", "data-bind-event": "click:edit:id" }), h("nv-iconbutton", { size: "xs", name: "trash", "data-bind-event": "click:delete:id" }), h("nv-iconbutton", { size: "xs", name: "mail", "data-bind-event": "click:sendEmail:id,email" }))))),
-        },
-        {
-            name: 'SlotBefore',
-            args: {
-                columnsConfigJson: `[
-          {"header":"Name","name":"name"},
-          {"header":"Age","name":"age"},
-          {"header":"Email","name":"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: 'SlotAfter',
-            args: {
-                columnsConfigJson: `[
-          {"header":"Name","name":"name"},
-          {"header":"Age","name":"age"},
-          {"header":"Email","name":"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: 'SlotBeforeAndAfter',
-            args: {
-                columnsConfigJson: `[
-          {"header":"Name","name":"name"},
-          {"header":"Age","name":"age"},
-          {"header":"Email","name":"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"))),
+            name: 'StickyColumnsHorizontalScroll',
+            description: 'Use data-sticky-left and data-sticky-right on th/td elements to make columns stick during horizontal scrolling. Apply the same attribute to both header and data cells. Requires an overflow-x-auto container.',
+            template: (h("div", { "data-class": "overflow-x-auto" }, h("nv-table", { "data-storybook-args": true }, h("table", null, h("thead", null, h("tr", null, h("th", { "data-sticky-left": true }, "Name"), h("th", null, "Position"), h("th", null, "Department"), h("th", null, "Email"), h("th", null, "Phone"), h("th", null, "Address"), h("th", null, "Start Date"), h("th", null, "Salary"), h("th", null, "Manager"), h("th", null, "Skills"), h("th", null, "Notes"), h("th", null, "Website"), h("th", { "data-sticky-right": true }, "Actions"))), h("tbody", null, h("tr", null, h("td", { "data-sticky-left": true }, "John Doe"), h("td", null, "Senior Developer"), h("td", null, "Engineering"), h("td", null, "john.doe@company.com"), h("td", null, "+1-555-0123"), h("td", null, "123 Main St, NY 10001"), h("td", null, "2022-03-10"), h("td", null, "$95,000"), h("td", null, "Sarah Wilson"), h("td", null, "React, TypeScript, Node.js"), h("td", null, "Team lead with React expertise"), h("td", null, "johndoe.dev"), h("td", { "data-sticky-right": true }, "Edit | Delete")), h("tr", null, h("td", { "data-sticky-left": true }, "Jane Smith"), h("td", null, "UX Designer"), h("td", null, "Design"), h("td", null, "jane.smith@company.com"), h("td", null, "+1-555-0456"), h("td", null, "456 Oak Ave, LA 90210"), h("td", null, "2021-09-15"), h("td", null, "$87,000"), h("td", null, "Tom Anderson"), h("td", null, "Figma, Adobe CC, User Research"), h("td", null, "Creative designer with 8 years experience"), h("td", null, "janesmith.design"), h("td", { "data-sticky-right": true }, "Edit | Delete")), h("tr", null, h("td", { "data-sticky-left": true }, "Mike Johnson"), h("td", null, "Product Manager"), h("td", null, "Product"), h("td", null, "mike.johnson@company.com"), h("td", null, "+1-555-0789"), h("td", null, "789 Pine St, Chicago 60601"), h("td", null, "2020-01-08"), h("td", null, "$110,000"), h("td", null, "Lisa Chen"), h("td", null, "Agile, Scrum, Product Strategy"), h("td", null, "Experienced project manager and strategist"), h("td", null, "mikejohnson.biz"), h("td", { "data-sticky-right": true }, "Edit | Delete"))))))),
         },
     ],
 };

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

@@ -1 +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';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvTableDocs: NovaDocs<Components.NvTable> = {\n  component: 'nv-table',\n  subcomponents: ['nv-tablecolumn', 'nv-iconbutton', 'nv-badge'],\n  composedComponents: ['nv-tablecolumn'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.noColumnsNoDataMessage),\n      args: {\n        noColumnsNoDataMessage: 'Nothing to display.',\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.noDataMessage),\n      args: {\n        noDataMessage: 'No element available to display.',\n        columnsConfigJson: `[\n              {\"header\":\"Name\",\"name\":\"name\"},\n              {\"header\":\"Age\",\"name\":\"age\"},\n              {\"header\":\"Email\",\"name\":\"email\"}\n            ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.columnsConfig),\n      args: {\n        columnsConfig: [\n          { header: 'Name', name: 'name' },\n          { header: 'Age', name: 'age' },\n          { header: 'Email', name: 'email' },\n        ],\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.columnsConfigJson),\n      args: {\n        columnsConfigJson: `[\n              {\"header\":\"Name\",\"name\":\"name\"},\n              {\"header\":\"Age\",\"name\":\"age\"},\n              {\"header\":\"Email\",\"name\":\"email\"}\n            ]`,\n      },\n      template: <nv-table data-storybook-args></nv-table>,\n    },\n    {\n      name: nameof<Components.NvTable>(x => x.data),\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: nameof<Components.NvTable>(x => x.dataJson),\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: 'ColumnsArrayAndDataArray',\n      args: {\n        columnsConfig: [\n          { header: 'Name', name: 'name' },\n          { header: 'Age', name: 'age' },\n          { header: 'Email', name: 'email' },\n        ],\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: 'ColumnsJSONAndDataJSON',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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: 'WithDataAndTemplate',\n      args: {\n        dataJson: `[\n        {\"id\":1,\"name\":\"John Doe\",\"age\":25,\"email\":\"john.doe@mail.com\"},\n        {\"id\":2,\"name\":\"Jane Doe\",\"age\":30,\"email\":\"jane.doe@mail.com\"}\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablecolumn name=\"name\" header=\"Name\">\n            <div slot=\"header\">\n              <strong>Name</strong>\n            </div>\n            <div slot=\"cell\">\n              <strong>__name__</strong>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"age\" header=\"Age\">\n            <div slot=\"header\">\n              <em>Age</em>\n            </div>\n            <div slot=\"cell\">\n              <span>__age__ years old</span>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"email\" header=\"Mail Address\">\n            <div slot=\"cell\">\n              <a href=\"mailto:__email__\">__email__</a>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"actions\">\n            <div slot=\"header\"></div>\n            <div slot=\"cell\">\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"pencil\"\n                data-bind-event=\"click:edit:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"trash\"\n                data-bind-event=\"click:delete:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"mail\"\n                data-bind-event=\"click:sendEmail:id,email\"\n              ></nv-iconbutton>\n            </div>\n          </nv-tablecolumn>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'WithDataAndTemplateComplexData',\n      args: {\n        dataJson: `[\n        {\"id\":1,\"name\":\"John Doe\",\"age\":25,\"email\":\"john.doe@mail.com\", \"address\": {\"city\": \"New York\", \"country\": \"USA\"}, \"status\": {\"label\": \"success\", \"color\": \"1\", \"icon\": \"check\"}},\n        {\"id\":2,\"name\":\"Jane Doe\",\"age\":30,\"email\":\"jane.doe@mail.com\", \"address\": {\"city\": \"Los Angeles\", \"country\": \"USA\"}, \"status\": {\"label\": \"warning\", \"color\": \"2\", \"icon\": \"alert-circle\"}},\n        {\"id\":3,\"name\":\"John Smith\",\"age\":35,\"email\":\"john.smith@mail.com\", \"address\": {\"city\": \"London\", \"country\": \"UK\"}, \"status\": {\"label\": \"error\", \"color\": \"3\", \"icon\": \"loader\"}},\n        {\"id\":4,\"name\":\"Jane Smith\",\"age\":40,\"email\":\"jane.smith@mail.com\", \"address\": {\"city\": \"Paris\", \"country\": \"France\"}, \"status\": {\"label\": \"info\", \"color\": \"5\", \"icon\": \"info-circle\"}}\n        ]`,\n      },\n      template: (\n        <nv-table data-storybook-args>\n          <nv-tablecolumn name=\"name\" header=\"Name\">\n            <div slot=\"header\">\n              <strong>Name</strong>\n            </div>\n            <div slot=\"cell\">\n              <strong>__name__</strong>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"age\" header=\"Age\">\n            <div slot=\"header\">\n              <em>Age</em>\n            </div>\n            <div slot=\"cell\">\n              <span>__age__ years old</span>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"email\" header=\"Mail Address\">\n            <div slot=\"cell\">\n              <a href=\"mailto:__email__\">__email__</a>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"address\" header=\"Address\">\n            <div slot=\"cell\">\n              <span>__address.city__, __address.country__</span>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"status\" header=\"Status\">\n            <div slot=\"header\">\n              <span class=\"text-md font-bold text-low\">Status</span>\n            </div>\n            <div slot=\"cell\">\n              <nv-badge color=\"__status.color__\" lead-icon=\"__status.icon__\">\n                __status.label__\n              </nv-badge>\n            </div>\n          </nv-tablecolumn>\n\n          <nv-tablecolumn name=\"actions\">\n            <div slot=\"header\"></div>\n            <div slot=\"cell\">\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"pencil\"\n                data-bind-event=\"click:edit:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"trash\"\n                data-bind-event=\"click:delete:id\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"xs\"\n                name=\"mail\"\n                data-bind-event=\"click:sendEmail:id,email\"\n              ></nv-iconbutton>\n            </div>\n          </nv-tablecolumn>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'SlotBefore',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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: 'SlotAfter',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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: 'SlotBeforeAndAfter',\n      args: {\n        columnsConfigJson: `[\n          {\"header\":\"Name\",\"name\":\"name\"},\n          {\"header\":\"Age\",\"name\":\"age\"},\n          {\"header\":\"Email\",\"name\":\"email\"}\n        ]`,\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"]}
+{"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  stories: [\n    {\n      name: 'Default',\n      description:\n        'The NvTable behaves just like a native HTML table element, but is enhanced with Nova styles and additional functionality. Use standard table elements (thead, tbody, tfoot, tr, th, td) as children.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Age</th>\n                <th>Email</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@example.com</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@example.com</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@example.com</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'ColumnResizingWidthClasses',\n      description:\n        'Columns can be resized by default. Use width classes (like w-10) to set initial column widths. Use data-no-resize attribute to prevent specific columns from being resized. Columns without fixed widths will grow to fill available space.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th data-class=\"w-10\">Name</th>\n                <th data-class=\"w-10\">Age</th>\n                <th data-no-resize>Email (grows to fill space)</th>\n                <th data-class=\"w-10\" data-no-resize>\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>25</td>\n                <td>alice.johnson@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Bob Smith</td>\n                <td>30</td>\n                <td>bob.smith@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>35</td>\n                <td>charlie.brown@company.example.com</td>\n                <td>Edit</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'RowSelection',\n      description:\n        'Use the data-selected attribute on table rows to apply selection styling and indicate the currently selected row.',\n      template: (\n        <nv-table data-storybook-args>\n          <table>\n            <thead>\n              <tr>\n                <th>Name</th>\n                <th>Department</th>\n                <th>Status</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <td>Alice Johnson</td>\n                <td>Engineering</td>\n                <td>Active</td>\n              </tr>\n              <tr data-selected>\n                <td>Bob Smith</td>\n                <td>Design</td>\n                <td>Active</td>\n              </tr>\n              <tr>\n                <td>Charlie Brown</td>\n                <td>Product</td>\n                <td>Inactive</td>\n              </tr>\n            </tbody>\n          </table>\n        </nv-table>\n      ),\n    },\n    {\n      name: 'StickyHeader',\n      description:\n        'Use data-sticky-top on thead elements to make the header stick to the top during vertical scrolling. This is useful for long tables where you want to keep column headers visible.',\n      template: (\n        <div data-class=\"h-40 overflow-y-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead data-sticky-top>\n                <tr>\n                  <th>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                </tr>\n              </thead>\n              <tbody>\n                {Array(10)\n                  .fill(0)\n                  .map((_, index) => (\n                    <tr key={index}>\n                      <td>Employee {index + 1}</td>\n                      <td>Developer</td>\n                      <td>Engineering</td>\n                    </tr>\n                  ))}\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n    {\n      name: 'StickyColumnsHorizontalScroll',\n      description:\n        'Use data-sticky-left and data-sticky-right on th/td elements to make columns stick during horizontal scrolling. Apply the same attribute to both header and data cells. Requires an overflow-x-auto container.',\n      template: (\n        <div data-class=\"overflow-x-auto\">\n          <nv-table data-storybook-args>\n            <table>\n              <thead>\n                <tr>\n                  <th data-sticky-left>Name</th>\n                  <th>Position</th>\n                  <th>Department</th>\n                  <th>Email</th>\n                  <th>Phone</th>\n                  <th>Address</th>\n                  <th>Start Date</th>\n                  <th>Salary</th>\n                  <th>Manager</th>\n                  <th>Skills</th>\n                  <th>Notes</th>\n                  <th>Website</th>\n                  <th data-sticky-right>Actions</th>\n                </tr>\n              </thead>\n              <tbody>\n                <tr>\n                  <td data-sticky-left>John Doe</td>\n                  <td>Senior Developer</td>\n                  <td>Engineering</td>\n                  <td>john.doe@company.com</td>\n                  <td>+1-555-0123</td>\n                  <td>123 Main St, NY 10001</td>\n                  <td>2022-03-10</td>\n                  <td>$95,000</td>\n                  <td>Sarah Wilson</td>\n                  <td>React, TypeScript, Node.js</td>\n                  <td>Team lead with React expertise</td>\n                  <td>johndoe.dev</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Jane Smith</td>\n                  <td>UX Designer</td>\n                  <td>Design</td>\n                  <td>jane.smith@company.com</td>\n                  <td>+1-555-0456</td>\n                  <td>456 Oak Ave, LA 90210</td>\n                  <td>2021-09-15</td>\n                  <td>$87,000</td>\n                  <td>Tom Anderson</td>\n                  <td>Figma, Adobe CC, User Research</td>\n                  <td>Creative designer with 8 years experience</td>\n                  <td>janesmith.design</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n                <tr>\n                  <td data-sticky-left>Mike Johnson</td>\n                  <td>Product Manager</td>\n                  <td>Product</td>\n                  <td>mike.johnson@company.com</td>\n                  <td>+1-555-0789</td>\n                  <td>789 Pine St, Chicago 60601</td>\n                  <td>2020-01-08</td>\n                  <td>$110,000</td>\n                  <td>Lisa Chen</td>\n                  <td>Agile, Scrum, Product Strategy</td>\n                  <td>Experienced project manager and strategist</td>\n                  <td>mikejohnson.biz</td>\n                  <td data-sticky-right>Edit | Delete</td>\n                </tr>\n              </tbody>\n            </table>\n          </nv-table>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvTableDocs;\n"]}