legalesign-document-viewer 0.7.1 → 0.7.2

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

@@ -0,0 +1,391 @@
+:host, .field-set {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  position: relative;
+}
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.expand-fields-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.25rem;
+  cursor: pointer;
+  color: var(--gray-80, #6c6e73);
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.expand-fields-row p {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 150% */
+}
+
+.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-properties-advanced/ls-field-properties-advanced.js

@@ -0,0 +1,144 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldPropertiesAdvanced {
+    dataItem;
+    expanded = false;
+    mutate;
+    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
+    // NOTE this alter is debounced to account for typing
+    alter(diff, bounceDelay = 0) {
+        console.log('Altering advanced props:', diff);
+        let diffs = [];
+        if (this.isMultiple(this.dataItem)) {
+            this.dataItem = this.dataItem.map(di => {
+                return { ...di, ...diff };
+            });
+            diffs = this.dataItem.map(di => {
+                return { action: 'update', data: { ...di, ...diff } };
+            });
+        }
+        else if (this.isSingle(this.dataItem)) {
+            this.dataItem = { ...this.dataItem, ...diff };
+            diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];
+        }
+        if (bounceDelay === 0) {
+            this.mutate.emit(diffs);
+        }
+        else {
+            this.debounce(diffs, bounceDelay);
+        }
+    }
+    titletimer;
+    debounce(diffs, delay) {
+        if (this.titletimer)
+            clearTimeout(this.titletimer);
+        this.titletimer = setTimeout(() => {
+            this.mutate.emit(diffs);
+        }, delay);
+    }
+    getValue(key) {
+        if (this.isMultiple(this.dataItem)) {
+            return '';
+        }
+        else if (this.isSingle(this.dataItem)) {
+            return this.dataItem[key];
+        }
+        return '';
+    }
+    render() {
+        return (h(Host, { key: 'a7ad1697f4b329ac1a43928e8d3f248d7d83e8c2' }, h("div", { key: '453c1146cc0c240c9e5024f2239b46d051fe7f8f', class: 'expand-fields-row', onClick: () => (this.expanded = !this.expanded) }, h("ls-icon", { key: '09f6842e5dd0cd3ce2304105f53776ab75de7bde', name: this.expanded ? 'expand' : 'collapse', size: "1.25rem", solid: true }), h("p", { key: 'ec9e254f995db1a731559e6a486103c90a283454' }, "Advanced Properties")), this.expanded && (h("div", { key: '0d78df448e715ae48c9d3056cc2045eb80435471', class: 'field-set' }, h("ls-props-section", { key: '378b525bd9d90f67e66d23aef89c1a90e72191c8', sectionTitle: "Field Order", sectionDescription: "Determines what order fields will be filled in by the user" }, h("input", { key: '7fff85c8ca9bf8623e09d3fbddc99193d02a223f', value: this.getValue('fieldOrder'), type: "number", placeholder: "eg. 1", onInput: e => {
+                console.log(e);
+                this.alter({ fieldOrder: e.target.value }, 100);
+            }, onChange: () => { console.log('onchange'); } })), h("ls-props-section", { key: '1acdb4e42e843c7df99ea8d591056c530ef0666d', sectionTitle: "Ref. Name" }, h("input", { key: '1cdb174f66cc80372ec45c7d633c0b5b92217015', value: this.getValue('link'), placeholder: "eg. checkbox group", onInput: e => this.alter({ link: e.target.value }, 300) })), h("ls-props-section", { key: '9bf9c95ac4434883e04bba1cc25ce3615edbd724', sectionTitle: "Link Type", sectionDescription: "Determines  in what way this field is linked to other fields" }, h("select", { key: '49d87771e92f2355bbdc09ddb1f17e1e950691ee', onChange: e => this.alter({ linkType: e.target.value }), name: "Link Field", "aria-label": "Link Field" }, h("option", { key: 'ec72dcc31d227996bebcf70a3e090d98bd4103be', value: "0", selected: this.getValue('linkType') === '0' }, "None"), h("option", { key: 'ac8684b302d4ad04b4838c508e537c4315659a85', value: "1", selected: this.getValue('linkType') === '1' }, "One of a group (e.g. select one checkbox)"), h("option", { key: 'de0cc8c8afe8848f0588850101a1223ff35823d9', value: "2", selected: this.getValue('linkType') === '2' }, "Add to a total"), h("option", { key: '038488bca973a04f6e71bb3ad6f3a585f2ddb9a3', value: "3", selected: this.getValue('linkType') === '3' }, "Make this conditional upon..."))), h("ls-props-section", { key: '4d8e5cb2195f46695c79c7fba470fc0e5c9706cb', sectionTitle: "Link Value", sectionDescription: "Fields with the same Link Value will be linked together" }, h("input", { key: 'c109689bac1c4817e13f64549cce1a375d1f7620', value: this.getValue('logicAction'), width: "30", placeholder: "eg. checkbox group", onChange: e => this.alter({ logicAction: e.target.value }) }))))));
+    }
+    static get is() { return "ls-field-properties-advanced"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-properties-advanced.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-properties-advanced.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
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "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"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-field-properties-advanced.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-properties-advanced.js","sourceRoot":"","sources":["../../../src/components/ls-field-properties-advanced/ls-field-properties-advanced.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-properties-advanced',\n  styleUrl: 'ls-field-properties-advanced.css',\n  shadow: true,\n})\nexport class LsFieldPropertiesAdvanced {\n  @Prop({ mutable: true }) dataItem: LSApiElement | LSApiElement[];\n  @Prop({ mutable: true }) expanded: boolean = false;\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  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  // NOTE this alter is debounced to account for typing\n  alter(diff: object, bounceDelay: number = 0) {\n    console.log('Altering advanced props:', diff);\n    let diffs = [];\n    if (this.isMultiple(this.dataItem)) {\n      this.dataItem = this.dataItem.map(di => {\n        return { ...di, ...diff } as LSApiElement;\n      });\n\n      diffs = this.dataItem.map(di => {\n        return { action: 'update', data: { ...di, ...diff } as LSApiElement } as LSMutateEvent;\n      });\n    } else if (this.isSingle(this.dataItem)) {\n      this.dataItem = { ...this.dataItem, ...diff };\n\n      diffs = [{ action: 'update', data: { ...this.dataItem, ...diff } }];\n    }\n\n    if (bounceDelay === 0) {\n      this.mutate.emit(diffs);\n    }\n    else {\n      this.debounce(diffs, bounceDelay);\n    }\n  }\n\n  private titletimer;\n\n  debounce(diffs, delay) {\n    if (this.titletimer) clearTimeout(this.titletimer);\n\n    this.titletimer = setTimeout(() => {\n      this.mutate.emit(diffs);\n    }, delay);\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  render() {\n    return (\n      <Host>\n        <div class={'expand-fields-row'} onClick={() => (this.expanded = !this.expanded)}>\n          <ls-icon name={this.expanded ? 'expand' : 'collapse'} size=\"1.25rem\" solid />\n          <p>Advanced Properties</p>\n        </div>\n        {this.expanded && (\n          <div class={'field-set'}>\n            <ls-props-section sectionTitle=\"Field Order\" sectionDescription=\"Determines what order fields will be filled in by the user\">\n              <input value={this.getValue('fieldOrder')} type=\"number\" placeholder=\"eg. 1\" onInput={e => {\n                console.log(e);\n                this.alter({ fieldOrder: (e.target as HTMLInputElement).value }, 100)\n              }} \n              onChange={() => { console.log('onchange')}}\n              />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Ref. Name\">\n              <input value={this.getValue('link')} placeholder=\"eg. checkbox group\" onInput={e => this.alter({ link: (e.target as HTMLInputElement).value }, 300)} />\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Type\" sectionDescription=\"Determines  in what way this field is linked to other fields\">\n              <select onChange={e => this.alter({ linkType: (e.target as HTMLInputElement).value })} name=\"Link Field\" aria-label=\"Link Field\">\n                <option value=\"0\" selected={this.getValue('linkType') === '0'}>\n                  None\n                </option>\n                <option value=\"1\" selected={this.getValue('linkType') === '1'}>\n                  One of a group (e.g. select one checkbox)\n                </option>\n                <option value=\"2\" selected={this.getValue('linkType') === '2'}>\n                  Add to a total\n                </option>\n                <option value=\"3\" selected={this.getValue('linkType') === '3'}>\n                  Make this conditional upon...\n                </option>\n              </select>\n            </ls-props-section>\n\n            <ls-props-section sectionTitle=\"Link Value\" sectionDescription=\"Fields with the same Link Value will be linked together\">\n              <input\n                value={this.getValue('logicAction')}\n                width=\"30\"\n                placeholder=\"eg. checkbox group\"\n                onChange={e => this.alter({ logicAction: (e.target as HTMLInputElement).value })}\n              />\n            </ls-props-section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}