legalesign-document-viewer 0.0.7 → 0.0.8

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

@@ -0,0 +1,29 @@
+: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: gray;
+}
+
+.ls-toolbar-numeric {
+  width: 45px;
+    max-height: 18px;
+    margin: 0px;
+    padding: 0px;
+}

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

@@ -0,0 +1,173 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldDistribute {
+    dataItem;
+    mutate;
+    update;
+    component;
+    // 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);
+    }
+    distributeHorizontal() {
+        var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space');
+        var avgspace = 0;
+        const sorted = this.dataItem.sort((a, b) => (a.left - b.left));
+        if (spacing.value !== "") {
+            avgspace = parseInt(spacing.value);
+        }
+        else {
+            var space = 0;
+            for (var i = 1; i < sorted.length; i++) {
+                const c1 = sorted[i - 1];
+                const c2 = sorted[i];
+                space = space + (((c2.left - c1.left - c1.width)) <= 0 ? 0 : (c2.left - c1.left - c1.width));
+            }
+            avgspace = Math.floor(space / sorted.length);
+        }
+        var nextleft = sorted[0].left;
+        const diffs = sorted.map((c) => {
+            const newLeft = nextleft;
+            nextleft = nextleft + c.width + avgspace;
+            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);
+    }
+    distributeVertical() {
+        var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space');
+        var avgspace = 0;
+        const sorted = this.dataItem.sort((a, b) => (a.top - b.top));
+        if (spacing.value !== '')
+            avgspace = parseInt(spacing.value);
+        else {
+            var space = 0;
+            for (var i = 1; i < sorted.length; i++) {
+                const c1 = sorted[i - 1];
+                const c2 = sorted[i];
+                space = space + (((c2.top - c1.top - c1.height)) <= 0 ? 0 : (c2.top - c1.top - c1.height));
+            }
+            avgspace = Math.floor(space / sorted.length);
+        }
+        var buffer = sorted[0].top;
+        const diffs = sorted.map((c) => {
+            const newTop = buffer;
+            buffer = buffer + c.height + avgspace;
+            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: 'e34dae85e1ad46318881567b8295e4a5cecd8222' }, h("div", { key: '0174acf02458bb7edfbb5a273208bae26213413f', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '46455263311fa1ceaa24d95159b50190ece6b4d9', class: 'ls-round-button', onClick: () => { this.distributeHorizontal(); }, "aria-label": "Distribute selected fields horizontally.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields horizontally.", "data-tooltip-place": "top" }, h("ls-icon", { key: 'fcba8edda613a4f49fd28f0fbdde8be16847a59d', name: "field-distribute-horizontally" })), h("input", { key: '7369af7c27647ce8dfffc12fcbb4f25ce85590a3', type: "number", class: "ls-toolbar-numeric", id: "ls-fix-horizontal-space", value: "", size: 4, min: 0, max: 9999 }), h("button", { key: '3a6885343f04b8e38ae016440355c09b715c6600', onClick: () => { this.distributeVertical(); }, class: 'ls-round-button', "aria-label": "Distribute selected fields vertically.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Distribute selected fields vertically.", "data-tooltip-place": "top" }, h("ls-icon", { key: '67cfe264bf0d8e03db9c47e999497708ec80e232', name: "field-distribute-vertically" })), h("input", { key: '7521df1e46b1c42ee0b67be3792e13a64ac33d67', type: "number", class: "ls-toolbar-numeric", id: "ls-fix-vertical-space", value: "", size: 4, min: 0, max: 9999 })), h("slot", { key: '3ed38b0cd5d436adf30e2eb1cd846d84986aade1' })));
+    }
+    static get is() { return "ls-field-distribute"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-distribute.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-distribute.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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-field-distribute.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-distribute.js","sourceRoot":"","sources":["../../../src/components/ls-field-distribute/ls-field-distribute.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,iBAAiB;IAGzB,QAAQ,CAAiB;IAMzB,MAAM,CAAgC;IAMtC,MAAM,CAAgC;IAC9B,SAAS,CAAc;IAGlC,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAA;QACtE,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAA;QACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAGD,oBAAoB;QAClB,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,yBAAyB,CAAqB,CAAC;QACtG,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAA;QAE9D,IAAG,OAAO,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACxB,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;QACpC,CAAC;aAAM,CAAC;YACN,IAAI,KAAK,GAAG,CAAC,CAAA;YACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACvC,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBACxB,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;gBACpB,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;YAC9F,CAAC;YACD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;QAC9C,CAAC;QAED,IAAI,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;QAE7B,MAAM,KAAK,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,QAAQ,CAAA;YACxB,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAA;YAExC,OAAO;gBACL,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,GAAG,CAAC;oBACJ,IAAI,EAAE,OAAO;oBACb,EAAE,EAAE,OAAO;oBACX,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;iBACN;aAClB,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAA;QACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAGD,kBAAkB;QAChB,IAAI,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,uBAAuB,CAAqB,CAAC;QACpG,IAAI,QAAQ,GAAG,CAAC,CAAC;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAE5D,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE;YAAE,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;aACvD,CAAC;YACJ,IAAI,KAAK,GAAG,CAAC,CAAA;YACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACvC,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;gBACxB,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;gBACpB,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;YAC5F,CAAC;YACD,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;QAE9C,CAAC;QAED,IAAI,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;QAE1B,MAAM,KAAK,GAAoB,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9C,MAAM,MAAM,GAAG,MAAM,CAAA;YACrB,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAA;YAErC,OAAO;gBACL,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;oBACtB,GAAG,CAAC;oBACJ,GAAG,EAAE,MAAM;oBACX,EAAE,EAAE,MAAM;oBACV,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM;iBACN;aAClB,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAA;QACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iGAAiG;gBAC1G,+DACE,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAA,CAAC,CAAC,gBACnC,0CAA0C,qBACrC,YAAY,0BAAsB,0CAA0C,wBACzE,KAAK;oBACxB,gEAAS,IAAI,EAAC,+BAA+B,GAAG,CAAS;gBAE3D,8DAAO,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,EAAC,EAAE,EAAC,yBAAyB,EAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAG,GAAG,EAAE,IAAI,GAAI;gBACvH,+DACE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAA,CAAC,CAAC,EAC5C,KAAK,EAAC,iBAAiB,gBACZ,wCAAwC,qBACnC,YAAY,0BAAsB,wCAAwC,wBAAoB,KAAK;oBACnH,gEAAS,IAAI,EAAC,6BAA6B,GAAG,CACvC;gBACT,8DAAO,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,EAAC,EAAE,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAG,CAC/G;YACN,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-distribute',\n  styleUrl: 'ls-field-distribute.css',\n  shadow: true,\n})\nexport class LsFieldDistribute {\n  @Prop({\n    mutable: true\n  }) dataItem: 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  @Element() component: HTMLElement;\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\n  distributeHorizontal() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-horizontal-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => (a.left - b.left))\n\n    if(spacing.value !== \"\") {\n      avgspace = parseInt(spacing.value)\n    } else {\n      var space = 0\n      for (var i = 1; i < sorted.length; i++) {\n        const c1 = sorted[i - 1]\n        const c2 = sorted[i]\n        space = space + (((c2.left - c1.left - c1.width)) <= 0 ? 0 : (c2.left - c1.left - c1.width))\n      }\n      avgspace = Math.floor(space / sorted.length)\n    }\n\n    var nextleft = sorted[0].left\n\n    const diffs: LSMutateEvent[] = sorted.map((c) => {\n      const newLeft = nextleft\n      nextleft = nextleft + c.width + avgspace\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\n  distributeVertical() {\n    var spacing = this.component.shadowRoot.getElementById('ls-fix-vertical-space') as HTMLInputElement;\n    var avgspace = 0;\n    const sorted = this.dataItem.sort((a, b) => (a.top - b.top))\n\n    if (spacing.value !== '') avgspace = parseInt(spacing.value)\n    else {\n      var space = 0\n      for (var i = 1; i < sorted.length; i++) {\n        const c1 = sorted[i - 1]\n        const c2 = sorted[i]\n        space = space + (((c2.top - c1.top - c1.height)) <= 0 ? 0 : (c2.top - c1.top - c1.height))\n      }\n      avgspace = Math.floor(space / sorted.length)\n\n    }\n\n    var buffer = sorted[0].top\n\n    const diffs: LSMutateEvent[] = sorted.map((c) => {\n      const newTop = buffer\n      buffer = buffer + c.height + avgspace\n\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\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        <div class=\"flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30\">\n          <button\n            class='ls-round-button'\n            onClick={() => { this.distributeHorizontal() }}\n            aria-label=\"Distribute selected fields horizontally.\"\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Distribute selected fields horizontally.\"\n            data-tooltip-place=\"top\">\n            <ls-icon name=\"field-distribute-horizontally\" /></button>\n\n          <input type=\"number\" class=\"ls-toolbar-numeric\" id=\"ls-fix-horizontal-space\" value={\"\"} size={4} min={0}  max={9999} />\n          <button\n            onClick={() => { this.distributeVertical() }}\n            class='ls-round-button'\n            aria-label=\"Distribute selected fields vertically.\"\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Distribute selected fields vertically.\" data-tooltip-place=\"top\">\n            <ls-icon name=\"field-distribute-vertically\" />\n          </button>\n          <input type=\"number\" class=\"ls-toolbar-numeric\" id=\"ls-fix-vertical-space\" value={\"\"} size={4} min={0} max={9999}/>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: row;
+}
+
+.ls-field-format-bar {
+    display: flex;
+  flex-direction: row;
+}

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

@@ -0,0 +1,114 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldFormat {
+    dataItem;
+    mutate;
+    update;
+    component;
+    // 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);
+    }
+    render() {
+        return (h(Host, { key: 'f7e1e01dd3519de4af0022ca839788f34622c0fe' }, this.dataItem && this.dataItem.length > 1 &&
+            h("div", { key: '163d45e33489c20cfcfe100d1028bd462c7dab06', class: "ls-field-format-bar" }, h("select", { key: '0bb51866dcac394ce70dff226088d2844837b32b', onChange: (input) => {
+                    this.alter({ fontName: input.target.value });
+                } }, h("option", { key: 'a7e93b92114cfdfd595e76065dc072b7bb299bee', value: "arial" }, "Arial"), h("option", { key: 'c9d8c116fe38e2ec32c7b013f6fc3bc1c838520f', value: "liberation sans" }, "Liberation Sans"), h("option", { key: 'f36de6a494483f88cf82cd5d88c44be104c3daaf', value: "courier" }, "Courier"), h("option", { key: '2ed6572a993ddd23746c858a57731cbdae4b4b1e', value: "helvetica" }, "Helvetica"), h("option", { key: '5b9f95a6d02f6930ab7de9cb32fb605e8c18c639', value: "verdana" }, "Verdana")), h("input", { key: '12f74056dce07d5ce41ed49f5c4c95fdbafe2382', width: "30", size: 4 }), h("select", { key: 'a338fa91aa733ddba78c7df0d94e718f2f08445e' }, h("option", { key: 'd853cea035c0d5f70cd8879d13ee167a1ea5facb', value: "left" }, "Left"), h("option", { key: '5a90a02f0b8257308ac6195ebed26849bc7d4fc9', value: "center" }, "Center"), h("option", { key: '839dcb1c2bb6596a95c3272ea27b45f7162654cd', value: "right" }, "Right"))), this.dataItem && this.dataItem.length === 1 &&
+            h("div", { key: 'f91a4bb284252b4f94a7fe0361ebf04db53dc248', class: "ls-field-format-bar" }, h("select", { key: '4cacd3c4864048da1b34fc301fa17d2f29f7cc6f', onChange: (input) => {
+                    console.log(input.target.value);
+                } }, h("option", { key: '258b4d127ee30c3f84030007c721e7c8aae423ee', value: "arial" }, "Arial"), h("option", { key: 'ac6cc118d6485d1053c89b93193ca2eecca50447', value: "liberation sans" }, "Liberation Sans"), h("option", { key: '8f243ec5c570276a127bcd31447fbf8594cd81b1', value: "courier" }, "Courier"), h("option", { key: '074812fa4249944a00e12cae6c82cb4dfc790a7a', value: "helvetica" }, "Helvetica"), h("option", { key: '45af76ec7273b9b64734e3f20c75bc684a7439c7', value: "verdana" }, "Verdana")), h("input", { key: '5890944f1aa3581aa40f34b15cafef242e0a8484', width: "30", size: 4, value: this.dataItem[0].fontSize }), h("select", { key: '716ffb6b12c307c95ddadcd9083858cc59e1555e' }, h("option", { key: 'a737e6d38809d624da52db3971c63e761a3f50ed', value: "left" }, "Left"), h("option", { key: '62dffe46389bdf89c8ae703484956b13de4cd898', value: "center" }, "Center"), h("option", { key: '63d6f9f019ca6936e38a99fe29627625d4ad0cfc', value: "right" }, "Right")))));
+    }
+    static get is() { return "ls-field-format"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-format.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-format.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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-field-format.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-format.js","sourceRoot":"","sources":["../../../src/components/ls-field-format/ls-field-format.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQvF,MAAM,OAAO,aAAa;IAGrB,QAAQ,CAAiB;IAMzB,MAAM,CAAgC;IAMtC,MAAM,CAAgC;IAC9B,SAAS,CAAc;IAGlC,0CAA0C;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,IAAY;QAChB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAEjB,MAAM,KAAK,GAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,CAAC,EAAE,GAAG,IAAI,EAAkB,EAAE,CAAA;QACtE,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAA;QACtD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IACD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;gBACxC,4DAAK,KAAK,EAAE,qBAAqB;oBAC/B,+DAAQ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAC1B,IAAI,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAA;wBACrE,CAAC;wBACC,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,iBAAiB,sBAAyB;wBACxD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC;oBACT,8DAAO,KAAK,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,GAAI;oBAC7B;wBACE,+DAAQ,KAAK,EAAC,MAAM,WAAc;wBAClC,+DAAQ,KAAK,EAAC,QAAQ,aAAgB;wBACtC,+DAAQ,KAAK,EAAC,OAAO,YAAe,CAC7B,CACL;YACP,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC;gBAC1C,4DAAK,KAAK,EAAE,qBAAqB;oBAC/B,+DAAQ,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAC1B,OAAO,CAAC,GAAG,CAAE,KAAK,CAAC,MAA4B,CAAC,KAAK,CAAC,CAAA;wBACxD,CAAC;wBACC,+DAAQ,KAAK,EAAC,OAAO,YAAe;wBACpC,+DAAQ,KAAK,EAAC,iBAAiB,sBAAyB;wBACxD,+DAAQ,KAAK,EAAC,SAAS,cAAiB;wBACxC,+DAAQ,KAAK,EAAC,WAAW,gBAAmB;wBAC5C,+DAAQ,KAAK,EAAC,SAAS,cAAiB,CACjC;oBACT,8DAAO,KAAK,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAI;oBAC/D;wBACE,+DAAQ,KAAK,EAAC,MAAM,WAAc;wBAClC,+DAAQ,KAAK,EAAC,QAAQ,aAAgB;wBACtC,+DAAQ,KAAK,EAAC,OAAO,YAAe,CAC7B,CACL,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, h, Element, Event } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-format',\n  styleUrl: 'ls-field-format.css',\n  shadow: true,\n})\nexport class LsFieldFormat {\n  @Prop({\n    mutable: true\n  }) dataItem: 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  @Element() component: HTMLElement;\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  render() {\n    return (\n      <Host>\n        {this.dataItem && this.dataItem.length > 1 &&\n          <div class={\"ls-field-format-bar\"}>\n            <select onChange={(input) => {\n              this.alter({ fontName: (input.target as HTMLSelectElement).value })             \n            }}>\n              <option value=\"arial\">Arial</option>\n              <option value=\"liberation sans\">Liberation Sans</option>\n              <option value=\"courier\">Courier</option>\n              <option value=\"helvetica\">Helvetica</option>\n              <option value=\"verdana\">Verdana</option>\n            </select>\n            <input width=\"30\" size={4} />\n            <select>\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select>\n          </div>}\n        {this.dataItem && this.dataItem.length === 1 &&\n          <div class={\"ls-field-format-bar\"}>\n            <select onChange={(input) => {\n              console.log((input.target as HTMLSelectElement).value)             \n            }}>\n              <option value=\"arial\">Arial</option>\n              <option value=\"liberation sans\">Liberation Sans</option>\n              <option value=\"courier\">Courier</option>\n              <option value=\"helvetica\">Helvetica</option>\n              <option value=\"verdana\">Verdana</option>\n            </select>\n            <input width=\"30\" size={4} value={this.dataItem[0].fontSize} />\n            <select>\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select>\n          </div>}\n\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+  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);
+
+}
+
+.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-properties/ls-field-properties.js

@@ -0,0 +1,68 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldProperties {
+    dataItem;
+    renderFields() {
+        if (this.dataItem && this.dataItem?.length === 1) {
+            switch (this.dataItem[0].formElementType) {
+                case 'signature':
+                    return h("ls-field-properties-signature", { dataItem: this.dataItem[0] });
+                case 'date':
+                    return h("ls-field-properties-date", { dataItem: this.dataItem[0] });
+                case 'autodate':
+                    return h("ls-field-properties-date", { dataItem: this.dataItem[0] });
+                case 'text':
+                    return h("ls-field-properties-text", { dataItem: this.dataItem[0] });
+                case 'number':
+                    return h("ls-field-properties-number", { dataItem: this.dataItem[0] });
+                default:
+                    return h("ls-field-properties-general", { dataItem: this.dataItem[0] });
+            }
+        }
+        else if (this.dataItem && this.dataItem?.length > 1)
+            return h("ls-field-properties-multiple", { dataItem: this.dataItem });
+    }
+    render() {
+        return (h(Host, { key: '5ec66a914aed5ab37a149a64e6ba32d981f0c93f' }, this.dataItem && this.renderFields(), h("slot", { key: '52af83caee54c5c3134d898fb7859ad58f82ccf5' })));
+    }
+    static get is() { return "ls-field-properties"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-properties.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-properties.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiElement[]",
+                    "resolved": "LSApiElement[]",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../types/LSApiElement",
+                            "id": "src/types/LSApiElement.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-field-properties.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties/ls-field-properties.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IACpB,QAAQ,CAAiB;IAEjC,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;YACjD,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;gBACzC,KAAK,WAAW;oBACd,OAAO,qCAA+B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACtE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,UAAU;oBACb,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,MAAM;oBACT,OAAO,gCAA0B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACjE,KAAK,QAAQ;oBACX,OAAO,kCAA4B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;gBACnE;oBACE,OAAO,mCAA6B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAI,CAAA;YAEtE,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC;YACnD,OAAO,oCAA8B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAA;IAEpE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;YACrC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\n\n@Component({\n  tag: 'ls-field-properties',\n  styleUrl: 'ls-field-properties.css',\n  shadow: true,\n})\nexport class LsFieldProperties {\n  @Prop() dataItem: LSApiElement[];\n\n  renderFields() {\n    if (this.dataItem && this.dataItem?.length === 1) {\n      switch (this.dataItem[0].formElementType) {\n        case 'signature':\n          return <ls-field-properties-signature dataItem={this.dataItem[0]} />\n        case 'date':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'autodate':\n          return <ls-field-properties-date dataItem={this.dataItem[0]} />\n        case 'text':\n          return <ls-field-properties-text dataItem={this.dataItem[0]} />\n        case 'number':\n          return <ls-field-properties-number dataItem={this.dataItem[0]} />\n        default:\n          return <ls-field-properties-general dataItem={this.dataItem[0]} />\n\n      }\n    } else if (this.dataItem && this.dataItem?.length > 1)\n      return <ls-field-properties-multiple dataItem={this.dataItem} />\n\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.dataItem && this.renderFields()}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.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-properties-date/ls-field-properties-date.js

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldPropertiesDate {
+    dataItem;
+    render() {
+        return (h(Host, { key: '91b2aff43af5f14feeaca63bbc2321d86db5c3da' }, h("div", { key: '59296fb97a9a63063f93a4ac75696e8caeb34dc6', class: "ls-field-properties-section" }, "Date Field"), h("div", { key: 'f2e720190a837f25554469ab1be43f8b7062ff17' }, "Label: ", h("input", { key: '7fec61ff41be02aef43bca7213a0791b02e1e0bb', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: 'c5653214cabc48e06dead7e76e8560a7c595b302', dataItem: this.dataItem }), h("slot", { key: '6e007066ff5a828f9a57c58166b0f36219009f38' })));
+    }
+    static get is() { return "ls-field-properties-date"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-properties-date.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-properties-date.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiElement",
+                    "resolved": "{ 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
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-field-properties-date.js.map

package/dist/collection/components/ls-field-properties-date/ls-field-properties-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-date.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-date/ls-field-properties-date.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,qBAAqB;IACxB,QAAQ,CAAe;IAC/B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,iBAAkB;YAC3D;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAChD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-date',\n  styleUrl: 'ls-field-properties-date.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesDate {\n  @Prop() dataItem: LSApiElement;\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>Date Field</div>\n        <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n        <ls-field-dimensions dataItem={this.dataItem} />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.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-properties-general/ls-field-properties-general.js

@@ -0,0 +1,48 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldPropertiesGeneral {
+    dataItem;
+    render() {
+        return (h(Host, { key: 'e61fdbc0affab9b05cbda36bfced55fd62ed2f16' }, h("div", { key: 'ea65b3f69735e2a93882d8584f698ab066b3cd8b', class: "ls-field-properties-section" }, "General Field"), h("div", { key: 'e5df820b75aeb0a9d61c618ee040b6156382092c' }, "Label: ", h("input", { key: 'f4a1dbff82a379ba5eb78827b828ddc1a9612a54', value: this.dataItem?.label, width: "30" })), h("ls-field-dimensions", { key: '24cf3a00d6128dd1e0810aa723f3c4d9afd3b6da', dataItem: this.dataItem }), h("slot", { key: '3ab91ac8574a5f93b33ab07b80ff9e13ba01aceb' })));
+    }
+    static get is() { return "ls-field-properties-general"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-properties-general.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-properties-general.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiElement",
+                    "resolved": "{ 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
+            }
+        };
+    }
+}
+//# sourceMappingURL=ls-field-properties-general.js.map

package/dist/collection/components/ls-field-properties-general/ls-field-properties-general.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-general.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-general/ls-field-properties-general.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,wBAAwB;IAC3B,QAAQ,CAAe;IAE/B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,6BAA6B,oBAAqB;YAC9D;;gBAAY,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,IAAI,GAAE,CAAM;YAClE,4EAAqB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI;YAChD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { LSApiElement } from '../../components';\n\n@Component({\n  tag: 'ls-field-properties-general',\n  styleUrl: 'ls-field-properties-general.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesGeneral {\n  @Prop() dataItem: LSApiElement;\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ls-field-properties-section\"}>General Field</div>\n        <div>Label: <input value={this.dataItem?.label} width=\"30\"/></div>\n        <ls-field-dimensions dataItem={this.dataItem} />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-properties-multiple/ls-field-properties-multiple.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}