@ixfx/components 0.2.4 → 0.2.5

package/dist/snap-container.js

@@ -0,0 +1,297 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/snap-container/snap-container.ts
+let SnapContainer = class SnapContainer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.snapPositions = 3;
+		this.snapLogic = `balanced`;
+		this.clickSnap = `closest`;
+		this.snap = 0;
+		this._dragging = false;
+		this._dragStart = 0;
+		this._dragThreshold = 10;
+		this._thresholdReached = false;
+		this._currentDragIndex = 0;
+		this._child = null;
+		this._onPointerDown = (e) => {
+			const child = this._getChild();
+			if (!child) return;
+			const containerRect = this.getBoundingClientRect();
+			const newIndex = this._getSnapIndex(this._isHorizontal ? e.clientX : e.clientY, containerRect);
+			if (child.contains(e.target)) {
+				e.preventDefault();
+				e.stopPropagation();
+				this._dragging = true;
+				this._thresholdReached = false;
+				this._dragStart = this._isHorizontal ? e.clientX : e.clientY;
+				this._currentDragIndex = newIndex;
+				child.classList.add(`dragging`);
+				document.addEventListener(`pointermove`, this._onPointerMove);
+				document.addEventListener(`pointerup`, this._onPointerUp);
+			} else {
+				let targetIndex;
+				if (this.clickSnap === `step`) {
+					targetIndex = this.snap;
+					const childRect = child.getBoundingClientRect();
+					const childCenter = this._isHorizontal ? childRect.left + childRect.width / 2 : childRect.top + childRect.height / 2;
+					const clickPos = this._isHorizontal ? e.clientX : e.clientY;
+					if (clickPos > childCenter) targetIndex = Math.min(this.snapPositions - 1, this.snap + 1);
+					else if (clickPos < childCenter) targetIndex = Math.max(0, this.snap - 1);
+				} else targetIndex = newIndex;
+				if (targetIndex !== this.snap) {
+					const previousSnap = this.snap;
+					this.snap = targetIndex;
+					this._updateChildPosition(this.snap);
+					this.dispatchEvent(new CustomEvent(`snap-change`, {
+						detail: {
+							previousSnap,
+							newSnap: this.snap
+						},
+						bubbles: true,
+						composed: true
+					}));
+				} else this._updateChildPosition(this.snap);
+			}
+		};
+		this._onPointerMove = (e) => {
+			if (!this._dragging) return;
+			const currentPos = this._isHorizontal ? e.clientX : e.clientY;
+			const delta = currentPos - this._dragStart;
+			const containerRect = this.getBoundingClientRect();
+			if (!this._thresholdReached && Math.abs(delta) < this._dragThreshold) return;
+			this._thresholdReached = true;
+			const newIndex = this._getSnapIndex(currentPos, containerRect);
+			this._currentDragIndex = newIndex;
+			this._updateChildPosition(newIndex);
+			this.dispatchEvent(new CustomEvent(`snap-input`, {
+				detail: { index: newIndex },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this._onPointerUp = () => {
+			if (!this._dragging) return;
+			this._dragging = false;
+			const child = this._getChild();
+			if (child) child.classList.remove(`dragging`);
+			document.removeEventListener(`pointermove`, this._onPointerMove);
+			document.removeEventListener(`pointerup`, this._onPointerUp);
+			if (this._thresholdReached && this._currentDragIndex !== this.snap) {
+				const previousSnap = this.snap;
+				this.snap = this._currentDragIndex;
+				this._updateChildPosition(this.snap);
+				this.dispatchEvent(new CustomEvent(`snap-change`, {
+					detail: {
+						previousSnap,
+						newSnap: this.snap
+					},
+					bubbles: true,
+					composed: true
+				}));
+			} else this._updateChildPosition(this.snap);
+		};
+		this._onKeyDown = (e) => {
+			let newSnap = this.snap;
+			if (this._isHorizontal) if (e.key === `ArrowLeft`) newSnap = Math.max(0, this.snap - 1);
+			else if (e.key === `ArrowRight`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
+			else return;
+			else if (e.key === `ArrowUp`) newSnap = Math.max(0, this.snap - 1);
+			else if (e.key === `ArrowDown`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
+			else return;
+			e.preventDefault();
+			if (newSnap !== this.snap) {
+				const previousSnap = this.snap;
+				this.snap = newSnap;
+				this._updateChildPosition(this.snap);
+				this.dispatchEvent(new CustomEvent(`snap-change`, {
+					detail: {
+						previousSnap,
+						newSnap: this.snap
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      position: relative;
+      overflow: hidden;
+      touch-action: none;
+      user-select: none;
+      --transition-duration: 200ms;
+    }
+    
+    :host([orientation="horizontal"]) {
+      width: 100%;
+      height: auto;
+      min-height: 25px;
+    }
+    
+    :host([orientation="vertical"]) {
+      height: 100%;
+      width: auto;
+      min-width: 25px;
+    }
+    
+    :host(:not([orientation])) {
+      width: 100%;
+      min-height: 25px;
+    }
+    
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: inherit;
+      min-width: inherit;
+    }
+    
+    ::slotted(*) {
+      position: absolute;
+      transition: left var(--transition-duration) ease-out, 
+                  top var(--transition-duration) ease-out;
+      cursor: grab;
+      will-change: left, top;
+    }
+    
+    ::slotted(*:active) {
+      cursor: grabbing;
+    }
+    
+    :host([orientation="vertical"]) ::slotted(*) {
+      transition: top var(--transition-duration) ease-out,
+                  left var(--transition-duration) ease-out;
+    }
+    
+    .dragging {
+      transition: none !important;
+    }
+  `;
+	}
+	get _isHorizontal() {
+		return this.orientation !== `vertical`;
+	}
+	_getChild() {
+		if (this._child) return this._child;
+		return this.firstElementChild;
+	}
+	_computeSnapPositions() {
+		const positions = [];
+		const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;
+		const child = this._getChild();
+		const childSize = child ? this._isHorizontal ? child.offsetWidth : child.offsetHeight : 0;
+		if (containerSize === 0 || childSize === 0) return [];
+		const availableSpace = containerSize - childSize;
+		if (this.snapLogic === `centre`) for (let i = 0; i < this.snapPositions; i++) {
+			const fraction = i / (this.snapPositions - 1 || 1);
+			positions.push(fraction * availableSpace);
+		}
+		else {
+			const firstPosition = 0;
+			const lastPosition = availableSpace;
+			if (this.snapPositions === 1) positions.push(availableSpace / 2);
+			else if (this.snapPositions === 2) positions.push(firstPosition, lastPosition);
+			else {
+				positions.push(firstPosition);
+				const middleCount = this.snapPositions - 2;
+				for (let i = 1; i <= middleCount; i++) {
+					const fraction = i / (middleCount + 1);
+					positions.push(firstPosition + fraction * (lastPosition - firstPosition));
+				}
+				positions.push(lastPosition);
+			}
+		}
+		return positions;
+	}
+	_getSnapIndex(clientPos, containerRect) {
+		const offsetInAxis = this._isHorizontal ? clientPos - containerRect.left : clientPos - containerRect.top;
+		const snapPositions = this._computeSnapPositions();
+		if (snapPositions.length === 0) return 0;
+		const child = this._getChild();
+		const halfChild = (child ? this._isHorizontal ? child.offsetWidth : child.offsetHeight : 0) / 2;
+		let closestIndex = 0;
+		let closestDistance = Infinity;
+		for (let i = 0; i < snapPositions.length; i++) {
+			const snapCenter = snapPositions[i] + halfChild;
+			const distance = Math.abs(offsetInAxis - snapCenter);
+			if (distance < closestDistance) {
+				closestDistance = distance;
+				closestIndex = i;
+			}
+		}
+		return closestIndex;
+	}
+	_clampChildPosition(position) {
+		const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;
+		const child = this._getChild();
+		const maxPosition = containerSize - (child ? this._isHorizontal ? child.offsetWidth : child.offsetHeight : 0);
+		return Math.max(0, Math.min(position, maxPosition));
+	}
+	_updateChildPosition(index) {
+		const snapPositions = this._computeSnapPositions();
+		if (snapPositions.length === 0) return;
+		const clampedIndex = Math.max(0, Math.min(index, snapPositions.length - 1));
+		const position = snapPositions[clampedIndex];
+		const child = this._getChild();
+		if (!child) return;
+		if (this._isHorizontal) {
+			const clampedPosition = this._clampChildPosition(position);
+			child.style.left = `${clampedPosition}px`;
+			child.style.top = `0px`;
+		} else {
+			const clampedPosition = this._clampChildPosition(position);
+			child.style.top = `${clampedPosition}px`;
+			child.style.left = `0px`;
+		}
+		child.style.setProperty(`--snap-index`, String(clampedIndex));
+	}
+	firstUpdated() {
+		this._child = this.firstElementChild;
+		this._updateChildPosition(this.snap);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`snap`) && !this._dragging) this._updateChildPosition(this.snap);
+	}
+	render() {
+		return html`
+      <div 
+        class="container"
+        @pointerdown=${this._onPointerDown}
+        tabindex="0"
+        @keydown=${this._onKeyDown}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `orientation`
+})], SnapContainer.prototype, "orientation", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `snap-positions`
+})], SnapContainer.prototype, "snapPositions", void 0);
+__decorate([property({
+	type: String,
+	attribute: `snap-logic`
+})], SnapContainer.prototype, "snapLogic", void 0);
+__decorate([property({
+	type: String,
+	attribute: `click-snap`
+})], SnapContainer.prototype, "clickSnap", void 0);
+__decorate([property({ type: Number })], SnapContainer.prototype, "snap", void 0);
+__decorate([state()], SnapContainer.prototype, "_dragging", void 0);
+SnapContainer = __decorate([customElement(`ixfx-snap-container`)], SnapContainer);
+//#endregion
+export { SnapContainer };
+
+//# sourceMappingURL=snap-container.js.map

package/dist/snap-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-container.js","names":[],"sources":["../src/snap-container/snap-container.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nexport type SnapLogic = `centre` | `balanced`;\nexport type ClickSnapMode = `closest` | `step`;\n\n@customElement(`ixfx-snap-container`)\nexport class SnapContainer extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n      position: relative;\n      overflow: hidden;\n      touch-action: none;\n      user-select: none;\n      --transition-duration: 200ms;\n    }\n    \n    :host([orientation=\"horizontal\"]) {\n      width: 100%;\n      height: auto;\n      min-height: 25px;\n    }\n    \n    :host([orientation=\"vertical\"]) {\n      height: 100%;\n      width: auto;\n      min-width: 25px;\n    }\n    \n    :host(:not([orientation])) {\n      width: 100%;\n      min-height: 25px;\n    }\n    \n    .container {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      min-height: inherit;\n      min-width: inherit;\n    }\n    \n    ::slotted(*) {\n      position: absolute;\n      transition: left var(--transition-duration) ease-out, \n                  top var(--transition-duration) ease-out;\n      cursor: grab;\n      will-change: left, top;\n    }\n    \n    ::slotted(*:active) {\n      cursor: grabbing;\n    }\n    \n    :host([orientation=\"vertical\"]) ::slotted(*) {\n      transition: top var(--transition-duration) ease-out,\n                  left var(--transition-duration) ease-out;\n    }\n    \n    .dragging {\n      transition: none !important;\n    }\n  `;\n\n  @property({ type: String, attribute: `orientation` })\n  orientation: `horizontal` | `vertical` = `horizontal`;\n\n  @property({ type: Number, attribute: `snap-positions` })\n  snapPositions = 3;\n\n  @property({ type: String, attribute: `snap-logic` })\n  snapLogic: SnapLogic = `balanced`;\n\n  @property({ type: String, attribute: `click-snap` })\n  clickSnap: `closest` | `step` = `closest`;\n\n  @property({ type: Number })\n  snap = 0;\n\n  @state()\n  private _dragging = false;\n\n  private _dragStart = 0;\n  private _dragThreshold = 10;\n  private _thresholdReached = false;\n  private _currentDragIndex = 0;\n  private _child: HTMLElement | null = null;\n\n  private get _isHorizontal(): boolean {\n    return this.orientation !== `vertical`;\n  }\n\n  private _getChild(): HTMLElement | null {\n    if (this._child)\n      return this._child;\n    return this.firstElementChild as HTMLElement | null;\n  }\n\n  private _computeSnapPositions(): number[] {\n    const positions: number[] = [];\n    const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    if (containerSize === 0 || childSize === 0)\n      return [];\n\n    const availableSpace = containerSize - childSize;\n\n    if (this.snapLogic === `centre`) {\n      for (let i = 0; i < this.snapPositions; i++) {\n        const fraction = i / (this.snapPositions - 1 || 1);\n        positions.push(fraction * availableSpace);\n      }\n    } else {\n      const firstPosition = 0;\n      const lastPosition = availableSpace;\n\n      if (this.snapPositions === 1) {\n        positions.push(availableSpace / 2);\n      } else if (this.snapPositions === 2) {\n        positions.push(firstPosition, lastPosition);\n      } else {\n        positions.push(firstPosition);\n        const middleCount = this.snapPositions - 2;\n        for (let i = 1; i <= middleCount; i++) {\n          const fraction = i / (middleCount + 1);\n          positions.push(firstPosition + fraction * (lastPosition - firstPosition));\n        }\n        positions.push(lastPosition);\n      }\n    }\n\n    return positions;\n  }\n\n  private _getSnapIndex(clientPos: number, containerRect: DOMRect): number {\n    const offsetInAxis = this._isHorizontal\n      ? clientPos - containerRect.left\n      : clientPos - containerRect.top;\n\n    const snapPositions = this._computeSnapPositions();\n    if (snapPositions.length === 0)\n      return 0;\n\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    const halfChild = childSize / 2;\n    let closestIndex = 0;\n    let closestDistance = Infinity;\n\n    for (let i = 0; i < snapPositions.length; i++) {\n      const snapCenter = snapPositions[i] + halfChild;\n      const distance = Math.abs(offsetInAxis - snapCenter);\n      if (distance < closestDistance) {\n        closestDistance = distance;\n        closestIndex = i;\n      }\n    }\n\n    return closestIndex;\n  }\n\n  private _clampChildPosition(position: number): number {\n    const containerSize = this._isHorizontal ? this.clientWidth : this.clientHeight;\n    const child = this._getChild();\n    const childSize = child\n      ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)\n      : 0;\n\n    const maxPosition = containerSize - childSize;\n    return Math.max(0, Math.min(position, maxPosition));\n  }\n\n  private _updateChildPosition(index: number): void {\n    const snapPositions = this._computeSnapPositions();\n    if (snapPositions.length === 0)\n      return;\n\n    const clampedIndex = Math.max(0, Math.min(index, snapPositions.length - 1));\n    const position = snapPositions[clampedIndex];\n\n    const child = this._getChild();\n    if (!child)\n      return;\n\n    if (this._isHorizontal) {\n      const clampedPosition = this._clampChildPosition(position);\n      child.style.left = `${clampedPosition}px`;\n      child.style.top = `0px`;\n    } else {\n      const clampedPosition = this._clampChildPosition(position);\n      child.style.top = `${clampedPosition}px`;\n      child.style.left = `0px`;\n    }\n    child.style.setProperty(`--snap-index`, String(clampedIndex));\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    const child = this._getChild();\n    if (!child)\n      return;\n\n    const containerRect = this.getBoundingClientRect();\n    const newIndex = this._getSnapIndex(\n      this._isHorizontal ? e.clientX : e.clientY,\n      containerRect,\n    );\n\n    if (child.contains(e.target as Node)) {\n      e.preventDefault();\n      e.stopPropagation();\n      this._dragging = true;\n      this._thresholdReached = false;\n      this._dragStart = this._isHorizontal ? e.clientX : e.clientY;\n      this._currentDragIndex = newIndex;\n      child.classList.add(`dragging`);\n\n      document.addEventListener(`pointermove`, this._onPointerMove);\n      document.addEventListener(`pointerup`, this._onPointerUp);\n    } else {\n      let targetIndex: number;\n\n      if (this.clickSnap === `step`) {\n        targetIndex = this.snap;\n        const childRect = child.getBoundingClientRect();\n        const childCenter = this._isHorizontal\n          ? childRect.left + childRect.width / 2\n          : childRect.top + childRect.height / 2;\n        const clickPos = this._isHorizontal ? e.clientX : e.clientY;\n\n        if (clickPos > childCenter) {\n          targetIndex = Math.min(this.snapPositions - 1, this.snap + 1);\n        } else if (clickPos < childCenter) {\n          targetIndex = Math.max(0, this.snap - 1);\n        }\n      } else {\n        targetIndex = newIndex;\n      }\n\n      if (targetIndex !== this.snap) {\n        const previousSnap = this.snap;\n        this.snap = targetIndex;\n        this._updateChildPosition(this.snap);\n\n        this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n          detail: { previousSnap, newSnap: this.snap },\n          bubbles: true,\n          composed: true,\n        }));\n      } else {\n        this._updateChildPosition(this.snap);\n      }\n    }\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging)\n      return;\n\n    const currentPos = this._isHorizontal ? e.clientX : e.clientY;\n    const delta = currentPos - this._dragStart;\n    const containerRect = this.getBoundingClientRect();\n\n    if (!this._thresholdReached && Math.abs(delta) < this._dragThreshold) {\n      return;\n    }\n\n    this._thresholdReached = true;\n\n    const newIndex = this._getSnapIndex(currentPos, containerRect);\n    this._currentDragIndex = newIndex;\n    this._updateChildPosition(newIndex);\n\n    this.dispatchEvent(new CustomEvent<SnapInputDetail>(`snap-input`, {\n      detail: { index: newIndex },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onPointerUp = (): void => {\n    if (!this._dragging)\n      return;\n\n    this._dragging = false;\n    const child = this._getChild();\n    if (child)\n      child.classList.remove(`dragging`);\n\n    document.removeEventListener(`pointermove`, this._onPointerMove);\n    document.removeEventListener(`pointerup`, this._onPointerUp);\n\n    if (this._thresholdReached && this._currentDragIndex !== this.snap) {\n      const previousSnap = this.snap;\n      this.snap = this._currentDragIndex;\n      this._updateChildPosition(this.snap);\n\n      this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n        detail: { previousSnap, newSnap: this.snap },\n        bubbles: true,\n        composed: true,\n      }));\n    } else {\n      this._updateChildPosition(this.snap);\n    }\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    let newSnap = this.snap;\n\n    if (this._isHorizontal) {\n      if (e.key === `ArrowLeft`) {\n        newSnap = Math.max(0, this.snap - 1);\n      } else if (e.key === `ArrowRight`) {\n        newSnap = Math.min(this.snapPositions - 1, this.snap + 1);\n      } else {\n        return;\n      }\n    } else {\n      if (e.key === `ArrowUp`) {\n        newSnap = Math.max(0, this.snap - 1);\n      } else if (e.key === `ArrowDown`) {\n        newSnap = Math.min(this.snapPositions - 1, this.snap + 1);\n      } else {\n        return;\n      }\n    }\n\n    e.preventDefault();\n\n    if (newSnap !== this.snap) {\n      const previousSnap = this.snap;\n      this.snap = newSnap;\n      this._updateChildPosition(this.snap);\n\n      this.dispatchEvent(new CustomEvent<SnapChangeDetail>(`snap-change`, {\n        detail: { previousSnap, newSnap: this.snap },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  override firstUpdated(): void {\n    this._child = this.firstElementChild as HTMLElement | null;\n    this._updateChildPosition(this.snap);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`snap`) && !this._dragging) {\n      this._updateChildPosition(this.snap);\n    }\n  }\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div \n        class=\"container\"\n        @pointerdown=${this._onPointerDown}\n        tabindex=\"0\"\n        @keydown=${this._onKeyDown}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport type SnapChangeDetail = {\n  readonly previousSnap: number;\n  readonly newSnap: number;\n};\n\nexport type SnapChangeEvent = CustomEvent<SnapChangeDetail>;\n\nexport type SnapInputDetail = {\n  readonly index: number;\n};\n\nexport type SnapInputEvent = CustomEvent<SnapInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-snap-container': SnapContainer;\n  }\n}"],"mappings":"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"}

package/dist/{split-layout/split-layout.d.ts → split-layout.d.ts}

@@ -1,4 +1,7 @@
+import * as _$lit from "lit";
 import { LitElement } from "lit";
+
+//#region src/split-layout/split-layout.d.ts
 /**
  * Lays out two elements within a container, with a bar to resize them
  * proportionally.
@@ -21,31 +24,33 @@ import { LitElement } from "lit";
  * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
  * --handle-active-colour: var(--accent);    // Colour of handle when being used
  */
-export declare class SplitLayoutElement extends LitElement {
-    #private;
-    layout: `vertical` | `horizontal`;
-    sizeA: string;
-    sizeB: string;
-    fixedA: boolean;
-    fixedB: boolean;
-    collapsible: boolean;
-    collapsedA: boolean;
-    collapsedB: boolean;
-    minSizeA: string;
-    maxSizeA: string;
-    minSizeB: string;
-    maxSizeB: string;
-    private _hasCorner;
-    disconnectedCallback(): void;
-    firstUpdated(): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    getZone(): HTMLElement | undefined;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+declare class SplitLayoutElement extends LitElement {
+  #private;
+  layout: `vertical` | `horizontal`;
+  sizeA: string;
+  sizeB: string;
+  fixedA: boolean;
+  fixedB: boolean;
+  collapsible: boolean;
+  collapsedA: boolean;
+  collapsedB: boolean;
+  minSizeA: string;
+  maxSizeA: string;
+  minSizeB: string;
+  maxSizeB: string;
+  private _hasCorner;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  getZone(): HTMLElement | undefined;
+  render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ixfx-split-layout": SplitLayoutElement;
-    }
-}
+  interface HTMLElementTagNameMap {
+    "ixfx-split-layout": SplitLayoutElement;
+  }
+} //# sourceMappingURL=split-layout.d.ts.map
+//#endregion
+export { SplitLayoutElement };
 //# sourceMappingURL=split-layout.d.ts.map

package/dist/split-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-layout.d.ts","names":[],"sources":["../src/split-layout/split-layout.ts"],"mappings":";;;;;;;AA2BA;;;;;;;;;;;;;;;;;;;cACa,kBAAA,SAA2B,UAAA;EAAA;EAEtC,MAAA;EAGA,KAAA;EAGA,KAAA;EAGA,MAAA;EAGA,MAAA;EAGA,WAAA;EAGA,UAAA;EAGA,UAAA;EAGA,QAAA;EAGA,QAAA;EAGA,QAAA;EAGA,QAAA;EAAA,QAGQ,UAAA;EAmBR,oBAAA,CAAA;EAKA,YAAA,CAAA;EAIA,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAgP3B,OAAA,CAAA,GAAW,WAAA;EAsRX,MAAA,CAAA,GAtRsB,KAAA,CAsRhB,cAAA;EAAA,OA+BC,MAAA,EA/BD,KAAA,CA+BO,SAAA;AAAA;AAAA,QAqFP,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,kBAAA;EAAA;AAAA"}