@ixfx/components 0.2.4 → 0.2.6

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

@@ -1,674 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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";
-import { css, html, LitElement } from "lit";
-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
- * 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
- * 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: 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() {
-        super(...arguments);
-        this.layout = `vertical`;
-        this.sizeA = ``;
-        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();
-            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();
-            const zoneEl = this.getZone();
-            if (zoneEl) {
-                zoneEl.classList.remove(`user-resizing`);
-            }
-            window.removeEventListener(`pointerup`, this.#onResizeHandleUp);
-            window.removeEventListener(`pointermove`, this.#onResizeHandleMove);
-        };
-        this.#onResizeHandleMove = (event) => {
-            const bounds = this.#elementBounds;
-            if (!bounds)
-                return;
-            const threshold = 5;
-            if (this.layout === `horizontal`) {
-                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 if (!this.collapsedA) {
-                    const { sizeA, sizeB } = this.#applyConstraints(`${relativeY * 100}%`, `${(1 - relativeY) * 100}%`, bounds.height);
-                    this.sizeA = sizeA;
-                    this.sizeB = sizeB;
-                }
-                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 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 {
-                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`);
-                }
-            }
-            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`);
-                }
-            }
-            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 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();
-        };
-    }
-    #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() {
-        const sizePrefix = this.layout === `vertical` ? `width` : `height`;
-        let sizeA = this.sizeA;
-        let sizeB = this.sizeB;
-        if (this.collapsedA) {
-            sizeA = `0px`;
-        }
-        else if (sizeA.length === 0 && sizeB.length === 0) {
-            sizeB = sizeA = `50%`;
-        }
-        else if (sizeA.length === 0) {
-            sizeA = `auto`;
-        }
-        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>`;
-    }
-    static { this.styles = css `
-    :host {
-      --handle-size: 2px;
-      --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%;
-    }
-    * {
-      box-sizing: border-box;
-    }
-    #zone {
-      display: flex;
-      height: 100%;
-      position: relative;
-    }
-    slot {
-      display: block;
-      overflow: hidden;
-    }
-    :slotted(*) {
-      width: 100%;
-      height: 100%;
-    }
-
-    .resize-handle {
-      background-color: var(--handle-colour);
-      width: var(--handle-size);
-      height: 100%;
-      cursor: ew-resize;
-      flex-shrink: 0;
-    }
-    #zone.user-resizing {
-      slot {
-        opacity: 0.5;
-      }
-      .resize-handle {
-        background-color: var(--handle-active-colour);
-      }
-    }
-    .resize-handle:hover {
-      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']) {
-      #zone {
-        flex-direction: column;
-      }
-      .resize-handle {
-        background-color: silver;
-        height: var(--handle-size);
-        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([
-    property({ type: String })
-], SplitLayoutElement.prototype, "layout", void 0);
-__decorate([
-    property({ type: String })
-], SplitLayoutElement.prototype, "sizeA", void 0);
-__decorate([
-    property({ type: String })
-], SplitLayoutElement.prototype, "sizeB", void 0);
-__decorate([
-    property({ type: Boolean })
-], SplitLayoutElement.prototype, "fixedA", void 0);
-__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`)
-], SplitLayoutElement);
-export { SplitLayoutElement };
-//# sourceMappingURL=split-layout.js.map