@nova-design-system/nova-webcomponents 3.15.0 → 3.17.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: '1af6f61d4b3d87e30d2311708fcd61979170aa96' }, h("slot", { key: '113813292e083fa4b188f3e5750549a08fc8c3aa', name: "trigger" }), h("div", { key: '7687d6ae12b24ed575843f0d171d911eb0994675', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '162f1f50be23da7fadac8f76507e6d8d058fb58b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '57ecf69ef395a045cb35e7db9f380027dfceff6e', 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-split/nv-split.docs.js

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvSplitDocs = {
+    component: 'nv-split',
+    subcomponents: ['nv-alert'],
+    badge: 'beta',
+    stories: [
+        {
+            name: 'Default',
+            args: {
+                direction: 'horizontal',
+                sizes: [50, 50],
+            },
+            template: (h("nv-split", { class: "h-96 w-full", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-500" }, "Left pane"), h("div", { slot: "pane", class: "bg-orange-500" }, "Right pane"))),
+        },
+        {
+            name: nameof(x => x.direction),
+            args: { direction: 'vertical', sizes: [70, 30] },
+            template: (h("nv-split", { class: "h-screen w-full", "data-storybook-args": true }, h("div", { slot: "pane" }, "Top pane"), h("div", { slot: "pane" }, "Bottom pane"))),
+        },
+        {
+            name: nameof(x => x.gutterSize),
+            args: { gutterSize: 8, sizes: [50, 50] },
+            template: (h("nv-split", { class: "h-screen w-full", "data-storybook-args": true }, h("div", { slot: "pane" }, "Pane A"), h("div", { slot: "pane" }, "Pane B"))),
+        },
+        {
+            name: 'complex',
+            description: 'Note: Only the parent nv-split responds to Storybook controls. Nested nv-split components have hardcoded values.',
+            args: { gutterSize: 8, sizes: [50, 50], direction: 'vertical' },
+            template: (h("div", { class: "flex flex-col gap-4 h-screen w-full" }, h("nv-alert", { feedback: "warning", class: "m-4" }, "Only the parent nv-split responds to Storybook controls. The nested nv-split has hardcoded values."), h("nv-split", { class: "flex-1", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-turquoise-500" }, "Top"), h("div", { slot: "pane", class: "bg-orange-500" }, h("nv-split", { direction: "horizontal", sizes: [20, 80] }, h("div", { slot: "pane", class: "bg-red-500" }, "Left"), h("div", { slot: "pane", class: "bg-yellow-500" }, "center"), h("div", { slot: "pane", class: "bg-green-500" }, "Right")))))),
+        },
+        {
+            name: 'NestedSplit',
+            description: 'Note: Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values.',
+            args: { gutterSize: 8, sizes: [10, 90], direction: 'horizontal' },
+            template: (h("div", { class: "flex flex-col gap-4 h-screen w-full" }, h("nv-alert", { feedback: "warning", class: "m-4" }, "Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values."), h("nv-split", { class: "flex-1", "data-storybook-args": true }, h("div", { slot: "pane", class: "bg-purple-300" }, "Sidebar"), h("div", { slot: "pane", class: "bg-gray-200" }, h("nv-split", { direction: "vertical", sizes: [10, 90], class: "h-full w-full" }, h("div", { slot: "pane", class: "bg-pink-300" }, "Top Content"), h("div", { slot: "pane", class: "bg-cyan-300" }, h("nv-split", { direction: "horizontal", sizes: [10, 90], class: "h-full w-full" }, h("div", { slot: "pane", class: "bg-lime-300" }, "Bottom Left"), h("div", { slot: "pane", class: "bg-orange-300" }, "Bottom Right")))))))),
+        },
+    ],
+};
+export default NvSplitDocs;
+//# sourceMappingURL=nv-split.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-split.docs.js","sourceRoot":"","sources":["../../../src/components/nv-split/nv-split.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 NvSplitDocs: NovaDocs<Components.NvSplit> = {\n  component: 'nv-split',\n  subcomponents: ['nv-alert'],\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        direction: 'horizontal',\n        sizes: [50, 50],\n      },\n      template: (\n        <nv-split class=\"h-96 w-full\" data-storybook-args>\n          <div slot=\"pane\" class=\"bg-turquoise-500\">\n            Left pane\n          </div>\n          <div slot=\"pane\" class=\"bg-orange-500\">\n            Right pane\n          </div>\n        </nv-split>\n      ),\n    },\n    {\n      name: nameof<Components.NvSplit>(x => x.direction),\n      args: { direction: 'vertical', sizes: [70, 30] },\n      template: (\n        <nv-split class=\"h-screen w-full\" data-storybook-args>\n          <div slot=\"pane\">Top pane</div>\n          <div slot=\"pane\">Bottom pane</div>\n        </nv-split>\n      ),\n    },\n    {\n      name: nameof<Components.NvSplit>(x => x.gutterSize),\n      args: { gutterSize: 8, sizes: [50, 50] },\n      template: (\n        <nv-split class=\"h-screen w-full\" data-storybook-args>\n          <div slot=\"pane\">Pane A</div>\n          <div slot=\"pane\">Pane B</div>\n        </nv-split>\n      ),\n    },\n    {\n      name: 'complex',\n      description:\n        'Note: Only the parent nv-split responds to Storybook controls. Nested nv-split components have hardcoded values.',\n      args: { gutterSize: 8, sizes: [50, 50], direction: 'vertical' },\n      template: (\n        <div class=\"flex flex-col gap-4 h-screen w-full\">\n          <nv-alert feedback=\"warning\" class=\"m-4\">\n            Only the parent nv-split responds to Storybook controls. The nested\n            nv-split has hardcoded values.\n          </nv-alert>\n          <nv-split class=\"flex-1\" data-storybook-args>\n            <div slot=\"pane\" class=\"bg-turquoise-500\">\n              Top\n            </div>\n            <div slot=\"pane\" class=\"bg-orange-500\">\n              <nv-split direction=\"horizontal\" sizes={[20, 80]}>\n                <div slot=\"pane\" class=\"bg-red-500\">\n                  Left\n                </div>\n                <div slot=\"pane\" class=\"bg-yellow-500\">\n                  center\n                </div>\n                <div slot=\"pane\" class=\"bg-green-500\">\n                  Right\n                </div>\n              </nv-split>\n            </div>\n          </nv-split>\n        </div>\n      ),\n    },\n    {\n      name: 'NestedSplit',\n      description:\n        'Note: Only the root nv-split responds to Storybook controls. All nested nv-split components have hardcoded values.',\n      args: { gutterSize: 8, sizes: [10, 90], direction: 'horizontal' },\n      template: (\n        <div class=\"flex flex-col gap-4 h-screen w-full\">\n          <nv-alert feedback=\"warning\" class=\"m-4\">\n            Only the root nv-split responds to Storybook controls. All nested\n            nv-split components have hardcoded values.\n          </nv-alert>\n          <nv-split class=\"flex-1\" data-storybook-args>\n            <div slot=\"pane\" class=\"bg-purple-300\">\n              Sidebar\n            </div>\n            <div slot=\"pane\" class=\"bg-gray-200\">\n              <nv-split\n                direction=\"vertical\"\n                sizes={[10, 90]}\n                class=\"h-full w-full\"\n              >\n                <div slot=\"pane\" class=\"bg-pink-300\">\n                  Top Content\n                </div>\n                <div slot=\"pane\" class=\"bg-cyan-300\">\n                  <nv-split\n                    direction=\"horizontal\"\n                    sizes={[10, 90]}\n                    class=\"h-full w-full\"\n                  >\n                    <div slot=\"pane\" class=\"bg-lime-300\">\n                      Bottom Left\n                    </div>\n                    <div slot=\"pane\" class=\"bg-orange-300\">\n                      Bottom Right\n                    </div>\n                  </nv-split>\n                </div>\n              </nv-split>\n            </div>\n          </nv-split>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvSplitDocs;\n"]}