@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
117 lines (116 loc) • 5.02 kB
TypeScript
import { EventEmitter } from '../../stencil-public-runtime';
/**
* A customizable bottom sheet component used to display content in a dialog.
*
* This component supports 'header', 'content', and 'footer' `<slot>` elements for inserting custom HTML.
* Alternatively, set the `header` prop for the built-in header layout. Do not set `header` if you use the
* 'header' slot.
*
* The sheet rests at one of three display modes: 'minimized' (only the handle peeks), 'default', and
* 'expanded' (fills the page/iframe height). The drag handle steps the sheet one level at a time
* (e.g. minimized -> default -> expanded); it never jumps two levels in a single gesture. Setting the
* `displayMode` prop directly applies the value immediately. Drag/keyboard interactions change the
* live mode but do not overwrite the `displayMode` prop, so reopening the sheet always restores the
* mode set via that prop. Smaller drags snap back to rest.
*/
/** The resting display mode of the bottom sheet. */
export type TBottomSheetDisplayMode = 'default' | 'expanded' | 'minimized';
export interface IBottomSheetHeader {
/** Whether to show the back button. */
showBackButton?: boolean;
/** The title of the header. */
title?: string;
/** The subtitle of the header. */
subtitle?: string;
/** Whether to show the dismiss button. Clicking it closes the bottom sheet. */
showCloseButton?: boolean;
}
export declare class ModusWcBottomSheet {
private inheritedAttributes;
private startY;
private startHeight;
private currentDelta;
/** Set when the sheet opens so focus can move inside it after the next render. */
private pendingFocus;
/**
* The mode requested via the `displayMode` prop (as opposed to a drag/keyboard
* interaction). Reopening the sheet restores this value so the property always
* wins, discarding any live mode an earlier interaction left behind.
*/
private propDisplayMode;
/**
* True only while an interaction (drag/keyboard) writes `displayMode`, so the
* watch can tell interaction-driven changes apart from property changes.
*/
private isInteractionChange;
/**
* Ordered rungs used by drag/keyboard interactions. Stepping moves one rung at
* a time so the sheet never jumps straight from minimized to expanded.
*/
private static readonly DISPLAY_MODE_LADDER;
/** Reference to the host element */
el: HTMLElement;
/** Custom CSS class to apply to the outer div. */
customClass?: string;
/** Controls whether the bottom sheet is visible. */
visible?: boolean;
/** Resting display mode: 'minimized', 'default', or 'expanded'. Drag/keyboard interactions do not overwrite this prop. */
displayMode?: TBottomSheetDisplayMode;
/** Fraction (0-1) of the sheet height it must be dragged, in either direction, before it steps one level. */
dragStepThreshold?: number;
/**
* Configuration for the built-in header layout.
* Do not set this prop if you intend to use the 'header' slot.
*/
header?: IBottomSheetHeader;
/** Event emitted when the visibility of the bottom sheet changes. */
sheetVisibilityChange: EventEmitter<{
visible: boolean;
}>;
/**
* Event emitted when the display mode changes, whether from a drag/keyboard
* interaction or from setting the `displayMode` prop. The new mode is in
* `detail.displayMode`.
*/
displayModeChange: EventEmitter<{
displayMode: TBottomSheetDisplayMode;
}>;
/** Event emitted when the header back button is clicked. Does not change sheet state. */
headerBackClick: EventEmitter<void>;
/**
* Event emitted when the header dismiss button is clicked.
* The sheet is also closed automatically (`visible` is set to `false`).
*/
headerCloseClick: EventEmitter<void>;
private isDragging;
private dragOffset;
private dragHeight;
private hasHeader;
private hasFooter;
handleVisibleChange(isVisible: boolean): void;
handleDisplayModeChange(newValue: TBottomSheetDisplayMode): void;
componentWillLoad(): void;
componentDidRender(): void;
/** Toggle the `inert` attribute on the host so closed sheets cannot be focused. */
private setInert;
disconnectedCallback(): void;
private readonly onPointerDown;
private readonly onPointerMove;
private readonly onPointerUp;
private readonly onHandleKeyDown;
/** Step up one rung of the ladder: minimized -> default -> expanded. */
private stepUp;
/** Step down one rung of the ladder: expanded -> default -> minimized (never closes). */
private stepDown;
private setVisible;
private setDisplayMode;
private getClasses;
private getTransform;
private getPanelHeight;
private hasDefaultHeader;
private shouldRenderHeader;
private readonly onHeaderBackClick;
private readonly onHeaderCloseClick;
private renderDefaultHeader;
render(): any;
}