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

package/dist/cjs/nv-drawer.cjs.entry.js

@@ -0,0 +1,443 @@
+'use strict';
+
+var index = require('./index-B1na8x6M.js');
+var index_esm = require('./index.esm-CG1TVKfu.js');
+var events_utils = require('./events.utils-BE6R5q9C.js');
+var fade_animation = require('./fade.animation-BQSqXXOJ.js');
+require('./style-value-types.es-B1vLqX9m.js');
+var slide_animation = require('./slide.animation-Cb3tpLQv.js');
+var timeline_animation = require('./timeline.animation-KteJaZPb.js');
+var clsx = require('./clsx-BtxeOLZW.js');
+var constants = require('./constants-BugGJYqL.js');
+var v4 = require('./v4-C1vaJ4yP.js');
+
+const nvDrawerCss = "nv-drawer dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px);border:none}nv-drawer dialog[data-state=closed]{pointer-events:none}nv-drawer dialog[data-state=open]{pointer-events:auto}nv-drawer dialog.side-right .backdrop{justify-content:flex-end}nv-drawer dialog.side-right .content{box-shadow:-4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer dialog.side-left .backdrop{justify-content:flex-start}nv-drawer dialog.side-left .content{box-shadow:4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer .backdrop{display:flex;height:100%;width:100%;padding:0}nv-drawer .backdrop .content{background:var(--color-level-00-background);width:var(--drawer-width, min(90vw, 400px));height:100%;display:flex;flex-direction:column;align-items:flex-start;position:relative}nv-drawer .backdrop .content[data-side=left]{border-top-right-radius:var(--drawer-radius-top-right, 0);border-bottom-right-radius:var(--drawer-radius-bottom-right, 0)}nv-drawer .backdrop .content[data-side=right]{border-top-left-radius:var(--drawer-radius-top-left, 0);border-bottom-left-radius:var(--drawer-radius-bottom-left, 0)}nv-drawer .backdrop .content.size-sm{width:clamp(var(--drawer-size-sm-min-width), var(--drawer-size-sm-width), var(--drawer-size-sm-max-width))}nv-drawer .backdrop .content.size-md{width:clamp(var(--drawer-size-md-min-width), var(--drawer-size-md-width), var(--drawer-size-md-max-width))}nv-drawer .backdrop .content.size-lg{width:clamp(var(--drawer-size-lg-min-width), var(--drawer-size-lg-width), var(--drawer-size-lg-max-width))}nv-drawer .backdrop .content.size-full{width:var(--drawer-size-full-width)}nv-drawer .backdrop .content nv-button.close-button{position:absolute;top:var(--drawer-dismissible-position-top, var(--dialog-dismissible-position-top));right:var(--drawer-dismissible-position-right, var(--dialog-dismissible-position-right));z-index:1;display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:var(--drawer-gap-y, 10px)}nv-drawer .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-drawer .backdrop .content .content-body{box-sizing:border-box;padding:var(--drawer-padding-y, var(--dialog-body-padding-y)) var(--drawer-padding-x, var(--dialog-body-padding-x));scrollbar-gutter:stable both-edges;flex:1;overflow-y:auto;width:100%;border-bottom:1px solid var(--color-content-low-border);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text)}nv-drawer .backdrop .content slot[name=footer]::slotted(*),nv-drawer .backdrop .content nv-drawerfooter{padding-top:var(--spacing-4)}";
+
+const NvDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        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 } = fade_animation.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 } = slide_animation.useSlide(this.contentElement, {
+            duration: 300,
+        });
+        const { fadeIn } = fade_animation.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 timeline_animation.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 } = slide_animation.useSlide(this.contentElement, {
+            duration: 300,
+        });
+        const { fadeOut } = fade_animation.useFade(this.dialogElement, {
+            duration: 300,
+        });
+        // Animate both slide and fade out in parallel
+        const slideOut = slideX({ from: 0, to: slideDirection });
+        await timeline_animation.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 = index_esm.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) {
+            events_utils.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-${v4.v4()}`;
+        }
+        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) {
+            events_utils.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 (index.h(index.Host, { key: 'de12ca46afd89b287fc3f2b28e3f6ca79d328338' }, index.h("slot", { key: 'e7568c48a2a676d0f063831c769c1b4dfaee0925', name: "trigger" }), index.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.clsx({ [`side-${this.side}`]: true }), "data-state": state }, index.h("div", { key: '0b9c6fec78844a1e64b33a7bbab62ee44ac0d7bd', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: 'c74cb4b717f232b4622bd9391027c7b048e786e9', class: clsx.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 && (index.h("nv-button", { key: 'f9c03557a3ef3bb1d34e2b764d70a57cfd52dea3', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, index.h("nv-icon", { key: '5c0ea22963bad0bb84eb58e9ad26ebfca6b11b94', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-drawerheader", { id: "drawer-header" })), index.h("div", { key: '813c7b985c6f75faa1fffc56e198957194bda87e', class: "content-body", id: "drawer-content" }, index.h("slot", { key: 'e70eefb8a94ae5e7eff32d5eb0446fba5c56065a' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? constants.ButtonType.Submit : constants.ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleDrawerOpenChange"]
+    }; }
+};
+NvDrawer.style = nvDrawerCss;
+
+exports.nv_drawer = NvDrawer;
+//# sourceMappingURL=nv-drawer.entry.cjs.js.map

package/dist/cjs/nv-drawer.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-drawer.entry.cjs.js","sources":["src/components/nv-drawer/nv-drawer.scss?tag=nv-drawer","src/components/nv-drawer/nv-drawer.tsx"],"sourcesContent":["@import '../../styles/scrollbar';\n\nnv-drawer {\n  dialog {\n    width: 100vw;\n    height: 100svh;\n    margin: 0;\n    max-height: unset;\n    max-width: unset;\n    padding: 0;\n    background: color-mix(in srgb, var(--components-overlay-background) 70%, transparent);\n    backdrop-filter: blur(4px);\n    border: none;\n\n    &[data-state='closed'] {\n      pointer-events: none;\n    }\n\n    &[data-state='open'] {\n      pointer-events: auto;\n    }\n\n    &.side-right {\n      .backdrop {\n        justify-content: flex-end;\n      }\n\n      .content {\n        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n      }\n    }\n\n    &.side-left {\n      .backdrop {\n        justify-content: flex-start;\n      }\n\n      .content {\n        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);\n      }\n    }\n  }\n\n  .backdrop {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    padding: 0;\n\n    .content {\n      background: var(--color-level-00-background);\n      width: var(--drawer-width, min(90vw, 400px));\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      position: relative;\n\n      // Border radius based on side\n      &[data-side='left'] {\n        border-top-right-radius: var(--drawer-radius-top-right, 0);\n        border-bottom-right-radius: var(--drawer-radius-bottom-right, 0);\n      }\n\n      &[data-side='right'] {\n        border-top-left-radius: var(--drawer-radius-top-left, 0);\n        border-bottom-left-radius: var(--drawer-radius-bottom-left, 0);\n      }\n\n      // Size variants using clamp() for responsive sizing\n      &.size-sm {\n        width: clamp(var(--drawer-size-sm-min-width), var(--drawer-size-sm-width), var(--drawer-size-sm-max-width));\n      }\n\n      &.size-md {\n        width: clamp(var(--drawer-size-md-min-width), var(--drawer-size-md-width), var(--drawer-size-md-max-width));\n      }\n\n      &.size-lg {\n        width: clamp(var(--drawer-size-lg-min-width), var(--drawer-size-lg-width), var(--drawer-size-lg-max-width));\n      }\n\n      &.size-full {\n        width: var(--drawer-size-full-width);\n      }\n\n      nv-button.close-button {\n        position: absolute;\n        top: var(--drawer-dismissible-position-top, var(--dialog-dismissible-position-top));\n        right: var(--drawer-dismissible-position-right, var(--dialog-dismissible-position-right));\n        z-index: 1;\n        display: flex;\n        padding: var(--button-sm-icon-button-padding);\n        justify-content: flex-end;\n        align-items: flex-start;\n        gap: var(--drawer-gap-y, 10px);\n      }\n\n      .content-body {\n        @include scrollbar();\n\n        box-sizing: border-box;\n        padding: var(--drawer-padding-y, var(--dialog-body-padding-y)) var(--drawer-padding-x, var(--dialog-body-padding-x));\n        scrollbar-gutter: stable both-edges;\n        flex: 1;\n        overflow-y: auto;\n        width: 100%;\n        border-bottom: 1px solid var(--color-content-low-border);\n\n        /* text/md/regular */\n        font-family: var(--font-family-default), var(--font-family-fallback),\n          sans-serif;\n        font-size: var(--font-size-md);\n        font-style: normal;\n        font-weight: var(--font-weight-low-emphasis);\n        line-height: var(--line-height-base); /* 150% */\n\n        color: var(--color-content-medium-text);\n      }\n\n      // Adjust footer padding-top\n      slot[name=\"footer\"]::slotted(*),\n      nv-drawerfooter {\n        padding-top: var(--spacing-4);\n      }\n    }\n  }\n}","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n  Listen,\n} from '@stencil/core';\nimport { tabbable } from 'tabbable';\nimport {\n  addEventListeners,\n  removeEventListeners,\n  type EventsAndListeners,\n} from '../../utils/events.utils';\nimport { useSlide, useFade, parallel } from '../../animations';\nimport clsx from 'clsx';\nimport { ButtonType } from '../../utils/constants';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot default - Body of the drawer.\n * @slot trigger - Content to be placed as the trigger, will override the trigger prop.\n * @slot header - Content to be placed as the header, will override the header prop.\n * @slot footer - Content to be placed as the footer, will override the footer prop.\n */\n@Component({\n  tag: 'nv-drawer',\n  styleUrl: 'nv-drawer.scss',\n  shadow: false,\n})\nexport class NvDrawer {\n  @Element() el: HTMLNvDrawerElement;\n  private dialogElement!: HTMLDialogElement;\n  private backdropElement!: HTMLDivElement;\n  private contentElement!: HTMLDivElement;\n  private eventsAttached = false;\n  private form: string;\n  private swipeStartX: number | null = null;\n  private swipeStartY: number | null = null;\n  private swipeStartTime: number | null = null;\n  private isSwiping = false;\n  private SWIPE_THRESHOLD = 50; // Minimum distance for a swipe (px)\n  private SWIPE_EDGE_ZONE = 20; // Edge detection zone (px)\n  private SWIPE_VELOCITY_THRESHOLD = 0.3; // Minimum velocity (px/ms)\n  private triggerElement?: Element;\n  private headerElement?: Element;\n  private footerElement?: Element;\n\n  private triggerClickEvents: EventsAndListeners = [\n    ['click', this.show],\n    [\n      'keydown',\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          this.show();\n        }\n      },\n    ],\n  ];\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Use this prop to toggle the visibility of the drawer. Set to true to show\n   * the drawer and false to hide it.\n   */\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = false;\n\n  /**\n   * If true, the drawer cannot be closed by the user.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * If true, the drawer will be closed when the backdrop is clicked.\n   */\n  @Prop({ reflect: true })\n  readonly clickOutside: boolean = false;\n\n  /**\n   * If true, the drawer visibility is managed manually through methods or the\n   * open prop.\n   */\n  @Prop({ reflect: true })\n  readonly controlled: boolean = false;\n\n  /**\n   * Side from which the drawer appears.\n   */\n  @Prop({ reflect: true })\n  readonly side: 'left' | 'right' = 'right';\n\n  /**\n   * 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)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'sm' | 'md' | 'lg' | 'full' = 'md';\n\n  /**\n   * Width of the drawer. If specified, this will override the size prop.\n   * Defaults to the width corresponding to the size prop (400px for 'md').\n   */\n  @Prop({ reflect: true })\n  readonly width?: string;\n\n  /**\n   * Controls whether the drawer should automatically focus the first focusable\n   * element when opened. When disabled, prevents unwanted tooltip triggers on\n   * drawer open.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * 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\n   */\n  @Prop({ reflect: true })\n  readonly swipeToOpen: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Call this method to show the drawer, making it visible on the screen.\n   */\n  @Method()\n  public async show() {\n    this.open = true;\n    this.preventScroll();\n    /** It is recommended to use the .show() or .showModal() method to render\n     * drawers, rather than the open attribute. If a <dialog> is opened using\n     * the open attribute, it is non-modal. */\n    const { setFadeOut } = useFade(this.dialogElement);\n    setFadeOut();\n    this.dialogElement.showModal();\n\n    // Wait for dialog to be visible\n    await new Promise(resolve => requestAnimationFrame(resolve));\n\n    // Set initial position off-screen and animate\n    const slideDirection = this.side === 'right' ? 100 : -100;\n    const { setSlideX, slideX } = useSlide(this.contentElement, {\n      duration: 300,\n    });\n    const { fadeIn } = useFade(this.dialogElement, {\n      duration: 300,\n    });\n\n    // Clear any previous transform first\n    if (this.contentElement) {\n      this.contentElement.style.transform = '';\n    }\n\n    // Set initial position off-screen\n    setSlideX(slideDirection);\n\n    // Wait another frame to ensure position is set\n    await new Promise(resolve => requestAnimationFrame(resolve));\n\n    // Animate both slide and fade in parallel\n    const slideIn = slideX({ from: slideDirection, to: 0 });\n    await parallel(fadeIn, slideIn).start();\n  }\n\n  /**\n   * Call this method to hide the drawer, making it disappear from view.\n   */\n  @Method()\n  public async close() {\n    this.open = false;\n    this.allowScroll();\n    const slideDirection = this.side === 'right' ? 100 : -100;\n    const { slideX } = useSlide(this.contentElement, {\n      duration: 300,\n    });\n    const { fadeOut } = useFade(this.dialogElement, {\n      duration: 300,\n    });\n\n    // Animate both slide and fade out in parallel\n    const slideOut = slideX({ from: 0, to: slideDirection });\n    await parallel(slideOut, fadeOut).start();\n\n    // Reset transform after animation completes\n    if (this.contentElement) {\n      this.contentElement.style.transform = '';\n    }\n\n    this.dialogElement.close();\n  }\n\n  /**\n   * Sets the autofocus on the first focusable element in the drawer.\n   */\n  private setAutofocus() {\n    const focusableElements = tabbable(this.dialogElement, {\n      displayCheck: 'none',\n    });\n\n    if (focusableElements.length > 0) {\n      // Convert to array and find element with smallest top and left position\n      let topLeftElement = focusableElements[0];\n      let topLeftRect = topLeftElement.getBoundingClientRect();\n\n      focusableElements.forEach(element => {\n        const rect = element.getBoundingClientRect();\n        if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {\n          topLeftElement = element;\n          topLeftRect = rect;\n        }\n      });\n\n      // Set autofocus attribute on the found element\n      topLeftElement.setAttribute('autofocus', 'true');\n    }\n  }\n\n  /**\n   * Attaches event listeners to the drawer.\n   */\n  private attachEventListeners() {\n    if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n      addEventListeners(this.triggerClickEvents, this.triggerElement, this);\n      this.eventsAttached = true;\n    }\n  }\n\n  /**\n   * Prevents the body from scrolling when the drawer is open.\n   * Compensates for scrollbar width to prevent layout shift.\n   */\n  private preventScroll() {\n    // Calculate scrollbar width\n    const scrollBarWidth =\n      window.innerWidth - document.documentElement.clientWidth;\n\n    // Apply overflow hidden and padding compensation\n    document.documentElement.style.overflow = 'hidden';\n    document.documentElement.style.paddingRight = `${scrollBarWidth}px`;\n  }\n\n  /**\n   * Allows the body to scroll when the drawer is closed.\n   * Removes the applied overflow and padding styles.\n   */\n  private allowScroll() {\n    // Remove the applied styles\n    document.documentElement.style.removeProperty('overflow');\n    document.documentElement.style.removeProperty('padding-right');\n  }\n\n  private ensureFormId(formElement: HTMLFormElement): string {\n    if (!formElement.id) {\n      formElement.id = `drawer-form-${uuidv4()}`;\n    }\n    return formElement.id;\n  }\n\n  /**\n   * Checks for and sets up form ID if a form is present\n   */\n  private checkForForm = () => {\n    if (!this.form) {\n      const formElement = this.el.querySelector('form') as HTMLFormElement;\n      if (formElement) {\n        this.form = this.ensureFormId(formElement);\n      }\n    }\n  };\n\n  /**\n   * Handles the native drawer close event.\n   */\n  private handleDrawerClose = () => {\n    if (this.open) {\n      this.close();\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the drawer is closing in order to allow for cleanup, data-capture, etc.\n   * @bind open\n   */\n  @Event({ bubbles: false })\n  openChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('open')\n  async handleDrawerOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.show();\n      this.openChanged.emit(isOpen);\n    } else {\n      this.close();\n      this.openChanged.emit(isOpen);\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LISTENERS\n\n  /**\n   * Handles the keydown event to optionally prevent the native drawer from closing when the escape key is pressed.\n   * @param {KeyboardEvent} event - The keydown event.\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'Escape') return;\n    if (!this.open) return;\n\n    event.preventDefault();\n    event.stopPropagation();\n    const hasOpenPopover = this.checkForOpenPopovers();\n\n    if (!this.undismissable && !hasOpenPopover) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n    }\n  }\n\n  /**\n   * Handles the click event to close the drawer when clickOutside is true.\n   * @param {MouseEvent} event - The click event.\n   */\n  private handleDrawerClick = (event: MouseEvent) => {\n    if (!this.clickOutside || this.undismissable) return;\n    if (this.checkForOpenPopovers()) return;\n\n    if (event.target === this.backdropElement) {\n      this.close();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  private checkForOpenPopovers = (): boolean => {\n    let hasOpenPopover = false;\n\n    this.el.querySelectorAll('nv-popover').forEach(popover => {\n      if (popover.hasAttribute('open')) {\n        hasOpenPopover = true;\n      }\n    });\n\n    return hasOpenPopover;\n  };\n\n  /**\n   * Handles pointer down events for swipe detection.\n   * @param {PointerEvent} event - The pointer down event.\n   */\n  @Listen('pointerdown', { target: 'window' })\n  handlePointerDown(event: PointerEvent) {\n    if (!this.swipeToOpen || this.controlled) return;\n\n    const x = event.clientX;\n    const y = event.clientY;\n    const screenWidth = window.innerWidth;\n\n    // Check if swipe starts from edge (for opening drawer)\n    if (!this.open) {\n      const isLeftEdge = this.side === 'left' && x <= this.SWIPE_EDGE_ZONE;\n      const isRightEdge =\n        this.side === 'right' && x >= screenWidth - this.SWIPE_EDGE_ZONE;\n\n      if (isLeftEdge || isRightEdge) {\n        this.swipeStartX = x;\n        this.swipeStartY = y;\n        this.swipeStartTime = Date.now();\n        this.isSwiping = true;\n        event.preventDefault();\n      }\n    } else {\n      // Check if swipe starts from inside the drawer (for closing)\n      if (this.contentElement && this.dialogElement.hasAttribute('open')) {\n        const drawerRect = this.contentElement.getBoundingClientRect();\n        if (\n          x >= drawerRect.left &&\n          x <= drawerRect.right &&\n          y >= drawerRect.top &&\n          y <= drawerRect.bottom\n        ) {\n          this.swipeStartX = x;\n          this.swipeStartY = y;\n          this.swipeStartTime = Date.now();\n          this.isSwiping = true;\n        }\n      }\n    }\n  }\n\n  /**\n   * Handles pointer move events during swipe.\n   * @param {PointerEvent} event - The pointer move event.\n   */\n  @Listen('pointermove', { target: 'window' })\n  handlePointerMove(event: PointerEvent) {\n    if (!this.isSwiping || !this.swipeStartX || !this.swipeStartY) return;\n\n    // Prevent scrolling during swipe\n    event.preventDefault();\n  }\n\n  /**\n   * Handles pointer up events to complete swipe gesture.\n   * @param {PointerEvent} event - The pointer up event.\n   */\n  @Listen('pointerup', { target: 'window' })\n  handlePointerUp(event: PointerEvent) {\n    if (\n      !this.isSwiping ||\n      !this.swipeStartX ||\n      !this.swipeStartY ||\n      !this.swipeStartTime\n    ) {\n      this.resetSwipe();\n      return;\n    }\n\n    const x = event.clientX;\n    const y = event.clientY;\n    const deltaX = x - this.swipeStartX;\n    const deltaY = y - this.swipeStartY;\n    const deltaTime = Date.now() - this.swipeStartTime;\n    const distance = Math.abs(deltaX);\n    const velocity = distance / deltaTime;\n\n    // Only consider horizontal swipes (vertical movement should be less than horizontal)\n    if (Math.abs(deltaY) > Math.abs(deltaX)) {\n      this.resetSwipe();\n      return;\n    }\n\n    // Check if swipe meets threshold requirements\n    if (\n      distance >= this.SWIPE_THRESHOLD ||\n      velocity >= this.SWIPE_VELOCITY_THRESHOLD\n    ) {\n      if (!this.open) {\n        // Opening swipe: from left edge going right, or from right edge going left\n        const isOpeningSwipe =\n          (this.side === 'left' && deltaX > 0) ||\n          (this.side === 'right' && deltaX < 0);\n\n        if (isOpeningSwipe && !this.undismissable) {\n          this.show();\n        }\n      } else {\n        // Closing swipe: towards the edge\n        const isClosingSwipe =\n          (this.side === 'left' && deltaX < 0) ||\n          (this.side === 'right' && deltaX > 0);\n\n        if (isClosingSwipe && !this.undismissable) {\n          this.close();\n        }\n      }\n    }\n\n    this.resetSwipe();\n  }\n\n  /**\n   * Resets swipe tracking state.\n   */\n  private resetSwipe() {\n    this.swipeStartX = null;\n    this.swipeStartY = null;\n    this.swipeStartTime = null;\n    this.isSwiping = false;\n  }\n\n  //#endregion LISTENERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Lifecycle method that runs before the component loads.\n   * Initializes the trigger, header, and footer elements by finding them in the component's children.\n   * Elements are found either by their slot attribute or by their tag name (for drawer header/footer)\n   */\n  componentWillLoad() {\n    this.triggerElement = Array.from(this.el.children).find(child => {\n      return child.getAttribute('slot') === 'trigger';\n    }) as HTMLElement;\n\n    this.headerElement = Array.from(this.el.children).find(child => {\n      return (\n        child.getAttribute('slot') === 'header' ||\n        child.tagName.toLowerCase() === 'nv-drawerheader'\n      );\n    }) as HTMLElement;\n\n    this.footerElement = Array.from(this.el.children).find(child => {\n      return (\n        child.getAttribute('slot') === 'footer' ||\n        child.tagName.toLowerCase() === 'nv-drawerfooter'\n      );\n    }) as HTMLElement;\n\n    // Initial form check\n    this.checkForForm();\n  }\n\n  componentWillUpdate() {\n    this.attachEventListeners();\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      this.show();\n    }\n    // Only set autofocus if the prop is true and no element already has autofocus\n    if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {\n      this.setAutofocus();\n    }\n    this.attachEventListeners();\n\n    // Additional form check in case form was added after initial load\n    this.checkForForm();\n\n    // this.setupContentBodyListeners();\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && !this.eventsAttached && !this.controlled) {\n      removeEventListeners(this.triggerClickEvents, this.triggerElement, this);\n      this.eventsAttached = false;\n    }\n    this.allowScroll();\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    const hasForm = this.form || this.el.querySelector('form');\n    const state = this.open ? 'open' : 'closed';\n\n    return (\n      <Host>\n        <slot name=\"trigger\"></slot>\n\n        <dialog\n          ref={el => (this.dialogElement = el)}\n          onClose={this.handleDrawerClose}\n          onClick={this.handleDrawerClick}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"drawer-header\"\n          aria-describedby=\"drawer-content\"\n          class={clsx({ [`side-${this.side}`]: true })}\n          data-state={state}\n        >\n          <div class=\"backdrop\" ref={el => (this.backdropElement = el)}>\n            <div\n              class={clsx('content', `size-${this.size}`)}\n              ref={el => (this.contentElement = el)}\n              data-state={state}\n              data-side={this.side}\n              style={this.width ? { width: this.width } : {}}\n            >\n              {!this.undismissable && (\n                <nv-button\n                  class=\"close-button\"\n                  emphasis=\"lower\"\n                  size=\"sm\"\n                  onClick={this.handleDrawerClose}\n                  aria-label=\"Close drawer\"\n                >\n                  <nv-icon name=\"x\" size=\"sm\" />\n                </nv-button>\n              )}\n\n              {this.headerElement ? (\n                <slot name=\"header\"></slot>\n              ) : (\n                <nv-drawerheader id=\"drawer-header\"></nv-drawerheader>\n              )}\n\n              <div class=\"content-body\" id=\"drawer-content\">\n                <slot></slot>\n              </div>\n\n              {this.footerElement ? (\n                <slot name=\"footer\"></slot>\n              ) : (\n                <nv-drawerfooter\n                  form={this.form}\n                  primaryButtonType={\n                    hasForm ? ButtonType.Submit : ButtonType.Button\n                  }\n                  onDrawerCanceled={this.handleDrawerClose}\n                  undismissable={this.undismissable}\n                ></nv-drawerfooter>\n              )}\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["useFade","useSlide","parallel","tabbable","addEventListeners","uuidv4","removeEventListeners","h","Host","clsx","ButtonType"],"mappings":"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"}

package/dist/cjs/nv-drawerfooter.nv-drawerheader.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-drawerfooter.nv-drawerheader.entry.cjs.js","sources":["src/components/nv-drawerfooter/nv-drawerfooter.scss?tag=nv-drawerfooter","src/components/nv-drawerfooter/nv-drawerfooter.tsx","src/components/nv-drawerheader/nv-drawerheader.scss?tag=nv-drawerheader","src/components/nv-drawerheader/nv-drawerheader.tsx"],"sourcesContent":["nv-drawerfooter {\n  display: flex;\n  padding: var(--drawer-padding-y, var(--dialog-footer-padding-top)) var(--drawer-padding-x, var(--dialog-footer-padding-x))\n    var(--drawer-padding-y, var(--dialog-footer-padding-bottom)) var(--drawer-padding-x, var(--dialog-footer-padding-x));\n\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: var(--drawer-gap-y, var(--dialog-footer-gap-y));\n  align-self: stretch;\n}","import {\n  AttachInternals,\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  Element,\n} from '@stencil/core';\nimport { ButtonType } from '../../utils/constants';\n\n/**\n * @slot default - Custom content for the drawer footer. When provided, the default buttons will not be rendered.\n */\n@Component({\n  tag: 'nv-drawerfooter',\n  styleUrl: 'nv-drawerfooter.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvDrawerfooter {\n  @AttachInternals() internals: ElementInternals;\n  @Element() el: HTMLNvDrawerfooterElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Disables the primary button, preventing user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Controls the visibility of the cancel button. When true, the cancel button is\n   * hidden.\n   */\n  @Prop({ reflect: true })\n  readonly undismissable: boolean = false;\n\n  /**\n   * Sets the leading icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly leadingIcon?: string | null = null;\n\n  /**\n   * Sets the trailing icon for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly trailingIcon?: string | null = null;\n\n  /**\n   * Sets the danger state for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly danger: boolean = false;\n\n  /**\n   * Sets the label for the cancel button.\n   */\n  @Prop({ reflect: true })\n  readonly cancelLabel: string | null = 'Cancel';\n\n  /**\n   * Sets the label for the primary button.\n   */\n  @Prop({ reflect: true })\n  readonly primaryLabel: string | null = 'Primary';\n\n  /**\n   * Sets the type of the primary button. If using a form, this will default to\n   * 'submit' if nothing passed.\n   */\n  @Prop({ reflect: true, mutable: true })\n  primaryButtonType: `${ButtonType}`;\n\n  /**\n   * A form inside the drawer can be submitted through the drawer footer by\n   * giving the form an id and passing that id to the form attribute.\n   */\n  @Prop({ reflect: true })\n  readonly form?: string | null = null;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the cancel button is clicked. This will close the drawer.\n   */\n  @Event({ bubbles: false })\n  drawerCanceled: EventEmitter<void>;\n\n  /**\n   * Emitted when the primary button is clicked. This allows to handle the\n   * primary action and potential data capture before closing the drawer.\n   */\n  @Event({ bubbles: false })\n  drawerPrimaryClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the primary action when the primary button is clicked.\n   * @param {Event} event - The click event.\n   */\n\n  private handlePrimary = (event: Event) => {\n    event.stopPropagation();\n    this.drawerPrimaryClicked.emit();\n  };\n\n  /**\n   * Handles the cancel action when the cancel button is clicked. This will close the drawer.\n   * @param {Event} event - The click event.\n   */\n  private handleCancel = (event: Event) => {\n    event.stopPropagation();\n    this.drawerCanceled.emit();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  componentDidLoad() {\n    // Set the default button type based on the form property\n    this.primaryButtonType =\n      this.primaryButtonType || this.form\n        ? ButtonType.Submit\n        : ButtonType.Button;\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            {!this.undismissable && (\n              <nv-button onClick={this.handleCancel} emphasis=\"low\" size=\"sm\">\n                {this.cancelLabel}\n              </nv-button>\n            )}\n            <nv-button\n              onClick={this.handlePrimary}\n              disabled={this.disabled}\n              danger={this.danger}\n              size=\"sm\"\n              emphasis=\"high\"\n              form={this.form}\n              type={this.primaryButtonType}\n            >\n              {this.leadingIcon && (\n                <nv-icon\n                  slot=\"leading-icon\"\n                  name={this.leadingIcon}\n                  size=\"sm\"\n                />\n              )}\n              {this.primaryLabel}\n              {this.trailingIcon && (\n                <nv-icon\n                  slot=\"trailing-icon\"\n                  name={this.trailingIcon}\n                  size=\"sm\"\n                />\n              )}\n            </nv-button>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n","nv-drawerheader {\n  padding: var(--drawer-padding-y, var(--dialog-header-padding-top))\n    var(--drawer-padding-x, var(--dialog-header-padding-x))\n    var(--drawer-padding-y, var(--dialog-header-padding-bottom))\n    var(--drawer-padding-x, var(--dialog-header-padding-x));\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  // Reset padding when custom content is provided via slot\n  &:has(> div:not(.heading):not(.subheading)) {\n    padding: 0;\n  }\n\n  // Ensure gradient backgrounds are visible\n  > div[style*='gradient'] {\n    background-attachment: local;\n  }\n\n  .heading {\n    color: var(--color-content-high-text);\n\n\n    /* heading/xs/medium */\n    font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n    font-size: var(--font-size-lg);\n    font-style: normal;\n    font-weight: var(--font-weight-medium-emphasis);\n    padding-right: var(--drawer-header-padding-right, var(--spacing-7));\n    line-height: var(--leading-px-6); /* 133.333% */\n    letter-spacing: var(--letter-spacing-heading-xs);\n  }\n\n  .subheading {\n    color: var(--color-content-low-text);\n\n    /* text/sm/regular */\n    font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n    font-size: var(--font-size-sm);\n    font-style: normal;\n    font-weight: var(--font-weight-low-emphasis);\n    line-height: var(--line-height-sm); /* 142.857% */\n  }\n}","import { Component, Host, Prop, h, Element, Fragment } from '@stencil/core';\n\n/**\n * @slot default - Custom content for the drawer header. When provided, the default header will not be rendered.\n */\n@Component({\n  tag: 'nv-drawerheader',\n  styleUrl: 'nv-drawerheader.scss',\n  shadow: false,\n})\nexport class NvDrawerheader {\n  @Element() el: HTMLNvDrawerheaderElement;\n  private hasSlot = false;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the heading text for the drawer.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string | null = 'Drawer Title';\n\n  /**\n   * Sets the subheading text for the drawer.\n   */\n  @Prop({ reflect: true })\n  readonly subheading?: string | null = null;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    // Check if there are any child elements that don't have a slot attribute\n    this.hasSlot = Array.from(this.el.childNodes).some(node => {\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {!this.hasSlot ? (\n          <Fragment>\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"subheading\">{this.subheading}</div>\n          </Fragment>\n        ) : (\n          <slot></slot>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"names":["ButtonType","h","Host","Fragment"],"mappings":"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"}