wj-elements 0.6.1 → 0.7.1

package/dist/packages/wje-sliding-container/sliding-container.element.d.ts

@@ -4,7 +4,11 @@ import { default as WJElement } from '../wje-element/element.js';
  * @documentation https://elements.webjet.sk/components/SlidingContainer
  * @status stable
  * @augments WJElement
- * @csspart - Styles the element.
+ * @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.
@@ -16,6 +20,39 @@ import { default as WJElement } from '../wje-element/element.js';
  * @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
  * <wje-sliding-container trigger="test-resize-container-event-right" id="left-in-place" direction="left" max-width="100px" max-height="100%">
@@ -44,6 +81,30 @@ export default class SlidingContainer extends WJElement {
     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.
@@ -122,6 +183,26 @@ export default class SlidingContainer extends WJElement {
      * @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
@@ -149,6 +230,71 @@ export default class SlidingContainer extends WJElement {
      * @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.
@@ -178,9 +324,12 @@ export default class SlidingContainer extends WJElement {
      * @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.
@@ -188,6 +337,65 @@ export default class SlidingContainer extends WJElement {
      * 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.
      */
@@ -198,12 +406,63 @@ export default class SlidingContainer extends WJElement {
      * @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.
      *
@@ -213,6 +472,146 @@ export default class SlidingContainer extends WJElement {
      * @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.
@@ -246,8 +645,12 @@ export default class SlidingContainer extends WJElement {
      * @returns {Promise<void>} A promise that resolves when the transition animation is completed.
      */
     doAnimateTransition(): Promise<void>;
-    animation: any;
-    nativeAnimation: any;
+    /**
+     * Animates the mobile bottom sheet and its backdrop.
+     * @param {object} options Web Animation options.
+     * @returns {Promise<void>}
+     */
+    doAnimateBottomSheetTransition(options: object): Promise<void>;
     /**
      * Opens the sliding container by performing necessary preparatory and transitional operations.
      * @param {Event} e The event that triggered the open operation.
@@ -260,6 +663,10 @@ export default class SlidingContainer extends WJElement {
      * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
      */
     close(e: Event): Promise<void>;
+    /**
+     * 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.

package/dist/packages/wje-toolbar-action/toolbar-action.element.d.ts

@@ -161,6 +161,17 @@ export default class ToolbarAction extends WJElement {
      * @returns {HTMLElement}
      */
     createMenuItem(action: HTMLElement): HTMLElement;
+    /**
+     * Clones action content for menu usage and normalizes button icon slots.
+     * @param {Node} node The source action child node.
+     * @returns {Node}
+     */
+    cloneActionMenuNode(node: Node): Node;
+    /**
+     * Moves button-only icon slots to the menu item start slot.
+     * @param {Element} element The cloned action content node.
+     */
+    normalizeActionMenuIconSlot(element: Element): void;
     /**
      * Resolves readable text for a toolbar action copied into an overflow menu.
      * @param {HTMLElement} action The original action element.