legalesign-document-viewer 0.7.1 → 0.7.2

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

@@ -0,0 +1,208 @@
+import { Host, h } from "@stencil/core";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsFieldAlignment {
+    component;
+    dataItem;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        console.log(diff);
+        const diffs = this.dataItem.map(c => {
+            return { action: 'update', data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    right() {
+        const rightmost = this.dataItem.reduce((rightmost, current) => {
+            return current.left + current.width < rightmost ? rightmost : current.left + current.width;
+        }, 0);
+        console.log(rightmost);
+        const diffs = this.dataItem.map(c => {
+            const newLeft = rightmost - c.width;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    left: newLeft,
+                    ax: newLeft,
+                    bx: newLeft + c.width,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    center() {
+        const addcentres = this.dataItem.reduce((total, current) => {
+            console.log(total + (current.left + current.width / 2));
+            return total + (current.left + current.width / 2);
+        }, 0);
+        console.log(addcentres);
+        const cp = addcentres / this.dataItem.length;
+        console.log('centerposition', cp);
+        const diffs = this.dataItem.map(c => {
+            const newLeft = c.left + (cp - (c.left + c.width / 2));
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    left: newLeft,
+                    ax: newLeft,
+                    bx: newLeft + c.width,
+                },
+            };
+        });
+        console.log(diffs);
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    top() {
+        const topmost = this.dataItem.reduce((most, current) => {
+            return current.top < most ? most : current.top;
+        }, 0);
+        this.alter({ top: topmost });
+    }
+    left() {
+        const leftmost = this.dataItem.reduce((least, current) => {
+            return current.left < least ? current.left : least;
+        }, this.dataItem[0].left);
+        this.alter({ left: leftmost });
+    }
+    middle() {
+        const addmiddles = this.dataItem.reduce((total, current) => {
+            console.log(total + (current.top + current.height / 2));
+            return total + (current.top + current.height / 2);
+        }, 0);
+        const cp = addmiddles / this.dataItem.length;
+        const diffs = this.dataItem.map(c => {
+            const newTop = c.top + (cp - (c.top + c.height / 2));
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    top: newTop,
+                    ay: newTop,
+                    by: newTop + c.height,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    bottom() {
+        const lowest = this.dataItem.reduce((acc, current) => {
+            return acc > current.top + current.height ? acc : current.top + current.height;
+        }, 0);
+        const diffs = this.dataItem.map(c => {
+            const newTop = lowest - c.height;
+            return {
+                action: 'update',
+                data: {
+                    ...c,
+                    top: newTop,
+                    ay: newTop,
+                    by: newTop + c.height,
+                },
+            };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+    }
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: '8bd70f073971697c2b014944d97018b75277b864' }, h("div", { key: 'c247d504a1b92ae8971256fb489c047f6afc7fb5', class: 'ls-field-properties-section' }, h("div", { key: 'e2cc2e7ac6998ae66b39472a54ad8f58e99607b7', class: 'ls-field-properties-section-text' }, h("p", { key: '239be4fcce6c882aaacb07bfd4179048cb4c11e7', class: 'ls-field-properties-section-title' }, "Alignment"), h("p", { key: 'f13e84ad7df782449075dc77b2385f7aa2049db0', 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: 'b8acad8030b6f235566229cdfd6f8b2d51fb8626', class: 'multi-button-group-row' }, h("div", { key: 'b7d6933810375e334cfe64e2736e7b26e5cbb65e', class: 'button-group' }, h("button", { key: 'd3e50eb147b48982fe34301773ec367140e108ec', onClick: () => this.left(), "aria-label": "Align selected fields vertically about their left edge.", "data-tooltip": "Align Left" }, h("ls-icon", { key: 'd5bdf303affbe96e2b365c6bd9466fc95d69ebf2', name: "field-alignment-left" })), h("button", { key: '4301db1ba4b17d43d39965e290bd383f7a220146', onClick: () => this.center(), "aria-label": "Align selected fields vertically about their centre.", "data-tooltip": "Align Center" }, h("ls-icon", { key: 'b0797cf14f96a6155938ba42af1d6bea9585f2c0', name: "field-alignment-centre" })), h("button", { key: '38785cd51edbbc73a31a98aed8d4b49ccf5b6369', onClick: () => {
+                this.right();
+            }, "aria-label": "Align selected fields vertically about their right edge.", "data-tooltip": "Align Right" }, h("ls-icon", { key: 'c2a236ff67b71535fda87cf30a84c58e70ed2787', name: "field-alignment-right" }))), h("div", { key: 'fb8ff869b42ef5d425ec691d3dc4a7f3a0e09ba9', class: 'button-group' }, h("button", { key: '0f19f1f99491b23c86aa2f904803f401d84daff2', onClick: () => this.top(), "aria-label": "Align selected fields by their top.", "data-tooltip": "Align Top" }, h("ls-icon", { key: 'c45d9411f17fe744aa839364b01c44f75878e361', name: "field-alignment-top" })), h("button", { key: '9110617a162d7a19d6cf1903270ee53d1387752b', onClick: () => this.middle(), "aria-label": "Align selected fields by their middles.", "data-tooltip": "Align Middle" }, h("ls-icon", { key: '44c5e6864fcb65aea3bf1ed170c8276d092248eb', name: "field-alignment-middle" })), h("button", { key: '63ebb49408d46326dbd370c5a25c4f4aaa849c32', onClick: () => this.bottom(), "aria-label": "Align selected fields by their bottoms.", "data-tooltip": "Align Bottom" }, h("ls-icon", { key: '4aa7d42aa0c93427b4e64dbf28ef93c3dc6f5547', name: "field-alignment-bottom" }))))), h("slot", { key: 'a7bf6ce14e730c153f3edfa4e3b168ef54b97030' }), h("ls-tooltip", { key: '6db676399f9a25c48e4e05a4177e045e0d200d6b', id: "ls-tooltip-master" })));
+    }
+    static get is() { return "ls-field-alignment"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-alignment.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-alignment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "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-alignment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-alignment.js","sourceRoot":"","sources":["../../../src/components/ls-field-alignment/ls-field-alignment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-field-alignment',\n  styleUrl: 'ls-field-alignment.css',\n  shadow: true,\n})\nexport class LsFieldAlignment {\n  @Element() component: HTMLElement;\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\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  // 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  }\n\n  right() {\n    const rightmost = this.dataItem.reduce((rightmost, current) => {\n      return current.left + current.width < rightmost ? rightmost : current.left + current.width;\n    }, 0);\n\n    console.log(rightmost);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = rightmost - c.width;\n\n      return {\n        action: 'update',\n        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  }\n\n  center() {\n    const addcentres = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.left + current.width / 2));\n      return total + (current.left + current.width / 2);\n    }, 0);\n    console.log(addcentres);\n\n    const cp = addcentres / this.dataItem.length;\n    console.log('centerposition', cp);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newLeft = c.left + (cp - (c.left + c.width / 2));\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          left: newLeft,\n          ax: newLeft,\n          bx: newLeft + c.width,\n        } as LSApiElement,\n      };\n    });\n    console.log(diffs);\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  top() {\n    const topmost = this.dataItem.reduce((most, current) => {\n      return current.top < most ? most : current.top;\n    }, 0);\n\n    this.alter({ top: topmost });\n  }\n\n  left() {\n    const leftmost = this.dataItem.reduce((least, current) => {\n      return current.left < least ? current.left : least;\n    }, this.dataItem[0].left);\n\n    this.alter({ left: leftmost });\n  }\n\n  middle() {\n    const addmiddles = this.dataItem.reduce((total, current) => {\n      console.log(total + (current.top + current.height / 2));\n      return total + (current.top + current.height / 2);\n    }, 0);\n\n    const cp = addmiddles / this.dataItem.length;\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = c.top + (cp - (c.top + c.height / 2));\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  bottom() {\n    const lowest = this.dataItem.reduce((acc, current) => {\n      return acc > current.top + current.height ? acc : current.top + current.height;\n    }, 0);\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      const newTop = lowest - c.height;\n      return {\n        action: 'update',\n        data: {\n          ...c,\n          top: newTop,\n          ay: newTop,\n          by: newTop + c.height,\n        } as LSApiElement,\n      };\n    });\n    this.dataItem = diffs.map(d => d.data as LSApiElement);\n    this.mutate.emit(diffs);\n  }\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\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.left()} aria-label=\"Align selected fields vertically about their left edge.\" data-tooltip=\"Align Left\">\n                <ls-icon name=\"field-alignment-left\"></ls-icon>\n              </button>\n              <button onClick={() => this.center()} aria-label=\"Align selected fields vertically about their centre.\" data-tooltip=\"Align Center\">\n                <ls-icon name=\"field-alignment-centre\"></ls-icon>\n              </button>\n              <button\n                onClick={() => {\n                  this.right();\n                }}\n                aria-label=\"Align selected fields vertically about their right edge.\"\n                data-tooltip=\"Align Right\"\n              >\n                <ls-icon name=\"field-alignment-right\"></ls-icon>\n              </button>\n            </div>\n            <div class={'button-group'}>\n              <button onClick={() => this.top()} aria-label=\"Align selected fields by their top.\" data-tooltip=\"Align Top\">\n                <ls-icon name=\"field-alignment-top\"></ls-icon>\n              </button>\n              <button onClick={() => this.middle()} aria-label=\"Align selected fields by their middles.\" data-tooltip=\"Align Middle\">\n                <ls-icon name=\"field-alignment-middle\"></ls-icon>\n              </button>\n              <button onClick={() => this.bottom()} aria-label=\"Align selected fields by their bottoms.\" data-tooltip=\"Align Bottom\">\n                <ls-icon name=\"field-alignment-bottom\"></ls-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,288 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* 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.2rem;
+  width: 100%;
+}
+.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 {
+  display: flex;
+  gap: 0.5rem;
+  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;
+  font-weight: 500;
+  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.secondary {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--white, #fff);
+  color: var(--gray-90, #5e6066);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+button.secondary:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+button.destructive {
+  border: 1px solid var(--red-60, #f04438);
+  background-color: white;
+  color: var(--red-60);
+}
+
+button.destructive:hover {
+  border: 1px solid var(--red-70, #d92d20);
+  background: var(--red-10, #fff1f0);
+}
+
+.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;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  min-height: unset;
+  color: var(--gray-80, #6c6e73);
+}
+
+.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-content/ls-field-content.js

@@ -0,0 +1,141 @@
+import { Host, h } from "@stencil/core";
+import { validationTypes } from "../ls-document-viewer/editorUtils";
+import { getFieldPlaceholder, getFieldTitleSuggestion } from "../ls-document-viewer/defaultFieldLabels";
+export class LsFieldContent {
+    component;
+    dataItem;
+    showValidationTypes = true;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    // NOTE this alter is debounced to account for typing
+    alter(diff) {
+        this.dataItem = { ...this.dataItem, ...diff };
+        this.debounce(this.dataItem, 500);
+    }
+    labeltimer;
+    debounce(data, delay) {
+        if (this.labeltimer)
+            clearTimeout(this.labeltimer);
+        this.labeltimer = setTimeout(() => {
+            const diffs = [{ action: 'update', data }];
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    supportsValue() {
+        const typesWithValue = ['signature', 'initials', 'image', 'file', 'signing', 'autosign', 'regex', 'signing date', 'auto sign', 'dropdown', 'checkbox'];
+        return !typesWithValue.includes(this.dataItem?.elementType);
+    }
+    render() {
+        return (h(Host, { key: '657d620157ef9d0bdfce79ee1610a67f7e990429' }, h("ls-props-section", { key: 'f240dc47840f73f0c989d522cb311696c22907aa', sectionTitle: "Field Type", sectionDescription: "The Field you currently have selected" }, h("ls-field-type-display", { key: '41f7e9ee644f5938d29d479052257b2ddb6c0f71', fieldType: this.dataItem?.elementType, assignee: this.dataItem?.signer })), h("ls-props-section", { key: '124e8ae4a235c1292edaf62d6162b545d8ef8503', sectionTitle: "Required Field", row: true }, h("ls-toggle", { key: 'eb88e9e8df4dace6854efc2dd55afe43997c3130', id: "toggle-required", checked: !this.dataItem?.optional, onValueChange: ev => this.alter({ optional: !ev.detail }) })), h("ls-props-section", { key: '33c1c38e90a09726de65fbc342586d08eeaf8af2', sectionTitle: "Field Label", sectionDescription: "Add a label to clarify the information required from the Recipient." }, h("input", { key: '8d7643f93c2fa9c862c80f1f3155d2eb2cfee9ff', value: this.dataItem?.label, placeholder: getFieldTitleSuggestion(this.dataItem?.elementType), onInput: e => this.alter({ label: e.target.value }) })), this.supportsValue() && (h("ls-props-section", { key: 'f24ded19bdfe6ac25b43a2366cadb0a3640acf46', sectionTitle: "Value", sectionDescription: "A prefilled value that can be altered by the signer." }, h("input", { key: '7d74eb6bba09e541af029d83e7d5d9c9dc75f258', value: this.dataItem?.value, placeholder: getFieldPlaceholder(this.dataItem?.elementType), onInput: e => this.alter({ value: e.target.value }) }))), this.dataItem.validation === 20 && (h("ls-props-section", { key: 'aec1a8e9294a893f66ca27c91486c9429dd92dee', sectionTitle: "Options", sectionDescription: "Define the options available in the dropdown. One option per line." }, h("textarea", { key: '01387cc21a3b7d8153f1a9386ae1e14e6028f215', value: this.dataItem?.options, placeholder: "Option 1\nOption 2\nOption 3", onInput: e => this.alter({ options: e.target.value }) }))), this.showValidationTypes && (h("ls-props-section", { key: '983ed1d46e450c4e0ed422d570d593324ad81627', sectionTitle: "Content Format", sectionDescription: "Select the specific format you want the Recipient to enter." }, h("ls-input-wrapper", { key: '222d9c6358cd8a3783e1ad893ca27c74e9a506a5', select: true }, h("select", { key: '431a8175a07ab844737f817c807c0a3ce37bd9da', onChange: ev => this.alter({ validation: parseInt(ev.target.value) }) }, validationTypes
+            .filter(type => type.formType === this.dataItem?.elementType)
+            .map(type => (h("option", { selected: this.dataItem?.validation === type.id, value: type.id }, type.description))))))), h("slot", { key: '924aef7652e1bb63a5d77606efa8d59caa45455a' })));
+    }
+    static get is() { return "ls-field-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "mutable": true,
+                "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\" | \"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": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showValidationTypes": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-validation-types",
+                "defaultValue": "true"
+            }
+        };
+    }
+    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-content.js.map