@ixfx/components 0.2.3 → 0.2.4

package/dist/snap-container/snap-container.js

@@ -0,0 +1,352 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let SnapContainer = class SnapContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        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 childSize = child
+            ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)
+            : 0;
+        const halfChild = childSize / 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 childSize = child
+            ? (this._isHorizontal ? child.offsetWidth : child.offsetHeight)
+            : 0;
+        const maxPosition = containerSize - childSize;
+        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);
+export { SnapContainer };
+//# sourceMappingURL=snap-container.js.map

package/dist/snap-container/snap-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-container.js","sourceRoot":"","sources":["../../src/snap-container/snap-container.ts"],"names":[],"mappings":"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"}

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

@@ -4,17 +4,22 @@ import { LitElement } from "lit";
  * proportionally.
  *
  * Events
- * * _none_
+ * ixfx-split-collapsed: Dispatched when a panel is collapsed/uncollapsed via drag.
+ *   detail: { panel: 'A' | 'B', collapsed: boolean }
+ *
  * Attributes
- * * layout: `vertical`|`horizontal`
- * * sizeA/B: CSS size of section A or B. Can use relative or absolute values
- * * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
+ * layout: `vertical`|`horizontal`
+ * sizeA/B: CSS size of section A or B. Can use relative or absolute values
+ * fixedA/B: If _true_ size will be calculated in pixels. By default (_false_) it uses % of whole
+ * collapsible: If _true_, panels can be collapsed by dragging to edge (default: false)
+ * minSizeA/B: Minimum size for panel A or B (e.g., "100px" or "20%"). Default: none
+ * maxSizeA/B: Maximum size for panel A or B (e.g., "200px" or "80%"). Default: none
  *
  * CSS variables
- * * --handle-size: 2px;              // Width/height of resize handle
- * * --handle-colour: whitesmoke;     // Colour of handle
- * * --handle-hover-colour: darkblue; // Colour of handle when hovering
- * * --handle-active-colour: blue;    // Colour of handle when being used
+ * --handle-size: 2px;              // Width/height of resize handle
+ * --handle-colour: var(--surface-5);     // Colour of handle
+ * --handle-hover-colour: var(--surface-6); // Colour of handle when hovering
+ * --handle-active-colour: var(--accent);    // Colour of handle when being used
  */
 export declare class SplitLayoutElement extends LitElement {
     #private;
@@ -23,8 +28,19 @@ export declare class SplitLayoutElement extends LitElement {
     sizeB: string;
     fixedA: boolean;
     fixedB: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    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 {

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

@@ -1 +1 @@
-{"version":3,"file":"split-layout.d.ts","sourceRoot":"","sources":["../../src/split-layout/split-layout.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;;IAEhD,MAAM,EAAE,UAAU,GAAG,YAAY,CAAc;IAG/C,KAAK,SAAM;IAEX,KAAK,SAAM;IAGX,MAAM,UAAS;IAEf,MAAM,UAAS;IAKf,MAAM;IA0BN,OAAO,IAAI,WAAW,GAAG,SAAS;IAmElC,MAAM,CAAC,MAAM,0BA4DZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,kBAAkB,CAAC;KACzC;CACF"}
+{"version":3,"file":"split-layout.d.ts","sourceRoot":"","sources":["../../src/split-layout/split-layout.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;;IAEhD,MAAM,EAAE,UAAU,GAAG,YAAY,CAAc;IAG/C,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,MAAM,UAAS;IAGf,MAAM,UAAS;IAGf,WAAW,UAAS;IAGpB,UAAU,UAAS;IAGnB,UAAU,UAAS;IAGnB,QAAQ,SAAM;IAGd,QAAQ,SAAM;IAGd,QAAQ,SAAM;IAGd,QAAQ,SAAM;IAGd,OAAO,CAAC,UAAU,CAAS;IAmB3B,oBAAoB;IAKpB,YAAY;IAIZ,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IA0N/C,OAAO,IAAI,WAAW,GAAG,SAAS;IAiRlC,MAAM;IA+BN,MAAM,CAAC,MAAM,0BAkFX;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,kBAAkB,CAAC;KACzC;CACF"}