legalesign-document-viewer 0.7.1 → 0.7.2

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

@@ -0,0 +1,370 @@
+: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;
+}
+
+.multi-button-group-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.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: 2.25rem;
+}
+
+.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);
+}
+
+#selectLeadingIconDisabled {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-50, #d8d9dc);
+}
+
+
+.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:not(:disabled),
+select:hover:not(:disabled),
+textarea:hover:not(:disabled) {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus:not(:disabled),
+select:focus:not(:disabled),
+textarea:focus:not(:disabled) {
+  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:not(:disabled),
+select:active:not(:disabled),
+textarea:active:not(:disabled) {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+  color: var(--gray-50, #d8d9dc);
+  box-shadow: none;
+}
+
+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;
+  width: 100%;
+}
+
+.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,121 @@
+import { Host, h } from "@stencil/core";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsFieldPlacement {
+    component;
+    dataItem;
+    mutate;
+    isSingle(dt) {
+        return dt.length === undefined;
+    }
+    isMultiple(dt) {
+        return typeof dt.length === 'number';
+    }
+    getValue(key) {
+        if (this.isMultiple(this.dataItem)) {
+            return "";
+        }
+        else if (this.isSingle(this.dataItem)) {
+            return this.dataItem[key];
+        }
+        return '';
+    }
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(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);
+        }
+        else {
+            const singleDiff = { action: 'update', data: { ...this.dataItem, ...diff } };
+            this.dataItem = singleDiff.data;
+            this.mutate.emit([singleDiff]);
+        }
+    }
+    center() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;
+    }
+    right() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;
+    }
+    middle() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;
+    }
+    bottom() {
+        return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: '8e93d504c59f8fe602219fbb3ac6e31557311557' }, this.isMultiple(this.dataItem) && (h("div", { key: 'a87c48d4e205430175a4f620117e4a01c2d2138d', class: 'ls-field-properties-section' }, h("div", { key: '2fa5668e33ff54813df4c4e96d643822a8cb2042', class: 'ls-field-properties-section-text' }, h("p", { key: '19a69739d7e581df62f647b234d0ef71a56a92ca', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '67c1ae8cbdce9f640b1a0b05af316716d5d4cc46', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '2e0b9e18f21e4d2ac6ec5568d3499b0f7dcc7cb1', class: 'input-row' }, h("div", { key: '30e1f4fcf72cd3b4a9fc8e7fcb110949904b7d13', class: 'input-wrapper' }, h("ls-icon", { key: 'c3a901e6ff2ef14267d6d8880174525ac85664d7', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '8b154ebda590ac44903f36ba75b2604593833036', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '22fb1402a7755e44b4bddf4679f7028316a8037f', class: 'input-wrapper' }, h("ls-icon", { key: 'f0f69c7ba55b081a974700ddff27498fd862be04', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'e3c970c8eadabb84b23a54b766b094f659226b30', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", onChange: e => this.alter({ top: e.target.value }) }))))), this.isSingle(this.dataItem) && (h("div", { key: '9b901011d5f575852eed2b660b245163a7e3e94f', class: 'field-set' }, h("div", { key: 'd78045fbffb3cb4f9da7a8d6ce4b61dc81b2b066', class: 'ls-field-properties-section' }, h("div", { key: '3497a08b171472a7460ab994245100a041d8eef2', class: 'ls-field-properties-section-text' }, h("p", { key: '00da2370280a40f157f7ded56813f03ae59e1898', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '2384ee6d72622669a83e5043553e175d65f4d654', class: 'ls-field-properties-section-description' }, "Align your Fields relative to the page or multi-select and align then to each other.")), h("div", { key: 'cd0d415acceacba5a59f8ae66678033b5a1b3e13', class: 'multi-button-group-row' }, h("div", { key: '0c175ae0dfde633e88ba491884b8cbe94482c31b', class: 'button-group' }, h("button", { key: '7ee30c1ea1dbabc2f8eb76dc2391e35cef084b1c', onClick: () => { this.alter({ left: 0 }); }, "data-tooltip": "Align Left" }, h("ls-icon", { key: '6fa865027b58d0d3db5382184823bab893f3469f', name: "field-alignment-left" })), h("button", { key: '4b376c40bc8e189649e8538f2847d445046bcb65', onClick: () => { this.alter({ left: this.center() }); }, "data-tooltip": "Align Center" }, h("ls-icon", { key: '326ebc8b0f8ff9a1170a05a5e75c38866ec55033', name: "field-alignment-centre" })), h("button", { key: '386854721462d3c450773070ee4d6dd56596c398', onClick: () => { this.alter({ left: this.right() }); }, "data-tooltip": "Align Right" }, h("ls-icon", { key: '92a089288cda26058db4b9b570caccd31fc852cf', name: "field-alignment-right" }))), h("div", { key: 'ed226a73dc0d32e6830eec80105e0938eaf8b8cf', class: 'button-group' }, h("button", { key: '8fc399e06bbf34284ab880490cbaa1745cc43c67', onClick: () => this.alter({ top: 0 }), "data-tooltip": "Align Top" }, h("ls-icon", { key: 'bd87c6420e3f4c5dbd409f371cc72964e295b776', name: "field-alignment-top" })), h("button", { key: 'cf4b6111d166e76f02bd34f881f7cb4817ffa723', onClick: () => { this.alter({ top: this.middle() }); }, "data-tooltip": "Align Middle" }, h("ls-icon", { key: '8a616e56f8dc692ae8043c0fe15045838d60507b', name: "field-alignment-middle" })), h("button", { key: '45a1b7eafdd09a024fb4dad806377f867c6e77a4', onClick: () => { this.alter({ top: this.bottom() }); }, "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '020764a04b64100aac1019284a071d768fdccc5f', name: "field-alignment-bottom" }))))), h("div", { key: '09c4e324a65221a9e739fcd56e486e1167cb96e7', class: 'ls-field-properties-section' }, h("div", { key: 'd9e40fc3fcabc2d2fe52149f0a25389efea8989e', class: 'ls-field-properties-section-text' }, h("p", { key: 'de9f99818da2f31d61b2f844c245bf6eabda1e48', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '5b5712bf6e3c3a5fdf84ed706bb7fb7aa62e30d9', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '0f6221de9fd02346792e2b06f398ff9375461c46', class: 'input-row' }, h("div", { key: 'c7e40f6df6925b8905223a136c1d64f05b26d5f0', class: 'input-wrapper' }, h("ls-icon", { key: 'a2081cf36c44f3ccee7b737744e20fde96e3d58c', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '29de67a93199f89da679902fd9e8964cd28d0dc0', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", value: this.dataItem?.left, onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: 'd3b1c71eb1f261d8d26bafe6d245b0bb8087f3d7', class: 'input-wrapper' }, h("ls-icon", { key: '5822af40c40b8bba666592943271d11a54128dc9', id: "selectLeadingIcon", name: "y" }), h("input", { key: '56879c0e8195c943d59ddbaf0ff25704512e2a35', type: "number", class: 'has-leading-icon', aria: "left-location", id: "left-location", value: this.dataItem?.top, onChange: e => this.alter({ top: e.target.value }), width: "30" })))), h("div", { key: 'e33848f600c84029d2f59c039c5d17c622162f06', class: 'ls-field-properties-section' }, h("div", { key: '4edc72ca1c3e82db755ac4b5143fa618acf48195', class: 'ls-field-properties-section-text' }, h("p", { key: 'c46244e187dbd788eda6b4e9b3d4b94cd5f06ab6', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'f9172724db3f5df3ab9c39320fad11f9ea56f333', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: 'd7129f72c8057d07effcea7096d335545c56ac87', class: 'button-group' }, h("button", { key: '2645b0e213599bf1dc93fcd6ebf70f43710cf72a', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: '0dbcc5c32141cf6c63e06feb1d31328bbd796fa8', name: "field-distribute-vertically" })), h("button", { key: '8acb95f4f0a5351bd9935f8524b712c08a15b48a', disabled: true, "data-tooltip": "Select multiple Fields to to access distribution controls" }, h("ls-icon", { key: 'f0a1a1df6c5c290b614839a33c90efa4fbda4e30', name: "field-distribute-horizontally" })))), h("div", { key: 'db2732da927ce155eea6de22a1918c268e129d85', class: 'ls-field-properties-section' }, h("div", { key: '9deb78c5a75ca1a541b2a3a2be272937a8a5a76b', class: 'ls-field-properties-section-text' }, h("p", { key: '78db32539b94166cb62bc518344dd4e6486cf453', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '95c9d982a1925b054737d6148c3ff361269d5ea4', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '43e4c3ce3848f4ffd8a867236f070dcfc0950e2a', class: 'input-row' }, h("div", { key: '032032a7ae2548e56bfe82cb17a3e7c6038a6aea', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '6f213b3a0556e8bcd0e419489c0575d543d8ac77', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '956aba482021272690d298b56777bbc47cc534cd', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '41f66794a3c8c4370eca9adb25d6aa5cfa705300', class: 'input-wrapper', "data-tooltip": "Select multiple Fields to to access gap controls" }, h("ls-icon", { key: '10df619222401790e78687af57c3aff5c899cfc6', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: 'fb21a896341bef926bd3357a70f79ab70c3c1175', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true })))))), h("ls-tooltip", { key: '1da98656abb6639ec60a4110a122587b8f721b16', id: "ls-tooltip-master" })));
+    }
+    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",
+                "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\" | \"text\" | \"signature\" | \"date\" | \"regex\" | \"file\" | \"autodate\" | \"autosign\" | \"initials\" | \"email\" | \"checkbox\" | \"image\" | \"dropdown\"; roleObject?: LSApiRole; cstyle?: any; divStyle?: any; objectHeight?: string; pageDimensions?: { height: number; width: number; }; templateId?: string; }",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../types/LSApiElement",
+                            "id": "src/types/LSApiElement.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": "../../types/LSMutateEvent",
+                            "id": "src/types/LSMutateEvent.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+}
+//# 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":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-placement',\n  styleUrl: 'ls-field-placement.css',\n  shadow: true,\n})\nexport class LsFieldPlacement {\n  @Element() component: HTMLElement;\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  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  getValue(key) {\n    if (this.isMultiple(this.dataItem)) {\n      return \"\";\n    } else if (this.isSingle(this.dataItem)) {\n      return this.dataItem[key]\n    }\n    return ''\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    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    } 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    }\n  }\n\n  center() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].width / 2 - this.dataItem[0].width / 2;\n  }\n\n  right() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].width - this.dataItem[0].width;\n  }\n\n  middle() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].height / 2 - this.dataItem[0].height / 2;\n  }\n\n  bottom() {\n    return this.dataItem[0].pageDimensions[this.dataItem[0].page].height - this.dataItem[0].height;\n  }\n\n  componentDidLoad() {\n      attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.isMultiple(this.dataItem) && (\n          <div class={'ls-field-properties-section'}>\n            <div class={'ls-field-properties-section-text'}>\n              <p class={'ls-field-properties-section-title'}>Location</p>\n              <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n            </div>\n            <div class={'input-row'}>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                <input type=\"number\" class={'has-leading-icon'} aria=\"top-location\" id=\"top-location\" onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })} />\n              </div>\n              <div class={'input-wrapper'}>\n                <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                <input\n                  type=\"number\"\n                  class={'has-leading-icon'}\n                  aria=\"left-location\"\n                  id=\"left-location\"\n                  onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                />\n              </div>\n            </div>\n          </div>\n        )}\n        {this.isSingle(this.dataItem) && (\n          <div class={'field-set'}>\n            {/* @Alex I couldn't get this to work?? Only Top and Left */}\n\n            <div class={'ls-field-properties-section'}>\n              <div class={'ls-field-properties-section-text'}>\n                <p class={'ls-field-properties-section-title'}>Alignment</p>\n                <p class={'ls-field-properties-section-description'}>Align your Fields relative to the page or multi-select and align then to each other.</p>\n              </div>\n              <div class={'multi-button-group-row'}>\n                <div class={'button-group'}>\n                  <button onClick={() => { this.alter({ left: 0 }) }} data-tooltip=\"Align Left\">\n                    <ls-icon name=\"field-alignment-left\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.center() }) }} data-tooltip=\"Align Center\">\n                    <ls-icon name=\"field-alignment-centre\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.right() }) }} data-tooltip=\"Align Right\">\n                    <ls-icon name=\"field-alignment-right\"></ls-icon>\n                  </button>\n                </div>\n                <div class={'button-group'}>\n                  <button onClick={() => this.alter({ top: 0 })} data-tooltip=\"Align Top\">\n                    <ls-icon name=\"field-alignment-top\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.middle() }) }} data-tooltip=\"Align Middle\">\n                    <ls-icon name=\"field-alignment-middle\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.bottom() }) }} data-tooltip=\"Align Bottom\">\n                    <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n                  </button>\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'}>Location</p>\n                <p class={'ls-field-properties-section-description'}>Use coordinates to move your fields on the page</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"x-letter\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"top-location\"\n                    id=\"top-location\"\n                    value={this.dataItem?.left}\n                    onChange={e => this.alter({ left: (e.target as HTMLInputElement).value })}\n                  />\n                </div>\n                <div class={'input-wrapper'}>\n                  <ls-icon id=\"selectLeadingIcon\" name=\"y\"></ls-icon>\n                  <input\n                    type=\"number\"\n                    class={'has-leading-icon'}\n                    aria=\"left-location\"\n                    id=\"left-location\"\n                    value={this.dataItem?.top}\n                    onChange={e => this.alter({ top: (e.target as HTMLInputElement).value })}\n                    width=\"30\"\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'}>Distribution</p>\n                <p class={'ls-field-properties-section-description'}>Multi-select fields and evenly space them out</p>\n              </div>\n              <div class={'button-group'}>\n                <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n                  <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n                </button>\n                <button disabled data-tooltip=\"Select multiple Fields to to access distribution controls\">\n                  <ls-icon name=\"field-distribute-horizontally\"></ls-icon>\n                </button>\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'}>Gap</p>\n                <p class={'ls-field-properties-section-description'}>Define the exact gap between multi-select fields.</p>\n              </div>\n              <div class={'input-row'}>\n                <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-vertically\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"vertical-gap\" id=\"vertical-gap\" disabled />\n                </div>\n                <div class={'input-wrapper'} data-tooltip=\"Select multiple Fields to to access gap controls\">\n                  <ls-icon id=\"selectLeadingIconDisabled\" name=\"field-distribute-horizontally\"></ls-icon>\n                  <input type=\"number\" value=\"0\" class={'has-leading-icon'} aria=\"horizontal-gap\" id=\"horizontal-gap\" disabled />\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}