import { LitElement, type PropertyValues } from 'lit'; import type { Constructor } from '../common/mixins/constructor.js'; import type { SplitterOrientation } from '../types.js'; import type { IgcSplitterComponentEventMap, IgcSplitterResizeEventArgs, IgcSplitterResizeEventDetail, PanePosition } from './types.js'; declare const IgcSplitterComponent_base: Constructor> & Constructor; /** * The `igc-splitter` component provides a resizable split-pane layout that divides the view * into two panels — *start* and *end* — separated by a draggable bar. * * Panels can be resized by dragging the bar, using keyboard shortcuts, or collapsed/expanded * using the built-in collapse buttons or the programmatic `toggle()` API. * Nested splitters are supported for more complex layouts. * * @example * ```html * * *
Start panel
*
End panel
*
* ``` * * @example * ```html * * *
Top panel
*
Bottom panel
*
* ``` * * @example * ```html * * * *
Top left
*
Bottom left
*
*
Right panel
*
* ``` * * @example * ```ts * // Programmatically collapse/expand a pane * const splitter = document.querySelector('igc-splitter'); * splitter.toggle('start'); // collapse start pane * splitter.toggle('start'); // expand start pane * ``` * * ## Keyboard interactions * * When the splitter bar is focused: * * | Key | Action | * |---|---| * | `Arrow Left` / `Arrow Right` | Resize panes (horizontal orientation) | * | `Arrow Up` / `Arrow Down` | Resize panes (vertical orientation) | * | `Home` | Snap start pane to its minimum size | * | `End` | Snap start pane to its maximum size | * | `Ctrl + Arrow Left` / `Ctrl + Arrow Up` | Collapse or expand the start pane | * | `Ctrl + Arrow Right` / `Ctrl + Arrow Down` | Collapse or expand the end pane | * * @element igc-splitter * * @fires igcResizeStart - Emitted once when a resize operation begins (pointer drag or keyboard). * @fires igcResizing - Emitted continuously while a pane is being resized. * @fires igcResizeEnd - Emitted once when a resize operation completes. * * @slot start - Content projected into the start (left/top) panel. * @slot end - Content projected into the end (right/bottom) panel. * * @csspart splitter-bar - The resizable bar element between the two panels. * @csspart drag-handle - The drag handle icon/element on the splitter bar. * @csspart start-pane - The container for the start panel content. * @csspart end-pane - The container for the end panel content. * @csspart start-collapse-btn - The button to collapse the start panel. * @csspart end-collapse-btn - The button to collapse the end panel. * @csspart start-expand-btn - The button to expand the start panel when collapsed. * @csspart end-expand-btn - The button to expand the end panel when collapsed. */ export default class IgcSplitterComponent extends IgcSplitterComponent_base { static readonly tagName = "igc-splitter"; static styles: import("lit").CSSResult[]; static register(): void; private readonly _internals; private readonly _separatorRef; private _startPaneState; private _endPaneState; private _collapsedPane; private _resizeState; private readonly _base; private readonly _startPane; private readonly _endPane; private get _separator(); private get _resizeDisallowed(); private get _isHorizontal(); private get _separatorCursor(); /** * The orientation of the splitter, which determines the direction of resizing and collapsing. * * @attr orientation * @default 'horizontal' */ orientation: SplitterOrientation; /** * When true, prevents the user from collapsing either pane. * This also hides the expand/collapse buttons on the splitter bar. * * @attr disable-collapse * @default false */ disableCollapse: boolean; /** * When true, prevents the user from resizing the panes by dragging the splitter bar or using keyboard shortcuts. * This also hides the drag handle on the splitter bar. * * @attr disable-resize * @default false */ disableResize: boolean; /** * When true, hides the expand/collapse buttons on the splitter bar. * * Note that the buttons will also be hidden if `disable-collapse` is true or * if a pane is currently collapsed. * * @attr hide-collapse-buttons * @default false */ hideCollapseButtons: boolean; /** * When true, hides the drag handle on the splitter bar. * * Note that the drag handle will also be hidden if `disable-resize` is true. * * @attr hide-drag-handle * @default false */ hideDragHandle: boolean; /** * The minimum size of the start pane. * * @attr start-min-size */ set startMinSize(value: string | undefined); get startMinSize(): string | undefined; /** * The minimum size of the end pane. * * @attr end-min-size */ set endMinSize(value: string | undefined); get endMinSize(): string | undefined; /** * The maximum size of the start pane. * * @attr start-max-size */ set startMaxSize(value: string | undefined); get startMaxSize(): string | undefined; /** * The maximum size of the end pane. * * @attr end-max-size */ set endMaxSize(value: string | undefined); get endMaxSize(): string | undefined; /** * The size of the start pane. * * @attr start-size */ set startSize(value: string | undefined); get startSize(): string | undefined; /** * The size of the end pane. * * @attr end-size */ set endSize(value: string | undefined); get endSize(): string | undefined; constructor(); protected update(changed: PropertyValues): void; protected updated(): void; private _handleBarPointerDown; private _getDragDelta; private _handleBarPointerMove; private _handleEndDrag; private _endDrag; /** Toggles the collapsed state of the specified pane. */ toggle(position: PanePosition): void; private _savePaneSizes; private _restoreSizesOnExpandCollapse; /** Measures the actual rendered size of a pane and returns it as a percentage of total size. */ private _paneRectAsPercent; /** Converts a CSS size string (px or %) to a percentage of total size. */ private _sizeToPercent; private _getStartPaneSizePercent; private _getMinMaxAsPercent; private _isCollapsed; private _updateBarAria; private _getPaneState; private _isPercentageSize; private _isAutoSize; private _normalizeValue; private _getFlex; private _handleResizePanes; private _preventDefaultForEvent; private _resolveDelta; private _handleMinMaxResize; private _handleExpanderAction; private _handleArrowsExpandCollapse; private _resizeStart; private _createPaneState; private _setMinMaxInPx; private _resizing; private _computeSize; private _resizeEnd; private _rectSize; private _calcNewSizes; private _getTotalSize; private _updatePanes; private _updatePaneStyles; private _setPaneMinMaxSizes; private _ensureMinConstraintIsWithinBounds; private _handleExpanderClick; private _resolvePartNames; private _renderBarControls; private _renderAccessibleLabel; private _renderSeparator; protected render(): import("lit-html").TemplateResult<1>; } export type { IgcSplitterComponentEventMap, IgcSplitterResizeEventArgs, IgcSplitterResizeEventDetail, }; declare global { interface HTMLElementTagNameMap { 'igc-splitter': IgcSplitterComponent; } }