igniteui-webcomponents 7.0.1 → 7.1.1

package/components/splitter/splitter.d.ts

@@ -0,0 +1,240 @@
+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;
+    }
+}