@ixfx/components 0.2.3 → 0.2.5

package/dist/split-layout.js

@@ -0,0 +1,545 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as clamp } from "./dist-D7kJgnSE.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/split-layout/split-layout.ts
+let SplitLayoutElement = class SplitLayoutElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		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 = .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 relativeY = clamp((event.y - bounds.y) / bounds.height);
+				if (this.collapsible && this.collapsedA) {
+					if (relativeY > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
+						this.collapsedA = false;
+						this.#dispatchCollapsedEvent(`A`, false);
+						this.#collapsedAPointerAtCollapse = void 0;
+						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 ?? .95) - this.#hysteresisThreshold) {
+						this.collapsedB = false;
+						this.#dispatchCollapsedEvent(`B`, false);
+						this.#collapsedBPointerAtCollapse = void 0;
+						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 relativeX = clamp((event.x - bounds.x) / bounds.width);
+				if (this.collapsible && this.collapsedA) {
+					if (relativeX > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
+						this.collapsedA = false;
+						this.#dispatchCollapsedEvent(`A`, false);
+						this.#collapsedAPointerAtCollapse = void 0;
+						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 ?? .95) - this.#hysteresisThreshold) {
+						this.collapsedB = false;
+						this.#dispatchCollapsedEvent(`B`, false);
+						this.#collapsedBPointerAtCollapse = void 0;
+						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;
+			}
+		};
+		const nestedSplit = findNestedSplit(assignedElements);
+		if (nestedSplit) {
+			this.#nestedSplit = nestedSplit;
+			this._hasCorner = true;
+			requestAnimationFrame(() => this.#updateCornerPosition());
+		} else {
+			this.#nestedSplit = void 0;
+			this._hasCorner = false;
+		}
+	}
+	#getNestedSplit() {
+		if (this.#nestedSplit) return this.#nestedSplit;
+		const slotA = this.shadowRoot?.querySelector(`slot[name="a"]`);
+		if (!slotA) return void 0;
+		return slotA.assignedElements().find((el) => el.tagName === `IXFX-SPLIT-LAYOUT`);
+	}
+	#parseSizeAsFraction(size, total) {
+		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``)) / total;
+		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100;
+		return .5;
+	}
+	#parseSizeToPx(size, total) {
+		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``));
+		else if (size.endsWith(`%`)) return Number.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`);
+		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 Number.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 Number.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;
+		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;
+			y = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height) * outerBounds.height;
+		} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
+			x = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width) * 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;
+		if (!this.getZone()) 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 void 0;
+		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);
+//#endregion
+export { SplitLayoutElement };
+
+//# sourceMappingURL=split-layout.js.map

package/dist/split-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-layout.js","names":["#elementBounds","#startSizeA","#startSizeB","#onResizeHandleUp","#onResizeHandleMove","#collapsedAPointerAtCollapse","#hysteresisThreshold","#dispatchCollapsedEvent","#applyConstraints","#collapsedBPointerAtCollapse","#cornerStartX","#cornerStartY","#getNestedSplit","#nestedSplitInitialSizeA","#nestedSplitBounds","#nestedHandleBounds","#onCornerResizeUp","#onCornerResizeMove","#parseSizeAsFraction","#pendingNestedUpdate","#applyPendingNestedUpdate","#observer","#setupNestedSplitObserver","#updateCornerPosition","#updateDataCollapsed","#checkForNestedSplit","#nestedSplit","#minSizeToFraction","#maxSizeToFraction","#parseSizeToPx","#getIntersectionPoint","#onCornerResizeDown","#onResizeHandleDown"],"sources":["../src/split-layout/split-layout.ts"],"sourcesContent":["import { clamp } from \"@ixfx/numbers\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\n// TODO: Fire event when panels have been resized\n/**\n * Lays out two elements within a container, with a bar to resize them\n * proportionally.\n *\n * Events\n * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.\n *   detail: { panel: 'A' | 'B', collapsed: boolean }\n *\n * Attributes\n * layout: `vertical`|`horizontal`\n * sizeA/B: CSS size of section A or B. Can use relative or absolute values\n * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole\n * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)\n * minSizeA/B: Minimum size for panel A or B (e.g., \"100px\" or \"20%\"). Default: none\n * maxSizeA/B: Maximum size for panel A or B (e.g., \"200px\" or \"80%\"). Default: none\n *\n * CSS variables\n * --handle-size: 2px;              // Width/height of resize handle\n * --handle-colour: var(--surface-5);     // Colour of handle\n * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering\n * --handle-active-colour: var(--accent);    // Colour of handle when being used\n */\n@customElement(`ixfx-split-layout`)\nexport class SplitLayoutElement extends LitElement {\n  @property({ type: String })\n  layout: `vertical` | `horizontal` = `vertical`;\n\n  @property({ type: String })\n  sizeA = ``;\n\n  @property({ type: String })\n  sizeB = ``;\n\n  @property({ type: Boolean })\n  fixedA = false;\n\n  @property({ type: Boolean })\n  fixedB = false;\n\n  @property({ type: Boolean })\n  collapsible = false;\n\n  @property({ type: Boolean, reflect: true })\n  collapsedA = false;\n\n  @property({ type: Boolean, reflect: true })\n  collapsedB = false;\n\n  @property({ type: String })\n  minSizeA = ``;\n\n  @property({ type: String })\n  maxSizeA = ``;\n\n  @property({ type: String })\n  minSizeB = ``;\n\n  @property({ type: String })\n  maxSizeB = ``;\n\n  @state()\n  private _hasCorner = false;\n\n  #elementBounds: DOMRect | undefined;\n  #startSizeA = ``;\n  #startSizeB = ``;\n  #cornerStartX = 0;\n  #cornerStartY = 0;\n  #nestedSplitInitialSizeA = ``;\n\n  #cornerZone: HTMLElement | undefined;\n  #nestedSplit: SplitLayoutElement | undefined;\n  #nestedSplitBounds: DOMRect | undefined;\n  #nestedHandleBounds: DOMRect | undefined;\n  #observer: MutationObserver | undefined;\n  #pendingNestedUpdate: { sizeA: number; sizeB: number } | null = null;\n  #collapsedAPointerAtCollapse: number | undefined;\n  #collapsedBPointerAtCollapse: number | undefined;\n  #hysteresisThreshold = 0.1;\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observer?.disconnect();\n  }\n\n  firstUpdated() {\n    this.#setupNestedSplitObserver();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)\n      || changedProperties.has(`collapsedA`) || changedProperties.has(`collapsedB`)) {\n      this.#updateCornerPosition();\n    }\n    if (changedProperties.has(`sizeA`) || changedProperties.has(`sizeB`)) {\n      this.#updateDataCollapsed();\n    }\n  }\n\n  #updateDataCollapsed() {\n    if (this.collapsedA) {\n      this.setAttribute(`data-collapsed-a`, ``);\n    } else {\n      this.removeAttribute(`data-collapsed-a`);\n    }\n    if (this.collapsedB) {\n      this.setAttribute(`data-collapsed-b`, ``);\n    } else {\n      this.removeAttribute(`data-collapsed-b`);\n    }\n  }\n\n  #dispatchCollapsedEvent(panel: `A` | `B`, collapsed: boolean) {\n    this.dispatchEvent(new CustomEvent(`ixfx-split-collapsed`, {\n      detail: { panel, collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #setupNestedSplitObserver() {\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return;\n\n    this.#observer = new MutationObserver(() => {\n      this.#checkForNestedSplit();\n    });\n\n    this.#observer.observe(slotA, { characterData: true, childList: true, subtree: true });\n    this.#checkForNestedSplit();\n  }\n\n  #checkForNestedSplit() {\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return;\n\n    const assignedElements = slotA.assignedElements();\n\n    const findNestedSplit = (elements: Element[]): SplitLayoutElement | undefined => {\n      for (const el of elements) {\n        if (el.tagName === `IXFX-SPLIT-LAYOUT`) {\n          return el as SplitLayoutElement;\n        }\n        const nested = findNestedSplit(Array.from(el.children));\n        if (nested)\n          return nested;\n      }\n      return undefined;\n    };\n\n    const nestedSplit = findNestedSplit(assignedElements);\n\n    if (nestedSplit) {\n      this.#nestedSplit = nestedSplit;\n      this._hasCorner = true;\n      requestAnimationFrame(() => this.#updateCornerPosition());\n    } else {\n      this.#nestedSplit = undefined;\n      this._hasCorner = false;\n    }\n  }\n\n  #getNestedSplit(): SplitLayoutElement | undefined {\n    if (this.#nestedSplit)\n      return this.#nestedSplit;\n\n    const slotA = this.shadowRoot?.querySelector(`slot[name=\"a\"]`) as HTMLSlotElement | undefined;\n    if (!slotA)\n      return undefined;\n    const assignedElements = slotA.assignedElements();\n    return assignedElements.find(\n      el => el.tagName === `IXFX-SPLIT-LAYOUT`,\n    ) as SplitLayoutElement | undefined;\n  }\n\n  #parseSizeAsFraction(size: string, total: number): number {\n    if (size.endsWith(`px`)) {\n      return Number.parseFloat(size.replace(`px`, ``)) / total;\n    } else if (size.endsWith(`%`)) {\n      return Number.parseFloat(size.replace(`%`, ``)) / 100;\n    }\n    return 0.5;\n  }\n\n  #parseSizeToPx(size: string, total: number): number | null {\n    if (size.endsWith(`px`)) {\n      return Number.parseFloat(size.replace(`px`, ``));\n    } else if (size.endsWith(`%`)) {\n      return (Number.parseFloat(size.replace(`%`, ``)) / 100) * total;\n    }\n    return null;\n  }\n\n  #applyConstraints(sizeA: string, sizeB: string, total: number): { sizeA: string; sizeB: string } {\n    let fractionA = this.#parseSizeAsFraction(sizeA, total);\n    let fractionB = this.#parseSizeAsFraction(sizeB, total);\n\n    const minA = this.#minSizeToFraction(this.minSizeA, total);\n    const minB = this.#minSizeToFraction(this.minSizeB, total);\n    const maxA = this.#maxSizeToFraction(this.maxSizeA, total);\n    const maxB = this.#maxSizeToFraction(this.maxSizeB, total);\n\n    if (minA !== null || minB !== null) {\n      const minSum = (minA ?? 0) + (minB ?? 0);\n      if (minSum > 1) {\n        const scale = 1 / minSum;\n        if (minA !== null)\n          minA !== null ? fractionA = minA * scale : fractionA = 0;\n        if (minB !== null)\n          minB !== null ? fractionB = minB * scale : fractionB = 0;\n      }\n\n      if (fractionA < (minA ?? 0))\n        fractionA = minA ?? 0;\n      if (fractionB < (minB ?? 0))\n        fractionB = minB ?? 0;\n    }\n\n    if (maxA !== null) {\n      if (fractionA > maxA)\n        fractionA = maxA;\n    }\n    if (maxB !== null) {\n      if (fractionB > maxB)\n        fractionB = maxB;\n    }\n\n    fractionB = 1 - fractionA;\n\n    const isPercentA = !this.sizeA.endsWith(`px`);\n    const isPercentB = !this.sizeB.endsWith(`px`);\n\n    if (isPercentA) {\n      return { sizeA: `${fractionA * 100}%`, sizeB: `${fractionB * 100}%` };\n    } else {\n      return { sizeA: `${fractionA * total}px`, sizeB: `${fractionB * total}px` };\n    }\n  }\n\n  #minSizeToFraction(minSize: string, total: number): number | null {\n    if (minSize.length === 0)\n      return null;\n    const px = this.#parseSizeToPx(minSize, total);\n    if (px !== null)\n      return px / total;\n    if (minSize.endsWith(`%`))\n      return Number.parseFloat(minSize.replace(`%`, ``)) / 100;\n    return null;\n  }\n\n  #maxSizeToFraction(maxSize: string, total: number): number | null {\n    if (maxSize.length === 0)\n      return null;\n    const px = this.#parseSizeToPx(maxSize, total);\n    if (px !== null)\n      return px / total;\n    if (maxSize.endsWith(`%`))\n      return Number.parseFloat(maxSize.replace(`%`, ``)) / 100;\n    return null;\n  }\n\n  #getIntersectionPoint(): { x: number; y: number } | null {\n    const outerBounds = this.getBoundingClientRect();\n    const zoneEl = this.getZone();\n    if (!zoneEl)\n      return null;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (!nestedSplit)\n      return null;\n\n    const zoneBounds = zoneEl.getBoundingClientRect();\n\n    const outerFraction = this.#parseSizeAsFraction(this.sizeA || `50%`, outerBounds.width);\n\n    let x: number, y: number;\n\n    if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n      x = outerFraction * outerBounds.width;\n      const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.height);\n      y = nestedFraction * outerBounds.height;\n    } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n      const nestedFraction = this.#parseSizeAsFraction(nestedSplit.sizeA || `50%`, outerBounds.width);\n      x = nestedFraction * outerBounds.width;\n      y = outerFraction * outerBounds.height;\n    } else {\n      return null;\n    }\n\n    return { x, y };\n  }\n\n  #updateCornerPosition() {\n    if (!this._hasCorner)\n      return;\n\n    const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n    if (!cornerZone)\n      return;\n\n    const zoneEl = this.getZone();\n    if (!zoneEl)\n      return;\n\n    const intersection = this.#getIntersectionPoint();\n    if (!intersection) {\n      cornerZone.style.display = `none`;\n      return;\n    }\n\n    const cornerX = intersection.x - 6;\n    const cornerY = intersection.y - 6;\n\n    cornerZone.style.left = `${cornerX}px`;\n    cornerZone.style.top = `${cornerY}px`;\n    cornerZone.style.display = `block`;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n        cornerZone.style.cursor = `nwse-resize`;\n      } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n        cornerZone.style.cursor = `nesw-resize`;\n      }\n    }\n  }\n\n  getZone(): HTMLElement | undefined {\n    if (!this.shadowRoot)\n      return;\n    const el = this.shadowRoot.querySelector(`#zone`);\n    if (!el)\n      return undefined;\n    return el as HTMLElement;\n  }\n\n  #onResizeHandleDown = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.add(`user-resizing`);\n    }\n    this.#elementBounds = this.getBoundingClientRect();\n    this.#startSizeA = this.sizeA;\n    this.#startSizeB = this.sizeB;\n    window.addEventListener(`pointerup`, this.#onResizeHandleUp);\n    window.addEventListener(`pointermove`, this.#onResizeHandleMove);\n  };\n\n  #onResizeHandleUp = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.remove(`user-resizing`);\n    }\n    window.removeEventListener(`pointerup`, this.#onResizeHandleUp);\n    window.removeEventListener(`pointermove`, this.#onResizeHandleMove);\n  };\n\n  #onResizeHandleMove = (event: PointerEvent) => {\n    const bounds = this.#elementBounds;\n    if (!bounds)\n      return;\n\n    const threshold = 5;\n\n    if (this.layout === `horizontal`) {\n      const y = event.y - bounds.y;\n      const relativeY = clamp(y / bounds.height);\n\n      if (this.collapsible && this.collapsedA) {\n        if (relativeY > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {\n          this.collapsedA = false;\n          this.#dispatchCollapsedEvent(`A`, false);\n          this.#collapsedAPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeY * 100}%`,\n            `${(1 - relativeY) * 100}%`,\n            bounds.height,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedA && relativeY < threshold / bounds.height) {\n        this.collapsedA = true;\n        this.#dispatchCollapsedEvent(`A`, true);\n        this.sizeA = `0px`;\n        this.sizeB = `100%`;\n        this.#collapsedAPointerAtCollapse = relativeY;\n      } else if (!this.collapsedA) {\n        const { sizeA, sizeB } = this.#applyConstraints(\n          `${relativeY * 100}%`,\n          `${(1 - relativeY) * 100}%`,\n          bounds.height,\n        );\n        this.sizeA = sizeA;\n        this.sizeB = sizeB;\n      }\n\n      if (this.collapsible && this.collapsedB) {\n        if (relativeY < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {\n          this.collapsedB = false;\n          this.#dispatchCollapsedEvent(`B`, false);\n          this.#collapsedBPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeY * 100}%`,\n            `${(1 - relativeY) * 100}%`,\n            bounds.height,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedB && relativeY > (1 - threshold / bounds.height)) {\n        this.collapsedB = true;\n        this.#dispatchCollapsedEvent(`B`, true);\n        this.sizeA = `100%`;\n        this.sizeB = `0px`;\n        this.#collapsedBPointerAtCollapse = relativeY;\n      }\n    } else {\n      const x = event.x - bounds.x;\n      const relativeX = clamp(x / bounds.width);\n\n      if (this.collapsible && this.collapsedA) {\n        if (relativeX > (this.#collapsedAPointerAtCollapse ?? 0.05) + this.#hysteresisThreshold) {\n          this.collapsedA = false;\n          this.#dispatchCollapsedEvent(`A`, false);\n          this.#collapsedAPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeX * 100}%`,\n            `${(1 - relativeX) * 100}%`,\n            bounds.width,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedA && relativeX < threshold / bounds.width) {\n        this.collapsedA = true;\n        this.#dispatchCollapsedEvent(`A`, true);\n        this.sizeA = `0px`;\n        this.sizeB = `100%`;\n        this.#collapsedAPointerAtCollapse = relativeX;\n      } else if (!this.collapsedA) {\n        const { sizeA, sizeB } = this.#applyConstraints(\n          `${relativeX * 100}%`,\n          `${(1 - relativeX) * 100}%`,\n          bounds.width,\n        );\n        this.sizeA = sizeA;\n        this.sizeB = sizeB;\n      }\n\n      if (this.collapsible && this.collapsedB) {\n        if (relativeX < (this.#collapsedBPointerAtCollapse ?? 0.95) - this.#hysteresisThreshold) {\n          this.collapsedB = false;\n          this.#dispatchCollapsedEvent(`B`, false);\n          this.#collapsedBPointerAtCollapse = undefined;\n          const { sizeA, sizeB } = this.#applyConstraints(\n            `${relativeX * 100}%`,\n            `${(1 - relativeX) * 100}%`,\n            bounds.width,\n          );\n          this.sizeA = sizeA;\n          this.sizeB = sizeB;\n        }\n      } else if (this.collapsible && !this.collapsedB && relativeX > (1 - threshold / bounds.width)) {\n        this.collapsedB = true;\n        this.#dispatchCollapsedEvent(`B`, true);\n        this.sizeA = `100%`;\n        this.sizeB = `0px`;\n        this.#collapsedBPointerAtCollapse = relativeX;\n      }\n    }\n    event.preventDefault();\n  };\n\n  #onCornerResizeDown = (event: PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.add(`user-resizing`);\n    }\n\n    this.#elementBounds = this.getBoundingClientRect();\n    this.#cornerStartX = event.clientX;\n    this.#cornerStartY = event.clientY;\n    this.#startSizeA = this.sizeA;\n    this.#startSizeB = this.sizeB;\n\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      this.#nestedSplitInitialSizeA = nestedSplit.sizeA;\n      const nestedBounds = nestedSplit.getBoundingClientRect();\n      const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.resize-handle`) as HTMLElement;\n      if (nestedHandle) {\n        this.#nestedSplitBounds = nestedBounds;\n        this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();\n      }\n      const nestedZoneEl = nestedSplit.getZone();\n      if (nestedZoneEl) {\n        nestedZoneEl.classList.add(`user-resizing`);\n      }\n    }\n\n    window.addEventListener(`pointerup`, this.#onCornerResizeUp);\n    window.addEventListener(`pointermove`, this.#onCornerResizeMove);\n  };\n\n  #onCornerResizeUp = (event: PointerEvent) => {\n    event.preventDefault();\n    const zoneEl = this.getZone();\n    if (zoneEl) {\n      zoneEl.classList.remove(`user-resizing`);\n    }\n    const nestedSplit = this.#getNestedSplit();\n    if (nestedSplit) {\n      const nestedZoneEl = nestedSplit.getZone();\n      if (nestedZoneEl) {\n        nestedZoneEl.classList.remove(`user-resizing`);\n      }\n    }\n    window.removeEventListener(`pointerup`, this.#onCornerResizeUp);\n    window.removeEventListener(`pointermove`, this.#onCornerResizeMove);\n  };\n\n  #applyPendingNestedUpdate() {\n    if (!this.#pendingNestedUpdate)\n      return;\n    const { sizeA, sizeB } = this.#pendingNestedUpdate;\n    const nested = this.#getNestedSplit();\n    if (nested) {\n      nested.sizeA = `${sizeA * 100}%`;\n      nested.sizeB = `${sizeB * 100}%`;\n    }\n    this.#pendingNestedUpdate = null;\n  }\n\n  #onCornerResizeMove = (event: PointerEvent) => {\n    const outerBounds = this.#elementBounds;\n    const zoneEl = this.getZone();\n    const nestedSplit = this.#getNestedSplit();\n    if (!outerBounds || !zoneEl || !nestedSplit)\n      return;\n\n    const zoneBounds = zoneEl.getBoundingClientRect();\n    const cursorZoneLocalX = event.clientX - zoneBounds.left;\n    const cursorZoneLocalY = event.clientY - zoneBounds.top;\n\n    if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {\n      let newOuterFraction = cursorZoneLocalX / outerBounds.width;\n      let newNestedFraction = cursorZoneLocalY / outerBounds.height;\n\n      const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(\n        `${newOuterFraction * 100}%`,\n        `${(1 - newOuterFraction) * 100}%`,\n        outerBounds.width,\n      );\n      newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);\n\n      this.sizeA = constrainedA;\n      this.sizeB = constrainedB;\n\n      this.#pendingNestedUpdate = {\n        sizeA: newNestedFraction,\n        sizeB: 1 - newNestedFraction,\n      };\n      requestAnimationFrame(() => this.#applyPendingNestedUpdate());\n\n      const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n      if (cornerZone) {\n        cornerZone.style.left = `${cursorZoneLocalX - 6}px`;\n        cornerZone.style.top = `${cursorZoneLocalY - 6}px`;\n      }\n    } else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {\n      let newNestedFraction = cursorZoneLocalX / outerBounds.width;\n      let newOuterFraction = cursorZoneLocalY / outerBounds.height;\n\n      const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(\n        `${newOuterFraction * 100}%`,\n        `${(1 - newOuterFraction) * 100}%`,\n        outerBounds.height,\n      );\n      newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);\n\n      this.sizeA = constrainedA;\n      this.sizeB = constrainedB;\n\n      this.#pendingNestedUpdate = {\n        sizeA: newNestedFraction,\n        sizeB: 1 - newNestedFraction,\n      };\n      requestAnimationFrame(() => this.#applyPendingNestedUpdate());\n\n      const cornerZone = this.shadowRoot?.querySelector(`.corner-zone`) as HTMLElement | undefined;\n      if (cornerZone) {\n        cornerZone.style.left = `${cursorZoneLocalX - 6}px`;\n        cornerZone.style.top = `${cursorZoneLocalY - 6}px`;\n      }\n    }\n\n    event.preventDefault();\n  };\n\n  render() {\n    const sizePrefix = this.layout === `vertical` ? `width` : `height`;\n    let sizeA = this.sizeA;\n    let sizeB = this.sizeB;\n\n    if (this.collapsedA) {\n      sizeA = `0px`;\n    } else if (sizeA.length === 0 && sizeB.length === 0) {\n      sizeB = sizeA = `50%`;\n    } else if (sizeA.length === 0) {\n      sizeA = `auto`;\n    } else if (sizeB.length === 0) {\n      sizeB = `auto`;\n    }\n\n    if (this.collapsedB) {\n      sizeB = `0px`;\n    }\n\n    sizeA = `${sizePrefix}:${sizeA}`;\n    sizeB = `${sizePrefix}:${sizeB}`;\n\n    return html`\n    <div id=\"zone\">\n      <slot style=${sizeA} name=\"a\"></slot>\n      ${this._hasCorner ? html`<div class=\"corner-zone\" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}\n      <div @pointerdown=${this.#onResizeHandleDown} class=\"resize-handle\"></div>\n      <slot style=${sizeB} name=\"b\"></slot> \n    </div>`;\n  }\n\n  static styles = css`\n    :host {\n      --handle-size: 2px;\n      --handle-colour: var(--surface-5);\n      --handle-hover-colour: var(--surface-6);\n      --handle-active-colour: var(--accent);\n\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n    }\n    * {\n      box-sizing: border-box;\n    }\n    #zone {\n      display: flex;\n      height: 100%;\n      position: relative;\n    }\n    slot {\n      display: block;\n      overflow: hidden;\n    }\n    :slotted(*) {\n      width: 100%;\n      height: 100%;\n    }\n\n    .resize-handle {\n      background-color: var(--handle-colour);\n      width: var(--handle-size);\n      height: 100%;\n      cursor: ew-resize;\n      flex-shrink: 0;\n    }\n    #zone.user-resizing {\n      slot {\n        opacity: 0.5;\n      }\n      .resize-handle {\n        background-color: var(--handle-active-colour);\n      }\n    }\n    .resize-handle:hover {\n      background-color: var(--handle-hover-colour);\n    }\n\n    .corner-zone {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      z-index: 10;\n      border-radius: 50%;\n      background: transparent;\n    }\n    .corner-zone:hover {\n      background: transparent;\n    }\n\n    :host([layout='horizontal']) {\n      #zone {\n        flex-direction: column;\n      }\n      .resize-handle {\n        background-color: silver;\n        height: var(--handle-size);\n        width: 100%;\n        cursor: ns-resize;\n      }\n      .resize-handle:hover {\n        background-color: var(--handle-hover-colour);\n      }\n      #zone.user-resizing .resize-handle {\n        background-color: var(--handle-active-colour);\n      }\n    }\n\n    :host([data-collapsed-a]) slot[name=\"a\"],\n    :host([data-collapsed-b]) slot[name=\"b\"] {\n      display: none;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-split-layout\": SplitLayoutElement;\n  }\n}\n"],"mappings":"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"}