@nova-design-system/nova-webcomponents 3.0.0-beta.17

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

@@ -0,0 +1,587 @@
+import { Host, h, } from "@stencil/core";
+import { computePosition, flip, shift, offset, arrow, } from "@floating-ui/dom";
+import { createStore } from "@stencil/store";
+import { useGrow, useFade } from "../../animations";
+import { addEventListeners, removeEventListeners, } from "../../utils/events.utils";
+const { state } = createStore({
+    groups: new Map(),
+});
+/**
+ * @slot trigger - Content to be placed as the trigger.
+ * @slot content - Content to be placed within the popover.
+ */
+export class NvPopover {
+    constructor() {
+        this.handleClickOutside = (event) => {
+            // This popover should close when the user clicks outside of it.
+            if (this.el.contains(event.target))
+                return;
+            if (this.triggerElement.contains(event.target))
+                return;
+            this.hide();
+        };
+        this.clickEvents = [
+            ['click', this.toggle],
+            ['touchstart', this.toggle],
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.toggle();
+                    }
+                },
+            ],
+        ];
+        this.hoverEvents = [
+            [
+                'focus',
+                () => {
+                    clearTimeout(this.hideTimeout);
+                    this.showTimeout = setTimeout(() => this.show(), this.enterDelay);
+                },
+            ],
+            [
+                'blur',
+                () => {
+                    clearTimeout(this.showTimeout);
+                    this.hideTimeout = setTimeout(() => this.hide(), 50);
+                },
+            ],
+            [
+                'mouseenter',
+                () => {
+                    clearTimeout(this.hideTimeout);
+                    this.showTimeout = setTimeout(() => this.show(), this.enterDelay);
+                },
+            ],
+            [
+                'mouseleave',
+                () => {
+                    clearTimeout(this.showTimeout);
+                    this.hideTimeout = setTimeout(() => this.hide(), 100);
+                },
+            ],
+        ];
+        this.closeEvents = [
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Escape') {
+                        this.hide();
+                    }
+                },
+            ],
+        ];
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region WATCHERS
+        this.isAnimating = false;
+        this.triggerElement = undefined;
+        this.open = false;
+        this.triggerMode = 'click';
+        this.placement = 'bottom';
+        this.groupName = undefined;
+        this.offset = 12;
+        this.hasArrow = false;
+        this.disableFlip = false;
+        this.shiftPadding = 16;
+        this.enterDelay = 0;
+        this.nested = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Call this method to show the popover, making it visible on the screen.
+     */
+    async show() {
+        this.open = true;
+    }
+    /**
+     * Use this method to hide the popover, making it disappear from view.
+     */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * Call this method to toggle between showing and hiding the popover, based on
+     * its current state.
+     */
+    async toggle() {
+        this.open = !this.open;
+    }
+    /**
+     * Calculates the position of the popover relative to the trigger.
+     * @docs https://floating-ui.com/docs/computePosition
+     */
+    positionPopover() {
+        if (!this.triggerElement)
+            return;
+        computePosition(this.triggerElement, this.popoverElement, {
+            placement: this.placement,
+            middleware: [
+                offset(this.offset),
+                !this.disableFlip &&
+                    flip({
+                        fallbackStrategy: 'bestFit',
+                        crossAxis: true,
+                        fallbackPlacements: ['bottom'],
+                    }),
+                shift({ padding: this.shiftPadding }),
+                this.hasArrow && arrow({ element: this.arrowElement }),
+            ],
+        }).then(({ x, y, placement, middlewareData }) => {
+            Object.assign(this.popoverElement.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            if (this.hasArrow) {
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+                const transform = {
+                    top: 'rotate(225deg)',
+                    right: 'rotate(315deg)',
+                    bottom: 'rotate(45deg)',
+                    left: 'rotate(135deg)',
+                }[placement.split('-')[0]];
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                Object.assign(this.arrowElement.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    right: '',
+                    bottom: '',
+                    transform,
+                    [staticSide]: '-4px',
+                });
+            }
+        });
+    }
+    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.hide();
+    }
+    handleDocumentClick(event) {
+        if (this.triggerMode === 'controlled')
+            return;
+        this.handleClickOutside(event);
+    }
+    handleDocumentTouch(event) {
+        if (this.triggerMode === 'controlled')
+            return;
+        this.handleClickOutside(event);
+    }
+    async handleOpenChange(open) {
+        // Prevent multiple animations from running at the same time.
+        while (this.isAnimating) {
+            await new Promise(resolve => setTimeout(resolve, 50));
+        }
+        this.isAnimating = true;
+        const group = state.groups.get(this.groupName);
+        const isOtherMemberOpen = group && group.openedBy !== this.el;
+        const isThisMemberOpen = group && group.openedBy === this.el;
+        if (open)
+            this.popoverElement.style.removeProperty('display');
+        if (isThisMemberOpen && !open)
+            state.groups.delete(this.groupName);
+        if (this.groupName && open)
+            state.groups.set(this.groupName, { openedBy: this.el });
+        const { growIn } = useGrow(this.popoverElement, {
+            duration: isOtherMemberOpen ? 0 : 100,
+            amount: 0.85,
+        });
+        const { fadeOut } = useFade(this.popoverElement, {
+            duration: isOtherMemberOpen ? 0 : 100,
+        });
+        if (open === true) {
+            this.popoverElement.removeAttribute('hidden');
+            this.positionPopover();
+            await growIn();
+        }
+        if (open === false) {
+            await fadeOut();
+            this.popoverElement.setAttribute('hidden', '');
+        }
+        this.isAnimating = false;
+        this.openChanged.emit(open);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        if (!this.triggerElement)
+            this.triggerElement = Array.from(this.el.children).find(child => child.getAttribute('slot') === 'trigger');
+    }
+    componentDidLoad() {
+        // Initial inline style setup
+        if (!this.open) {
+            const { setGrowOut } = useGrow(this.popoverElement);
+            setGrowOut();
+        }
+        else {
+            const { setFadeIn } = useFade(this.popoverElement);
+            setFadeIn();
+            this.popoverElement.removeAttribute('hidden');
+        }
+        this.positionPopover();
+        addEventListeners(this.closeEvents, document, this);
+        if (this.triggerMode === 'click')
+            addEventListeners(this.clickEvents, this.triggerElement, this);
+        if (this.triggerMode === 'hover')
+            addEventListeners(this.hoverEvents, this.triggerElement, this);
+    }
+    disconnectedCallback() {
+        removeEventListeners(this.closeEvents, document, this);
+        if (this.triggerMode === 'click')
+            removeEventListeners(this.clickEvents, this.triggerElement, this);
+        if (this.triggerMode === 'hover')
+            removeEventListeners(this.hoverEvents, this.triggerElement, this);
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '8d32b4cb618de8d8c88e813b5cb446eb4e667f27' }, h("slot", { key: 'bb4688a7ed334a32c1033c340d765e5abc8aef4a', name: "trigger" }), h("div", { key: '2e3847dd205be87742f3794f806ed1d903d88f14', "data-scope": "popover", hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '8259476267d3c14043c649b95d875452909e1e08', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'e6d68d89876b7353c0abd349b7c3bc1bfe790a76', name: "content" }))));
+    }
+    static get is() { return "nv-popover"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "triggerElement": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Element",
+                    "resolved": "Element",
+                    "references": {
+                        "Element": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::Element"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Accepts a reference to the DOM element acting as the popover trigger. This\nshould be used when the slot for the trigger is not defined."
+                        }],
+                    "text": ""
+                }
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop to toggle the visibility of the popover. Set to true to show\nthe popover and false to hide it."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "triggerMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hover' | 'click' | 'controlled'",
+                    "resolved": "\"click\" | \"controlled\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "attribute": "trigger-mode",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines where the popover appears relative to the trigger."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "groupName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to group popovers together so that opening one will not animate\nthe closing of another. This is helpful when popovers are placed close\ntogether, preventing animation overlap."
+                },
+                "attribute": "group-name",
+                "reflect": false
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adjust the gap between the popover and its trigger element by setting how\nmany pixels they should be apart."
+                },
+                "attribute": "offset",
+                "reflect": false,
+                "defaultValue": "12"
+            },
+            "hasArrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to decide if the popover should include a small arrow pointing to\nthe trigger element, making the connection between them more clear."
+                },
+                "attribute": "has-arrow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableFlip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the automatic flipping of the popover when the trigger element is\nout of the viewport. The popover will flip automatically by default."
+                },
+                "attribute": "disable-flip",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "shiftPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets how many pixels the popover should stay from the edge of the viewport."
+                },
+                "attribute": "shift-padding",
+                "reflect": false,
+                "defaultValue": "16"
+            },
+            "enterDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to set a delay before the popover appears on hover. If the mouse\nleaves before this time, the popover won\u2019t show. This only works when the\ntrigger mode is set to `hover`."
+                },
+                "attribute": "enter-delay",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "nested": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this to set the popover to be nested inside another popover. This will\nprevent the parent popover from closing when the child popover is opened."
+                },
+                "attribute": "nested",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChanged",
+                "name": "openChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "open"
+                        }],
+                    "text": "Emitted when the popover is toggled."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Call this method to show the popover, making it visible on the screen.",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Use this method to hide the popover, making it disappear from view.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Call this method to toggle between showing and hiding the popover, based on\nits current state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "openChanged",
+                "method": "handleOpenChanged",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "handleDocumentTouch",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=nv-popover.js.map

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

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

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

@@ -0,0 +1,7 @@
+nv-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(var(--spacing-4) * -1);
+  margin-left: calc(var(--spacing-4) * -1);
+  row-gap: var(--spacing-4);
+}

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

@@ -0,0 +1,13 @@
+import { h } from "@stencil/core";
+const NvRowDocs = {
+    component: 'nv-row',
+    subcomponents: ['nv-col'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-row", { "data-storybook-args": true }, h("nv-col", { size: 4 }, "Col-4"), h("nv-col", { size: 8 }, "Col-8"))),
+        },
+    ],
+};
+export default NvRowDocs;
+//# sourceMappingURL=nv-row.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-row.docs.js","sourceRoot":"","sources":["../../../src/components/nv-row/nv-row.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,SAAS,GAA+B;IAC5C,SAAS,EAAE,QAAQ;IACnB,aAAa,EAAE,CAAC,QAAQ,CAAC;IACzB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,CACR;gBACE,cAAQ,IAAI,EAAE,CAAC,YAAgB;gBAC/B,cAAQ,IAAI,EAAE,CAAC,YAAgB,CACxB,CACV;SACF;KACF;CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvRowDocs: NovaDocs<Components.NvRow> = {\n  component: 'nv-row',\n  subcomponents: ['nv-col'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-row data-storybook-args>\n          <nv-col size={4}>Col-4</nv-col>\n          <nv-col size={8}>Col-8</nv-col>\n        </nv-row>\n      ),\n    },\n  ],\n};\n\nexport default NvRowDocs;\n"]}