legalesign-document-viewer 0.0.7 → 0.0.9

package/dist/collection/components/ls-editor-field/ls-editor-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-editor-field.js","sourceRoot":"","sources":["../../../src/components/ls-editor-field/ls-editor-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, State, Prop, Watch, Listen } from '@stencil/core';\nimport { LSApiElement } from '../../components';\nimport { getInputType } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-editor-field',\n  styleUrl: 'ls-editor-field.css',\n  shadow: true,\n})\nexport class LsEditorField {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement;\n  @Prop() selected: boolean;\n  @Prop() readonly: boolean;\n  @Prop() palette: RoleColor[];\n\n  @Prop() type: 'text' | 'signature' | 'date' | 'regex' | 'file' | 'number' | 'autodate';\n  @Prop() page: { height: number, width: number };\n  @State() isEditing: boolean = false;\n  @State() heldEdge: string = null;\n  @State() isEdgeDragging: boolean = false;\n  @State() innerValue: string;\n  private sizeObserver: ResizeObserver;\n\n  @Listen('keydown')\n  handleInput(e: KeyboardEvent) {\n    if (e.code === \"Enter\") {\n      this.isEditing = false;\n      this.sizeObserver.observe(this.component.shadowRoot.getElementById('field-info'))\n    }\n  }\n\n  @Listen(\"mousemove\", { capture: true })\n  handleMouseMove(e) {\n    if (this.readonly) return;\n    if (!e.clientX) return;\n\n    // Determine which edge is being moved over and what cursor to show.\n    if (Math.abs(e.offsetX) < 5) {\n      this.component.style.cursor = \"ew-resize\";\n    } else if (Math.abs(e.offsetX - this.component.clientWidth) < 5) {\n      this.component.style.cursor = \"ew-resize\";\n    } else if (Math.abs(e.offsetY) < 5) {\n      this.component.style.cursor = \"ns-resize\";\n    } else if (Math.abs(e.offsetY - this.component.clientHeight) < 5) {\n      this.component.style.cursor = \"ns-resize\";\n    } else {\n      this.component.style.cursor = \"move\";\n    }\n  };\n\n  @Listen('dblclick', { capture: true })\n  handleDoubleClick() {\n    if (this.readonly) return;\n    this.isEditing = true;\n    this.heldEdge = null;\n    this.isEdgeDragging = false;\n    this.sizeObserver.disconnect()\n    this.innerValue = this.innerValue ? this.innerValue : this.dataItem?.value;\n    \n    const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLInputElement;\n    console.log(editbox)\n\n    if(editbox) {\n      editbox.className = 'ls-editor-field-editable'\n      editbox.focus();\n    }\n  }\n\n  @Listen('dragstart', { capture: false, passive: false })\n  handleDragStart(event) {\n    console.log(\"dragstart ls-editor-field\", event, this.type)\n    // Add the target element's id to the data transfer object\n    event.dataTransfer.setData(\"application/json\", JSON.stringify({\n      type: this.type\n    }));\n    event.dataTransfer.dropEffect = \"move\";\n  }\n\n  @Watch('selected')\n  watchSelectedHandler(_newValue: boolean, _oldValue: boolean) {\n    if (_newValue) this.component.style.border = \"1px dotted red\";\n    else this.component.style.border = \"1px solid black\";\n  }\n\n  onInputChange(e) {\n    // console.log(\"INPUT CHANGE\", e);\n    this.innerValue = e.target.value;\n  }\n\n  componentDidLoad() {\n\n    this.sizeObserver = new ResizeObserver((entries) => {\n\n      for (const entry of entries) {\n        if (entry.contentRect) {\n\n//          const editbox = this.component.shadowRoot.getElementById('editing-input') as HTMLElement;\n          const movebox = this.component.shadowRoot.getElementById('field-info') as HTMLElement;\n          // console.log(editbox)\n          // editbox.style.height = entry.contentRect.height + \"px\"\n          // editbox.style.width = entry.contentRect.width + \"px\"\n\n          movebox.style.height = entry.contentRect.height + \"px\"\n          movebox.style.width = entry.contentRect.width + \"px\"\n\n        }\n      }\n    })\n\n    this.sizeObserver.observe(this.component)\n\n    // New dropped components automatically need selecting.\n    if (this.selected) this.component.style.border = \"1px dotted red\";\n    else this.component.style.border = \"1px solid black\";\n  }\n\n\n\n  render() {\n    return (\n      <Host class={{\n        'ls-editor-field': true,\n        'is-selected': this.selected\n      }}>\n          <input id=\"editing-input\"\n            class={this.isEditing ? \"ls-editor-field-editable\" : \"hidden-field\"}\n            type={getInputType(this.dataItem.validation).inputType}\n            value={this.dataItem?.value || this.innerValue}\n            onChange={(e) => this.onInputChange(e)}\n          />\n          <div id=\"field-info\" class={this.isEditing ? \"hidden-field\" : \"ls-editor-field-draggable\"}>\n            {this.innerValue || this.dataItem?.label || this.dataItem?.formElementType}\n          </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-editor-table/ls-editor-table.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  z-index: 100;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+table {
+  background-color: azure;
+  border: 1px solid black
+}
+
+td {
+  border: 1px solid black
+}

package/dist/collection/components/ls-editor-table/ls-editor-table.js

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class LsEditorTable {
+    component;
+    /**
+  * The parent editor control.
+  * {LsDocumentViewer}
+  */
+    editor;
+    componentDidLoad() {
+        var dataTable = this.component.shadowRoot.getElementById('ls-editor-table');
+        Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {
+            const rowNode = document.createElement('tr');
+            const idCellNode = document.createElement('td');
+            idCellNode.innerText = fx.dataItem.id;
+            rowNode.appendChild(idCellNode);
+            const valueCellNode = document.createElement('td');
+            valueCellNode.innerText = fx.dataItem.value;
+            rowNode.appendChild(valueCellNode);
+            const labelCellNode = document.createElement('td');
+            labelCellNode.innerText = fx.dataItem.label;
+            rowNode.appendChild(labelCellNode);
+            dataTable.appendChild(rowNode);
+        });
+    }
+    render() {
+        return (h(Host, { key: '271021e59ed37d9847e1cdfa84ad1de54381f08b' }, h("table", { key: '7649085181f45356f016dcf8318a51c72cd2563e', id: "ls-editor-table" }), h("slot", { key: 'cb439f2cc88560c780390a970e641f4243fcf736' })));
+    }
+    static get is() { return "ls-editor-table"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-editor-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-editor-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "editor": {
+                "type": "unknown",
+                "attribute": "editor",
+                "mutable": false,
+                "complexType": {
+                    "original": "LsDocumentViewer",
+                    "resolved": "LsDocumentViewer",
+                    "references": {
+                        "LsDocumentViewer": {
+                            "location": "import",
+                            "path": "../ls-document-viewer/ls-document-viewer",
+                            "id": "src/components/ls-document-viewer/ls-document-viewer.tsx::LsDocumentViewer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The parent editor control.\n{LsDocumentViewer}"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-editor-table.js.map

package/dist/collection/components/ls-editor-table/ls-editor-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-editor-table.js","sourceRoot":"","sources":["../../../src/components/ls-editor-table/ls-editor-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQlE,MAAM,OAAO,aAAa;IACb,SAAS,CAAc;IAClC;;;IAGA;IACQ,MAAM,CAAmB;IAEjC,gBAAgB;QACd,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAsB,CAAC;QACjG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;YAE5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAC7C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAChD,UAAU,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAA;YACrC,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAEhC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACnD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAA;YAC3C,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YAEnC,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACnD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAA;YAC3C,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;YAEnC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAChC,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,EAAE,EAAC,iBAAiB,GACnB;YACR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\n\n@Component({\n  tag: 'ls-editor-table',\n  styleUrl: 'ls-editor-table.css',\n  shadow: true,\n})\nexport class LsEditorTable {\n  @Element() component: HTMLElement;\n  /**\n* The parent editor control.\n* {LsDocumentViewer}\n*/\n  @Prop() editor: LsDocumentViewer;\n\n  componentDidLoad() {\n    var dataTable = this.component.shadowRoot.getElementById('ls-editor-table') as HTMLCanvasElement;\n    Array.from(this.editor.component.shadowRoot.querySelectorAll('ls-editor-field')).forEach(fx => {\n\n      const rowNode = document.createElement('tr');\n      const idCellNode = document.createElement('td');\n      idCellNode.innerText = fx.dataItem.id\n      rowNode.appendChild(idCellNode);\n\n      const valueCellNode = document.createElement('td');\n      valueCellNode.innerText = fx.dataItem.value\n      rowNode.appendChild(valueCellNode);\n\n      const labelCellNode = document.createElement('td');\n      labelCellNode.innerText = fx.dataItem.label\n      rowNode.appendChild(labelCellNode);\n\n      dataTable.appendChild(rowNode)\n    })\n  }\n\n  render() {\n    return (\n      <Host>\n        <table id=\"ls-editor-table\">\n        </table>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-feature-column/ls-feature-column.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding: 4px
+}
+
+.activeIcon {
+  background-color: aliceblue;
+}

package/dist/collection/components/ls-feature-column/ls-feature-column.js

@@ -0,0 +1,68 @@
+import { Host, h } from "@stencil/core";
+export class LsFeatureColoumn {
+    /**
+    * Determines / sets which of the far left 'managers' is active.
+    * {'document' | 'toolbox' | 'participant' }
+    */
+    manager = 'toolbox';
+    // Send an manager change up the DOM
+    manage;
+    render() {
+        return (h(Host, { key: '14030230876b89f69c4f404d3a9bb2d0df08231a' }, h("ls-icon", { key: 'da8716822dfecf75167ad79f27eec08d4aca4b78', name: 'document', size: "36", class: this.manager === 'document' ? 'activeIcon' : '', onClick: () => { console.log('document'); this.manage.emit('document'); this.manager = 'document'; } }), h("ls-icon", { key: '9f191cb42e9c7e28a3988299dcb2817d6c33160d', name: 'typing-input', size: "36", class: this.manager === 'toolbox' ? 'activeIcon' : '', onClick: () => { this.manage.emit('toolbox'); this.manager = 'toolbox'; } }), h("ls-icon", { key: 'fa0d54ab0996a3816eb0bfcc7c363f08735ebdb2', name: 'user-group', size: "36", class: this.manager === 'participant' ? 'activeIcon' : '', onClick: () => { this.manage.emit('participant'); this.manager = 'participant'; } }), h("slot", { key: 'd8be0feee6199125d8755b66a41415a281e59811' })));
+    }
+    static get is() { return "ls-feature-column"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-feature-column.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-feature-column.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "manager": {
+                "type": "string",
+                "attribute": "manager",
+                "mutable": true,
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant'",
+                    "resolved": "\"document\" | \"participant\" | \"toolbox\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines / sets which of the far left 'managers' is active.\n{'document' | 'toolbox' | 'participant' }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'toolbox'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "manage",
+                "name": "manage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant'",
+                    "resolved": "\"document\" | \"participant\" | \"toolbox\"",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-feature-column.js.map

package/dist/collection/components/ls-feature-column/ls-feature-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,gBAAgB;IAEzB;;;MAGE;IACsB,OAAO,GAA2C,SAAS,CAAC;IAEpF,oCAAoC;IAC3B,MAAM,CAAuD;IAGxE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAE,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAA,CAAA,CAAC,GAAG;YAC9L,gEAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAG,OAAO,EAAE,GAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,SAAS,CAAA,CAAA,CAAC,GAAG;YACzK,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAG,OAAO,EAAE,GAAE,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAA,CAAA,CAAC,GAAG;YAEnL,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event } from '@stencil/core';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n\n    /**\n    * Determines / sets which of the far left 'managers' is active.\n    * {'document' | 'toolbox' | 'participant' }\n    */\n    @Prop({ mutable: true}) manager: 'document' | 'toolbox' | 'participant' = 'toolbox';\n  \n    // Send an manager change up the DOM\n    @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant'>;\n  \n  \n  render() {\n    return (\n      <Host>\n        <ls-icon name='document' size=\"36\" class={this.manager === 'document' ? 'activeIcon' : ''} onClick={()=> { console.log('document');this.manage.emit('document'); this.manager = 'document'}}/>\n        <ls-icon name='typing-input' size=\"36\"  class={this.manager === 'toolbox' ? 'activeIcon' : ''}  onClick={()=> { this.manage.emit('toolbox'); this.manager = 'toolbox'}}/>\n        <ls-icon name='user-group' size=\"36\"  class={this.manager === 'participant' ? 'activeIcon' : ''}  onClick={()=> { this.manage.emit('participant'); this.manager = 'participant'}}/>        \n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-alignment/ls-field-alignment.css

@@ -0,0 +1,20 @@
+:host {
+  display: inline-block;
+  vertical-align: middle;
+}
+button {
+  display: inline-flex;
+  background-color: transparent;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 0.5rem;
+  margin: 0.25rem;
+  width: 27px;  
+  height: 27px;
+  justify-content: center;
+  vertical-align: middle;
+  border: 0;
+}
+button:hover {
+  background-color: rgb(219, 219, 219);
+}

package/dist/collection/components/ls-field-alignment/ls-field-alignment.js

@@ -0,0 +1,202 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldAlignment {
+    dataItem;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: "update", data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    right() {
+        const rightmost = this.dataItem.reduce((rightmost, current) => {
+            return (current.left + current.width) < rightmost ? rightmost : (current.left + current.width);
+        }, 0);
+        console.log(rightmost);
+        const diffs = this.dataItem.map((c) => {
+            const newLeft = rightmost - c.width;
+            return {
+                action: "update", data: {
+                    ...c,
+                    left: newLeft,
+                    ax: newLeft,
+                    bx: newLeft + c.width
+                }
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    center() {
+        const addcentres = this.dataItem.reduce((total, current) => {
+            console.log(total + (current.left + current.width / 2));
+            return total + (current.left + current.width / 2);
+        }, 0);
+        console.log(addcentres);
+        const cp = addcentres / this.dataItem.length;
+        console.log('centerposition', cp);
+        const diffs = this.dataItem.map((c) => {
+            const newLeft = c.left + (cp - (c.left + c.width / 2));
+            return {
+                action: "update", data: {
+                    ...c,
+                    left: newLeft,
+                    ax: newLeft,
+                    bx: newLeft + c.width
+                }
+            };
+        });
+        console.log(diffs);
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    top() {
+        const topmost = this.dataItem.reduce((most, current) => {
+            return current.top < most ? most : current.top;
+        }, 0);
+        this.alter({ top: topmost });
+    }
+    left() {
+        const leftmost = this.dataItem.reduce((least, current) => {
+            return current.left < least ? current.left : least;
+        }, this.dataItem[0].left);
+        this.alter({ left: leftmost });
+    }
+    middle() {
+        const addmiddles = this.dataItem.reduce((total, current) => {
+            console.log(total + (current.top + current.height / 2));
+            return total + (current.top + current.height / 2);
+        }, 0);
+        const cp = addmiddles / this.dataItem.length;
+        const diffs = this.dataItem.map((c) => {
+            const newTop = c.top + (cp - (c.top + c.height / 2));
+            return {
+                action: "update", data: {
+                    ...c,
+                    top: newTop,
+                    ay: newTop,
+                    by: newTop + c.height
+                }
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    bottom() {
+        const lowest = this.dataItem.reduce((acc, current) => {
+            return acc > (current.top + current.height) ? acc : (current.top + current.height);
+        }, 0);
+        const diffs = this.dataItem.map((c) => {
+            const newTop = lowest - c.height;
+            return {
+                action: "update", data: {
+                    ...c,
+                    top: newTop,
+                    ay: newTop,
+                    by: newTop + c.height
+                }
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    render() {
+        return (h(Host, { key: 'a1de6bebd7aa25015b5d6891b6c61bda3bd16011' }, h("div", { key: '9f2dd99bd6ebc7b605e47101c830ecbdfbd24641' }, h("button", { key: 'dcab63a0567dde0cd54fd81be729a263fea86a8d', onClick: () => this.left(), class: 'ls-round-button', "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '998fa6e15a29c7816f0b43924bb4e0663609109a', name: "field-alignment-left" })), h("button", { key: '4d83647c277e38deb0e271e6d29025d38baaaf3a', onClick: () => this.center(), class: 'ls-round-button', "aria-label": "Align selected fields vertically about their centre.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '6aa90fce22792e031d9b868c5d1af2a332d99264', name: "field-alignment-centre" })), h("button", { key: 'dce8bc883871937bc750a1967a733e141a51923f', onClick: () => { this.right(); }, "aria-label": "Align selected fields vertically about their right edge.", class: 'ls-round-button', "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'c9d819e0a2b71e2b9cdc133114fdee15cac65807', name: "field-alignment-right" })), h("button", { key: 'dd30c144e877fba3e55b5febbbcce282ce5b4f36', onClick: () => this.top(), class: 'ls-round-button', "aria-label": "Align selected fields by their top.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '10be3c90695db9182b245ac0deee7b549d68728b', name: "field-alignment-top" })), h("button", { key: '8379fe058c20e6a6e7a38b5dacf2f2fe54767767', onClick: () => this.middle(), class: 'ls-round-button', "aria-label": "Align selected fields by their middles.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: '39cb5c2d0d50878dc46012590fab6c801064001e', name: "field-alignment-middle" })), h("button", { key: '2b2b7d4b14910b0b7405a72ca84b784436d3279b', onClick: () => this.bottom(), class: 'ls-round-button', "aria-label": "Align selected fields by their bottoms.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Shift + Select multiple fields to access this control", "data-tooltip-place": "top" }, h("ls-icon", { key: 'b8d043ebb45ebde2b458c80a2dc740311c3597d2', name: "field-alignment-bottom" }))), h("slot", { key: '6d8308e909e44447b868cc943858ec5f539ef644' })));
+    }
+    static get is() { return "ls-field-alignment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-alignment.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-alignment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": true,
+                "complexType": {
+                    "original": "LSApiElement[]",
+                    "resolved": "LSApiElement[]",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-field-alignment.js.map

package/dist/collection/components/ls-field-alignment/ls-field-alignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-alignment.js","sourceRoot":"","sources":["../../../src/components/ls-field-alignment/ls-field-alignment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n\n@Component({\n  tag: 'ls-field-alignment',\n  styleUrl: 'ls-field-alignment.css',\n  shadow: true,\n})\nexport class LsFieldAlignment {\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff)\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: \"update\", data: { ...c, ...diff } as LSApiElement }\n    })\n\n    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  right() {\n    const rightmost = this.dataItem.reduce((rightmost, current) => {\n\n      return (current.left + current.width) < rightmost ? rightmost : (current.left + current.width)\n    }, 0);\n\n    console.log(rightmost)\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n      const newLeft = rightmost - c.width\n\n      return {\n        action: \"update\", data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width\n        } as LSApiElement\n      }\n    })\n\n    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  center() {\n    const addcentres = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.left + current.width / 2))\n      return total + (current.left + current.width / 2)\n    }, 0);\n    console.log(addcentres)\n\n    const cp = addcentres / this.dataItem.length\n    console.log('centerposition', cp)\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n\n      const newLeft = c.left + (cp - (c.left + c.width / 2))\n      return {\n        action: \"update\", data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width\n        } as LSApiElement\n      }\n    })\n    console.log(diffs)\n    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  top() {\n    const topmost = this.dataItem.reduce((most, current) => {\n      return current.top < most ? most : current.top\n    }, 0);\n\n    this.alter({ top: topmost })\n  }\n\n\n  left() {\n    const leftmost = this.dataItem.reduce((least, current) => {\n      return current.left < least ?  current.left : least\n    }, this.dataItem[0].left);\n\n    this.alter({ left: leftmost })\n  }\n\n\n  middle() {\n    const addmiddles = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.top + current.height / 2))\n      return total + (current.top + current.height / 2)\n    }, 0);\n\n    const cp = addmiddles / this.dataItem.length\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n\n      const newTop = c.top + (cp - (c.top + c.height / 2))\n      return {\n        action: \"update\", data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height\n        } as LSApiElement\n      }\n    })\n    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  bottom() {\n    const lowest = this.dataItem.reduce((acc, current) => {\n      return acc > (current.top + current.height) ? acc : (current.top + current.height)\n    }, 0);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map((c) => {\n\n      const newTop = lowest - c.height\n      return {\n        action: \"update\", data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height\n        } as LSApiElement\n      }\n    })\n    this.dataItem = diffs.map(d => d.data  as LSApiElement)\n    this.mutate.emit(diffs)\n    this.update.emit(diffs)\n  }\n\n  render() {\n    return (\n      <Host>\n        \n          <div>\n            <button\n              onClick={() => this.left()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields vertically about their left edge.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-alignment-left\" /></button>\n            <button\n              onClick={() => this.center()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields vertically about their centre.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-alignment-centre\" /></button>\n            <button\n              onClick={() => { this.right() }}\n              aria-label=\"Align selected fields vertically about their right edge.\"\n              class='ls-round-button'\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n        <ls-icon name=\"field-alignment-right\" />\n            </button>\n\n            <button\n              onClick={() => this.top()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields by their top.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n         <ls-icon name=\"field-alignment-top\" />\n            </button>\n            <button\n              onClick={() => this.middle()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields by their middles.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n                <ls-icon name=\"field-alignment-middle\" /></button>\n            <button\n              onClick={() => this.bottom()}\n              class='ls-round-button'\n              aria-label=\"Align selected fields by their bottoms.\"\n              data-tooltip-id=\"le-tooltip\"\n              data-tooltip-content=\"Shift + Select multiple fields to access this control\"\n              data-tooltip-place=\"top\"\n            >\n              <ls-icon name=\"field-alignment-bottom\" />\n            </button>\n          </div>\n        \n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+.ls-field-properties-section {
+   display: flex;
+   flex-direction: column;
+  min-width: 110px;
+  background-color: white;
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-20, #EDEFF2);
+  background: var(--white, #FFF);
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+}

package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldDimensions {
+    dataItem;
+    mutate;
+    update;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        if (this.isMultiple(this.dataItem)) {
+            const diffs = this.dataItem.map(c => {
+                return { action: "update", data: { ...c, ...diff } };
+            });
+            this.dataItem = diffs.map(d => d.data);
+            this.mutate.emit(diffs);
+            this.update.emit(diffs);
+        }
+        else {
+            const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
+            this.dataItem = singleDiff.data;
+            this.mutate.emit([singleDiff]);
+            this.update.emit([singleDiff]);
+        }
+    }
+    render() {
+        return (h(Host, { key: '41458b8320c87c3f771a9a854e6e63bb90f598d9' }, (this.isMultiple(this.dataItem)) &&
+            h("div", { key: '0fe39be49300393e3e04c5ab0b1b7fbf2aba9e91', class: "ls-field-properties-section" }, h("div", { key: '97d5f4502f6a33c42dcdfa7223f03dec0ed9c20f' }, "Height: ", h("input", { key: 'c6bbffba5356dcc5a30a9e372b107b975fb4a978', value: "", onChange: (e) => this.alter({ height: e.target.value }), width: "30" })), h("div", { key: 'f87c1642300bbd48f276a3272bf39ce358774053' }, "Width:  ", h("input", { key: '82c911e73d3ecf061543bf746454cf304c255520', value: "", onChange: (e) => this.alter({ width: e.target.value }), width: "30" })), h("div", { key: 'd4c9ded48c9a15bd5206aff3d3de813d952e632c' }, "Top:  ", h("input", { key: 'c630505111a020a5ed32ba810a93e1d0eb4b3b61', value: "", onChange: (e) => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: '51a7944b48838a24258505975700490a835e3d22' }, "Left:  ", h("input", { key: '1aabde21999546c090920cba9f9738614cbf6b6d', value: "", onChange: (e) => this.alter({ left: e.target.value }), width: "30" }))), (this.isSingle(this.dataItem)) &&
+            h("div", { key: '62f9595ab77522c2d193531b78aeeb272fe5ae23', class: "ls-field-properties-section" }, h("div", { key: '8c5d82f9e61ad4cba9c219d634e2df442a50098f' }, "Height: ", h("input", { key: '0f045e5dc1fce3e86d312f085911bfa9970ab229', value: this.dataItem?.height, onChange: (e) => this.alter({ height: e.target.value }), width: "30" })), h("div", { key: '91626cc698e9d0b4daef997e13007f3f2a8acbdb' }, "Width:  ", h("input", { key: 'cbf6faed034cabfaa6458d724c024643b33a344b', value: this.dataItem?.width, onChange: (e) => this.alter({ width: e.target.value }), width: "30" })), h("div", { key: '1216fc1ee08fc41b0ba8b09d8df23cfd2c0e9d49' }, "Top:  ", h("input", { key: '2071fae101442384f28885d8d68a409fc2932ec8', value: this.dataItem?.top, onChange: (e) => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: '4a0351e88cf55bbaa872630dd24e64e4763b6679' }, "Left:  ", h("input", { key: '23e7033f18a899e31122fc67b09cbcef74e92098', value: this.dataItem?.left, onChange: (e) => this.alter({ left: e.target.value }), width: "30" })))));
+    }
+    static get is() { return "ls-field-dimensions"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-dimensions.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-dimensions.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiElement | LSApiElement[]",
+                    "resolved": "LSApiElement[] | { id: string; align: string; ax?: number; ay?: number; bx?: number; by?: number; left?: number; top?: number; height?: number; width?: number; elementType: string; fieldOrder?: number; fontName: string; fontSize: number; hideBorder?: boolean; label?: string; labelExtra?: string; helpText?: string; optional?: boolean; options?: string; page?: number; role?: LSApiRole; substantive?: boolean; validation?: number; value?: string; logicGroup?: string; logicAction?: number; mapTo?: string; signer: number; link?: string; formElementType?: \"number\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; }",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-field-dimensions.js.map

package/dist/collection/components/ls-field-dimensions/ls-field-dimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-dimensions.js","sourceRoot":"","sources":["../../../src/components/ls-field-dimensions/ls-field-dimensions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,iBAAiB;IACpB,QAAQ,CAAgC;IAM7C,MAAM,CAAgC;IAMtC,MAAM,CAAgC;IAGzC,QAAQ,CAAC,EAAiC;QACxC,OAAQ,EAAqB,CAAC,MAAM,KAAK,SAAS,CAAC;IACrD,CAAC;IAED,UAAU,CAAC,EAAiC;QAC1C,OAAO,OAAQ,EAAqB,CAAC,MAAM,KAAK,QAAQ,CAAC;IAC3D,CAAC;IAED,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACjB,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnC,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAA;YACtE,CAAC,CAAC,CAAA;YAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAA;YACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACzB,CAAC;aAAM,CAAC;YACN,MAAM,UAAU,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAkB,EAAmB,CAAA;YAC7G,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,IAAoB,CAAA;YAC/C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;YAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBAC/B,4DAAK,KAAK,EAAE,6BAA6B;oBACvC;;wBAAa,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM;oBACjI;;wBAAa,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM;oBAChI;;wBAAW,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM;oBAC5H;;wBAAY,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM,CAC1H;YAEP,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBAC7B,4DAAK,KAAK,EAAE,6BAA6B;oBACvC;;wBAAa,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM;oBACpJ;;wBAAa,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM;oBAClJ;;wBAAW,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM;oBAC5I;;wBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAAM,CAC3I,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-dimensions',\n  styleUrl: 'ls-field-dimensions.css',\n  shadow: true,\n})\nexport class LsFieldDimensions {\n  @Prop() dataItem: LSApiElement | LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n\n  isSingle(dt: LSApiElement | LSApiElement[]): dt is LSApiElement {\n    return (dt as LSApiElement[]).length === undefined;\n  }\n\n  isMultiple(dt: LSApiElement | LSApiElement[]): dt is LSApiElement[] {\n    return typeof (dt as LSApiElement[]).length === 'number';\n  }\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n    console.log(diff)\n    if (this.isMultiple(this.dataItem)) {\n      const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n        return { action: \"update\", data: { ...c, ...diff } as LSApiElement }\n      })\n      \n      this.dataItem = diffs.map(d => d.data as LSApiElement)\n      this.mutate.emit(diffs)\n      this.update.emit(diffs)\n    } else {\n      const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } as LSApiElement } as LSMutateEvent\n      this.dataItem = singleDiff.data as LSApiElement\n      this.mutate.emit([singleDiff])\n      this.update.emit([singleDiff])\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.isMultiple(this.dataItem)) &&\n          <div class={\"ls-field-properties-section\"}>\n            <div>Height: <input value={\"\"} onChange={(e) => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n            <div>Width:  <input value={\"\"} onChange={(e) => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n            <div>Top:  <input value={\"\"} onChange={(e) => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n            <div>Left:  <input value={\"\"} onChange={(e) => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n          </div>\n        }\n        {(this.isSingle(this.dataItem)) &&\n          <div class={\"ls-field-properties-section\"}>\n            <div>Height: <input value={this.dataItem?.height} onChange={(e) => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n            <div>Width:  <input value={this.dataItem?.width} onChange={(e) => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n            <div>Top:  <input value={this.dataItem?.top} onChange={(e) => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n            <div>Left:  <input value={this.dataItem?.left} onChange={(e) => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" /></div>\n          </div>}\n      </Host>\n    );\n  }\n}\n"]}