igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
241 lines (240 loc) • 8.39 kB
TypeScript
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<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSplitterComponentEventMap>> & Constructor<LitElement>;
/**
* 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
* <!-- Basic horizontal splitter -->
* <igc-splitter>
* <div slot="start">Start panel</div>
* <div slot="end">End panel</div>
* </igc-splitter>
* ```
*
* @example
* ```html
* <!-- Vertical splitter with size constraints -->
* <igc-splitter orientation="vertical" start-min-size="100px" end-min-size="100px">
* <div slot="start">Top panel</div>
* <div slot="end">Bottom panel</div>
* </igc-splitter>
* ```
*
* @example
* ```html
* <!-- Nested splitters for a multi-pane layout -->
* <igc-splitter style="height: 600px;">
* <igc-splitter slot="start" orientation="vertical">
* <div slot="start">Top left</div>
* <div slot="end">Bottom left</div>
* </igc-splitter>
* <div slot="end">Right panel</div>
* </igc-splitter>
* ```
*
* @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<this>): 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;
}
}