import { LitElement, type TemplateResult } from 'lit'; import type { Constructor } from '../../common/mixins/constructor.js'; import type { ContextMenuPosition, PaneActionBehavior } from './backfill-types-dockmanager.js'; import { type IgcActivePaneEventArgs, type IgcContentPane, type IgcContextMenuMetadata, type IgcDockManagerComponentBase, type IgcDockManagerLayout, type IgcDockManagerPane, type IgcDockManagerPoint, type IgcDockManagerResourceStrings, type IgcDropTargetPaneInfo, type IgcFloatingPaneResizeEventArgs, type IgcFloatingPaneResizeMoveEventArgs, type IgcLayoutChangeEventArgs, type IgcPaneCloseEventArgs, type IgcPaneDragEndEventArgs, type IgcPaneDragOverEventArgs, type IgcPaneDragStartEventArgs, type IgcPaneFlyoutEventArgs, type IgcPaneHeaderConnectionEventArgs, type IgcPaneNavigatorMetadata, type IgcPanePinnedEventArgs, type IgcPaneScrollEventArgs, type IgcScrollConfig, type IgcSplitPane, type IgcSplitterResizeEventArgs, type IgcTabGroupPane, type IgcTabHeaderConnectionEventArgs } from './dockmanager.interfaces.js'; export interface IgcDockManagerEventMap { activePaneChanged: CustomEvent; floatingPaneResizeEnd: CustomEvent; floatingPaneResizeMove: CustomEvent; floatingPaneResizeStart: CustomEvent; layoutChange: CustomEvent; paneDragEnd: CustomEvent; paneDragOver: CustomEvent; paneDragStart: CustomEvent; paneHeaderConnected: CustomEvent; paneHeaderDisconnected: CustomEvent; paneClose: CustomEvent; panePinnedToggle: CustomEvent; paneFlyoutToggle: CustomEvent; paneScroll: CustomEvent; splitterResizeStart: CustomEvent; splitterResizeEnd: CustomEvent; tabHeaderConnected: CustomEvent; tabHeaderDisconnected: CustomEvent; } declare const IgcDockManagerComponent_base: Constructor> & Constructor; /** * A powerful, flexible dock manager component for laying out, docking, * undocking, pinning, and floating panes of content. * * @element igc-dockmanager * * @slot paneHeaderCloseButton - Custom close button for pane headers * @slot tabHeaderCloseButton - Custom close button for tab headers * @slot closeButton - Alias for pane/tab close button * @slot moreTabsButton - Slot for the "more tabs" button * @slot maximizeButton - Slot for maximize buttons * @slot minimizeButton - Slot for minimize buttons * @slot pinButton - Slot for pin buttons * @slot unpinButton - Slot for unpin buttons * @slot moreOptionsButton - Slot for more-options buttons on tab headers * @slot splitterHandle- Slot for custom splitter handle * * @fires activePaneChanged - Emitted when the active content pane changes * @fires floatingPaneResizeStart - Emitted when a floating pane resize interaction begins * @fires floatingPaneResizeMove - Emitted while a floating pane is being resized * @fires floatingPaneResizeEnd - Emitted when a floating pane resize interaction ends * @fires layoutChange - Emitted after the layout has been programmatically updated * @fires paneDragStart - Emitted when a pane drag operation begins * @fires paneDragOver - Emitted repeatedly as a pane is dragged * @fires paneDragEnd - Emitted when a pane drag operation ends * @fires paneHeaderConnected - Emitted when an `` is connected * @fires paneHeaderDisconnected - Emitted when an `` is disconnected * @fires paneClose - Emitted when a pane is closed * @fires panePinnedToggle - Emitted when a pane is pinned or unpinned * @fires paneScroll - Emitted when the user scrolls within a pane’s content * @fires splitterResizeStart - Emitted when a splitter resize starts * @fires splitterResizeEnd - Emitted when a splitter resize ends * @fires tabHeaderConnected - Emitted when an `` is connected * @fires tabHeaderDisconnected - Emitted when an `` is disconnected * @fires paneFlyoutToggle - Emitted when an unpinned pane's flyout state changes (opens or closes). */ export default class IgcDockManagerComponent extends IgcDockManagerComponent_base implements IgcDockManagerComponentBase { static readonly tagName = "igc-dockmanager"; static styles: import("lit").CSSResult[]; static register(): void; private _tabHeaderIconClicked; private activePaneInternalSet; private allowOuterProximityDock; private anyPaneIgnoringResizeConstraints; private autoScrollDirection; private isSplitterResizing; private lastPointerEvent; private splitPaneToResize; private splitterResizingContext; private rafId; private contentPaneId; private contentPanesElementMap; private cursorLocation; private dockedPanesContainer; private highlightedJoystick; private isDragging; private shouldMovePane; private domObserver; private resizeObserver; private panesElementMap; private paneToFocus; private paneVisibleRect; private proximityDockThreshold; private proximityOuterDockThreshold; private reason; private service; private keyboardService; private splitterRect; private splitterProximityDock; private scheduledCallbacks; private shouldClearActivePane; private showDockingIndicators; private splitterDockingIndicator; private tabHeadersMap; private unpinnedHeadersMap; private splitterOffset; private loaded; private _isValidDrop; private draggedTab; private cachedHeaderHeight; private templatableComponents; private readonly _resourceChangeHandler; /** @hidden @internal **/ documentOnlyDrag: boolean; draggedPaneElement?: HTMLElement; /** * Contains metadata about the currently targeted drop pane during drag. * * @internal */ dropTargetPaneInfo: IgcDropTargetPaneInfo | null; /** * The pane that is currently being hovered during a drag operation. * * @internal */ hoveredPane: IgcContentPane | null; /** * Contains metadata about the currently targeted drop pane during drag. * * @internal */ flyoutPane: IgcContentPane | null; /** * Interval for active auto-scrolling while dragging near edges. * * @internal */ private autoScrollInterval; /** * Metadata for rendering the context menu associated with a pane. * * @internal */ contextMenuMeta: IgcContextMenuMetadata | null; /** * The bounding rectangle of the drop shadow shown during docking. * * @internal */ dropShadowRect: DOMRect | null; /** * Tracks z-index values for floating panes to manage stacking order. * * @internal */ floatingPaneZIndicesMap: Map; /** * A map of content template references by ID, used for slotting custom pane content. * * @internal */ templates: Map; /** * Indicates whether a custom maximize button is defined via a slot. * * @internal */ hasCustomMaximizeButton: boolean; /** * Indicates whether a custom minimize button is defined via a slot. * * @internal */ hasCustomMinimizeButton: boolean; /** * Enables changing the mouse cursor when hovering over a tab or pane header. * * When set to `true`, the cursor changes from the default to `pointer`, * indicating that the header can be dragged (e.g., to dock or float the pane). * * @default false */ enableDragCursor: boolean; /** * Whether docking inside a pane is allowed. * * @default true */ allowInnerDock: boolean; /** * Whether maximize action button is displayed for the panes. * * @default true */ allowMaximize: boolean; /** * Determines the pane that is currently dragged. * * @type {IgcContentPane | IgcSplitPane | IgcTabGroupPane} */ draggedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane | null; /** * Determines the pane that is currently maximized. * * @type {IgcContentPane | IgcSplitPane | IgcTabGroupPane} */ maximizedPane: IgcContentPane | IgcSplitPane | IgcTabGroupPane; /** The layout configuration of the Dock Manager. */ layout: IgcDockManagerLayout; /** * Determines the active content pane. * * @default null */ activePane: IgcContentPane | null; /** * Configuration for edge auto-scrolling behavior during drag & resize operations. * * - `edgeThreshold`: Distance in pixels from the container's edge that triggers scrolling. * - `scrollSpeed`: Number of pixels to scroll per interval (affects scroll rate). * * @type {{ edgeThreshold: number, scrollSpeed: number }} * @default { edgeThreshold: 20, scrollSpeed: 15 } */ autoScrollConfig: IgcScrollConfig; /** * Determines whether docking indicators are displayed while docking * * @default false */ proximityDock: boolean; /** The resource strings of the dock manager. */ resourceStrings?: IgcDockManagerResourceStrings; /** * Determines when to display the pane headers - always or on hover of the pane. * * @type {'always' | 'onHoverOnly'} * @default always */ showPaneHeaders: 'always' | 'onHoverOnly'; /** * Determines which panes are affected by particular pane action such as closing or unpinning. * * @default allPanes */ unpinBehavior: PaneActionBehavior; /** * Whether docking over splitter is allowed * * @default false */ allowSplitterDock: boolean; /** * Determines whether docking into the root-level pane is allowed. * * When set to true (default), panes can be docked directly into the root container. * This is done by creating a new root pane and repositioning the existing root pane as a sibling to the newly docked content pane. * * @type { boolean } * @default true */ allowRootDock: boolean; /** * Specifies which docking orientations should apply the `FixedSize` sizing mode * when panes are dynamically created via docking. * * Possible values: * - `"none"`: Do not apply `FixedSize` on docking (default behavior). * - `"vertical"`: Apply `FixedSize` only when panes are docked vertically. * - `"horizontal"`: Apply `FixedSize` only when panes are docked horizontally. * - `"both"`: Apply `FixedSize` for both vertical and horizontal orientation. * * This setting affects only dynamically created panes via user docking actions. * It does not apply to programmatically created panes or layout restorations. * * @default "none" */ useFixedSizeOnDock: 'none' | 'vertical' | 'horizontal' | 'both'; /** * Which header icons are shown on hover. * * @type {'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'} * @default 'none' */ showHeaderIconOnHover: 'none' | 'closeOnly' | 'moreOptionsOnly' | 'all'; /** * Metadata for the pane-navigator overlay. * * @default null */ navigationPaneMeta: IgcPaneNavigatorMetadata | null; /** * Whether floating panes can be resized. * * @default true */ allowFloatingPanesResize: boolean; /** * Whether pane dragging stops when any of the pane's sides goes outside the DockManager’s bounds. * * @default false */ containedInBoundaries: boolean; /** * The drop position (pane) when docking. */ dropPosition: IgcDockManagerPoint; /** * Disables all keyboard navigation within the dock manager. * @default false */ disableKeyboardNavigation: boolean; /** * Position to open the context menu. */ contextMenuPosition: ContextMenuPosition; /** * Which panes get affected by close operations. * * @default 'allPanes' */ closeBehavior: PaneActionBehavior; /** * Gets the direction of the Dock Manager. */ get direction(): string; /** * Whether the last drop/drag target was valid. */ get isValidDrop(): boolean; set isValidDrop(value: boolean); protected flyoutPaneChanged(_oldValue: IgcContentPane | null, newValue: IgcContentPane | null): void; protected activePaneChange(oldValue: IgcContentPane, newValue: IgcContentPane): void; protected draggedPaneChanged(): void; protected layoutChanged(): void; protected containedInBoundariesChanged(): void; /** @hidden @internal **/ dropPositionChanged(): void; constructor(); /** @hidden @internal **/ connectedCallback(): void; private onResourceChangeHandler; /** @hidden @internal **/ willUpdate(): void; /** @hidden @internal **/ updated(): void; /** @hidden @internal **/ firstUpdated(): void; /** @hidden @internal **/ disconnectedCallback(): void; /** @hidden @internal **/ focusElement(): void; dropPane(): Promise; removePane(pane: IgcDockManagerPane): Promise; focusPane(contentId: string): Promise; /** @hidden @internal **/ getDockedPanesContainerRect(): DOMRect | undefined; private updateLayout; private handleFocusOut; private handleKeyDown; private handlePointerUp; private startResizeLoop; private handlePointerMove; private handlePointerDown; private onContextMenu; private splitterResizeAndScroll; private processTemplates; private removeCustomContentEventListeners; private restoreDraggedPanes; private clearDragState; private handleCustomContentFocusIn; private mutationCallback; private handleShadowRootFocusOut; private scheduleAfterRender; private findFocusablePane; private setActivePane; private setFocus; private handleSplitPaneRendered; private handleSplitterResizeStart; private handleSplitterResizeEnd; private handleFlyoutSplitterResizeEnd; private handleUnpinnedTabPointerDown; private handlePaneFlyout; private handleUnpinnedTabKeyDown; private handleUnpinnedHeaderFocus; private clearActivePane; private isPaneSizeWithinConstraints; private _getMinSizeFromPane; private restrictFloatingPaneSize; private renderDocumentHost; private renderSplitter; private removeHoveredPane; /** * Gets the actual pane header height, using a cached value when available. * All pane headers share the same height so the result is cached globally. * * Resolution order: * 1. Cached value * 2. Any currently visible header's offsetHeight * 3. Stand-in measurement (handles hidden headers and ::part overrides) * 4. PANE_HEADER_HEIGHT constant (40 px) * * @param pane - The content pane to get header height for * @returns The header height in pixels * @internal */ private getPaneHeaderHeight; /** * Measures the intended header height by creating a lightweight stand-in element * that replicates the pane header's styling without instantiating a Lit component. * * The stand-in is placed off-screen inside the dock manager's shadow root and * measured, then immediately removed. * * @returns The measured height in pixels, or 0 when measurement is not possible. * @internal */ private measureHeaderHeight; /** * Determines if the header should be shown based on pointer position within the pane. * Used only when showPaneHeaders is set to 'onHoverOnly'. * * Detection logic: * - Shows header if pointer Y is within the pane's top edge and header height * - When header is already visible, adds a 25% buffer zone to prevent flickering * at the boundary (the "leave" threshold is larger than the "enter" threshold) * * @param pane - The content pane being hovered * @param event - The pointer move event * @internal */ private togglePaneHeaderVisibility; private handleContentPaneFocus; private resolveAllowMaximize; private handlePinToggle; private handleMaximize; private getDropTargetParentRect; private getVisibleRect; private reduceRectBasedOnSplitters; private reduceRectBasedOnDockManagerBorders; private handleDropPositionChange; private getProximityDockPosition; private getInnerDropTargetParentRect; private paneDragMoved; private handleAutoScroll; private setSplitterDockingIndicatorVisibility; private setSplitterDockTarget; /** @hidden @internal **/ scrollPaneIntoView(pane: IgcDockManagerPane): void; private handlePaneDragStart; private handlePaneDragMove; private handlePaneDragEnd; private handlePaneClose; private emitPaneHeaderConnected; private emitPaneHeaderDisconnected; private handlePaneHeaderPointerDown; private handlePaneContentPointerDown; private handlePaneContentScroll; private handleTabSelectedIndexChanged; private handleHiddenTabSelected; private handleSelectedTabOutOfView; private handleTabsRendered; private handleTabSelectedChanged; private handlePaneContentMouseDown; private handleTabHeaderDragStart; private handleTabHeaderDragMove; private handleTabHeaderDragEnd; private handleTabHeaderPointerDown; private handleTabIconKeyDown; private handleTabIconClick; private handleTabHeaderFocus; private handlePaneNavigatorClosed; private handleFloatingPaneClose; private handleFloatingPaneResizeStart; private handleFloatingPaneResizeMove; private handleFloatingPaneResizeEnd; private handleFloatingPanePointerDown; private handleContextMenuClosed; private updateTemplates; private emitTabHeaderConnected; private emitTabHeaderDisconnected; /** @hidden @internal **/ paneClose(args: IgcPaneCloseEventArgs): CustomEvent; /** @hidden @internal **/ paneScroll(args: IgcPaneScrollEventArgs): CustomEvent; /** @hidden @internal **/ panePinnedToggle(args: IgcPanePinnedEventArgs): CustomEvent; /** * Emitted when an unpinned pane's flyout state changes (opens or closes). * * This event fires when: * - An unpinned pane is clicked and its flyout opens to display content * - An unpinned pane's flyout closes (user clicks elsewhere, switches to another unpinned pane, etc.) * - Switching between unpinned panes (fires twice: close event for old pane, open event for new pane) * * This event does NOT fire when: * - A pane is pinned or unpinned using the pin button (use panePinnedToggle for that) * - A pane is initially unpinned (only subsequent flyout open/close actions) * * Use this event to show/hide auxiliary UI, update summary views, or respond to unpinned pane visibility changes. * * @example * ```typescript * dockManager.addEventListener('paneFlyoutToggle', (event) => { * const { pane, isOpen } = event.detail; * if (isOpen) { * // Unpinned pane opened - show related UI * summaryPanel.style.display = 'none'; * } else { * // Unpinned pane closed - hide related UI * summaryPanel.style.display = 'block'; * } * }); * ``` */ paneFlyoutToggle(args: IgcPaneFlyoutEventArgs): CustomEvent; /** @hidden @internal **/ paneDragStart(args: IgcPaneDragStartEventArgs): CustomEvent; /** @hidden @internal **/ paneDragOver(args: IgcPaneDragOverEventArgs): CustomEvent; /** @hidden @internal **/ paneDragEnd(args: IgcPaneDragEndEventArgs): CustomEvent; /** @hidden @internal **/ floatingPaneResizeStart(args: IgcFloatingPaneResizeEventArgs): CustomEvent; /** @hidden @internal **/ floatingPaneResizeMove(eventArgs: IgcFloatingPaneResizeMoveEventArgs): CustomEvent; /** @hidden @internal **/ floatingPaneResizeEnd(args: IgcFloatingPaneResizeEventArgs): CustomEvent; /** @hidden @internal **/ layoutChange(): CustomEvent; private renderContentPane; private renderSplitPane; private renderPlaceholder; private renderUnpinnedTabArea; private renderDockingIndicators; private renderRootDockingIndicator; private renderEdgeDockingIndicator; private renderTabGroup; private renderTabPanel; private renderTabHeader; private renderFlyoutPane; private renderPaneNavigator; private renderDropShadow; private renderFloatingPanes; private renderContextMenu; private renderButtonsTemplates; protected render(): TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'igc-dockmanager': IgcDockManagerComponent; } } export {};