@xlabs-store/core 0.0.1

package/dist/collection/components/x-splitter/x-splitter.js

@@ -0,0 +1,884 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, Host } from "@stencil/core";
+export class XSplitter {
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Orientation direction
+     */
+    orientation = 'horizontal';
+    /**
+     * Orientation (alias for vertical layout)
+     * Simultaneously existing with orientation, orientation takes priority
+     */
+    vertical = false;
+    /**
+     * Layout direction (alias for orientation)
+     */
+    layout;
+    /**Left Panel
+    Right Panel
+     * Lazy mode - dragging does not update size immediately, but updates when released
+     */
+    lazy = false;
+    /**
+     * Custom collapsible icon HTML
+     */
+    collapsibleIcon;
+    /**
+     * Custom dragger icon HTML
+     */
+    draggerIcon;
+    /**
+     * Semantic DOM class names
+     */
+    classNames;
+    /**
+     * Semantic DOM styles
+     */
+    styles;
+    // ========================================
+    // STATE
+    // ========================================
+    panelSizes = [];
+    isDragging = false;
+    lazyPosition = null;
+    collapsedPanels = [];
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Panel size change callback
+     */
+    xResize;
+    /**
+     * Drag start callback
+     */
+    xResizeStart;
+    /**
+     * Drag end callback
+     */
+    xResizeEnd;
+    /**
+     * Callback when expanding or collapsing
+     */
+    xCollapse;
+    // ========================================
+    // PRIVATE PROPERTIES
+    // ========================================
+    containerRef = null;
+    activeBarIndex = -1;
+    startPos = 0;
+    startSizes = [];
+    panelInfos = [];
+    totalSize = 0;
+    resizeObserver = null;
+    mutationObserver = null;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    componentWillLoad() {
+        this.initializePanels();
+    }
+    componentDidLoad() {
+        this.calculatePanelSizes();
+        this.setupMutationObserver();
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handleLayoutChange() {
+        this.calculatePanelSizes();
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    handlePanelResizeStart(ev) {
+        const { barIndex, clientX, clientY } = ev.detail;
+        this.startDrag(barIndex, this.getDirection() === 'horizontal' ? clientX : clientY);
+    }
+    handlePanelCollapse(ev) {
+        const { panelIndex, direction } = ev.detail;
+        this.toggleCollapse(panelIndex, direction);
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    getDirection() {
+        return this.layout || this.orientation || (this.vertical ? 'vertical' : 'horizontal');
+    }
+    initializePanels() {
+        const panels = this.getPanels();
+        panels.forEach((panel, index) => {
+            panel.setAttribute('slot', `panel-${index}`);
+        });
+        this.collapsedPanels = panels.map(() => false);
+    }
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.initializePanels();
+            this.calculatePanelSizes();
+        });
+        this.mutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    getPanels() {
+        return Array.from(this.el.querySelectorAll('x-splitter-panel'));
+    }
+    /**
+     * Calculates the size of each panel based on container size and panel constraints.
+     *
+     * Flow:
+     * 1. Determines the total available size (width or height) of the container.
+     * 2. Subtracts the space taken by splitter bars.
+     * 3. Iterates through panels to categorize them:
+     *    - Collapsed panels take 0 space.
+     *    - Panels with `defaultSize` (pixels or %) take that specific amount.
+     *    - Remaining panels are treated as flexible.
+     * 4. Calculates the remaining space after allocating fixed sizes.
+     * 5. Distributes remaining space equally among flexible panels.
+     * 6. Applies min/max constraints to all panels.
+     * 7. Updates internal `panelSizes` state and applies styles.
+     */
+    calculatePanelSizes() {
+        if (!this.containerRef)
+            return;
+        const direction = this.getDirection();
+        const containerRect = this.containerRef.getBoundingClientRect();
+        this.totalSize = direction === 'horizontal' ? containerRect.width : containerRect.height;
+        const panels = this.getPanels();
+        if (panels.length === 0)
+            return;
+        const barCount = Math.max(0, panels.length - 1);
+        const barSize = 6; // Matching $splitter-bar-size
+        const availableSize = Math.max(0, this.totalSize - barCount * barSize);
+        this.panelInfos = [];
+        let totalDefinedSize = 0;
+        let flexPanelCount = 0;
+        const currentSizesExist = this.panelSizes.length === panels.length;
+        panels.forEach((panel, index) => {
+            const defaultSize = panel.defaultSize;
+            const min = this.parseSize(panel.min, availableSize) || 0;
+            const max = this.parseSize(panel.max, availableSize) || availableSize;
+            const resizable = panel.resizable !== false;
+            const collapsible = panel.collapsible || false;
+            const collapsed = this.collapsedPanels[index] || false;
+            let size;
+            if (collapsed) {
+                size = 0;
+            }
+            else if (currentSizesExist) {
+                // Use current size if available to prevent snap-back
+                size = this.panelSizes[index];
+                totalDefinedSize += size;
+            }
+            else if (defaultSize !== undefined && defaultSize !== null) {
+                size = this.parseSize(defaultSize, availableSize) || 0;
+                totalDefinedSize += size;
+            }
+            else {
+                size = -1;
+                flexPanelCount++;
+            }
+            this.panelInfos.push({
+                size,
+                min,
+                max,
+                resizable,
+                collapsible,
+                defaultSize,
+                collapsed,
+                collapsedSize: 0,
+            });
+        });
+        const remainingSize = availableSize - totalDefinedSize;
+        const flexSize = flexPanelCount > 0 ? remainingSize / flexPanelCount : 0;
+        this.panelInfos.forEach((info) => {
+            if (info.size === -1) {
+                info.size = Math.max(info.min, Math.min(info.max, flexSize));
+            }
+        });
+        this.panelSizes = this.panelInfos.map((info) => info.size);
+        this.updatePanelStyles();
+    }
+    parseSize(size, total) {
+        if (size === undefined || size === null)
+            return null;
+        if (typeof size === 'number')
+            return size;
+        const str = String(size).trim();
+        if (str.endsWith('%')) {
+            const percent = parseFloat(str);
+            return (percent / 100) * total;
+        }
+        if (str.endsWith('px')) {
+            return parseFloat(str);
+        }
+        return parseFloat(str) || null;
+    }
+    updatePanelStyles() {
+        const panels = this.getPanels();
+        const direction = this.getDirection();
+        panels.forEach((panel, index) => {
+            const size = this.panelSizes[index] || 0;
+            const collapsed = this.collapsedPanels[index] || false;
+            // Force requestAnimationFrame to ensure style updates are applied in next frame
+            // This helps with smoother rendering during rapid mouse movements
+            requestAnimationFrame(() => {
+                if (direction === 'horizontal') {
+                    panel.style.width = collapsed ? '0px' : `${size}px`;
+                    panel.style.height = '100%';
+                    panel.style.flexBasis = collapsed ? '0px' : `${size}px`;
+                }
+                else {
+                    panel.style.height = collapsed ? '0px' : `${size}px`;
+                    panel.style.width = '100%';
+                    panel.style.flexBasis = collapsed ? '0px' : `${size}px`;
+                }
+                panel.style.flexGrow = '0';
+                panel.style.flexShrink = '0';
+                panel.style.overflow = collapsed ? 'hidden' : '';
+            });
+        });
+    }
+    /**
+     * Initiates the drag operation for resizing panels.
+     *
+     * Flow:
+     * 1. Records the active bar index and starting mouse position.
+     * 2. Snapshots current panel sizes.
+     * 3. Sets `isDragging` state.
+     * 4. Attaches global mouse listeners for drag interaction.
+     * 5. Updates cursor style to indicate resizing.
+     *
+     * @param barIndex - Index of the splitter bar being dragged.
+     * @param clientPos - Initial X or Y coordinate.
+     */
+    startDrag(barIndex, clientPos) {
+        this.activeBarIndex = barIndex;
+        this.startPos = clientPos;
+        this.startSizes = [...this.panelSizes];
+        this.isDragging = true;
+        this.xResizeStart.emit([...this.panelSizes]);
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+        document.body.style.cursor = this.getDirection() === 'horizontal' ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    }
+    /**
+     * Handles mouse move during drag.
+     * Calculates delta and applies resize (or updates lazy position).
+     */
+    handleMouseMove = (e) => {
+        if (this.activeBarIndex < 0)
+            return;
+        // Prevent default behavior (text selection, etc.)
+        e.preventDefault();
+        const direction = this.getDirection();
+        const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
+        const delta = currentPos - this.startPos;
+        if (this.lazy) {
+            this.lazyPosition = currentPos;
+        }
+        else {
+            this.applyResize(delta);
+        }
+    };
+    /**
+     * Handles mouse up to end drag.
+     * Applies final resize if lazy mode, clears listeners and state.
+     */
+    handleMouseUp = (e) => {
+        if (this.lazy && this.lazyPosition !== null) {
+            const direction = this.getDirection();
+            const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
+            const delta = currentPos - this.startPos;
+            this.applyResize(delta);
+            this.lazyPosition = null;
+        }
+        this.activeBarIndex = -1;
+        this.isDragging = false;
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        this.xResizeEnd.emit([...this.panelSizes]);
+    };
+    /**
+     * Applies the resize delta to adjacent panels.
+     *
+     * Flow:
+     * 1. Identifies the previous and next panels relative to the drag bar.
+     * 2. Checks if resizing is allowed (not disabled, not collapsed).
+     * 3. Calculates proposed new sizes based on delta.
+     * 4. Constrains new sizes against min/max limits for both panels.
+     *    - If one panel hits a limit, the delta is adjusted for the other.
+     * 5. Updates `panelSizes` state and emits resize event.
+     *
+     * @param delta - The change in pixels from start position.
+     */
+    applyResize(delta) {
+        const prevIndex = this.activeBarIndex;
+        const nextIndex = this.activeBarIndex + 1;
+        if (prevIndex < 0 || nextIndex >= this.panelInfos.length)
+            return;
+        const prevInfo = this.panelInfos[prevIndex];
+        const nextInfo = this.panelInfos[nextIndex];
+        if (!prevInfo.resizable || !nextInfo.resizable)
+            return;
+        if (prevInfo.collapsed || nextInfo.collapsed)
+            return;
+        // Total size available for the two adjacent panels
+        const S = this.startSizes[prevIndex] + this.startSizes[nextIndex];
+        /**
+         * Constraints:
+         * 1. prevInfo.min <= newPrevSize <= prevInfo.max
+         * 2. nextInfo.min <= S - newPrevSize <= nextInfo.max
+         *    => S - nextInfo.max <= newPrevSize <= S - nextInfo.min
+         */
+        const minP = Math.max(prevInfo.min, S - nextInfo.max);
+        const maxP = Math.min(prevInfo.max, S - nextInfo.min);
+        let newPrevSize = this.startSizes[prevIndex] + delta;
+        newPrevSize = Math.max(minP, Math.min(maxP, newPrevSize));
+        const newNextSize = S - newPrevSize;
+        const newSizes = [...this.panelSizes];
+        newSizes[prevIndex] = newPrevSize;
+        newSizes[nextIndex] = newNextSize;
+        this.panelSizes = newSizes;
+        this.panelInfos[prevIndex].size = newPrevSize;
+        this.panelInfos[nextIndex].size = newNextSize;
+        this.updatePanelStyles();
+        this.xResize.emit([...this.panelSizes]);
+    }
+    /**
+     * Toggles the collapse state of a panel.
+     *
+     * Flow:
+     * 1. Identifies the target panel based on direction.
+     * 2. Toggles the collapsed boolean in state.
+     * 3. If collapsing: saves current size to `collapsedSize` and sets size to 0.
+     * 4. If expanding: restores size from `collapsedSize`.
+     * 5. Updates styles and emits collapse event.
+     *
+     * @param barIndex - Index of the bar initiating collapse.
+     * @param direction - 'start' (previous panel) or 'end' (next panel).
+     */
+    toggleCollapse(barIndex, direction) {
+        const targetIndex = direction === 'start' ? barIndex : barIndex + 1;
+        const panels = this.getPanels();
+        if (targetIndex < 0 || targetIndex >= panels.length)
+            return;
+        const wasCollapsed = this.collapsedPanels[targetIndex];
+        const newCollapsed = [...this.collapsedPanels];
+        newCollapsed[targetIndex] = !wasCollapsed;
+        this.collapsedPanels = newCollapsed;
+        if (!wasCollapsed) {
+            this.panelInfos[targetIndex].collapsedSize = this.panelSizes[targetIndex];
+            this.panelSizes[targetIndex] = 0;
+        }
+        else {
+            const restoredSize = this.panelInfos[targetIndex].collapsedSize || this.panelInfos[targetIndex].size;
+            this.panelSizes[targetIndex] = restoredSize;
+        }
+        this.panelInfos[targetIndex].collapsed = !wasCollapsed;
+        this.updatePanelStyles();
+        this.xCollapse.emit({
+            collapsed: [...this.collapsedPanels],
+            sizes: [...this.panelSizes],
+        });
+    }
+    /**
+     * Resets the panels adjacent to a bar to their default sizes.
+     * Typically triggered by double-clicking the splitter bar.
+     *
+     * @param barIndex - Index of the bar.
+     */
+    resetToDefault(barIndex) {
+        const prevIndex = barIndex;
+        const nextIndex = barIndex + 1;
+        if (prevIndex < 0 || nextIndex >= this.panelInfos.length)
+            return;
+        const prevInfo = this.panelInfos[prevIndex];
+        const nextInfo = this.panelInfos[nextIndex];
+        const direction = this.getDirection();
+        const containerRect = this.containerRef?.getBoundingClientRect();
+        if (!containerRect)
+            return;
+        const availableSize = direction === 'horizontal' ? containerRect.width : containerRect.height;
+        const prevDefault = this.parseSize(prevInfo.defaultSize, availableSize);
+        const nextDefault = this.parseSize(nextInfo.defaultSize, availableSize);
+        if (prevDefault !== null || nextDefault !== null) {
+            const newSizes = [...this.panelSizes];
+            if (prevDefault !== null)
+                newSizes[prevIndex] = prevDefault;
+            if (nextDefault !== null)
+                newSizes[nextIndex] = nextDefault;
+            this.panelSizes = newSizes;
+            this.updatePanelStyles();
+            this.xResize.emit([...this.panelSizes]);
+        }
+    }
+    handleKeyDown = (e, index) => {
+        const direction = this.getDirection();
+        const step = 10;
+        let delta = 0;
+        if (direction === 'horizontal') {
+            if (e.key === 'ArrowLeft')
+                delta = -step;
+            if (e.key === 'ArrowRight')
+                delta = step;
+        }
+        else {
+            if (e.key === 'ArrowUp')
+                delta = -step;
+            if (e.key === 'ArrowDown')
+                delta = step;
+        }
+        if (delta !== 0) {
+            e.preventDefault();
+            this.activeBarIndex = index;
+            this.startSizes = [...this.panelSizes];
+            this.applyResize(delta);
+            this.activeBarIndex = -1;
+        }
+    };
+    /**
+     * Renders the draggable splitter bar between panels.
+     * Includes logic for collapse buttons if configured.
+     *
+     * @param index - Index of the bar.
+     * @returns JSX.Element
+     */
+    renderDragBar(index) {
+        const direction = this.getDirection();
+        const panels = this.getPanels();
+        const prevPanel = panels[index];
+        const nextPanel = panels[index + 1];
+        // Safety check if panels are not yet available
+        if (!prevPanel || !nextPanel)
+            return null;
+        const prevCollapsible = this.getCollapsibleConfig(prevPanel.collapsible);
+        const nextCollapsible = this.getCollapsibleConfig(nextPanel.collapsible);
+        // Ant Design behavior: collapse direction is intuitive
+        // If clicking "start" arrow on the bar, it collapses the PREV panel
+        // If clicking "end" arrow on the bar, it collapses the NEXT panel
+        const showStartArrow = prevCollapsible.end || nextCollapsible.start;
+        const showEndArrow = nextCollapsible.end || prevCollapsible.start;
+        const prevCollapsed = this.collapsedPanels[index] || false;
+        const nextCollapsed = this.collapsedPanels[index + 1] || false;
+        const barClasses = {
+            'x-splitter-bar': true,
+            'x-splitter-bar-horizontal': direction === 'horizontal',
+            'x-splitter-bar-vertical': direction === 'vertical',
+            'x-splitter-bar-dragging': this.isDragging && this.activeBarIndex === index,
+            'x-splitter-bar-collapsed': prevCollapsed || nextCollapsed,
+            ...(this.classNames?.bar ? { [this.classNames.bar]: true } : {}),
+        };
+        const handleMouseDown = (e) => {
+            e.preventDefault();
+            this.startDrag(index, direction === 'horizontal' ? e.clientX : e.clientY);
+        };
+        const handleDoubleClick = (e) => {
+            e.preventDefault();
+            this.resetToDefault(index);
+        };
+        return (h("div", { class: barClasses, key: `bar-${index}`, onMouseDown: handleMouseDown, onDblClick: handleDoubleClick, onKeyDown: (e) => this.handleKeyDown(e, index), style: this.styles?.bar, tabIndex: 0, role: "separator", "aria-orientation": direction }, h("div", { class: "x-splitter-bar-dragger", style: this.styles?.handle }, this.draggerIcon ? (h("span", { class: "x-splitter-bar-dragger-icon", innerHTML: this.draggerIcon })) : (h("span", { class: "x-splitter-bar-dragger-icon" }, direction === 'horizontal' ? (h("svg", { viewBox: "0 0 8 32", width: "8", height: "32", fill: "currentColor" }, h("rect", { x: "3", y: "0", width: "2", height: "32", rx: "1", opacity: "0.4" }))) : (h("svg", { viewBox: "0 0 32 8", width: "32", height: "8", fill: "currentColor" }, h("rect", { x: "0", y: "3", width: "32", height: "2", rx: "1", opacity: "0.4" })))))), showStartArrow && (h("button", { type: "button", class: "x-splitter-bar-collapse-btn x-splitter-bar-collapse-start", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => { e.stopPropagation(); this.toggleCollapse(index, 'start'); }, "aria-label": "Collapse previous panel" }, this.collapsibleIcon?.start ? (h("span", { innerHTML: this.collapsibleIcon.start })) : (this.renderCollapseArrow(direction, 'start', prevCollapsed)))), showEndArrow && (h("button", { type: "button", class: "x-splitter-bar-collapse-btn x-splitter-bar-collapse-end", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => { e.stopPropagation(); this.toggleCollapse(index, 'end'); }, "aria-label": "Collapse next panel" }, this.collapsibleIcon?.end ? (h("span", { innerHTML: this.collapsibleIcon.end })) : (this.renderCollapseArrow(direction, 'end', nextCollapsed))))));
+    }
+    getCollapsibleConfig(collapsible) {
+        if (!collapsible)
+            return { start: false, end: false };
+        if (collapsible === true)
+            return { start: true, end: true };
+        return {
+            start: collapsible.start || false,
+            end: collapsible.end || false,
+        };
+    }
+    renderCollapseArrow(direction, position, isCollapsed) {
+        let arrowDirection;
+        if (direction === 'horizontal') {
+            if (position === 'start') {
+                arrowDirection = isCollapsed ? 'right' : 'left';
+            }
+            else {
+                arrowDirection = isCollapsed ? 'left' : 'right';
+            }
+        }
+        else {
+            if (position === 'start') {
+                arrowDirection = isCollapsed ? 'down' : 'up';
+            }
+            else {
+                arrowDirection = isCollapsed ? 'up' : 'down';
+            }
+        }
+        const paths = {
+            left: 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',
+            right: 'M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z',
+            up: 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z',
+            down: 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z',
+        };
+        return (h("svg", { viewBox: "0 0 24 24", width: "12", height: "12", fill: "currentColor" }, h("path", { d: paths[arrowDirection] })));
+    }
+    setContainerRef = (el) => {
+        this.containerRef = el;
+        if (el) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.calculatePanelSizes();
+            });
+            this.resizeObserver.observe(el);
+        }
+    };
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the Splitter component.
+     *
+     * Flow:
+     * 1. Determines layout direction (horizontal/vertical).
+     * 2. Iterates through child panels (projected via slots).
+     * 3. Interleaves panels with splitter bars:
+     *    [Panel 0] - [Bar 0] - [Panel 1] - [Bar 1] - ...
+     * 4. Renders lazy drag indicator if active.
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const direction = this.getDirection();
+        const panels = this.getPanels();
+        const hostClasses = {
+            'x-splitter': true,
+            'x-splitter-horizontal': direction === 'horizontal',
+            'x-splitter-vertical': direction === 'vertical',
+            'x-splitter-dragging': this.isDragging,
+            ...(this.classNames?.container ? { [this.classNames.container]: true } : {}),
+        };
+        // Build content with panels and bars interleaved
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const content = [];
+        panels.forEach((_, index) => {
+            content.push(h("slot", { name: `panel-${index}`, key: `slot-${index}` }));
+            if (index < panels.length - 1) {
+                content.push(this.renderDragBar(index));
+            }
+        });
+        return (h(Host, { key: '65754cfed5bb06105771ec9d3d730adb73979652', class: hostClasses }, h("div", { key: '6742e777848152398293727e80d0d4be273bf69b', class: "x-splitter-container", ref: this.setContainerRef, style: this.styles?.container }, content.length > 0 ? content : h("slot", null)), this.lazy && this.isDragging && this.lazyPosition !== null && (h("div", { key: 'a0016aa0570b0fc4db9de0c45b0e04131ec157c8', class: {
+                'x-splitter-lazy-indicator': true,
+                'x-splitter-lazy-indicator-horizontal': direction === 'horizontal',
+                'x-splitter-lazy-indicator-vertical': direction === 'vertical',
+            }, style: {
+                [direction === 'horizontal' ? 'left' : 'top']: `${this.lazyPosition}px`,
+            } }))));
+    }
+    static get is() { return "x-splitter"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-splitter.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-splitter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SplitterOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "SplitterOrientation": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-splitter/types.ts::SplitterOrientation",
+                            "referenceLocation": "SplitterOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation direction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation (alias for vertical layout)\r\nSimultaneously existing with orientation, orientation takes priority"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SplitterOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "SplitterOrientation": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-splitter/types.ts::SplitterOrientation",
+                            "referenceLocation": "SplitterOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction (alias for orientation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left Panel\r\nRight Panel\r\nLazy mode - dragging does not update size immediately, but updates when released"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "false"
+            },
+            "collapsibleIcon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CollapsibleIcon",
+                    "resolved": "CollapsibleIcon",
+                    "references": {
+                        "CollapsibleIcon": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-splitter/types.ts::CollapsibleIcon",
+                            "referenceLocation": "CollapsibleIcon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom collapsible icon HTML"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "draggerIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom dragger icon HTML"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dragger-icon"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n    container?: string;\r\n    bar?: string;\r\n    handle?: string;\r\n  }",
+                    "resolved": "{ container?: string; bar?: string; handle?: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic DOM class names"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n    container?: Record<string, string>;\r\n    bar?: Record<string, string>;\r\n    handle?: Record<string, string>;\r\n  }",
+                    "resolved": "{ container?: Record<string, string>; bar?: Record<string, string>; handle?: Record<string, string>; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic DOM styles"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "panelSizes": {},
+            "isDragging": {},
+            "lazyPosition": {},
+            "collapsedPanels": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xResize",
+                "name": "xResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel size change callback"
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "xResizeStart",
+                "name": "xResizeStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Drag start callback"
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "xResizeEnd",
+                "name": "xResizeEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Drag end callback"
+                },
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                }
+            }, {
+                "method": "xCollapse",
+                "name": "xCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback when expanding or collapsing"
+                },
+                "complexType": {
+                    "original": "SplitterCollapseDetail",
+                    "resolved": "SplitterCollapseDetail",
+                    "references": {
+                        "SplitterCollapseDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-splitter/types.ts::SplitterCollapseDetail",
+                            "referenceLocation": "SplitterCollapseDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "handleLayoutChange"
+            }, {
+                "propName": "vertical",
+                "methodName": "handleLayoutChange"
+            }, {
+                "propName": "layout",
+                "methodName": "handleLayoutChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "xPanelResizeStart",
+                "method": "handlePanelResizeStart",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "xPanelCollapse",
+                "method": "handlePanelCollapse",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}