@ixfx/components 0.0.2

package/dist/my-element.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class MyElement extends LitElement {
+    editMode: boolean;
+    x: number;
+    y: number;
+    anchor: `start` | `middle` | `end`;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "my-element": MyElement;
+    }
+}
+//# sourceMappingURL=my-element.d.ts.map

package/dist/my-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-element.d.ts","sourceRoot":"","sources":["../src/my-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,SAAU,SAAQ,UAAU;IAEvC,QAAQ,UAAS;IAGjB,CAAC,SAAK;IAGN,CAAC,SAAK;IAGN,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAW;IAG7C,MAAM,CAAC,MAAM,0BASZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/my-element.js

@@ -0,0 +1,44 @@
+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, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let MyElement = class MyElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.editMode = false;
+        this.x = 0;
+        this.y = 0;
+        this.anchor = `start`;
+    }
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+      --value-label-color: unset;
+    }
+    text {
+      user-select:none;
+    }
+
+  `; }
+};
+__decorate([
+    property({ type: Boolean })
+], MyElement.prototype, "editMode", void 0);
+__decorate([
+    property({ type: Number })
+], MyElement.prototype, "x", void 0);
+__decorate([
+    property({ type: Number })
+], MyElement.prototype, "y", void 0);
+__decorate([
+    property({ type: String })
+], MyElement.prototype, "anchor", void 0);
+MyElement = __decorate([
+    customElement('my-element')
+], MyElement);
+export { MyElement };
+//# sourceMappingURL=my-element.js.map

package/dist/my-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"my-element.js","sourceRoot":"","sources":["../src/my-element.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAEL,aAAQ,GAAG,KAAK,CAAC;QAGjB,MAAC,GAAG,CAAC,CAAC;QAGN,MAAC,GAAG,CAAC,CAAC;QAGN,WAAM,GAA+B,OAAO,CAAC;IAa/C,CAAC;aAVQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,AATY,CASZ;;AArBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACrB;AAGN;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACrB;AAGN;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACkB;AAXlC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAwBrB"}

package/dist/selecthorizontal.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+export declare class SelectHorizontalElement extends LitElement {
+    editMode: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-selecthorizontal-element": SelectHorizontalElement;
+    }
+}
+//# sourceMappingURL=selecthorizontal.d.ts.map

package/dist/selecthorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selecthorizontal.d.ts","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,uBAAwB,SAAQ,UAAU;IAErD,QAAQ,UAAS;IAGjB,MAAM;IASN,MAAM,CAAC,MAAM,0BAed;CACA;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,uBAAuB,CAAC;KAC1D;CACF"}

package/dist/selecthorizontal.js

@@ -0,0 +1,46 @@
+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 } from "lit/decorators.js";
+let SelectHorizontalElement = class SelectHorizontalElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.editMode = false;
+    }
+    render() {
+        console.log(`render`);
+        return html `
+    <option>pre</option>
+    <slot></slot>
+    <option>post</option>
+    `;
+    }
+    static { this.styles = css `
+  :host {
+    display: flex;
+    overflow: scroll;
+    width: 100%;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+  
+  ::slotted(*),option {
+    user-select: none;
+    scroll-snap-align: start;
+    border: 1px solid silver;
+    color:red;
+  }
+`; }
+};
+__decorate([
+    property({ type: Boolean })
+], SelectHorizontalElement.prototype, "editMode", void 0);
+SelectHorizontalElement = __decorate([
+    customElement('ixfx-selecthorizontal-element')
+], SelectHorizontalElement);
+export { SelectHorizontalElement };
+//# sourceMappingURL=selecthorizontal.js.map

package/dist/selecthorizontal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selecthorizontal.js","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAEL,aAAQ,GAAG,KAAK,CAAC;IA4BnB,CAAC;IAzBC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAepB,AAfc,CAed;;AA3BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACX;AAFN,uBAAuB;IADnC,aAAa,CAAC,+BAA+B,CAAC;GAClC,uBAAuB,CA8BnC"}

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

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+/**
+ * Lays out two elements within a container, with a bar to resize them
+ * proportionally.
+ *
+ * Events
+ * * _none_
+ * 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
+ *
+ * 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
+ */
+export declare class SplitLayoutElement extends LitElement {
+    #private;
+    layout: `vertical` | `horizontal`;
+    sizeA: string;
+    sizeB: string;
+    fixedA: boolean;
+    fixedB: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    getZone(): HTMLElement | undefined;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-split-layout": SplitLayoutElement;
+    }
+}
+//# sourceMappingURL=split-layout.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,220 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { clamp } from "@ixfx/numbers";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// TODO: Swap A/B panel content
+// TODO: Toggle collapse of A/B
+// TODO: Handle resizing of parent element
+// TODO: Fire event when panels have been resized
+/**
+ * Lays out two elements within a container, with a bar to resize them
+ * proportionally.
+ *
+ * Events
+ * * _none_
+ * 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
+ *
+ * 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
+ */
+let SplitLayoutElement = class SplitLayoutElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.layout = `vertical`;
+        this.sizeA = ``;
+        this.sizeB = ``;
+        this.fixedA = false;
+        this.fixedB = false;
+        this.#onResizeHandleDown = (event) => {
+            event.preventDefault();
+            //this.#userResizing = true;
+            const zoneEl = this.getZone();
+            if (zoneEl) {
+                zoneEl.classList.add(`user-resizing`);
+            }
+            this.#elementBounds = this.getBoundingClientRect();
+            window.addEventListener(`pointerup`, this.#onResizeHandleUp);
+            window.addEventListener(`pointermove`, this.#onResizeHandleMove);
+        };
+        this.#onResizeHandleUp = (event) => {
+            event.preventDefault();
+            //this.#userResizing = false;
+            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;
+            //console.log(`fixedA: ${ this.fixedA } b: ${ this.fixedB }`);
+            if (this.layout === `horizontal`) {
+                let y = event.y - bounds.y;
+                let relativeY = clamp(y / bounds.height);
+                //console.log(`relY: ${ relativeY } y: ${ y } event.y: ${ event.y } offset: ${ event.offsetY }`);
+                if (this.fixedA) {
+                    this.sizeA = `${relativeY * bounds.height}px`;
+                }
+                else {
+                    this.sizeA = `${relativeY * 100}%`;
+                }
+                if (this.fixedB) {
+                    this.sizeB = `${(1 - relativeY) * bounds.height}px`;
+                }
+                else {
+                    this.sizeB = `${(1 - relativeY) * 100}%`;
+                }
+            }
+            else {
+                let x = event.x - bounds.x;
+                let relativeX = clamp(x / bounds.width);
+                if (this.fixedA) {
+                    this.sizeA = `${relativeX * bounds.width}px`;
+                }
+                else {
+                    this.sizeA = `${relativeX * 100}%`;
+                }
+                if (this.fixedB) {
+                    this.sizeB = `${(1 - relativeX) * bounds.width}px`;
+                }
+                else {
+                    this.sizeB = `${(1 - relativeX) * 100}%`;
+                }
+            }
+            event.preventDefault();
+        };
+    }
+    //#userResizing = false;
+    #elementBounds;
+    render() {
+        // With vertical layout, fix the width
+        // With horizontal layout, fix the height
+        const sizePrefix = this.layout === `vertical` ? `width` : `height`;
+        let sizeA = this.sizeA;
+        let sizeB = this.sizeB;
+        if (sizeA.length === 0 && sizeB.length === 0) {
+            sizeB = sizeA = `50%`;
+        }
+        else if (sizeA.length === 0) {
+            sizeA = `auto`;
+        }
+        else if (sizeB.length === 0) {
+            sizeB = `auto`;
+        }
+        sizeA = `${sizePrefix}:${sizeA}`;
+        sizeB = `${sizePrefix}:${sizeB}`;
+        return html `
+    <div id="zone">
+      <slot style=${sizeA} name="a"></slot>
+      <div @pointerdown=${this.#onResizeHandleDown} class="resize-handle"></div>
+      <slot style=${sizeB} name="b"></slot> 
+    </div>`;
+    }
+    getZone() {
+        if (!this.shadowRoot)
+            return;
+        const el = this.shadowRoot.querySelector(`#zone`);
+        if (!el)
+            return undefined;
+        return el;
+    }
+    #onResizeHandleDown;
+    #onResizeHandleUp;
+    #onResizeHandleMove;
+    // Default is vertical split
+    static { this.styles = css `
+    :host {
+      --handle-size: 2px;
+      --handle-colour: whitesmoke;
+      --handle-hover-colour: darkblue;
+      --handle-active-colour: blue;
+
+      display: block;
+      box-sizing: border-box;
+      width:100%;
+      height:100%;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    #zone {
+      display:flex;
+      height: 100%;
+    }
+    slot {
+      display:block;
+    }
+    :slotted(*) {
+      width: 100%;
+      height: 100%;
+    }
+
+    .resize-handle {
+      background-color: var(--handle-colour);
+      width: var(--handle-size);
+      height:100%;
+      cursor: ew-resize;
+    }
+    #zone.user-resizing {
+      slot {
+        opacity: 0.5;
+      }
+      .resize-handle {
+        background-color: var(--handle-active-colour);
+      }
+    }
+    .resize-handle:hover {
+      background-color: var(--handle-hover-colour);
+    }
+
+    :host([layout='horizontal']) {
+      slot {
+        
+      }
+      #zone {
+        flex-direction: column;
+      }
+      .resize-handle {
+        background-color: silver;
+        height: var(--handle-size);
+        width:100%;
+        cursor: ns-resize;
+      }
+    }
+
+  `; }
+};
+__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);
+SplitLayoutElement = __decorate([
+    customElement('ixfx-split-layout')
+], SplitLayoutElement);
+export { SplitLayoutElement };
+//# sourceMappingURL=split-layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-layout.js","sourceRoot":"","sources":["../../src/split-layout/split-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,+BAA+B;AAC/B,+BAA+B;AAC/B,0CAA0C;AAC1C,iDAAiD;AACjD;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAEL,WAAM,GAA8B,UAAU,CAAC;QAG/C,UAAK,GAAG,EAAE,CAAC;QAEX,UAAK,GAAG,EAAE,CAAC;QAGX,WAAM,GAAG,KAAK,CAAC;QAEf,WAAM,GAAG,KAAK,CAAC;QAsCf,wBAAmB,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,4BAA4B;YAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;YACxC,CAAC;YACD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACnD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC7D,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACnE,CAAC,CAAA;QAED,sBAAiB,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,6BAA6B;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAC3C,CAAC;YACD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAChE,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACtE,CAAC,CAAA;QAED,wBAAmB,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;YACnC,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,8DAA8D;YAC9D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE,CAAC;gBACjC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;gBAC3B,IAAI,SAAS,GAAG,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;gBACzC,iGAAiG;gBAEjG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,IAAI,CAAC,KAAK,GAAG,GAAI,SAAS,GAAG,MAAM,CAAC,MAAO,IAAI,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,KAAK,GAAG,GAAI,SAAS,GAAG,GAAI,GAAG,CAAC;gBACvC,CAAC;gBACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,IAAI,CAAC,KAAK,GAAG,GAAI,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC,MAAO,IAAI,CAAC;gBACxD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,KAAK,GAAG,GAAI,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,GAAI,GAAG,CAAA;gBAC5C,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;gBAC3B,IAAI,SAAS,GAAG,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;gBACxC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,IAAI,CAAC,KAAK,GAAG,GAAI,SAAS,GAAG,MAAM,CAAC,KAAM,IAAI,CAAC;gBACjD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,KAAK,GAAG,GAAI,SAAS,GAAG,GAAI,GAAG,CAAC;gBACvC,CAAC;gBACD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,IAAI,CAAC,KAAK,GAAG,GAAI,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,MAAM,CAAC,KAAM,IAAI,CAAC;gBACvD,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,KAAK,GAAG,GAAI,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,GAAI,GAAG,CAAA;gBAC5C,CAAC;YACH,CAAC;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAA;IAgEH,CAAC;IA7JC,wBAAwB;IACxB,cAAc,CAAsB;IAEpC,MAAM;QACJ,sCAAsC;QACtC,yCAAyC;QACzC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QACnE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACvB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEvB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7C,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;QACxB,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,KAAK,GAAG,MAAM,CAAC;QACjB,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC9B,KAAK,GAAG,MAAM,CAAC;QACjB,CAAC;QAED,KAAK,GAAG,GAAI,UAAW,IAAK,KAAM,EAAE,CAAC;QACrC,KAAK,GAAG,GAAI,UAAW,IAAK,KAAM,EAAE,CAAC;QAErC,OAAO,IAAI,CAAA;;oBAEM,KAAM;0BACA,IAAI,CAAC,mBAAoB;oBAC/B,KAAM;WAChB,CAAA;IACT,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAClD,IAAI,CAAC,EAAE;YAAE,OAAO,SAAS,CAAC;QAC1B,OAAO,EAAiB,CAAC;IAC3B,CAAC;IAED,mBAAmB,CAUlB;IAED,iBAAiB,CAShB;IAED,mBAAmB,CAkClB;IAED,4BAA4B;aACrB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DlB,AA5DY,CA4DZ;;AAxKD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACoB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAChB;AAEX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACb;AAEf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACb;AAZJ,kBAAkB;IAD9B,aAAa,CAAC,mBAAmB,CAAC;GACtB,kBAAkB,CA2K9B"}

package/dist/svg-edit-label.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=svg-edit-label.d.ts.map

package/dist/svg-edit-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-edit-label.d.ts","sourceRoot":"","sources":["../src/svg-edit-label.ts"],"names":[],"mappings":""}

package/dist/svg-edit-label.js

@@ -0,0 +1,110 @@
+// /* eslint-disable @typescript-eslint/unbound-method */
+// import { RectPositioned, Rects } from "ixfx/geometry.js";
+// import { css, LitElement, PropertyValues, svg } from "lit";
+// import { customElement, property } from "lit/decorators.js";
+// import { createRef, Ref, ref } from 'lit/directives/ref.js';
+// import { focus } from "./util/content-editable";
+export {};
+// console.log('asdf');
+// @customElement('ixfx-svg-edit-label')
+// export class SvgEditLabel extends LitElement {
+//   @property({ type: Boolean })
+//   editMode = false;
+//   @property({ type: Number })
+//   x = 0;
+//   @property({ type: Number })
+//   y = 0;
+//   @property({ type: String })
+//   anchor: `start` | `middle` | `end` = `start`;
+//   @property({ type: String })
+//   fill: undefined;
+//   @property({ type: String })
+//   value: undefined;
+//   #textLabelBbox: RectPositioned = Rects.EmptyPositioned;
+//   textRef: Ref<SVGTextElement> = createRef();
+//   constructor() {
+//     super();
+//     console.log(`ctor`);
+//   }
+//   #renderLabel() {
+//     return svg`<text ${ ref(this.textRef) } id="label-value" @click=${ this.#onValueClick } fill=${ this.fill } text-anchor=${ this.anchor } x=${ this.x } y=${ this.y }>${ this.value }</text>`
+//   }
+//   #onValueClick() {
+//     this.editMode = true;
+//   }
+//   #renderEdit() {
+//     if (this.textRef.value) {
+//       const bbox = this.textRef.value.getBBox();
+//       console.log(`Got bbox`, bbox);
+//     }
+//     let x = this.x - this.#textLabelBbox.width / 2;
+//     let y = this.y - this.#textLabelBbox.height + 5;
+//     return svg`
+//     <foreignObject text-anchor=${ this.anchor } width=${ this.#textLabelBbox.width + 5 } height=${ this.#textLabelBbox.height } x=${ x } y=${ y }>
+//     <div @keydown=${ this.onKeyDown } @blur=${ this.onNumberEditBlur } xmlns="http://www.w3.org/1999/xhtml" tab-index=0 contentEditable=true>${ this.value }</div>
+//       </foreignObject>`
+//   }
+//   onNumberEditBlur(): void {
+//     this.editMode = false;
+//   }
+//   onKeyDown(event: KeyboardEvent) {
+//     const key = event.key;
+//     const shift = event.shiftKey;
+//     if (this.editMode) {
+//       if (key === `Escape`) {
+//         this.editMode = false;
+//         return;
+//       } else if (key === `Enter`) {
+//         this.editMode = false;
+//         return;
+//       }
+//     }
+//   }
+//   render() {
+//     if (this.editMode) {
+//       return this.#renderEdit();
+//     } else {
+//       return this.#renderLabel();
+//     }
+//   }
+//   protected override updated(_changedProperties: PropertyValues): void {
+//     if (!this.shadowRoot) return;
+//     const labelSvgEl = this.shadowRoot.querySelector(`#label-value`);
+//     if (labelSvgEl) {
+//       this.#textLabelBbox = (labelSvgEl as SVGTextElement).getBBox();
+//     }
+//     if (this.editMode) {
+//       const labelValueEditor = this.shadowRoot.querySelector(`svg>foreignObject>div`);
+//       if (labelValueEditor) {
+//         focus(labelValueEditor as HTMLDivElement, true);
+//       } else {
+//         console.warn(`Label editor not found`);
+//       }
+//     }
+//     //this.#textValueScreenCords = this.#SVGToScreen(this.#textValueSvgCoords);
+//   }
+//   static styles = css`
+//   :host {
+//     display: inline-block;
+//     --value-label-color: unset;
+//   }
+//   input {
+//     font:unset;
+//     position:absolute;
+//     background:unset;
+//   }
+//   foreignObject>div {
+//     width:-webkit-fill-available;
+//     background:red;
+//     margin: 0;
+//     padding: 0;
+//     line-height: unset;
+//   }
+// `
+// }
+// declare global {
+//   interface HTMLElementTagNameMap {
+//     "ixfx-svg-edit-label": SvgEditLabel;
+//   }
+// }
+//# sourceMappingURL=svg-edit-label.js.map

package/dist/svg-edit-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-edit-label.js","sourceRoot":"","sources":["../src/svg-edit-label.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,4DAA4D;AAC5D,8DAA8D;AAC9D,+DAA+D;AAC/D,+DAA+D;AAC/D,mDAAmD;;AAEnD,uBAAuB;AACvB,wCAAwC;AACxC,iDAAiD;AACjD,iCAAiC;AACjC,sBAAsB;AAEtB,gCAAgC;AAChC,WAAW;AAEX,gCAAgC;AAChC,WAAW;AAEX,gCAAgC;AAChC,kDAAkD;AAElD,gCAAgC;AAChC,qBAAqB;AAErB,gCAAgC;AAChC,sBAAsB;AAEtB,4DAA4D;AAE5D,gDAAgD;AAEhD,oBAAoB;AACpB,eAAe;AACf,2BAA2B;AAC3B,MAAM;AAEN,qBAAqB;AACrB,mMAAmM;AACnM,MAAM;AACN,sBAAsB;AACtB,4BAA4B;AAC5B,MAAM;AACN,oBAAoB;AACpB,gCAAgC;AAChC,mDAAmD;AACnD,uCAAuC;AACvC,QAAQ;AACR,sDAAsD;AACtD,uDAAuD;AACvD,kBAAkB;AAClB,qJAAqJ;AACrJ,qKAAqK;AACrK,0BAA0B;AAC1B,MAAM;AAEN,+BAA+B;AAC/B,6BAA6B;AAC7B,MAAM;AAEN,sCAAsC;AACtC,6BAA6B;AAC7B,oCAAoC;AACpC,2BAA2B;AAC3B,gCAAgC;AAChC,iCAAiC;AACjC,kBAAkB;AAClB,sCAAsC;AACtC,iCAAiC;AACjC,kBAAkB;AAClB,UAAU;AACV,QAAQ;AACR,MAAM;AAEN,eAAe;AACf,2BAA2B;AAC3B,mCAAmC;AACnC,eAAe;AACf,oCAAoC;AACpC,QAAQ;AACR,MAAM;AAEN,2EAA2E;AAC3E,oCAAoC;AACpC,wEAAwE;AACxE,wBAAwB;AACxB,wEAAwE;AACxE,QAAQ;AAER,2BAA2B;AAC3B,yFAAyF;AACzF,gCAAgC;AAChC,2DAA2D;AAC3D,iBAAiB;AACjB,kDAAkD;AAClD,UAAU;AAEV,QAAQ;AACR,kFAAkF;AAClF,MAAM;AAEN,yBAAyB;AACzB,YAAY;AACZ,6BAA6B;AAC7B,kCAAkC;AAClC,MAAM;AACN,YAAY;AACZ,kBAAkB;AAClB,yBAAyB;AACzB,wBAAwB;AACxB,MAAM;AAEN,wBAAwB;AACxB,oCAAoC;AACpC,sBAAsB;AACtB,iBAAiB;AACjB,kBAAkB;AAClB,0BAA0B;AAC1B,MAAM;AACN,IAAI;AACJ,IAAI;AACJ,mBAAmB;AACnB,sCAAsC;AACtC,2CAA2C;AAC3C,MAAM;AACN,IAAI"}

package/dist/tabs/tab-layout-item.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class TabLayoutItemElement extends LitElement {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-tab-layout-item": TabLayoutItemElement;
+    }
+}
+//# sourceMappingURL=tab-layout-item.d.ts.map

package/dist/tabs/tab-layout-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-layout-item.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-layout-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,oBAAqB,SAAQ,UAAU;IAIlD,MAAM,CAAC,MAAM,0BAIZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,oBAAoB,CAAC;KAC9C;CACF"}

package/dist/tabs/tab-layout-item.js

@@ -0,0 +1,20 @@
+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, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+let TabLayoutItemElement = class TabLayoutItemElement extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+  `; }
+};
+TabLayoutItemElement = __decorate([
+    customElement('ixfx-tab-layout-item')
+], TabLayoutItemElement);
+export { TabLayoutItemElement };
+//# sourceMappingURL=tab-layout-item.js.map

package/dist/tabs/tab-layout-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-layout-item.js","sourceRoot":"","sources":["../../src/tabs/tab-layout-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;aAI3C,WAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;;AARU,oBAAoB;IADhC,aAAa,CAAC,sBAAsB,CAAC;GACzB,oBAAoB,CAShC"}

package/dist/tabs/tab-layout.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class TabLayoutElement extends LitElement {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-tab-layout": TabLayoutElement;
+    }
+}
+//# sourceMappingURL=tab-layout.d.ts.map

package/dist/tabs/tab-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-layout.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,qBACa,gBAAiB,SAAQ,UAAU;IAG9C,MAAM,CAAC,MAAM,0BASZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,gBAAgB,CAAC;KACrC;CACF"}

package/dist/tabs/tab-layout.js

@@ -0,0 +1,25 @@
+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, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+let TabLayoutElement = class TabLayoutElement extends LitElement {
+    static { this.styles = css `
+    :host {
+      display: inline-block;
+      --value-label-color: unset;
+    }
+    text {
+      user-select:none;
+    }
+
+  `; }
+};
+TabLayoutElement = __decorate([
+    customElement('ixfx-tab-layout')
+], TabLayoutElement);
+export { TabLayoutElement };
+//# sourceMappingURL=tab-layout.js.map

package/dist/tabs/tab-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-layout.js","sourceRoot":"","sources":["../../src/tabs/tab-layout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;aAGvC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,AATY,CASZ;;AAZU,gBAAgB;IAD5B,aAAa,CAAC,iBAAiB,CAAC;GACpB,gBAAgB,CAa5B"}

package/dist/tabs/tab-list-item.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+/**
+ * CSS vars
+ * * --selected-colour: text colour
+ * * --selected-border-width: bottom border width
+ * * --padding
+ */
+export declare class TabListItemElement extends LitElement {
+    closeable: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-tab-list-item": TabListItemElement;
+    }
+}
+//# sourceMappingURL=tab-list-item.d.ts.map

package/dist/tabs/tab-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-item.d.ts","sourceRoot":"","sources":["../../src/tabs/tab-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAEhD,SAAS,UAAQ;IAKjB,MAAM;IAON,MAAM,CAAC,MAAM,0BA0BZ;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,kBAAkB,CAAC;KAC1C;CACF"}