@ixfx/components 0.2.3 → 0.2.4

package/dist/split-layout/split-layout.js

@@ -4,29 +4,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { clamp } from "ixfx/numbers.js";
+import { clamp } from "@ixfx/numbers";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
-// TODO: Swap A/B panel content
-// TODO: Toggle collapse of A/B
-// TODO: Handle resizing of parent element
+import { customElement, property, state } from "lit/decorators.js";
 // TODO: Fire event when panels have been resized
 /**
  * Lays out two elements within a container, with a bar to resize them
  * proportionally.
  *
  * Events
- * * _none_
+ * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.
+ *   detail: { panel: 'A' | 'B', collapsed: boolean }
+ *
  * Attributes
- * * layout: `vertical`|`horizontal`
- * * sizeA/B: CSS size of section A or B. Can use relative or absolute values
- * * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
+ * layout: `vertical`|`horizontal`
+ * sizeA/B: CSS size of section A or B. Can use relative or absolute values
+ * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
+ * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)
+ * minSizeA/B: Minimum size for panel A or B (e.g., "100px" or "20%"). Default: none
+ * maxSizeA/B: Maximum size for panel A or B (e.g., "200px" or "80%"). Default: none
  *
  * CSS variables
- * * --handle-size: 2px;              // Width/height of resize handle
- * * --handle-colour: whitesmoke;     // Colour of handle
- * * --handle-hover-colour: darkblue; // Colour of handle when hovering
- * * --handle-active-colour: blue;    // Colour of handle when being used
+ * --handle-size: 2px;              // Width/height of resize handle
+ * --handle-colour: var(--surface-5);     // Colour of handle
+ * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
+ * --handle-active-colour: var(--accent);    // Colour of handle when being used
  */
 let SplitLayoutElement = class SplitLayoutElement extends LitElement {
     constructor() {
@@ -36,20 +38,35 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
         this.sizeB = ``;
         this.fixedA = false;
         this.fixedB = false;
+        this.collapsible = false;
+        this.collapsedA = false;
+        this.collapsedB = false;
+        this.minSizeA = ``;
+        this.maxSizeA = ``;
+        this.minSizeB = ``;
+        this.maxSizeB = ``;
+        this._hasCorner = false;
+        this.#startSizeA = ``;
+        this.#startSizeB = ``;
+        this.#cornerStartX = 0;
+        this.#cornerStartY = 0;
+        this.#nestedSplitInitialSizeA = ``;
+        this.#pendingNestedUpdate = null;
+        this.#hysteresisThreshold = 0.1;
         this.#onResizeHandleDown = (event) => {
             event.preventDefault();
-            //this.#userResizing = true;
             const zoneEl = this.getZone();
             if (zoneEl) {
                 zoneEl.classList.add(`user-resizing`);
             }
             this.#elementBounds = this.getBoundingClientRect();
+            this.#startSizeA = this.sizeA;
+            this.#startSizeB = this.sizeB;
             window.addEventListener(`pointerup`, this.#onResizeHandleUp);
             window.addEventListener(`pointermove`, this.#onResizeHandleMove);
         };
         this.#onResizeHandleUp = (event) => {
             event.preventDefault();
-            //this.#userResizing = false;
             const zoneEl = this.getZone();
             if (zoneEl) {
                 zoneEl.classList.remove(`user-resizing`);
@@ -61,52 +78,451 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
             const bounds = this.#elementBounds;
             if (!bounds)
                 return;
-            //console.log(`fixedA: ${ this.fixedA } b: ${ this.fixedB }`);
+            const threshold = 5;
             if (this.layout === `horizontal`) {
-                let y = event.y - bounds.y;
-                let relativeY = clamp(y / bounds.height);
-                //console.log(`relY: ${ relativeY } y: ${ y } event.y: ${ event.y } offset: ${ event.offsetY }`);
-                if (this.fixedA) {
-                    this.sizeA = `${relativeY * bounds.height}px`;
+                const y = event.y - bounds.y;
+                const relativeY = clamp(y / bounds.height);
+                if (this.collapsible && this.collapsedA) {
+                    if (relativeY > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {
+                        this.collapsedA = false;
+                        this.#dispatchCollapsedEvent(`A`, false);
+                        this.#collapsedAPointerAtCollapse = undefined;
+                        const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
+                        this.sizeA = sizeA;
+                        this.sizeB = sizeB;
+                    }
+                }
+                else if (this.collapsible && !this.collapsedA && relativeY < threshold / bounds.height) {
+                    this.collapsedA = true;
+                    this.#dispatchCollapsedEvent(`A`, true);
+                    this.sizeA = `0px`;
+                    this.sizeB = `100%`;
+                    this.#collapsedAPointerAtCollapse = relativeY;
                 }
-                else {
-                    this.sizeA = `${relativeY * 100}%`;
+                else if (!this.collapsedA) {
+                    const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
+                    this.sizeA = sizeA;
+                    this.sizeB = sizeB;
                 }
-                if (this.fixedB) {
-                    this.sizeB = `${(1 - relativeY) * bounds.height}px`;
+                if (this.collapsible && this.collapsedB) {
+                    if (relativeY < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {
+                        this.collapsedB = false;
+                        this.#dispatchCollapsedEvent(`B`, false);
+                        this.#collapsedBPointerAtCollapse = undefined;
+                        const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
+                        this.sizeA = sizeA;
+                        this.sizeB = sizeB;
+                    }
                 }
-                else {
-                    this.sizeB = `${(1 - relativeY) * 100}%`;
+                else if (this.collapsible && !this.collapsedB && relativeY > (1 - threshold / bounds.height)) {
+                    this.collapsedB = true;
+                    this.#dispatchCollapsedEvent(`B`, true);
+                    this.sizeA = `100%`;
+                    this.sizeB = `0px`;
+                    this.#collapsedBPointerAtCollapse = relativeY;
                 }
             }
             else {
-                let x = event.x - bounds.x;
-                let relativeX = clamp(x / bounds.width);
-                if (this.fixedA) {
-                    this.sizeA = `${relativeX * bounds.width}px`;
+                const x = event.x - bounds.x;
+                const relativeX = clamp(x / bounds.width);
+                if (this.collapsible && this.collapsedA) {
+                    if (relativeX > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {
+                        this.collapsedA = false;
+                        this.#dispatchCollapsedEvent(`A`, false);
+                        this.#collapsedAPointerAtCollapse = undefined;
+                        const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
+                        this.sizeA = sizeA;
+                        this.sizeB = sizeB;
+                    }
+                }
+                else if (this.collapsible && !this.collapsedA && relativeX < threshold / bounds.width) {
+                    this.collapsedA = true;
+                    this.#dispatchCollapsedEvent(`A`, true);
+                    this.sizeA = `0px`;
+                    this.sizeB = `100%`;
+                    this.#collapsedAPointerAtCollapse = relativeX;
+                }
+                else if (!this.collapsedA) {
+                    const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
+                    this.sizeA = sizeA;
+                    this.sizeB = sizeB;
+                }
+                if (this.collapsible && this.collapsedB) {
+                    if (relativeX < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {
+                        this.collapsedB = false;
+                        this.#dispatchCollapsedEvent(`B`, false);
+                        this.#collapsedBPointerAtCollapse = undefined;
+                        const { sizeA, sizeB } = this.#applyConstraints(`${relativeX * 100}%`, `${(1 - relativeX) * 100}%`, bounds.width);
+                        this.sizeA = sizeA;
+                        this.sizeB = sizeB;
+                    }
+                }
+                else if (this.collapsible && !this.collapsedB && relativeX > (1 - threshold / bounds.width)) {
+                    this.collapsedB = true;
+                    this.#dispatchCollapsedEvent(`B`, true);
+                    this.sizeA = `100%`;
+                    this.sizeB = `0px`;
+                    this.#collapsedBPointerAtCollapse = relativeX;
+                }
+            }
+            event.preventDefault();
+        };
+        this.#onCornerResizeDown = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const zoneEl = this.getZone();
+            if (zoneEl) {
+                zoneEl.classList.add(`user-resizing`);
+            }
+            this.#elementBounds = this.getBoundingClientRect();
+            this.#cornerStartX = event.clientX;
+            this.#cornerStartY = event.clientY;
+            this.#startSizeA = this.sizeA;
+            this.#startSizeB = this.sizeB;
+            const nestedSplit = this.#getNestedSplit();
+            if (nestedSplit) {
+                this.#nestedSplitInitialSizeA = nestedSplit.sizeA;
+                const nestedBounds = nestedSplit.getBoundingClientRect();
+                const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.resize-handle`);
+                if (nestedHandle) {
+                    this.#nestedSplitBounds = nestedBounds;
+                    this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();
+                }
+                const nestedZoneEl = nestedSplit.getZone();
+                if (nestedZoneEl) {
+                    nestedZoneEl.classList.add(`user-resizing`);
                 }
-                else {
-                    this.sizeA = `${relativeX * 100}%`;
+            }
+            window.addEventListener(`pointerup`, this.#onCornerResizeUp);
+            window.addEventListener(`pointermove`, this.#onCornerResizeMove);
+        };
+        this.#onCornerResizeUp = (event) => {
+            event.preventDefault();
+            const zoneEl = this.getZone();
+            if (zoneEl) {
+                zoneEl.classList.remove(`user-resizing`);
+            }
+            const nestedSplit = this.#getNestedSplit();
+            if (nestedSplit) {
+                const nestedZoneEl = nestedSplit.getZone();
+                if (nestedZoneEl) {
+                    nestedZoneEl.classList.remove(`user-resizing`);
                 }
-                if (this.fixedB) {
-                    this.sizeB = `${(1 - relativeX) * bounds.width}px`;
+            }
+            window.removeEventListener(`pointerup`, this.#onCornerResizeUp);
+            window.removeEventListener(`pointermove`, this.#onCornerResizeMove);
+        };
+        this.#onCornerResizeMove = (event) => {
+            const outerBounds = this.#elementBounds;
+            const zoneEl = this.getZone();
+            const nestedSplit = this.#getNestedSplit();
+            if (!outerBounds || !zoneEl || !nestedSplit)
+                return;
+            const zoneBounds = zoneEl.getBoundingClientRect();
+            const cursorZoneLocalX = event.clientX - zoneBounds.left;
+            const cursorZoneLocalY = event.clientY - zoneBounds.top;
+            if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
+                let newOuterFraction = cursorZoneLocalX / outerBounds.width;
+                let newNestedFraction = cursorZoneLocalY / outerBounds.height;
+                const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.width);
+                newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);
+                this.sizeA = constrainedA;
+                this.sizeB = constrainedB;
+                this.#pendingNestedUpdate = {
+                    sizeA: newNestedFraction,
+                    sizeB: 1 - newNestedFraction
+                };
+                requestAnimationFrame(() => this.#applyPendingNestedUpdate());
+                const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
+                if (cornerZone) {
+                    cornerZone.style.left = `${cursorZoneLocalX - 6}px`;
+                    cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
                 }
-                else {
-                    this.sizeB = `${(1 - relativeX) * 100}%`;
+            }
+            else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
+                let newNestedFraction = cursorZoneLocalX / outerBounds.width;
+                let newOuterFraction = cursorZoneLocalY / outerBounds.height;
+                const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.height);
+                newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);
+                this.sizeA = constrainedA;
+                this.sizeB = constrainedB;
+                this.#pendingNestedUpdate = {
+                    sizeA: newNestedFraction,
+                    sizeB: 1 - newNestedFraction
+                };
+                requestAnimationFrame(() => this.#applyPendingNestedUpdate());
+                const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
+                if (cornerZone) {
+                    cornerZone.style.left = `${cursorZoneLocalX - 6}px`;
+                    cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
                 }
             }
             event.preventDefault();
         };
     }
-    //#userResizing = false;
     #elementBounds;
+    #startSizeA;
+    #startSizeB;
+    #cornerStartX;
+    #cornerStartY;
+    #nestedSplitInitialSizeA;
+    #cornerZone;
+    #nestedSplit;
+    #nestedSplitBounds;
+    #nestedHandleBounds;
+    #observer;
+    #pendingNestedUpdate;
+    #collapsedAPointerAtCollapse;
+    #collapsedBPointerAtCollapse;
+    #hysteresisThreshold;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#observer?.disconnect();
+    }
+    firstUpdated() {
+        this.#setupNestedSplitObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`) ||
+            changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) {
+            this.#updateCornerPosition();
+        }
+        if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) {
+            this.#updateDataCollapsed();
+        }
+    }
+    #updateDataCollapsed() {
+        if (this.collapsedA) {
+            this.setAttribute(`data-collapsed-a`, ``);
+        }
+        else {
+            this.removeAttribute(`data-collapsed-a`);
+        }
+        if (this.collapsedB) {
+            this.setAttribute(`data-collapsed-b`, ``);
+        }
+        else {
+            this.removeAttribute(`data-collapsed-b`);
+        }
+    }
+    #dispatchCollapsedEvent(panel, collapsed) {
+        this.dispatchEvent(new CustomEvent(`ixfx-split-collapsed`, {
+            detail: { panel, collapsed },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    #setupNestedSplitObserver() {
+        const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+        if (!slotA)
+            return;
+        this.#observer = new MutationObserver(() => {
+            this.#checkForNestedSplit();
+        });
+        this.#observer.observe(slotA, { characterData: true, childList: true, subtree: true });
+        this.#checkForNestedSplit();
+    }
+    #checkForNestedSplit() {
+        const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+        if (!slotA)
+            return;
+        const assignedElements = slotA.assignedElements();
+        const findNestedSplit = (elements) => {
+            for (const el of elements) {
+                if (el.tagName === `IXFX-SPLIT-LAYOUT`) {
+                    return el;
+                }
+                const nested = findNestedSplit(Array.from(el.children));
+                if (nested)
+                    return nested;
+            }
+            return undefined;
+        };
+        const nestedSplit = findNestedSplit(assignedElements);
+        if (nestedSplit) {
+            this.#nestedSplit = nestedSplit;
+            this._hasCorner = true;
+            requestAnimationFrame(() => this.#updateCornerPosition());
+        }
+        else {
+            this.#nestedSplit = undefined;
+            this._hasCorner = false;
+        }
+    }
+    #getNestedSplit() {
+        if (this.#nestedSplit)
+            return this.#nestedSplit;
+        const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+        if (!slotA)
+            return undefined;
+        const assignedElements = slotA.assignedElements();
+        return assignedElements.find((el) => el.tagName === `IXFX-SPLIT-LAYOUT`);
+    }
+    #parseSizeAsFraction(size, total) {
+        if (size.endsWith(`px`)) {
+            return parseFloat(size.replace(`px`, ``)) / total;
+        }
+        else if (size.endsWith(`%`)) {
+            return parseFloat(size.replace(`%`, ``)) / 100;
+        }
+        return 0.5;
+    }
+    #parseSizeToPx(size, total) {
+        if (size.endsWith(`px`)) {
+            return parseFloat(size.replace(`px`, ``));
+        }
+        else if (size.endsWith(`%`)) {
+            return (parseFloat(size.replace(`%`, ``)) / 100) * total;
+        }
+        return null;
+    }
+    #applyConstraints(sizeA, sizeB, total) {
+        let fractionA = this.#parseSizeAsFraction(sizeA, total);
+        let fractionB = this.#parseSizeAsFraction(sizeB, total);
+        const minA = this.#minSizeToFraction(this.minSizeA, total);
+        const minB = this.#minSizeToFraction(this.minSizeB, total);
+        const maxA = this.#maxSizeToFraction(this.maxSizeA, total);
+        const maxB = this.#maxSizeToFraction(this.maxSizeB, total);
+        if (minA !== null || minB !== null) {
+            const minSum = (minA ?? 0) + (minB ?? 0);
+            if (minSum > 1) {
+                const scale = 1 / minSum;
+                if (minA !== null)
+                    minA !== null ? fractionA = minA * scale : fractionA = 0;
+                if (minB !== null)
+                    minB !== null ? fractionB = minB * scale : fractionB = 0;
+            }
+            if (fractionA < (minA ?? 0))
+                fractionA = minA ?? 0;
+            if (fractionB < (minB ?? 0))
+                fractionB = minB ?? 0;
+        }
+        if (maxA !== null) {
+            if (fractionA > maxA)
+                fractionA = maxA;
+        }
+        if (maxB !== null) {
+            if (fractionB > maxB)
+                fractionB = maxB;
+        }
+        fractionB = 1 - fractionA;
+        const isPercentA = !this.sizeA.endsWith(`px`);
+        const isPercentB = !this.sizeB.endsWith(`px`);
+        if (isPercentA) {
+            return { sizeA: `${fractionA * 100}%`, sizeB: `${fractionB * 100}%` };
+        }
+        else {
+            return { sizeA: `${fractionA * total}px`, sizeB: `${fractionB * total}px` };
+        }
+    }
+    #minSizeToFraction(minSize, total) {
+        if (minSize.length === 0)
+            return null;
+        const px = this.#parseSizeToPx(minSize, total);
+        if (px !== null)
+            return px / total;
+        if (minSize.endsWith(`%`))
+            return parseFloat(minSize.replace(`%`, ``)) / 100;
+        return null;
+    }
+    #maxSizeToFraction(maxSize, total) {
+        if (maxSize.length === 0)
+            return null;
+        const px = this.#parseSizeToPx(maxSize, total);
+        if (px !== null)
+            return px / total;
+        if (maxSize.endsWith(`%`))
+            return parseFloat(maxSize.replace(`%`, ``)) / 100;
+        return null;
+    }
+    #getIntersectionPoint() {
+        const outerBounds = this.getBoundingClientRect();
+        const zoneEl = this.getZone();
+        if (!zoneEl)
+            return null;
+        const nestedSplit = this.#getNestedSplit();
+        if (!nestedSplit)
+            return null;
+        const zoneBounds = zoneEl.getBoundingClientRect();
+        const outerFraction = this.#parseSizeAsFraction(this.sizeA || `50%`, outerBounds.width);
+        let x, y;
+        if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
+            x = outerFraction * outerBounds.width;
+            const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height);
+            y = nestedFraction * outerBounds.height;
+        }
+        else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
+            const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width);
+            x = nestedFraction * outerBounds.width;
+            y = outerFraction * outerBounds.height;
+        }
+        else {
+            return null;
+        }
+        return { x, y };
+    }
+    #updateCornerPosition() {
+        if (!this._hasCorner)
+            return;
+        const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`);
+        if (!cornerZone)
+            return;
+        const zoneEl = this.getZone();
+        if (!zoneEl)
+            return;
+        const intersection = this.#getIntersectionPoint();
+        if (!intersection) {
+            cornerZone.style.display = `none`;
+            return;
+        }
+        const cornerX = intersection.x - 6;
+        const cornerY = intersection.y - 6;
+        cornerZone.style.left = `${cornerX}px`;
+        cornerZone.style.top = `${cornerY}px`;
+        cornerZone.style.display = `block`;
+        const nestedSplit = this.#getNestedSplit();
+        if (nestedSplit) {
+            if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
+                cornerZone.style.cursor = `nwse-resize`;
+            }
+            else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
+                cornerZone.style.cursor = `nesw-resize`;
+            }
+        }
+    }
+    getZone() {
+        if (!this.shadowRoot)
+            return;
+        const el = this.shadowRoot.querySelector(`#zone`);
+        if (!el)
+            return undefined;
+        return el;
+    }
+    #onResizeHandleDown;
+    #onResizeHandleUp;
+    #onResizeHandleMove;
+    #onCornerResizeDown;
+    #onCornerResizeUp;
+    #applyPendingNestedUpdate() {
+        if (!this.#pendingNestedUpdate)
+            return;
+        const { sizeA, sizeB } = this.#pendingNestedUpdate;
+        const nested = this.#getNestedSplit();
+        if (nested) {
+            nested.sizeA = `${sizeA * 100}%`;
+            nested.sizeB = `${sizeB * 100}%`;
+        }
+        this.#pendingNestedUpdate = null;
+    }
+    #onCornerResizeMove;
     render() {
-        // With vertical layout, fix the width
-        // With horizontal layout, fix the height
         const sizePrefix = this.layout === `vertical` ? `width` : `height`;
         let sizeA = this.sizeA;
         let sizeB = this.sizeB;
-        if (sizeA.length === 0 && sizeB.length === 0) {
+        if (this.collapsedA) {
+            sizeA = `0px`;
+        }
+        else if (sizeA.length === 0 && sizeB.length === 0) {
             sizeB = sizeA = `50%`;
         }
         else if (sizeA.length === 0) {
@@ -115,48 +531,42 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
         else if (sizeB.length === 0) {
             sizeB = `auto`;
         }
+        if (this.collapsedB) {
+            sizeB = `0px`;
+        }
         sizeA = `${sizePrefix}:${sizeA}`;
         sizeB = `${sizePrefix}:${sizeB}`;
         return html `
     <div id="zone">
       <slot style=${sizeA} name="a"></slot>
+      ${this._hasCorner ? html `<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
       <div @pointerdown=${this.#onResizeHandleDown} class="resize-handle"></div>
       <slot style=${sizeB} name="b"></slot> 
     </div>`;
     }
-    getZone() {
-        if (!this.shadowRoot)
-            return;
-        const el = this.shadowRoot.querySelector(`#zone`);
-        if (!el)
-            return undefined;
-        return el;
-    }
-    #onResizeHandleDown;
-    #onResizeHandleUp;
-    #onResizeHandleMove;
-    // Default is vertical split
     static { this.styles = css `
     :host {
       --handle-size: 2px;
-      --handle-colour: whitesmoke;
-      --handle-hover-colour: darkblue;
-      --handle-active-colour: blue;
+      --handle-colour: var(--surface-5);
+      --handle-hover-colour: var(--surface-6);
+      --handle-active-colour: var(--accent);
 
       display: block;
       box-sizing: border-box;
-      width:100%;
-      height:100%;
+      width: 100%;
+      height: 100%;
     }
     * {
       box-sizing: border-box;
     }
     #zone {
-      display:flex;
+      display: flex;
       height: 100%;
+      position: relative;
     }
     slot {
-      display:block;
+      display: block;
+      overflow: hidden;
     }
     :slotted(*) {
       width: 100%;
@@ -166,8 +576,9 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
     .resize-handle {
       background-color: var(--handle-colour);
       width: var(--handle-size);
-      height:100%;
+      height: 100%;
       cursor: ew-resize;
+      flex-shrink: 0;
     }
     #zone.user-resizing {
       slot {
@@ -181,21 +592,40 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
       background-color: var(--handle-hover-colour);
     }
 
+    .corner-zone {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      z-index: 10;
+      border-radius: 50%;
+      background: transparent;
+    }
+    .corner-zone:hover {
+      background: transparent;
+    }
+
     :host([layout='horizontal']) {
-      slot {
-        
-      }
       #zone {
         flex-direction: column;
       }
       .resize-handle {
         background-color: silver;
         height: var(--handle-size);
-        width:100%;
+        width: 100%;
         cursor: ns-resize;
       }
+      .resize-handle:hover {
+        background-color: var(--handle-hover-colour);
+      }
+      #zone.user-resizing .resize-handle {
+        background-color: var(--handle-active-colour);
+      }
     }
 
+    :host([data-collapsed-a]) slot[name="a"],
+    :host([data-collapsed-b]) slot[name="b"] {
+      display: none;
+    }
   `; }
 };
 __decorate([
@@ -213,8 +643,32 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SplitLayoutElement.prototype, "fixedB", void 0);
+__decorate([
+    property({ type: Boolean })
+], SplitLayoutElement.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SplitLayoutElement.prototype, "collapsedA", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SplitLayoutElement.prototype, "collapsedB", void 0);
+__decorate([
+    property({ type: String })
+], SplitLayoutElement.prototype, "minSizeA", void 0);
+__decorate([
+    property({ type: String })
+], SplitLayoutElement.prototype, "maxSizeA", void 0);
+__decorate([
+    property({ type: String })
+], SplitLayoutElement.prototype, "minSizeB", void 0);
+__decorate([
+    property({ type: String })
+], SplitLayoutElement.prototype, "maxSizeB", void 0);
+__decorate([
+    state()
+], SplitLayoutElement.prototype, "_hasCorner", void 0);
 SplitLayoutElement = __decorate([
-    customElement('ixfx-split-layout')
+    customElement(`ixfx-split-layout`)
 ], SplitLayoutElement);
 export { SplitLayoutElement };
 //# sourceMappingURL=split-layout.js.map