legalesign-document-viewer 0.1.1 → 0.1.2

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

@@ -0,0 +1,352 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  position: relative;
+}
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.field-set {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.ls-field-properties-section {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ls-field-properties-section-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem;
+}
+
+.ls-field-properties-section-title {
+  color: var(--gray-90, #5e6066);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.ls-field-properties-section-description {
+  overflow: hidden;
+  color: var(--gray-80, #6c6e73);
+  text-overflow: ellipsis;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0.75rem; /* 120% */
+}
+
+.input-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.input-row .input-wrapper input {
+  width: 9.313rem;
+  max-width: 9.313rem;
+}
+
+/* Global Styles */
+
+p {
+  color: var(--gray-80, #6c6e73);
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+}
+
+a {
+  color: var(--primary-60, #4456f6);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-sm-line-height);
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: var(--primary-70, #2134dc);
+}
+
+.button-link,
+.button-link:hover {
+  all: unset;
+}
+
+select {
+  appearance: none;
+  height: 36px;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  width: 100%;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:disabled {
+  background: var(--gray-10, #f7f8fa);
+  cursor: not-allowed;
+  color: var(--gray-50, #d8d9dc);
+}
+
+.button-group button:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group > :first-child {
+  border-radius: 0.5rem 0 0 0.5rem;
+}
+
+.button-group > :last-child {
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.button-group > :not(:first-child) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}

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

@@ -0,0 +1,120 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldPlacement {
+    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: 'c38e749ed70fbec06710f1842f6a4a9d098f85b2' }, this.isMultiple(this.dataItem) && (h("div", { key: '9b6c2574cac07b37cebf5cabe2c14e9c03747ff6', class: 'ls-field-properties-section' }, h("div", { key: 'ad445360db70d5ae6f99df12f0b0e11caf079115' }, "Height: ", h("input", { key: 'e7095cd297a757619db208599495818831810d51', value: '', onChange: e => this.alter({ height: e.target.value }), width: "30" })), h("div", { key: '857a4248fc0be62c2de1496cc46777477cc7ab34' }, "Width: ", h("input", { key: '64766dcbcf2e4ff5bc18148a3d559320e8768a59', value: '', onChange: e => this.alter({ width: e.target.value }), width: "30" })), h("div", { key: 'c8fd6e434f645ef256cab36aea1eb9f2c792d602' }, "Top: ", h("input", { key: '523cd4e7ef778206040e61de23881c68cd83764f', value: '', onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: '8123153cc00b5ad6dfd1962644716d88afe3fd50' }, "Left: ", h("input", { key: '292224f465f7a5492e1e6c53fe05eba1b958068f', value: '', onChange: e => this.alter({ left: e.target.value }), width: "30" })))), this.isSingle(this.dataItem) && (h("div", { key: '3e8dab366e5f0b03a917d2dd5df5297324834a31', class: 'field-set' }, h("div", { key: 'bfe027f0be2444246e64b28705be24a8b3983f1c', class: 'ls-field-properties-section' }, h("div", { key: '5e26da9efc1a46c0f7d51d8af6c4f360adb217c7', class: 'ls-field-properties-section-text' }, h("p", { key: '2ff018f921da3820578ba7ce116e2f4bf3beeb12', class: 'ls-field-properties-section-title' }, "Height and Width"), h("p", { key: '92ec4d9c3a839964c049c218ea2e3096e9f8416c', class: 'ls-field-properties-section-description' }, "Define the height and width of one or multiple fields")), h("div", { key: '8e090fdba7956c47176cb2e208bab978d9db574b', class: 'input-row' }, h("div", { key: '0454d313992a5d3cba41b177d5e2f383e79760d3', class: 'input-wrapper' }, h("ls-icon", { key: 'd06422f06d4d9e3db801005d440b1b419ef99596', id: "selectLeadingIcon", name: "field-match-width" }), h("input", { key: 'bc688f5479fb3e4d118af31a0c06fb18f4df8c7f', class: 'has-leading-icon', aria: "field-width", id: "field-width", value: this.dataItem?.width, onChange: e => this.alter({ width: e.target.value }) })), h("div", { key: '6739deb4c2a592de6c49b62da73b976889974cb2', class: 'input-wrapper' }, h("ls-icon", { key: '84f3f46cb645ebfb559f93615b354735e5d3ea68', id: "selectLeadingIcon", name: "field-match-height" }), h("input", { key: 'ca64de782e04b9854715c97dcccfae638e39a5d8', class: 'has-leading-icon', aria: "field-height", id: "field-height", value: this.dataItem?.height, onChange: e => this.alter({ height: e.target.value }) })))), h("div", { key: '548b2fa676f1c7f1423487d8122ed4fbbc5643aa', class: 'ls-field-properties-section' }, h("div", { key: '3c95021d94b59e35f71a1394a96f2ecba6830ea3', class: 'ls-field-properties-section-text' }, h("p", { key: 'f2998db5a8f3b74d93a64d00934014da39a86d12', class: 'ls-field-properties-section-title' }, "Scale and Resize"), h("p", { key: '28532bcde4770d9c5a1ec242bb62f45f8daf9082', class: 'ls-field-properties-section-description' }, "Multi-select fields and match their dimensions")), h("div", { key: '089ab35ef48a8edf701eb3c0f46b0848d3dfb792', class: 'button-group' }, h("button", { key: 'ec313d99c1f9bff5d6d950855a9398c61ad7fbfd', disabled: true }, h("ls-icon", { key: '612ca8d573b699ebee86be53f3ed1b01a19423c1', name: "field-scale" })), h("button", { key: 'd4b2f23e97ecc77c1c2f078640651d10b23e3576', disabled: true }, h("ls-icon", { key: '902d890ed20e4d558475019c0cac0e71e96af29f', name: "field-match-width" })), h("button", { key: '846578af26854723a618210cdb9326028df305bc', disabled: true }, h("ls-icon", { key: '11390d2dd057fc8f53f814752368da1f3cc6ca9d', name: "field-match-height" })))), h("div", { key: 'bf2413d0db983afd7d027ff83974c989498dc9f6' }, "Top: ", h("input", { key: 'b303dac5c9642abae9d9153de0ddf42dfb4de10e', value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })), h("div", { key: 'f619f27989365109b7ed1c3ad5e9c0a830f248d7' }, "Left: ", h("input", { key: 'cf4566c32111ca92b3da4be25e4c57ff5ab53ca3', value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }), width: "30" }))))));
+    }
+    static get is() { return "ls-field-placement"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-placement.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-placement.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": true,
+                "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\" | \"image\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
+                    "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-placement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-placement.js","sourceRoot":"","sources":["../../../src/components/ls-field-placement/ls-field-placement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,gBAAgB;IACF,QAAQ,CAAgC;IAOjE,MAAM,CAAgC;IAOtC,MAAM,CAAgC;IAEtC,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,CAAC;QAClB,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,CAAC;YACvE,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAoB,CAAC,CAAC;YACvD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,MAAM,UAAU,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,EAAkB,EAAmB,CAAC;YAC9G,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,IAAoB,CAAC;YAChD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CACjC,4DAAK,KAAK,EAAE,6BAA6B;gBACvC;;oBACU,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAChH;gBACN;;oBACS,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAC9G;gBACN;;oBACO,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAC1G;gBACN;;oBACQ,8DAAO,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAC5G,CACF,CACP;YACA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAC/B,4DAAK,KAAK,EAAE,WAAW;gBACrB,4DAAK,KAAK,EAAE,6BAA6B;oBACvC,4DAAK,KAAK,EAAE,kCAAkC;wBAC5C,0DAAG,KAAK,EAAE,mCAAmC,uBAAsB;wBACnE,0DAAG,KAAK,EAAE,yCAAyC,4DAA2D,CAC1G;oBACN,4DAAK,KAAK,EAAE,WAAW;wBACrB,4DAAK,KAAK,EAAE,eAAe;4BACzB,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,mBAAmB,GAAW;4BACnE,8DACE,KAAK,EAAE,kBAAkB,EACzB,IAAI,EAAC,aAAa,EAClB,EAAE,EAAC,aAAa,EAChB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,GAC1E,CACE;wBACN,4DAAK,KAAK,EAAE,eAAe;4BACzB,gEAAS,EAAE,EAAC,mBAAmB,EAAC,IAAI,EAAC,oBAAoB,GAAW;4BACpE,8DACE,KAAK,EAAE,kBAAkB,EACzB,IAAI,EAAC,cAAc,EACnB,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,GAC3E,CACE,CACF,CACF;gBAEN,4DAAK,KAAK,EAAE,6BAA6B;oBACvC,4DAAK,KAAK,EAAE,kCAAkC;wBAC5C,0DAAG,KAAK,EAAE,mCAAmC,uBAAsB;wBACnE,0DAAG,KAAK,EAAE,yCAAyC,qDAAoD,CACnG;oBACN,4DAAK,KAAK,EAAE,cAAc;wBACxB,+DAAQ,QAAQ;4BACd,gEAAS,IAAI,EAAC,aAAa,GAAW,CAC/B;wBACT,+DAAQ,QAAQ;4BACd,gEAAS,IAAI,EAAC,mBAAmB,GAAW,CACrC;wBACT,+DAAQ,QAAQ;4BACd,gEAAS,IAAI,EAAC,oBAAoB,GAAW,CACtC,CACL,CACF;gBAQN;;oBACO,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAC1H;gBACN;;oBACQ,8DAAO,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,IAAI,GAAG,CAC7H,CACF,CACP,CACI,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-placement',\n  styleUrl: 'ls-field-placement.css',\n  shadow: true,\n})\nexport class LsFieldPlacement {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  update: EventEmitter<LSMutateEvent[]>;\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>\n              Height: <input value={''} onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Width: <input value={''} onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Top: <input value={''} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Left: <input value={''} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Height and Width</p>\n                <p class={'ls-field-properties-section-description'}>Define the height and width of one or multiple fields</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-width\"></ls-icon>\n                  <input\n                    class={'has-leading-icon'}\n                    aria=\"field-width\"\n                    id=\"field-width\"\n                    value={this.dataItem?.width}\n                    onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"field-match-height\"></ls-icon>\n                  <input\n                    class={'has-leading-icon'}\n                    aria=\"field-height\"\n                    id=\"field-height\"\n                    value={this.dataItem?.height}\n                    onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Scale and Resize</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and match their dimensions</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled>\n                  <ls-icon name=\"field-scale\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-width\"></ls-icon>\n                </button>\n                <button disabled>\n                  <ls-icon name=\"field-match-height\"></ls-icon>\n                </button>\n              </div>\n            </div>\n\n            {/* <div>\n              Height: <input value={this.dataItem?.height} onChange={e => this.alter({ height: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Width: <input value={this.dataItem?.width} onChange={e => this.alter({ width: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div> */}\n            <div>\n              Top: <input value={this.dataItem?.top} onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n            <div>\n              Left: <input value={this.dataItem?.left} onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} width=\"30\" />\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}