atomicuilibrary 0.0.1

package/dist/collection/components/resizable-panel/resizable-panel.js

@@ -0,0 +1,874 @@
+import { Host, h } from "@stencil/core";
+export class AppResizablePanel {
+    el;
+    direction = 'horizontal';
+    panels = [];
+    handleSize = 8;
+    handleColor = '#d1d5db';
+    handleHoverColor = '#3DCD58';
+    minPanelSize = 10;
+    maxPanelSize = -1;
+    saveState = false;
+    stateKey = 'resizable-panel-state';
+    theme = 'light';
+    animated = false;
+    showHandleIcon = true;
+    snapToEdge = false;
+    snapThreshold = 30;
+    internalPanels = [];
+    isDragging = false;
+    dragHandleIndex = -1;
+    dragStartPos = 0;
+    dragStartSizes = [];
+    panelResize;
+    panelCollapse;
+    resizeStart;
+    resizeEnd;
+    containerRef;
+    panelRefs = [];
+    hasMouseMoved = false;
+    applyResizeDelta(index, deltaPx, containerSize) {
+        if (!containerSize || index < 0)
+            return;
+        const newPanels = [...this.internalPanels];
+        const leftPanel = newPanels[index];
+        const rightPanel = newPanels[index + 1];
+        if (!leftPanel || !rightPanel)
+            return;
+        const totalPairSize = (this.dragStartSizes[index] ?? leftPanel.size ?? 0) + (this.dragStartSizes[index + 1] ?? rightPanel.size ?? 0);
+        const deltaPercent = (deltaPx / containerSize) * 100;
+        let newLeftSize = (this.dragStartSizes[index] ?? leftPanel.size ?? 0) + deltaPercent;
+        let newRightSize = (this.dragStartSizes[index + 1] ?? rightPanel.size ?? 0) - deltaPercent;
+        const minLeft = leftPanel.minSize ?? this.minPanelSize;
+        const minRight = rightPanel.minSize ?? this.minPanelSize;
+        const maxLeft = leftPanel.maxSize ?? this.maxPanelSize;
+        const maxRight = rightPanel.maxSize ?? this.maxPanelSize;
+        if (newLeftSize < minLeft) {
+            newLeftSize = minLeft;
+            newRightSize = totalPairSize - newLeftSize;
+        }
+        if (newRightSize < minRight) {
+            newRightSize = minRight;
+            newLeftSize = totalPairSize - newRightSize;
+        }
+        if (maxLeft > 0 && newLeftSize > maxLeft) {
+            newLeftSize = maxLeft;
+            newRightSize = totalPairSize - newLeftSize;
+        }
+        if (maxRight > 0 && newRightSize > maxRight) {
+            newRightSize = maxRight;
+            newLeftSize = totalPairSize - newRightSize;
+        }
+        const thresholdPercent = this.snapToEdge && this.snapThreshold > 0 && containerSize > 0
+            ? (this.snapThreshold / containerSize) * 100
+            : 0;
+        const collapseEvents = [];
+        let leftSize = newLeftSize;
+        let rightSize = newRightSize;
+        if (thresholdPercent > 0) {
+            if (leftSize <= thresholdPercent) {
+                const wasCollapsed = leftPanel.collapsed;
+                leftPanel.collapsed = true;
+                leftSize = 0;
+                rightSize = totalPairSize;
+                rightPanel.collapsed = false;
+                if (!wasCollapsed) {
+                    collapseEvents.push({ panel: leftPanel, collapsed: true });
+                }
+            }
+            else if (leftPanel.collapsed && leftSize > thresholdPercent) {
+                leftPanel.collapsed = false;
+                leftSize = Math.max(leftSize, minLeft);
+                rightSize = totalPairSize - leftSize;
+                collapseEvents.push({ panel: leftPanel, collapsed: false });
+            }
+            if (rightSize <= thresholdPercent) {
+                const wasCollapsed = rightPanel.collapsed;
+                rightPanel.collapsed = true;
+                rightSize = 0;
+                leftSize = totalPairSize;
+                leftPanel.collapsed = false;
+                if (!wasCollapsed) {
+                    collapseEvents.push({ panel: rightPanel, collapsed: true });
+                }
+            }
+            else if (rightPanel.collapsed && rightSize > thresholdPercent) {
+                rightPanel.collapsed = false;
+                rightSize = Math.max(rightSize, minRight);
+                leftSize = totalPairSize - rightSize;
+                collapseEvents.push({ panel: rightPanel, collapsed: false });
+            }
+        }
+        else {
+            if (leftPanel.collapsed && leftSize > 0) {
+                leftPanel.collapsed = false;
+            }
+            if (rightPanel.collapsed && rightSize > 0) {
+                rightPanel.collapsed = false;
+            }
+        }
+        const sizesChanged = leftPanel.size !== leftSize || rightPanel.size !== rightSize || collapseEvents.length > 0;
+        leftPanel.size = leftSize;
+        rightPanel.size = rightSize;
+        this.internalPanels = [...newPanels];
+        if (sizesChanged) {
+            this.panelResize.emit({ panels: this.internalPanels, index });
+            collapseEvents.forEach(evt => this.panelCollapse.emit(evt));
+        }
+    }
+    componentWillLoad() {
+        this.parsePanels();
+        if (this.saveState) {
+            this.loadState();
+        }
+    }
+    handlePanelsChange() {
+        // Only re-parse if not currently dragging to avoid interference
+        if (!this.isDragging) {
+            this.parsePanels();
+        }
+    }
+    parsePanels() {
+        let parsedPanels = typeof this.panels === 'string' ? JSON.parse(this.panels) : this.panels;
+        if (!parsedPanels || parsedPanels.length === 0) {
+            parsedPanels = [
+                { id: 'panel-1', size: 50 },
+                { id: 'panel-2', size: 50 }
+            ];
+        }
+        // Normalize sizes to percentages
+        const totalSize = parsedPanels.reduce((sum, p) => sum + (p.size || 0), 0);
+        if (totalSize > 0 && Math.abs(totalSize - 100) > 0.1) {
+            // Only normalize if total is not already close to 100
+            parsedPanels = parsedPanels.map((p) => ({
+                ...p,
+                size: ((p.size || 0) / totalSize) * 100,
+                minSize: p.minSize || this.minPanelSize,
+                maxSize: p.maxSize || this.maxPanelSize,
+                resizable: p.resizable !== false,
+                collapsible: p.collapsible || false,
+                collapsed: p.collapsed || false,
+                collapseDirection: p.collapseDirection || (this.direction === 'horizontal' ? 'left' : 'up'),
+            }));
+        }
+        else {
+            // Sizes already normalized, just add defaults
+            parsedPanels = parsedPanels.map((p) => ({
+                ...p,
+                minSize: p.minSize || this.minPanelSize,
+                maxSize: p.maxSize || this.maxPanelSize,
+                resizable: p.resizable !== false,
+                collapsible: p.collapsible || false,
+                collapsed: p.collapsed || false,
+                collapseDirection: p.collapseDirection || (this.direction === 'horizontal' ? 'left' : 'up'),
+            }));
+        }
+        this.internalPanels = parsedPanels;
+    }
+    loadState() {
+        if (!this.saveState)
+            return; // Don't load state if saveState is false
+        try {
+            const saved = localStorage.getItem(this.stateKey);
+            if (saved) {
+                const savedPanels = JSON.parse(saved);
+                // Only apply saved state if it matches the current panels structure
+                if (savedPanels && savedPanels.length === this.internalPanels.length) {
+                    this.internalPanels = this.internalPanels.map((panel, idx) => ({
+                        ...panel,
+                        size: savedPanels[idx]?.size || panel.size,
+                        collapsed: savedPanels[idx]?.collapsed || panel.collapsed,
+                    }));
+                }
+            }
+        }
+        catch (e) {
+            console.warn('Failed to load panel state:', e);
+        }
+    }
+    saveStateToStorage() {
+        if (this.saveState) {
+            try {
+                const state = this.internalPanels.map(p => ({
+                    id: p.id,
+                    size: p.size,
+                    collapsed: p.collapsed,
+                }));
+                localStorage.setItem(this.stateKey, JSON.stringify(state));
+            }
+            catch (e) {
+                console.warn('Failed to save panel state:', e);
+            }
+        }
+    }
+    handleMouseDown(index, event) {
+        const leftPanel = this.internalPanels[index];
+        const rightPanel = this.internalPanels[index + 1];
+        if (!leftPanel?.resizable || rightPanel?.resizable === false)
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.dragHandleIndex = index;
+        this.dragStartPos = this.direction === 'horizontal' ? event.clientX : event.clientY;
+        this.dragStartSizes = this.internalPanels.map(p => p.size ?? 0);
+        this.hasMouseMoved = false;
+        this.resizeStart.emit({ index });
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    }
+    handleMouseMove = (event) => {
+        if (!this.isDragging || this.dragHandleIndex === -1)
+            return;
+        event.preventDefault();
+        // Mark that mouse has moved
+        this.hasMouseMoved = true;
+        const currentPos = this.direction === 'horizontal' ? event.clientX : event.clientY;
+        const delta = currentPos - this.dragStartPos;
+        const containerSize = this.direction === 'horizontal'
+            ? this.containerRef.offsetWidth
+            : this.containerRef.offsetHeight;
+        this.applyResizeDelta(this.dragHandleIndex, delta, containerSize);
+    };
+    handleMouseUp = () => {
+        if (this.isDragging) {
+            const wasDragging = this.hasMouseMoved;
+            const dragIndex = this.dragHandleIndex;
+            const finalSizes = this.internalPanels.map(p => p.size ?? 0);
+            // Only emit resizeEnd and save state if mouse actually moved
+            if (wasDragging) {
+                this.resizeEnd.emit({
+                    index: dragIndex,
+                    sizes: finalSizes.map(s => s ?? 0)
+                });
+                this.saveStateToStorage();
+            }
+            // Reset drag state AFTER emitting events to prevent parsePanels from interfering
+            this.dragHandleIndex = -1;
+            this.hasMouseMoved = false;
+            this.isDragging = false;
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    };
+    handleTouchStart(index, event) {
+        const leftPanel = this.internalPanels[index];
+        const rightPanel = this.internalPanels[index + 1];
+        if (!leftPanel?.resizable || rightPanel?.resizable === false)
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        this.isDragging = true;
+        this.dragHandleIndex = index;
+        this.dragStartPos = this.direction === 'horizontal' ? touch.clientX : touch.clientY;
+        this.dragStartSizes = this.internalPanels.map(p => p.size ?? 0);
+        this.hasMouseMoved = false;
+        this.resizeStart.emit({ index });
+        document.addEventListener('touchmove', this.handleTouchMove);
+        document.addEventListener('touchend', this.handleTouchEnd);
+    }
+    handleTouchMove = (event) => {
+        if (!this.isDragging || this.dragHandleIndex === -1)
+            return;
+        event.preventDefault();
+        // Mark that touch has moved
+        this.hasMouseMoved = true;
+        const touch = event.touches[0];
+        const currentPos = this.direction === 'horizontal' ? touch.clientX : touch.clientY;
+        const delta = currentPos - this.dragStartPos;
+        const containerSize = this.direction === 'horizontal'
+            ? this.containerRef.offsetWidth
+            : this.containerRef.offsetHeight;
+        this.applyResizeDelta(this.dragHandleIndex, delta, containerSize);
+    };
+    handleTouchEnd = () => {
+        if (this.isDragging) {
+            const wasDragging = this.hasMouseMoved;
+            const dragIndex = this.dragHandleIndex;
+            const finalSizes = this.internalPanels.map(p => p.size ?? 0);
+            // Only emit resizeEnd and save state if touch actually moved
+            if (wasDragging) {
+                this.resizeEnd.emit({
+                    index: dragIndex,
+                    sizes: finalSizes.map(s => s ?? 0)
+                });
+                this.saveStateToStorage();
+            }
+            // Reset drag state AFTER emitting events to prevent parsePanels from interfering
+            this.dragHandleIndex = -1;
+            this.hasMouseMoved = false;
+            this.isDragging = false;
+        }
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    };
+    toggleCollapse(index) {
+        const panel = this.internalPanels[index];
+        if (!panel.collapsible)
+            return;
+        const newPanels = [...this.internalPanels];
+        const isCollapsing = !panel.collapsed;
+        const direction = panel.collapseDirection || (this.direction === 'horizontal' ? 'left' : 'up');
+        if (isCollapsing) {
+            // When collapsing, give this panel's size to the appropriate adjacent panel
+            const sizeToDistribute = newPanels[index].size ?? 0;
+            // Determine which adjacent panel should receive the space based on collapse direction
+            let targetIndex = -1;
+            if (this.direction === 'horizontal') {
+                if (direction === 'left' && index < newPanels.length - 1) {
+                    // Panel collapses to left, so right panel grows
+                    targetIndex = index + 1;
+                }
+                else if (direction === 'right' && index > 0) {
+                    // Panel collapses to right, so left panel grows
+                    targetIndex = index - 1;
+                }
+            }
+            else {
+                // Vertical direction
+                if (direction === 'up' && index < newPanels.length - 1) {
+                    // Panel collapses up, so panel below grows
+                    targetIndex = index + 1;
+                }
+                else if (direction === 'bottom' && index > 0) {
+                    // Panel collapses down, so panel above grows
+                    targetIndex = index - 1;
+                }
+            }
+            if (targetIndex !== -1 && !newPanels[targetIndex].collapsed) {
+                // Give all space to the target adjacent panel
+                newPanels[targetIndex] = {
+                    ...newPanels[targetIndex],
+                    size: (newPanels[targetIndex].size ?? 0) + sizeToDistribute
+                };
+            }
+            else {
+                // Fallback: distribute to all other non-collapsed panels
+                const otherPanels = newPanels.filter((_, i) => i !== index && !newPanels[i].collapsed);
+                if (otherPanels.length > 0) {
+                    const sizePerPanel = sizeToDistribute / otherPanels.length;
+                    newPanels.forEach((p, i) => {
+                        if (i !== index && !p.collapsed) {
+                            newPanels[i] = { ...p, size: (p.size ?? 0) + sizePerPanel };
+                        }
+                    });
+                }
+            }
+            newPanels[index] = { ...panel, collapsed: true, size: 0 };
+        }
+        else {
+            // When expanding, take size from the appropriate adjacent panel
+            const targetSize = panel.minSize || 30;
+            // Determine which adjacent panel should give up space
+            let targetIndex = -1;
+            if (this.direction === 'horizontal') {
+                if (direction === 'left' && index < newPanels.length - 1) {
+                    // Panel expanding from left, take from right panel
+                    targetIndex = index + 1;
+                }
+                else if (direction === 'right' && index > 0) {
+                    // Panel expanding from right, take from left panel
+                    targetIndex = index - 1;
+                }
+            }
+            else {
+                if (direction === 'top' && index < newPanels.length - 1) {
+                    // Panel expanding from top, take from panel below
+                    targetIndex = index + 1;
+                }
+                else if (direction === 'bottom' && index > 0) {
+                    // Panel expanding from down, take from panel above
+                    targetIndex = index - 1;
+                }
+            }
+            if (targetIndex !== -1 && !newPanels[targetIndex].collapsed) {
+                // Take space from the target adjacent panel
+                const availableSize = (newPanels[targetIndex].size ?? 0) - (newPanels[targetIndex].minSize || 10);
+                const sizeToTake = Math.min(targetSize, availableSize);
+                newPanels[targetIndex] = {
+                    ...newPanels[targetIndex],
+                    size: (newPanels[targetIndex].size ?? 0) - sizeToTake
+                };
+                newPanels[index] = { ...panel, collapsed: false, size: sizeToTake };
+            }
+            else {
+                // Fallback: take from all other panels
+                const otherPanels = newPanels.filter((_, i) => i !== index && !newPanels[i].collapsed);
+                if (otherPanels.length > 0) {
+                    const sizePerPanel = targetSize / otherPanels.length;
+                    newPanels.forEach((p, i) => {
+                        if (i !== index && !p.collapsed) {
+                            newPanels[i] = { ...p, size: Math.max((p.minSize || 10), (p.size ?? 0) - sizePerPanel) };
+                        }
+                    });
+                }
+                newPanels[index] = { ...panel, collapsed: false, size: targetSize };
+            }
+        }
+        this.internalPanels = newPanels;
+        this.panelCollapse.emit({ panel: newPanels[index], collapsed: !!newPanels[index].collapsed });
+        this.saveStateToStorage();
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('touchmove', this.handleTouchMove);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    }
+    getCollapseIcon(panel) {
+        const direction = panel.collapseDirection || (this.direction === 'horizontal' ? 'left' : 'up');
+        if (panel.collapsed) {
+            // Show expand icon (opposite of collapse direction)
+            switch (direction) {
+                case 'left': return 'right';
+                case 'right': return 'left';
+                case 'top': return 'bottom';
+                case 'bottom': return 'top';
+                default: return 'right';
+            }
+        }
+        else {
+            // Show collapse icon
+            return direction;
+        }
+    }
+    render() {
+        const containerClasses = {
+            'resizable-container': true,
+            [`resizable-${this.direction}`]: true,
+            [`resizable-theme-${this.theme}`]: true,
+            'resizable-dragging': this.isDragging,
+            'resizable-animated': this.animated && !this.isDragging,
+        };
+        return (h(Host, { key: '222dabdb3f919a430a8dc35008607dd9ad21f670' }, h("div", { key: '6fab04ac24283a3dc1be30ca97488639021e0c13', class: containerClasses, ref: el => this.containerRef = el }, this.internalPanels.map((panel, index) => (h("div", { key: panel.id, class: "panel-wrapper", style: {
+                [this.direction === 'horizontal' ? 'width' : 'height']: panel.collapsed ? `${this.handleSize}px` : `${panel.size}%`,
+            } }, h("div", { class: {
+                'resizable-panel': true,
+                'panel-collapsed': !!panel.collapsed,
+            }, ref: el => this.panelRefs[index] = el }, h("slot", { name: panel.id })), index < this.internalPanels.length - 1 && (h("div", { class: {
+                'resize-handle': true,
+                [`resize-handle-${this.direction}`]: true,
+                'resize-handle-active': this.dragHandleIndex === index,
+                'resize-handle-disabled': !panel.resizable || this.internalPanels[index + 1]?.resizable === false,
+            }, style: {
+                [this.direction === 'horizontal' ? 'width' : 'height']: `${this.handleSize}px`,
+                backgroundColor: this.dragHandleIndex === index ? this.handleHoverColor : this.handleColor,
+            }, onMouseDown: (e) => this.handleMouseDown(index, e), onTouchStart: (e) => this.handleTouchStart(index, e), onDblClick: () => this.toggleCollapse(index) }, this.showHandleIcon && panel.resizable && this.internalPanels[index + 1]?.resizable !== false && (h("div", { class: "resize-handle-icon" }, h("ui-icon", { name: `grip-${this.direction === 'horizontal' ? 'vertical' : 'lines'}`, library: "fontawesome" }))), panel.collapsible && (h("ui-button", { variant: "ghost", class: "collapse-button", onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                this.toggleCollapse(index);
+            }, onMouseDown: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+            }, ariaLabel: panel.collapsed ? 'Expand' : 'Collapse', icon: `chevron-${this.getCollapseIcon(panel)}`, iconLibrary: "fontawesome", iconOnly: true, size: "sm" }))))))))));
+    }
+    static get is() { return "ui-resizable-panel"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["resizable-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["resizable-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "panels": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PanelConfig[] | string",
+                    "resolved": "PanelConfig[] | string",
+                    "references": {
+                        "PanelConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/resizable-panel/types.ts::PanelConfig",
+                            "referenceLocation": "PanelConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panels",
+                "defaultValue": "[]"
+            },
+            "handleSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "handle-size",
+                "defaultValue": "8"
+            },
+            "handleColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "handle-color",
+                "defaultValue": "'#d1d5db'"
+            },
+            "handleHoverColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "handle-hover-color",
+                "defaultValue": "'#3DCD58'"
+            },
+            "minPanelSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-panel-size",
+                "defaultValue": "10"
+            },
+            "maxPanelSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-panel-size",
+                "defaultValue": "-1"
+            },
+            "saveState": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "save-state",
+                "defaultValue": "false"
+            },
+            "stateKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state-key",
+                "defaultValue": "'resizable-panel-state'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"auto\" | \"dark\" | \"default\" | \"green\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "false"
+            },
+            "showHandleIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-handle-icon",
+                "defaultValue": "true"
+            },
+            "snapToEdge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-to-edge",
+                "defaultValue": "false"
+            },
+            "snapThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "snap-threshold",
+                "defaultValue": "30"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalPanels": {},
+            "isDragging": {},
+            "dragHandleIndex": {},
+            "dragStartPos": {},
+            "dragStartSizes": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "panelResize",
+                "name": "panelResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panels: PanelConfig[]; index: number }",
+                    "resolved": "{ panels: PanelConfig[]; index: number; }",
+                    "references": {
+                        "PanelConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/resizable-panel/types.ts::PanelConfig",
+                            "referenceLocation": "PanelConfig"
+                        }
+                    }
+                }
+            }, {
+                "method": "panelCollapse",
+                "name": "panelCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ panel: PanelConfig; collapsed: boolean }",
+                    "resolved": "{ panel: PanelConfig; collapsed: boolean; }",
+                    "references": {
+                        "PanelConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/resizable-panel/types.ts::PanelConfig",
+                            "referenceLocation": "PanelConfig"
+                        }
+                    }
+                }
+            }, {
+                "method": "resizeStart",
+                "name": "resizeStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number }",
+                    "resolved": "{ index: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "resizeEnd",
+                "name": "resizeEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number; sizes: number[] }",
+                    "resolved": "{ index: number; sizes: number[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "panels",
+                "methodName": "handlePanelsChange"
+            }];
+    }
+}