@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

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

@@ -0,0 +1,719 @@
+import { Host, h, } from "@stencil/core";
+import { tabbable } from "tabbable";
+import { addEventListeners, removeEventListeners, } from "../../utils/events.utils";
+import { useSlide, useFade, parallel } from "../../animations";
+import clsx from "clsx";
+import { ButtonType } from "../../utils/constants";
+import { v4 as uuidv4 } from "uuid";
+/**
+ * @slot default - Body of the drawer.
+ * @slot trigger - Content to be placed as the trigger, will override the trigger prop.
+ * @slot header - Content to be placed as the header, will override the header prop.
+ * @slot footer - Content to be placed as the footer, will override the footer prop.
+ */
+export class NvDrawer {
+    constructor() {
+        this.eventsAttached = false;
+        this.swipeStartX = null;
+        this.swipeStartY = null;
+        this.swipeStartTime = null;
+        this.isSwiping = false;
+        this.SWIPE_THRESHOLD = 50; // Minimum distance for a swipe (px)
+        this.SWIPE_EDGE_ZONE = 20; // Edge detection zone (px)
+        this.SWIPE_VELOCITY_THRESHOLD = 0.3; // Minimum velocity (px/ms)
+        this.triggerClickEvents = [
+            ['click', this.show],
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.show();
+                    }
+                },
+            ],
+        ];
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Use this prop to toggle the visibility of the drawer. Set to true to show
+         * the drawer and false to hide it.
+         */
+        this.open = false;
+        /**
+         * If true, the drawer cannot be closed by the user.
+         */
+        this.undismissable = false;
+        /**
+         * If true, the drawer will be closed when the backdrop is clicked.
+         */
+        this.clickOutside = false;
+        /**
+         * If true, the drawer visibility is managed manually through methods or the
+         * open prop.
+         */
+        this.controlled = false;
+        /**
+         * Side from which the drawer appears.
+         */
+        this.side = 'right';
+        /**
+         * Size of the drawer. Defaults to 'md'.
+         * - 'sm': Small drawer (~320px)
+         * - 'md': Medium drawer (~400px)
+         * - 'lg': Large drawer (~600px)
+         * - 'full': Full width drawer (100vw on mobile, ~800px on desktop)
+         */
+        this.size = 'md';
+        /**
+         * Controls whether the drawer should automatically focus the first focusable
+         * element when opened. When disabled, prevents unwanted tooltip triggers on
+         * drawer open.
+         */
+        this.autofocus = false;
+        /**
+         * Enables swipe gesture to open/close the drawer on touch devices.
+         * - Swipe from the edge (left for left drawer, right for right drawer) to open
+         * - Swipe towards the edge from inside the drawer to close
+         */
+        this.swipeToOpen = false;
+        /**
+         * Checks for and sets up form ID if a form is present
+         */
+        this.checkForForm = () => {
+            if (!this.form) {
+                const formElement = this.el.querySelector('form');
+                if (formElement) {
+                    this.form = this.ensureFormId(formElement);
+                }
+            }
+        };
+        /**
+         * Handles the native drawer close event.
+         */
+        this.handleDrawerClose = () => {
+            if (this.open) {
+                this.close();
+            }
+        };
+        /**
+         * Handles the click event to close the drawer when clickOutside is true.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleDrawerClick = (event) => {
+            if (!this.clickOutside || this.undismissable)
+                return;
+            if (this.checkForOpenPopovers())
+                return;
+            if (event.target === this.backdropElement) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.checkForOpenPopovers = () => {
+            let hasOpenPopover = false;
+            this.el.querySelectorAll('nv-popover').forEach(popover => {
+                if (popover.hasAttribute('open')) {
+                    hasOpenPopover = true;
+                }
+            });
+            return hasOpenPopover;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Call this method to show the drawer, making it visible on the screen.
+     */
+    async show() {
+        this.open = true;
+        this.preventScroll();
+        /** It is recommended to use the .show() or .showModal() method to render
+         * drawers, rather than the open attribute. If a <dialog> is opened using
+         * the open attribute, it is non-modal. */
+        const { setFadeOut } = useFade(this.dialogElement);
+        setFadeOut();
+        this.dialogElement.showModal();
+        // Wait for dialog to be visible
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        // Set initial position off-screen and animate
+        const slideDirection = this.side === 'right' ? 100 : -100;
+        const { setSlideX, slideX } = useSlide(this.contentElement, {
+            duration: 300,
+        });
+        const { fadeIn } = useFade(this.dialogElement, {
+            duration: 300,
+        });
+        // Clear any previous transform first
+        if (this.contentElement) {
+            this.contentElement.style.transform = '';
+        }
+        // Set initial position off-screen
+        setSlideX(slideDirection);
+        // Wait another frame to ensure position is set
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        // Animate both slide and fade in parallel
+        const slideIn = slideX({ from: slideDirection, to: 0 });
+        await parallel(fadeIn, slideIn).start();
+    }
+    /**
+     * Call this method to hide the drawer, making it disappear from view.
+     */
+    async close() {
+        this.open = false;
+        this.allowScroll();
+        const slideDirection = this.side === 'right' ? 100 : -100;
+        const { slideX } = useSlide(this.contentElement, {
+            duration: 300,
+        });
+        const { fadeOut } = useFade(this.dialogElement, {
+            duration: 300,
+        });
+        // Animate both slide and fade out in parallel
+        const slideOut = slideX({ from: 0, to: slideDirection });
+        await parallel(slideOut, fadeOut).start();
+        // Reset transform after animation completes
+        if (this.contentElement) {
+            this.contentElement.style.transform = '';
+        }
+        this.dialogElement.close();
+    }
+    /**
+     * Sets the autofocus on the first focusable element in the drawer.
+     */
+    setAutofocus() {
+        const focusableElements = tabbable(this.dialogElement, {
+            displayCheck: 'none',
+        });
+        if (focusableElements.length > 0) {
+            // Convert to array and find element with smallest top and left position
+            let topLeftElement = focusableElements[0];
+            let topLeftRect = topLeftElement.getBoundingClientRect();
+            focusableElements.forEach(element => {
+                const rect = element.getBoundingClientRect();
+                if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {
+                    topLeftElement = element;
+                    topLeftRect = rect;
+                }
+            });
+            // Set autofocus attribute on the found element
+            topLeftElement.setAttribute('autofocus', 'true');
+        }
+    }
+    /**
+     * Attaches event listeners to the drawer.
+     */
+    attachEventListeners() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
+    /**
+     * Prevents the body from scrolling when the drawer is open.
+     * Compensates for scrollbar width to prevent layout shift.
+     */
+    preventScroll() {
+        // Calculate scrollbar width
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        // Apply overflow hidden and padding compensation
+        document.documentElement.style.overflow = 'hidden';
+        document.documentElement.style.paddingRight = `${scrollBarWidth}px`;
+    }
+    /**
+     * Allows the body to scroll when the drawer is closed.
+     * Removes the applied overflow and padding styles.
+     */
+    allowScroll() {
+        // Remove the applied styles
+        document.documentElement.style.removeProperty('overflow');
+        document.documentElement.style.removeProperty('padding-right');
+    }
+    ensureFormId(formElement) {
+        if (!formElement.id) {
+            formElement.id = `drawer-form-${uuidv4()}`;
+        }
+        return formElement.id;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    async handleDrawerOpenChange(isOpen) {
+        if (isOpen) {
+            this.show();
+            this.openChanged.emit(isOpen);
+        }
+        else {
+            this.close();
+            this.openChanged.emit(isOpen);
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * Handles the keydown event to optionally prevent the native drawer from closing when the escape key is pressed.
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    handleKeyDown(event) {
+        if (event.key !== 'Escape')
+            return;
+        if (!this.open)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const hasOpenPopover = this.checkForOpenPopovers();
+        if (!this.undismissable && !hasOpenPopover) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    /**
+     * Handles pointer down events for swipe detection.
+     * @param {PointerEvent} event - The pointer down event.
+     */
+    handlePointerDown(event) {
+        if (!this.swipeToOpen || this.controlled)
+            return;
+        const x = event.clientX;
+        const y = event.clientY;
+        const screenWidth = window.innerWidth;
+        // Check if swipe starts from edge (for opening drawer)
+        if (!this.open) {
+            const isLeftEdge = this.side === 'left' && x <= this.SWIPE_EDGE_ZONE;
+            const isRightEdge = this.side === 'right' && x >= screenWidth - this.SWIPE_EDGE_ZONE;
+            if (isLeftEdge || isRightEdge) {
+                this.swipeStartX = x;
+                this.swipeStartY = y;
+                this.swipeStartTime = Date.now();
+                this.isSwiping = true;
+                event.preventDefault();
+            }
+        }
+        else {
+            // Check if swipe starts from inside the drawer (for closing)
+            if (this.contentElement && this.dialogElement.hasAttribute('open')) {
+                const drawerRect = this.contentElement.getBoundingClientRect();
+                if (x >= drawerRect.left &&
+                    x <= drawerRect.right &&
+                    y >= drawerRect.top &&
+                    y <= drawerRect.bottom) {
+                    this.swipeStartX = x;
+                    this.swipeStartY = y;
+                    this.swipeStartTime = Date.now();
+                    this.isSwiping = true;
+                }
+            }
+        }
+    }
+    /**
+     * Handles pointer move events during swipe.
+     * @param {PointerEvent} event - The pointer move event.
+     */
+    handlePointerMove(event) {
+        if (!this.isSwiping || !this.swipeStartX || !this.swipeStartY)
+            return;
+        // Prevent scrolling during swipe
+        event.preventDefault();
+    }
+    /**
+     * Handles pointer up events to complete swipe gesture.
+     * @param {PointerEvent} event - The pointer up event.
+     */
+    handlePointerUp(event) {
+        if (!this.isSwiping ||
+            !this.swipeStartX ||
+            !this.swipeStartY ||
+            !this.swipeStartTime) {
+            this.resetSwipe();
+            return;
+        }
+        const x = event.clientX;
+        const y = event.clientY;
+        const deltaX = x - this.swipeStartX;
+        const deltaY = y - this.swipeStartY;
+        const deltaTime = Date.now() - this.swipeStartTime;
+        const distance = Math.abs(deltaX);
+        const velocity = distance / deltaTime;
+        // Only consider horizontal swipes (vertical movement should be less than horizontal)
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+            this.resetSwipe();
+            return;
+        }
+        // Check if swipe meets threshold requirements
+        if (distance >= this.SWIPE_THRESHOLD ||
+            velocity >= this.SWIPE_VELOCITY_THRESHOLD) {
+            if (!this.open) {
+                // Opening swipe: from left edge going right, or from right edge going left
+                const isOpeningSwipe = (this.side === 'left' && deltaX > 0) ||
+                    (this.side === 'right' && deltaX < 0);
+                if (isOpeningSwipe && !this.undismissable) {
+                    this.show();
+                }
+            }
+            else {
+                // Closing swipe: towards the edge
+                const isClosingSwipe = (this.side === 'left' && deltaX < 0) ||
+                    (this.side === 'right' && deltaX > 0);
+                if (isClosingSwipe && !this.undismissable) {
+                    this.close();
+                }
+            }
+        }
+        this.resetSwipe();
+    }
+    /**
+     * Resets swipe tracking state.
+     */
+    resetSwipe() {
+        this.swipeStartX = null;
+        this.swipeStartY = null;
+        this.swipeStartTime = null;
+        this.isSwiping = false;
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Lifecycle method that runs before the component loads.
+     * Initializes the trigger, header, and footer elements by finding them in the component's children.
+     * Elements are found either by their slot attribute or by their tag name (for drawer header/footer)
+     */
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+        this.headerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'header' ||
+                child.tagName.toLowerCase() === 'nv-drawerheader');
+        });
+        this.footerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'footer' ||
+                child.tagName.toLowerCase() === 'nv-drawerfooter');
+        });
+        // Initial form check
+        this.checkForForm();
+    }
+    componentWillUpdate() {
+        this.attachEventListeners();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.show();
+        }
+        // Only set autofocus if the prop is true and no element already has autofocus
+        if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
+            this.setAutofocus();
+        }
+        this.attachEventListeners();
+        // Additional form check in case form was added after initial load
+        this.checkForForm();
+        // this.setupContentBodyListeners();
+    }
+    disconnectedCallback() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = false;
+        }
+        this.allowScroll();
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const hasForm = this.form || this.el.querySelector('form');
+        const state = this.open ? 'open' : 'closed';
+        return (h(Host, { key: 'de12ca46afd89b287fc3f2b28e3f6ca79d328338' }, h("slot", { key: 'e7568c48a2a676d0f063831c769c1b4dfaee0925', name: "trigger" }), h("dialog", { key: '513b404bba6aa0b1d3831d17ef58e1c63fb6f757', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx({ [`side-${this.side}`]: true }), "data-state": state }, h("div", { key: '0b9c6fec78844a1e64b33a7bbab62ee44ac0d7bd', class: "backdrop", ref: el => (this.backdropElement = el) }, h("div", { key: 'c74cb4b717f232b4622bd9391027c7b048e786e9', class: clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (h("nv-button", { key: 'f9c03557a3ef3bb1d34e2b764d70a57cfd52dea3', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, h("nv-icon", { key: '5c0ea22963bad0bb84eb58e9ad26ebfca6b11b94', name: "x", size: "sm" }))), this.headerElement ? (h("slot", { name: "header" })) : (h("nv-drawerheader", { id: "drawer-header" })), h("div", { key: '813c7b985c6f75faa1fffc56e198957194bda87e', class: "content-body", id: "drawer-content" }, h("slot", { key: 'e70eefb8a94ae5e7eff32d5eb0446fba5c56065a' })), this.footerElement ? (h("slot", { name: "footer" })) : (h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? ButtonType.Submit : ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
+    }
+    static get is() { return "nv-drawer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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 drawer. Set to true to show\nthe drawer and false to hide it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "undismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the drawer cannot be closed by the user."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "undismissable",
+                "defaultValue": "false"
+            },
+            "clickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the drawer will be closed when the backdrop is clicked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "click-outside",
+                "defaultValue": "false"
+            },
+            "controlled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the drawer visibility is managed manually through methods or the\nopen prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "controlled",
+                "defaultValue": "false"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which the drawer appears."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "side",
+                "defaultValue": "'right'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'full'",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the drawer. Defaults to 'md'.\n- 'sm': Small drawer (~320px)\n- 'md': Medium drawer (~400px)\n- 'lg': Large drawer (~600px)\n- 'full': Full width drawer (100vw on mobile, ~800px on desktop)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the drawer. If specified, this will override the size prop.\nDefaults to the width corresponding to the size prop (400px for 'md')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "width"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the drawer should automatically focus the first focusable\nelement when opened. When disabled, prevents unwanted tooltip triggers on\ndrawer open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "swipeToOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables swipe gesture to open/close the drawer on touch devices.\n- Swipe from the edge (left for left drawer, right for right drawer) to open\n- Swipe towards the edge from inside the drawer to close"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "swipe-to-open",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChanged",
+                "name": "openChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "open"
+                        }],
+                    "text": "Emitted when the drawer is closing in order to allow for cleanup, data-capture, etc."
+                },
+                "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 drawer, making it visible on the screen.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Call this method to hide the drawer, making it disappear from view.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleDrawerOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handlePointerDown",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointermove",
+                "method": "handlePointerMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointerup",
+                "method": "handlePointerUp",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=nv-drawer.js.map