legalesign-document-viewer 0.3.3 → 0.3.5

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

@@ -1,370 +0,0 @@
-: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: 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);
-}
-
-#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

@@ -1,140 +0,0 @@
-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';
-    }
-    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);
-            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]);
-        }
-    }
-    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;
-    }
-    render() {
-        return (h(Host, { key: 'c9dc68e4e38efb9c800c3162750fda48a679f24d' }, this.isMultiple(this.dataItem) && (h("div", { key: 'b8000d7a209d1b48483c567b9476d264df95cfb8', class: 'ls-field-properties-section' }, h("div", { key: '63b627e957a7cc4e498f4d647d7f097ab46447d0', class: 'ls-field-properties-section-text' }, h("p", { key: 'b2b4d8cabf3b4136bfd8f24a971e37915f831130', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '39036ea300acacb68af52a8a7f3c74bfab636ca9', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: '406a42a6eba6512b4a0aab8af66c7f6c3dba7389', class: 'input-row' }, h("div", { key: '3c1f0599222c5105f345202a453dbe47459e3d08', class: 'input-wrapper' }, h("ls-icon", { key: '1b72436b61075143fcf71aa25c560dda48729b93', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: 'dbc911eb99b0fb11f618b853610ea61501f248e4', type: "number", class: 'has-leading-icon', aria: "top-location", id: "top-location", onChange: e => this.alter({ left: e.target.value }) })), h("div", { key: '6f805235eedb1ed975a1dd124ed306785cfbc738', class: 'input-wrapper' }, h("ls-icon", { key: 'a09edcec36df6f3541bb99744c1c03b9ac25809d', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'aafc5b2376c78ac269f3bcbec76f654132a1ed31', 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: 'e6aefc1f92c9052740ef11a7b68cd437e6cacb62', class: 'field-set' }, h("div", { key: '998c00036ff931841dbee535816d70cc1c13f341', class: 'ls-field-properties-section' }, h("div", { key: '859c5e6195da6aae05f212325cc887a9e6d98b5a', class: 'ls-field-properties-section-text' }, h("p", { key: 'fe1e0776b11bc989a025c598910ab3881876de5a', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: '43a1ae930fd8e07e99af9e03adc82d4032a33fd2', 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: '7a95a01f785eb50a9287457906a6889b7d6a3033', class: 'multi-button-group-row' }, h("div", { key: '504071b40528fd4399755a0af9b1a9ff4f279c5f', class: 'button-group' }, h("button", { key: 'efd3e2aa445a03fce18474c28a07fa7b8687a0c7', onClick: () => { this.alter({ left: 0 }); } }, h("ls-icon", { key: 'e11ff3e4dbe3d6677e117e9b683ee9840f870c26', name: "field-alignment-left" })), h("button", { key: '258b9fb3c78c835fd1e281df90e2984cfb08ef40', onClick: () => { this.alter({ left: this.center() }); } }, h("ls-icon", { key: 'f22b23fd59c5c74baeb42bf60614a06cb4483178', name: "field-alignment-centre" })), h("button", { key: '0b80020e7d7d775c48634d5cb5754f3edce44008', onClick: () => { this.alter({ left: this.right() }); } }, h("ls-icon", { key: 'd8ae12c4670eb1e6e1cf65cfa5c2a5e9f123c261', name: "field-alignment-right" }))), h("div", { key: '2519a99c8563e99c118a250da6747f2b6076de61', class: 'button-group' }, h("button", { key: '6d92cb364078ad0f33e3d22e8753d43d49c96663', onClick: () => this.alter({ top: 0 }) }, h("ls-icon", { key: '21468552b013129c3df35c09871ba9132fb91873', name: "field-alignment-top" })), h("button", { key: 'f040000cfca80f27a5e0bb6169a2111c71a8f1d4', onClick: () => { this.alter({ top: this.middle() }); } }, h("ls-icon", { key: 'b6c5d151dda019ea8d6d912a9fe2677646b7374b', name: "field-alignment-middle" })), h("button", { key: 'a9246e1659fe5e4e0fdd0a03ed5772408bbc7c02', onClick: () => { this.alter({ top: this.bottom() }); } }, h("ls-icon", { key: '1f7933380d6fbfc524cdebc7f86fa1f74ebf1395', name: "field-alignment-bottom" }))))), h("div", { key: '8bf879e9ce04d81f0f5b6df99566a41be51ed470', class: 'ls-field-properties-section' }, h("div", { key: 'a7fee5248dab7322aa5fef2ff2f1dcf91728ee33', class: 'ls-field-properties-section-text' }, h("p", { key: 'b8eb47ce94ec9d00e776ac505686666c430aac61', class: 'ls-field-properties-section-title' }, "Location"), h("p", { key: '17f950776fa0207b9c66a6d6a911e67b1b66c86d', class: 'ls-field-properties-section-description' }, "Use coordinates to move your fields on the page")), h("div", { key: 'da01c959b6265147ed9d90a050401f36228a283d', class: 'input-row' }, h("div", { key: '4dac7c60fdaa4493de9b42401dfacdb031c38a25', class: 'input-wrapper' }, h("ls-icon", { key: '11e8d9bacb897bb04f12b818448eeb039bbf7a47', id: "selectLeadingIcon", name: "x-letter" }), h("input", { key: '24b67407ed28079cf4f5d873c2c771b8f15d8a9c', 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: 'f80ae951bd8f5e8e219aa480a4a16ff55f46d8ab', class: 'input-wrapper' }, h("ls-icon", { key: 'b86661a641e357a9b0867d65b4ccee62bea4e44e', id: "selectLeadingIcon", name: "y" }), h("input", { key: 'd2357ca6884f20d72bfb3dbbaa1a14ed797f646b', 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: '5a10ba1fa5515601b24343d0b1bf54a97ca29bb3', class: 'ls-field-properties-section' }, h("div", { key: '4b23811405359d00533810851c817939258e7e25', class: 'ls-field-properties-section-text' }, h("p", { key: '328d03492253d0aa58e1155b02fc29efb057c9f8', class: 'ls-field-properties-section-title' }, "Distribution"), h("p", { key: 'e2fecc82d431ee3756d502d45b143b900313ac15', class: 'ls-field-properties-section-description' }, "Multi-select fields and evenly space them out")), h("div", { key: '2c8ba1520ce6aad2c6d96c97b00c3f54e6820b51', class: 'button-group' }, h("button", { key: '69187c8725b6b545ae9cb724b1deaf74e8d9cc88', disabled: true }, h("ls-icon", { key: 'c3d9cdccfb4fb61acd39d941f4d8a4cec449f075', name: "field-distribute-vertically" })), h("button", { key: '72bdb68d15e0e10233dd763c1428cad730a744c7', disabled: true }, h("ls-icon", { key: '1d07a51d8b73bf486f286bfc2d6adfa09038305d', name: "field-distribute-horizontally" })))), h("div", { key: '0776885c8c491e8717548a2e4287403a96488cc4', class: 'ls-field-properties-section' }, h("div", { key: '3ba1d1ea93a606de7b7a533326465e18487e5560', class: 'ls-field-properties-section-text' }, h("p", { key: 'c31cba25f48fdcfe8883443ddecc82e7be4378f4', class: 'ls-field-properties-section-title' }, "Gap"), h("p", { key: '5f6998f21adb8803857a79e6da129022905a8c87', class: 'ls-field-properties-section-description' }, "Define the exact gap between multi-select fields.")), h("div", { key: '194a8a16e88493b7b4960fa7ab5ceba6e95b78d9', class: 'input-row' }, h("div", { key: '19862c6084d6fd681ce71bf0e5ba6c2141807d49', class: 'input-wrapper' }, h("ls-icon", { key: 'fc168bd1174daddec9d761b1d8692b69d37cf331', id: "selectLeadingIconDisabled", name: "field-distribute-vertically" }), h("input", { key: '9ce4fe9e1ea759eb867adde5d5360dd3534ebbd0', type: "number", value: "0", class: 'has-leading-icon', aria: "vertical-gap", id: "vertical-gap", disabled: true })), h("div", { key: '54eea8b43335fe796755f36f66ce6828479c137f', class: 'input-wrapper' }, h("ls-icon", { key: '9f94c55ced5a9d3fe43b472a7fcc9f9d7c830fad', id: "selectLeadingIconDisabled", name: "field-distribute-horizontally" }), h("input", { key: 'eb65a84f010fc9f5abfa8fd5fd369cdad2b9670d', type: "number", value: "0", class: 'has-leading-icon', aria: "horizontal-gap", id: "horizontal-gap", disabled: true }))))))));
-    }
-    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\" | \"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"
-                        }
-                    }
-                }
-            }, {
-                "method": "update",
-                "name": "update",
-                "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"
-                        }
-                    }
-                }
-            }];
-    }
-}
-//# sourceMappingURL=ls-field-placement.js.map

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

@@ -1 +0,0 @@
-{"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 } from '@stencil/core';\nimport { LSApiElement } from '../../types/LSApiElement';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\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  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      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  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  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 }) }}>\n                    <ls-icon name=\"field-alignment-left\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.center() }) }}>\n                    <ls-icon name=\"field-alignment-centre\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ left: this.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 })}>\n                    <ls-icon name=\"field-alignment-top\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.middle() }) }}>\n                    <ls-icon name=\"field-alignment-middle\"></ls-icon>\n                  </button>\n                  <button onClick={() => { this.alter({ top: this.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>\n                  <ls-icon name=\"field-distribute-vertically\"></ls-icon>\n                </button>\n                <button disabled>\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'}>\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'}>\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      </Host>\n    );\n  }\n}\n"]}