import { EventEmitter } from '../../stencil-public-runtime'; /** * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel. Slot=“pane” elements have margin: 0 !important by default. This is a necessary technical constraint because CSS margins are not included in the flex-basis calculation, which would distort the sizing of the panes. Solution for the user: Apply margins/padding to the content inside the pane, not to the pane itself. * @slot pane - Content of each split pane. Use multiple `
` elements. * @slot gutter - Optional custom content inside every gutter handle. * @slot default - Placeholder for any auto rendered gutters */ export declare class NvSplit { el: HTMLNvSplitElement; /****************************************************************************/ /** * Direction of the split layout. * - `horizontal`: panes side by side * - `vertical`: panes stacked */ readonly direction: 'horizontal' | 'vertical'; /** * Initial sizes of the panes in percentages. * Example: `[50, 50]` means two equal panes. * Explicitly `reflect: false` (array) for framework compatibility. */ sizes: number[]; /** * Minimum sizes (in px) for each pane. * Example: `[100, 200]` => first pane min 100px, second min 200px. * Explicitly `reflect: false` (array) for framework compatibility. */ readonly minSizes?: number[]; /** * Width or height of the gutter (in px) depending on the split direction. * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility. */ readonly gutterSize: number; /****************************************************************************/ private isDragging; private dragIndex; private startPos; private startSizes; private ro?; private onDocMove; private onDocUp; /****************************************************************************/ /** * Emitted when pane sizes are updated (drag start/stop or programmatically). * @bind sizes */ sizesChanged: EventEmitter; /****************************************************************************/ protected onSizesChanged(): void; protected onDirectionChanged(): void; /****************************************************************************/ componentDidLoad(): void; disconnectedCallback(): void; /****************************************************************************/ /** * Programmatically set pane sizes. * @param {Array} sizes Array of pane sizes in percentages. * @returns {Promise} */ setSizes(sizes: number[]): Promise; /** * Returns the current pane sizes. * @returns {Promise} Array of pane sizes in percentages. */ getSizes(): Promise; /** * Collapse a specific pane to 0 size. * @param {number} index Index of the pane to collapse. * @returns {Promise} */ collapse(index: number): Promise; /** * Destroy the split instance: removes gutters and resets layout state. * @returns {Promise} */ destroy(): Promise; /****************************************************************************/ /** * Returns the panes of the split. * @returns {HTMLElement[]} The panes of the split. */ private getPanes; /** * Returns the own gutters of the split. * @returns {HTMLElement[]} The own gutters of the split. */ private getOwnGutters; /** * Removes the own gutters of the split. */ private removeOwnGutters; /** * Ensures the gutters of the split. */ private ensureGutters; /** * Applies the sizes to the panes. */ private applySizes; /** * Attaches the document listeners. */ private attachDocumentListeners; /** * Detaches the document listeners. */ private detachDocumentListeners; /** * Positions the gutters based on the current sizes of the panes. */ private positionGutters; /** * Starts the dragging process. * @param {MouseEvent} e - The mouse event. * @param {number} index - The index of the gutter. */ private startDragging; /** * Handles the mouse movement during dragging. * @param {MouseEvent} e - The mouse event. */ private handleMouseMove; /** * Stops the dragging process. */ private stopDragging; /****************************************************************************/ render(): any; }