import { default as WJElement } from '../wje-element/element.js';
/**
* @summary SlidingContainer is a custom web component that extends WJElement.
* @documentation https://elements.webjet.sk/components/SlidingContainer
* @status stable
* @augments WJElement
* @csspart backdrop - Styles the mobile bottom sheet backdrop.
* @csspart sliding-container - Styles the native sliding panel.
* @csspart close-button - Styles the generated close button.
* @csspart sheet-handle-area - Styles the draggable resize handle hit area.
* @csspart sheet-handle - Styles the visible draggable resize handle.
* @slot - The default slot for the SlidingContainer.
* @property {string} maxWidth - The maximum width of the SlidingContainer.
* @property {string} maxHeight - The maximum height of the SlidingContainer.
* @property {string} trigger - The trigger for the SlidingContainer.
* @property {string} direction - Specifies the sliding direction of the container (e.g., 'left' or 'right').
* @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.
* @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the "over" variant for smaller screens.
* @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.
* @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.
* @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').
* @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.
* @property {string} mobilePresentation - Enables mobile presentation, for example 'bottom-sheet'.
* @property {string} mobileBreakPoint - The viewport width where mobile presentation becomes active.
* @property {boolean} backdropDismiss - Closes the mobile bottom sheet when the backdrop is clicked.
* @property {boolean} sheetResizable - Enables mobile bottom sheet resizing.
* @property {string} sheetScope - Defines whether the mobile bottom sheet panel is scoped to the container or viewport.
* @property {string} sheetBoundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet panel.
* @property {string} sheetHeight - The mobile bottom sheet height after opening.
* @property {string} sheetMinHeight - The minimum mobile bottom sheet height while resizing.
* @property {string} sheetMaxHeight - The maximum mobile bottom sheet height while resizing.
* @attribute {string} mobile-presentation - Enables responsive mobile presentation. Use "bottom-sheet".
* @attribute {string} mobile-break-point - Viewport width where mobile presentation becomes active. Defaults to "768".
* @attribute {boolean} backdrop-dismiss - Closes the mobile bottom sheet when the backdrop is clicked.
* @attribute {boolean} sheet-resizable - Enables resizing the mobile bottom sheet with a handle.
* @attribute {string} sheet-scope - Defines whether the sheet panel is scoped to "viewport", "parent", or a bounded container.
* @attribute {string} sheet-boundary - CSS selector for the composed ancestor that bounds the mobile bottom sheet panel.
* @attribute {string} sheet-height - The mobile bottom sheet height after opening.
* @attribute {string} sheet-min-height - The minimum mobile bottom sheet height while resizing.
* @attribute {string} sheet-max-height - The maximum mobile bottom sheet height while resizing.
* @cssproperty [--wje-sliding-container-background=var(--wje-background)] - Background of the sliding panel.
* @cssproperty [--wje-sliding-container-z-index=1000] - z-index of the side sliding container.
* @cssproperty [--wje-sliding-container-bottom-sheet-z-index=var(--wje-sliding-container-z-index, 1000)] - z-index of the mobile bottom sheet host.
* @cssproperty [--wje-sliding-container-bottom-sheet-backdrop-z-index=0] - z-index of the mobile bottom sheet backdrop inside the host layer.
* @cssproperty [--wje-sliding-container-bottom-sheet-panel-z-index=1] - z-index of the mobile bottom sheet panel inside the host layer.
* @cssproperty [--wje-sliding-container-portal-backdrop-z-index] - z-index of the body-level mobile bottom sheet backdrop.
* @cssproperty [--wje-sliding-container-backdrop-background=var(--wje-backdrop)] - Background of the mobile bottom sheet backdrop.
* @cssproperty [--wje-sliding-container-backdrop-opacity=1] - Backdrop opacity while the mobile bottom sheet is open.
* @cssproperty [--wje-sliding-container-box-shadow=var(--wje-sliding-container-shadow)] - Shadow of the mobile bottom sheet panel.
* @cssproperty [--wje-sliding-container-sheet-border-radius=var(--wje-sliding-container-border-radius) var(--wje-sliding-container-border-radius) 0 0] - Border radius of the mobile bottom sheet panel.
* @cssproperty [--wje-sliding-container-sheet-handle-area-height=24px] - Height of the resize handle hit area.
* @cssproperty [--wje-sliding-container-sheet-handle-width=36px] - Width of the visible resize handle.
* @cssproperty [--wje-sliding-container-sheet-handle-height=2px] - Height of the visible resize handle.
* @cssproperty [--wje-sliding-container-sheet-handle-background=var(--wje-border-color)] - Background of the visible resize handle.
* @cssproperty [--wje-sliding-container-sheet-handle-radius=999px] - Border radius of the visible resize handle.
* @tag wje-sliding-container
* @example
*
*
*
* CONTENT Subtitle
* CONTENT Title
*
*
* CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.
*
*
*
*/
export default class SlidingContainer extends WJElement {
/**
* Returns the observed attributes for the component.
* @returns {string[]}
*/
static get observedAttributes(): string[];
/**
* Returns the CSS styles for the component.
* @static
* @returns {CSSStyleSheet}
*/
static get cssStyleSheet(): CSSStyleSheet;
_isOpen: boolean;
_lastCaller: EventTarget;
_sheetDrag: {
pointerId: string | number;
startY: number;
startHeight: number;
minHeight: number;
maxHeight: number;
hasMoved: boolean;
};
_sheetIgnoreDismissUntil: number;
_sheetBackdropGesture: {
pointerId: number;
startX: number;
startY: number;
hasMoved: boolean;
};
_sheetBackdropHandledUntil: number;
_bottomSheetScopeFrame: {
top: number;
left: number;
right: number;
bottom: number;
width: number;
height: number;
};
_resizeObserver: ResizeObserver;
/**
* Sets the 'variant' attribute to the specified value.
* @param {string} value The value to set for the 'variant' attribute.
*/
set variant(value: string);
/**
* Retrieves the value of the "variant" attribute. If the attribute is not set,
* it returns the default value 'in-place'.
* @returns {string} The variant value or the default value 'in-place'.
*/
get variant(): string;
/**
* Sets the maximum width of an element by updating the 'max-width' attribute.
* @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).
*/
set maxWidth(value: string);
/**
* Gets the maximum width value of the element.
* Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.
* @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.
*/
get maxWidth(): string;
/**
* Sets the maximum height for the element.
* @param {string} value The maximum height value to be applied to the element. This can include units such as "px", "em", "%", etc.
*/
set maxHeight(value: string);
/**
* Retrieves the maximum height value of the element, or returns 'auto' if not set.
* @returns {string} The maximum height value or 'auto' if the attribute is not specified.
*/
get maxHeight(): string;
/**
* Sets the 'trigger' attribute for the element.
* @param {string} value The value to set for the 'trigger' attribute.
*/
set trigger(value: string);
/**
* Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.
* @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.
*/
get trigger(): string;
/**
* Sets the direction attribute for the element.
* @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.
*/
set direction(value: string);
/**
* Retrieves the direction attribute of the instance.
* If the direction attribute is not set, it defaults to 'right'.
* @returns {string} The value of the direction attribute or 'right' if not set.
*/
get direction(): string;
/**
* Sets the value of the `remove-child-after-close` attribute.
* This attribute determines if a child element should be removed after a close operation.
* @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.
*/
set removeChildAfterClose(value: boolean | string);
/**
* Gets the value indicating whether the child element should be removed after closing.
*
* This property checks the presence of the 'remove-child-after-close' attribute on the element.
* Returns `false` if the attribute does not exist.
* @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.
*/
get removeChildAfterClose(): boolean;
/**
* Sets the screen break point value to determine responsive behavior.
* @param {string} value The value to set as the screen break point.
*/
set screenBreakPoint(value: string);
/**
* Retrieves the value of the 'screen-break-point' attribute.
* @returns {string} The value of the 'screen-break-point' attribute.
*/
get screenBreakPoint(): string;
/**
* Sets mobile presentation mode.
* @param {string} value The mobile presentation mode.
*/
set mobilePresentation(value: string);
/**
* Gets mobile presentation mode.
* @returns {string|null} The mobile presentation mode.
*/
get mobilePresentation(): string | null;
/**
* Sets the breakpoint for mobile presentation.
* @param {string} value The mobile breakpoint.
*/
set mobileBreakPoint(value: string);
/**
* Gets the breakpoint for mobile presentation.
* @returns {string} The mobile breakpoint.
*/
get mobileBreakPoint(): string;
/**
* Sets the duration of the animation by updating the `animation-duration` attribute.
* @param {string} value The duration value for the animation, specified in a format
* such as seconds (e.g., "2s") or milliseconds (e.g., "200ms").
*/
set animationDuration(value: string);
/**
* Gets the animation duration for an element.
* It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.
* @returns {string} The value of the animation duration, either from the attribute or the default '500'.
*/
get animationDuration(): string;
/**
* Sets the easing function for the animation.
* @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as "ease", "linear", "ease-in", "ease-out", etc.
*/
set animationEasing(value: string);
/**
* Retrieves the easing function for the animation.
* @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.
*/
get animationEasing(): string;
/**
* Determines if the element has an 'has-opacity' attribute.
* @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.
*/
get hasOpacity(): boolean;
/**
* Determines if the bottom sheet should close when the backdrop is clicked.
* @returns {boolean} True if backdrop dismiss is enabled.
*/
get backdropDismiss(): boolean;
/**
* Sets resizing for the mobile bottom sheet.
* @param {boolean|string} value The value to set.
*/
set sheetResizable(value: boolean | string);
/**
* Enables resizing for the mobile bottom sheet.
* @returns {boolean} True if the sheet can be resized.
*/
get sheetResizable(): boolean;
/**
* Sets the mobile bottom sheet panel scope.
* @param {string} value The new boundary mode for the mobile sheet.
*/
set sheetScope(value: string);
/**
* Gets the mobile bottom sheet panel scope. The backdrop always covers the viewport.
* @returns {string} Either 'viewport', 'container', or 'parent'.
*/
get sheetScope(): string;
/**
* Sets the selector used for container-scoped mobile bottom sheet panels.
* @param {string} value Selector for the boundary element.
*/
set sheetBoundary(value: string);
/**
* Gets the selector used for container-scoped mobile bottom sheet panels.
* @returns {string|null} A CSS selector used to find the composed boundary ancestor.
*/
get sheetBoundary(): string | null;
/**
* Sets the mobile bottom sheet opening height.
* @param {string} value The opening height.
*/
set sheetHeight(value: string);
/**
* Gets the mobile bottom sheet opening height.
* @returns {string|null} The opening height.
*/
get sheetHeight(): string | null;
/**
* Sets the minimum mobile bottom sheet height while resizing.
* @param {string} value The minimum height.
*/
set sheetMinHeight(value: string);
/**
* Gets the minimum mobile bottom sheet height while resizing.
* @returns {string|null} The minimum height.
*/
get sheetMinHeight(): string | null;
/**
* Sets the maximum mobile bottom sheet height while resizing.
* @param {string} value The maximum height.
*/
set sheetMaxHeight(value: string);
/**
* Gets the maximum mobile bottom sheet height while resizing.
* @returns {string|null} The maximum height.
*/
get sheetMaxHeight(): string | null;
/**
* Sets the value of the 'add-to-height' attribute.
* This attribute is used to modify or adjust the height dynamically.
* @param {string} value The value to be assigned to the 'add-to-height' attribute.
*/
set addToHeight(value: string);
/**
* Retrieves the value of the 'add-to-height' attribute from the element.
* If the attribute is not set, it defaults to '0'.
* @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.
*/
get addToHeight(): string;
/**
* Determines whether the current state is open.
* @returns {boolean} True if the state is open, otherwise false.
*/
get isOpen(): boolean;
/**
* Executes before drawing the element.
*/
beforeDraw(): void;
/**
* Draws the component.
* @param {object} context The context for drawing.
* @param {object} store The store for drawing.
* @param {object} params The parameters for drawing.
* @returns {DocumentFragment}
*/
draw(context: object, store: object, params: object): DocumentFragment;
sheetHandleArea: HTMLDivElement;
backdropElement: HTMLDivElement;
transparentDiv: HTMLDivElement;
wrapperDiv: HTMLDivElement;
nativeElement: HTMLDivElement;
nativeInner: HTMLDivElement;
/**
* Performs actions after the element is drawn on the screen.
* Attaches an event listener to the document based on the specified trigger.
* Sets the variant to "over" if the document width is smaller than the screen break point.
* Calls the checkForVariant method with the current variant.
*/
afterDraw(): void;
/**
* Returns whether the mobile bottom sheet presentation is active.
* @returns {boolean}
*/
isBottomSheet(): boolean;
/**
* Adds interaction listeners to a backdrop element.
* @param {HTMLElement} backdrop The backdrop element.
*/
addBackdropListeners(backdrop: HTMLElement): void;
/**
* Removes interaction listeners from a backdrop element.
* @param {HTMLElement} backdrop The backdrop element.
*/
removeBackdropListeners(backdrop: HTMLElement): void;
/**
* Checks whether an element is one of this component's backdrop layers.
* @param {EventTarget|null} element The event target.
* @returns {boolean}
*/
isBackdropElement(element: EventTarget | null): boolean;
/**
* Gets the backdrop element that is active for the current presentation.
* @param {object} options Options for resolving the backdrop.
* @param {boolean} options.createPortal Creates the body-level mobile backdrop when needed.
* @returns {HTMLElement|null}
*/
getBackdropElement({ createPortal }?: {
createPortal: boolean;
}): HTMLElement | null;
/**
* Creates the body-level backdrop used by mobile bottom sheets.
* @returns {HTMLElement} Element appended to document.body for page-level dimming.
*/
ensurePortalBackdrop(): HTMLElement;
_portalBackdropElement: HTMLDivElement;
/**
* Removes the body-level mobile backdrop.
*/
removePortalBackdrop(): void;
/**
* Gets the full-page z-index for the body-level mobile backdrop.
* @returns {string}
*/
getPortalBackdropZIndex(): string;
/**
* Gets the target opacity for the active mobile backdrop.
* @returns {string}
*/
getBackdropOpenOpacity(): string;
/**
* Syncs visual styles from the component to the body-level backdrop.
*/
syncPortalBackdropStyles(): void;
/**
* Handles backdrop click dismissal.
* @param {MouseEvent} e The click event.
*/
handleBackdropClick: (e: MouseEvent) => void;
/**
* Sync ARIA attributes on host.
*/
syncAria(): void;
/**
* Creates and returns a styled close button element with an icon,
* including an event listener to trigger the close method.
* @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.
*/
htmlCloseButton(): HTMLElement;
/**
* Creates the mobile bottom sheet resize handle.
* @returns {HTMLElement} The resize handle element.
*/
htmlSheetHandle(): HTMLElement;
/**
* Retrieves the parent element of the current element.
* If the parent element is not found, it attempts to find the root host element.
* @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.
*/
getParentElement(): Element | null;
/**
* Finds the closest element across shadow DOM boundaries.
* @param {string} selector The selector to match.
* @returns {Element|null} The matched composed ancestor.
*/
getClosestComposedElement(selector: string): Element | null;
/**
* Returns the viewport frame.
* @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
*/
getViewportFrame(): {
top: number;
left: number;
right: number;
bottom: number;
width: number;
height: number;
};
/**
* Returns the element that bounds the mobile bottom sheet panel.
* @returns {Element|null} The scope element, or null for viewport scope.
*/
getBottomSheetScopeElement(): Element | null;
/**
* Returns the frame used by the mobile bottom sheet panel.
* @returns {{top: number, left: number, right: number, bottom: number, width: number, height: number}}
*/
getBottomSheetScopeFrame(): {
top: number;
left: number;
right: number;
bottom: number;
width: number;
height: number;
};
/**
* Applies a fixed frame to a bottom sheet layer.
* @param {HTMLElement|SlidingContainer} element The element to update.
* @param {object} frame The frame to apply.
*/
setBottomSheetLayerFrame(element: HTMLElement | SlidingContainer, frame: object): void;
/**
* Removes fixed frame styles from a bottom sheet layer.
* @param {HTMLElement|SlidingContainer} element The element to reset.
*/
resetBottomSheetLayerFrame(element: HTMLElement | SlidingContainer): void;
/**
* Adjusts the position and dimensions of the current element based on the specified variant.
*
* The method handles modifications to the element's positioning style, aligns it relative to its parent,
* and manages alignment to its siblings based on the specified direction.
* @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.
* @returns {void} No value is returned, the method modifies the element's style properties directly.
*/
checkForVariant(variant: string): void;
/**
* Applies the mobile bottom sheet layout.
*/
setBottomSheetVariant(): void;
/**
* Removes layout styles managed by the mobile bottom sheet mode.
*/
resetBottomSheetVariant(): void;
/**
* Applies the current visual open or closed state to the mobile bottom sheet.
* @param {boolean} isOpen True when the sheet should be visible.
*/
setBottomSheetVisualState(isOpen: boolean): void;
/**
* Gets the CSS height limit used for the mobile bottom sheet.
* @returns {string} The CSS max height.
*/
getSheetMaxHeight(): string;
/**
* Applies the configured bottom sheet opening height.
*/
setSheetHeight(): void;
/**
* Resolves the sheet minimum height in pixels.
* @returns {number} The minimum height.
*/
getSheetMinHeightInPixels(): number;
/**
* Resolves the sheet maximum height in pixels.
* @returns {number} The maximum height.
*/
getSheetMaxHeightInPixels(): number;
/**
* Returns available height for the bottom sheet scope.
* @returns {number} Pixel height that can be used inside the current sheet frame.
*/
getBottomSheetAvailableHeight(): number;
/**
* Resolves a CSS height value against the viewport.
* @param {string} value The configured sheet height.
* @param {number} fallback The fallback height in pixels.
* @returns {number} The resolved height.
*/
resolveCssHeight(value: string, fallback: number): number;
/**
* Clamps a number between min and max.
* @param {number} value The measured height.
* @param {number} min The minimum.
* @param {number} max The maximum.
* @returns {number} The clamped value.
*/
clamp(value: number, min: number, max: number): number;
/**
* Stops a handle interaction from dismissing the bottom sheet.
* @param {Event} e The interaction emitted by the resize handle.
*/
stopSheetHandleEvent: (e: Event) => void;
/**
* Checks whether an event came from the resize handle.
* @param {Event} e The event to check.
* @returns {boolean} True when the event belongs to the resize handle.
*/
isSheetHandleEvent(e: Event): boolean;
/**
* Checks whether an event happened inside the visible bottom sheet.
* @param {Event} e The event to check.
* @returns {boolean} True when the event coordinates are inside the sheet.
*/
isEventInsideSheet(e: Event): boolean;
/**
* Prevents scroll events from reaching the page behind the bottom sheet.
* @param {Event} e The scroll event.
*/
preventBottomSheetScroll: (e: Event) => void;
/**
* Stores the initial drag state for the mobile bottom sheet.
* @param {number|string} pointerId The pointer identifier.
* @param {number} startY The starting Y coordinate.
*/
startSheetDrag(pointerId: number | string, startY: number): void;
animation: any;
nativeAnimation: any;
/**
* Applies a new height while the bottom sheet is being dragged.
* @param {number} clientY The current Y coordinate.
*/
updateSheetDrag(clientY: number): void;
/**
* Starts mobile bottom sheet resizing.
* @param {PointerEvent} e The pointer event.
*/
handleSheetDragStart: (e: PointerEvent) => void;
/**
* Starts mobile bottom sheet resizing from a touch event.
* @param {TouchEvent} e The touch event.
*/
handleSheetTouchStart: (e: TouchEvent) => void;
/**
* Starts tracking a possible backdrop dismiss tap.
* @param {PointerEvent} e The pointer event.
*/
handleBackdropPointerStart: (e: PointerEvent) => void;
/**
* Tracks movement during a possible backdrop dismiss tap.
* @param {PointerEvent} e The pointer event.
*/
handleBackdropPointerMove: (e: PointerEvent) => void;
/**
* Finishes a possible backdrop dismiss tap.
* @param {PointerEvent} e The pointer event.
*/
handleBackdropPointerEnd: (e: PointerEvent) => void;
/**
* Cancels a possible backdrop dismiss tap.
*/
handleBackdropPointerCancel: () => void;
/**
* Resizes the mobile bottom sheet during dragging.
* @param {PointerEvent} e The pointer event.
*/
handleSheetDragMove: (e: PointerEvent) => void;
/**
* Resizes the mobile bottom sheet during touch dragging.
* @param {TouchEvent} e The touch event.
*/
handleSheetTouchMove: (e: TouchEvent) => void;
/**
* Ends mobile bottom sheet resizing.
* @param {PointerEvent} e The pointer event.
*/
handleSheetDragEnd: (e: PointerEvent) => void;
/**
* Ends mobile bottom sheet resizing from a touch event.
* @param {TouchEvent} e The touch event.
*/
handleSheetTouchEnd: (e: TouchEvent) => void;
/**
* Cleans up mobile bottom sheet resizing listeners.
*/
endSheetDrag(): void;
/**
* Triggers the event based on the target element.
* If the target element is different from the last caller, it refreshes the children by calling the `open` method.
* If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
* @param {Event} e The event object.
*/
triggerEvent: (e: Event) => Promise;
/**
* Executes before the element is opened.
*/
beforeOpen(e: any): void;
/**
* Callback function called after the element is opened.
*/
afterOpen(e: any): void;
/**
* Executes before closing the element.
*/
beforeClose(e: any): void;
/**
* Callback function that is called after the container is closed.
*/
afterClose(e: any): void;
/**
* Animates the transition of elements with specified options, toggling the visibility and/or dimensions
* of the associated elements based on their current state.
*
* This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)
* with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided
* elements before initiating a new animation sequence.
* @returns {Promise} A promise that resolves when the transition animation is completed.
*/
doAnimateTransition(): Promise;
/**
* Animates the mobile bottom sheet and its backdrop.
* @param {object} options Web Animation options.
* @returns {Promise}
*/
doAnimateBottomSheetTransition(options: object): Promise;
/**
* Opens the sliding container by performing necessary preparatory and transitional operations.
* @param {Event} e The event that triggered the open operation.
* @returns {Promise} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.
*/
open(e: Event): Promise;
/**
* Closes the sliding container and performs associated operations such as animations and event dispatches.
* @param {Event} e The event object associated with the close action.
* @returns {Promise} A promise that resolves when the closing operation, including animations and child element removal, is completed.
*/
close(e: Event): Promise;
/**
* Forces the closed visual state for the mobile bottom sheet.
*/
setBottomSheetClosedState(): void;
/**
* Toggles the state between open and closed.
* @param {Event} e The event object triggering the toggle.
* @returns {Promise} A promise that resolves once the toggle operation (open or close) is complete.
*/
toggle(e: Event): Promise;
}