@ixfx/components 0.2.4 → 0.2.6

package/dist/snap-container.js

@@ -0,0 +1,297 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { LitElement, css, html } from "lit";
+import { 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([safeCustomElement(`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":["customElement"],"sources":["../src/snap-container/snap-container.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.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}\n"],"mappings":"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"}

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

@@ -1,4 +1,6 @@
 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 +23,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(): import("lit").TemplateResult<1>;
+  static styles: import("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":";;;;;AA4BA;;;;;;;;;;;;;;;;;;;;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,iBAAM,cAAA;EAAA,OA+BC,MAAA,gBAAM,SAAA;AAAA;AAAA,QAqFP,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,kBAAkB;EAAA;AAAA"}