import { IEventEmitter } from '@breadstone/mosaik-elements'; import { CssLength } from '@breadstone/mosaik-themes'; import { ISlottable } from '../../../Behaviors/Slottable'; import type { ISplitRepositionEventDetail } from '../../../events'; import { SplitCollapsedPanel } from '../../../Types/SplitCollapsedPanel'; import { SplitLock } from '../../../Types/SplitLock'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ISplitElementProps } from './ISplitElementProps'; declare const SplitElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Reversible").IReversibleProps) & (abstract new (...args: Array) => import("../../../Behaviors/Orientable").IOrientableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Fitable").IFitableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Split - A layout component that creates a resizable split pane layout with a draggable divider. * * Enables users to dynamically resize two content areas separated by an interactive divider. * Supports both horizontal and vertical orientations, position locking, snapping, and keyboard navigation. * When `collapsible` is enabled, panels can be collapsed by dragging beyond 50% of their minimum size. * * @name SplitElement * @element mosaik-split * @category Layout * * @fires splitReposition {SplitRepositionEvent} - Fired when the split position changes via user interaction * * @slot start - The primary content panel positioned at the beginning of the split * @slot end - The secondary content panel positioned at the end of the split * @slot thumb - Custom grip icon for the draggable divider (defaults to three dots icon) * * @csspart panel - The container for each split panel content * @csspart start - The start panel container * @csspart end - The end panel container * @csspart divider - The interactive draggable divider element * @csspart thumb - The visual grip icon within the divider * * @cssprop {String} --split-divider-width - Width/height of the divider based on orientation * * @dependency ThumbElement - The thumb element used as the default grip in the divider * * @example * ```html * * *
Left Panel
*
Right Panel
* * * * *
Top Panel
*
Bottom Panel
* * * * * *
Content
* * * * * *
Main Content
* * ``` * * @public */ export declare class SplitElement extends SplitElement_base implements ISplitElementProps, ISlottable { private readonly _resizeController; private readonly _splitReposition; private _size; private _position; private _lock; private _snaps; private _snapThreshold; private _thickness; private _min; private _max; private _collapsible; private _collapsedPanel; /** * Constructs a new instance of the `SplitElement` class. * * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `position` property. * The position of the divider. Accepts any valid CSS length value except 'auto'. * * @example '50%', '200px', '10rem' * @public * @attr */ get position(): Exclude; set position(value: Exclude); /** * Gets or sets the `lock` property. * Determines which panel is the fixed reference for positioning and resize behavior. * * - `'none'` (default): The start panel is the primary reference. `position`, `min`, and `max` * control the start panel's size. On container resize, the position **percentage** is preserved, * meaning both panels resize proportionally. * * - `'start'`: Identical to `'none'` for layout and interaction, but on container resize * the start panel's **absolute pixel size** is preserved instead of the percentage. * The end panel absorbs all resize changes, keeping the start panel at a fixed width/height. * * - `'end'`: The end panel becomes the primary reference. The grid layout is inverted so * that `position`, `min`, and `max` now control the **end** panel's size. Drag and keyboard * directions are mirrored accordingly. On container resize, the end panel's **absolute pixel * size** is preserved while the start panel absorbs resize changes. * * @example * ```html * * * *
Content
* * * * *
Content
* * * ``` * * @public * @attr */ get lock(): SplitLock; set lock(value: SplitLock); /** * Gets or sets the `snap` property. * The `snap` is a space separated list of snap points. * When the split is dragged, it will snap to the nearest snap point. * * @public * @attr */ get snaps(): Array>; set snaps(value: Array>); /** * Gets or sets the `snapThreshold` property. * * @public * @attr */ get snapThreshold(): number; set snapThreshold(value: number); /** * Gets or sets the `thickness` property. * * @public * @attr */ get thickness(): number; set thickness(value: number); /** * Gets or sets the `min` property. * The minimum position constraint for the primary panel. * Accepts any valid CSS length value except 'auto' (e.g., '10%', '100px'). * * @public * @attr */ get min(): Exclude; set min(value: Exclude); /** * Gets or sets the `max` property. * The maximum position constraint for the primary panel. * Accepts any valid CSS length value except 'auto' (e.g., '90%', '500px'). * * @public * @attr */ get max(): Exclude; set max(value: Exclude); /** * Gets or sets the `collapsible` property. * When enabled, panels can be collapsed by dragging beyond 50% of their minimum size constraint. * A collapsed panel can be expanded by dragging back beyond 50% of the minimum size. * * **Requires a meaningful `min` value** (e.g., `min="200px"`). The collapse threshold is * calculated as 50% of `min`. With the default `min="0%"`, the threshold is 0px and the * snap-to-collapse behavior has no effect. * * **Difference to dragging without `collapsible`:** * Without `collapsible`, a panel can still reach zero size if `min="0%"`, but there is no * threshold snap behavior, no keyboard collapse (Home/End), and the `collapse()`/`expand()` * API methods are disabled. * * **Note:** The `collapsedPanel` property reflects the visual state regardless of this setting. * Even without `collapsible`, if a panel reaches zero size, `collapsedPanel` will indicate * which panel is collapsed. * * @public * @attr */ get collapsible(): boolean; set collapsible(value: boolean); /** * Gets or sets the `collapsedPanel` property. * Indicates which panel is currently collapsed (has zero size). * * This property is **automatically derived** from the current `position`: * - When position is at or below `0%`, `collapsedPanel` is `'start'`. * - When position is at or above `100%`, `collapsedPanel` is `'end'`. * - Otherwise, `collapsedPanel` is `'none'`. * * This auto-detection works regardless of the `collapsible` property, ensuring * the value always reflects the visual state the user sees. * * @public * @attr * @readonly */ get collapsedPanel(): SplitCollapsedPanel; private set collapsedPanel(value); /** * Gets the `isCollapsed` property. * Returns true if any panel is currently collapsed. * * @public * @readonly */ get isCollapsed(): boolean; /** * Gets the `isStartCollapsed` property. * Returns true if the start panel is collapsed. * * @public * @readonly */ get isStartCollapsed(): boolean; /** * Gets the `isEndCollapsed` property. * Returns true if the end panel is collapsed. * * @public * @readonly */ get isEndCollapsed(): boolean; /** * Gets or sets the `hasPanels` property. * * @public */ get hasPanels(): boolean; /** * Gets the position as a percentage value (0-100). * This is a computed property used internally for calculations. * * @public * @readonly */ get positionPercentage(): number; /** * Gets the position in pixels. * This is a computed property used internally for calculations. * * @public * @readonly */ get positionInPixels(): number; /** * Called when the split is repositioned. * Provides reference to `IEventDetail` as event detail. * * @public * @readonly * @eventProperty */ get splitReposition(): IEventEmitter; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * @public * @override */ onSlotChanges(_slotName?: string): void; /** * @private */ handleDrag(event: PointerEvent): void; /** * @private */ handleKeyDown(event: KeyboardEvent): void; /** * Collapses the specified panel by dragging it beyond 50% of its minimum size constraint. * Only works when `collapsible` is enabled. * * @public * @param panel The panel to collapse */ collapse(panel: Exclude): void; /** * Expands the specified collapsed panel back to its minimum/maximum position. * Only works when `collapsible` is enabled. * * @public * @param panel The panel to expand */ expand(panel: Exclude): void; /** * Emits the `splitReposition` event. * * @protected */ protected onSplitReposition(args: ISplitRepositionEventDetail): void; /** * Called when the `position` property changes. * Automatically updates `collapsedPanel` to reflect the visual state. * * @protected */ protected onPositionPropertyChanged(_prev?: Exclude, _next?: Exclude): void; /** * @protected */ protected onOrientationPropertyChanged(_prev?: boolean, _next?: boolean): void; /** * Converts a CSS length value to pixels. * * @private */ private cssLengthToPixels; /** * Converts a CSS length value to percentage. * * @private */ private cssLengthToPercentage; /** * @private */ private detectSize; /** * @private */ private pixelsToPercentage; /** * @private */ private handleResize; /** * @private */ private drag; } /** * @public */ export declare namespace SplitElement { type Props = ISplitElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-split': SplitElement; } } export {}; //# sourceMappingURL=SplitElement.d.ts.map