import { EventEmitter } from '../../stencil-public-runtime'; /** * @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 declare class NvDrawer { el: HTMLNvDrawerElement; private dialogElement; private backdropElement; private contentElement; private eventsAttached; private form; private swipeStartX; private swipeStartY; private swipeStartTime; private isSwiping; private SWIPE_THRESHOLD; private SWIPE_EDGE_ZONE; private SWIPE_VELOCITY_THRESHOLD; private triggerElement?; private suppressOpenWatcher; private transitionToken; /** * The visibility the latest show()/close() is heading for. The native * `` stays open until a close animation has finished, so its `open` * flag cannot tell "open" apart from "closing"; this can. */ private visibleTarget; private boundFooterElement; /** * Consumer-provided header/footer. State (not plain fields) so that slotted * chrome resolved after the first render re-renders the drawer without its * default header/footer. */ private headerElement?; private footerElement?; private triggerClickEvents; /****************************************************************************/ /** * Use this prop to toggle the visibility of the drawer. Set to true to show * the drawer and false to hide it. */ open: boolean; /** * If true, the drawer cannot be closed by the user. */ readonly undismissable: boolean; /** * If true, the drawer will be closed when the backdrop is clicked. */ readonly clickOutside: boolean; /** * If true, the drawer visibility is managed manually through methods or the * open prop. */ readonly controlled: boolean; /** * Side from which the drawer appears. */ readonly side: 'left' | '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) */ readonly size: 'sm' | 'md' | 'lg' | 'full'; /** * Width of the drawer. If specified, this will override the size prop. * Defaults to the width corresponding to the size prop (400px for 'md'). */ readonly width?: string; /** * Controls whether the drawer should automatically focus the first focusable * element when opened. When disabled, prevents unwanted tooltip triggers on * drawer open. */ readonly autofocus: boolean; /** * 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 */ readonly swipeToOpen: boolean; /****************************************************************************/ /** * Call this method to show the drawer, making it visible on the screen. */ show(): Promise; /** * Call this method to hide the drawer, making it disappear from view. */ close(): Promise; /** * Writes `open` without re-entering its watcher. Used for transitions the * component itself initiates, which have already been applied by the time * the watcher would run. * @param {boolean} value - The value to write. * @returns {boolean} True when the value actually changed. */ private setOpenSilently; /** * Sets the autofocus on the first focusable element in the drawer. */ private setAutofocus; /** * Attaches event listeners to the drawer. */ private attachEventListeners; /** * Wires `drawerCanceled` on a consumer-slotted footer so that Cancel closes * the drawer exactly as it does with the default internal footer, which is * the documented contract. Without this the drawer can only be closed by a * consumer round trip, and on an async transport (Blazor Server) that round * trip races the close animation. * Tracks the bound node rather than a boolean so a replaced footer rebinds. */ private attachFooterListeners; /** * Closes the drawer when a slotted footer emits `drawerCanceled`. * * Deliberately does not stop propagation. `drawerCanceled` is declared * `bubbles: false`, so there is nothing to stop, and * `stopImmediatePropagation()` would be harmful here: framework wrappers * bind their own listener for this event on the very same element (that is * how `DrawerCanceledEvent` reaches a Blazor consumer), so suppressing * sibling listeners could silently swallow the consumer's cancel handler. */ /** * Watches the host's children so slotted chrome added or replaced after the * first render is still resolved and wired. */ private slottedChildObserver?; private syncSlottedChrome; private handleSlottedFooterCancel; /** * Prevents the body from scrolling when the drawer is open. * Compensates for scrollbar width to prevent layout shift. */ private preventScroll; /** * Allows the body to scroll when the drawer is closed. * Removes the applied overflow and padding styles. */ private allowScroll; private ensureFormId; /** * Checks for and sets up form ID if a form is present */ private checkForForm; /** * Handles the native drawer close event. */ private handleDrawerClose; /****************************************************************************/ /** * Emitted when the drawer opens or closes itself (trigger, close button, * Escape, backdrop, swipe, footer Cancel, `show()`/`close()`), to allow for * cleanup, data-capture, etc. Not emitted when the consumer changes `open`, * since the consumer already knows the new value. * @bind open */ openChanged: EventEmitter; /****************************************************************************/ handleDrawerOpenChange(isOpen: boolean): void; /****************************************************************************/ /** * 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: KeyboardEvent): void; /** * Handles the click event to close the drawer when clickOutside is true. * @param {MouseEvent} event - The click event. */ private handleDrawerClick; private checkForOpenPopovers; /** * Handles pointer down events for swipe detection. * @param {PointerEvent} event - The pointer down event. */ handlePointerDown(event: PointerEvent): void; /** * Handles pointer move events during swipe. * @param {PointerEvent} event - The pointer move event. */ handlePointerMove(event: PointerEvent): void; /** * Handles pointer up events to complete swipe gesture. * @param {PointerEvent} event - The pointer up event. */ handlePointerUp(event: PointerEvent): void; /** * Resets swipe tracking state. */ private resetSwipe; /****************************************************************************/ /** * Lifecycle method that runs before the component loads. * Looks for passed header, and footer elements, either by their slot * attribute or by their tag name (for dialog header/footer) */ componentWillLoad(): void; /** * Looks for consumer-provided header and footer elements. Only fills in what * is still unset, so it is safe to call on every render. * @param {boolean} allowTagFallback - Also accept a bare `nv-drawerheader` / * `nv-drawerfooter` tag with no slot attribute. Only valid BEFORE the first * render: afterwards the drawer has rendered its own default footer, which * that lookup would otherwise pick up and promote to the consumer's. */ private resolveSlottedChrome; /** * Finds header or footer chrome that belongs to this drawer. * * Only the drawer's own children fill its named slots: the host's direct * children before the first render, and the direct children of its content * after Stencil has moved them there. Searching every descendant also found * the slots of a component nested in the content, such as an * `nv-accordion`, and replaced the built-in header and footer with them. * @param {string} selector - What to look for, such as `[slot="footer"]`. * @returns {Element | null} The drawer's own element, if any. */ private findOwnChrome; componentDidRender(): void; componentDidLoad(): void; connectedCallback(): void; disconnectedCallback(): void; /****************************************************************************/ render(): any; }