legalesign-document-viewer 0.7.3 → 0.7.4

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js

@@ -0,0 +1,190 @@
+import { Host, h } from "@stencil/core";
+export class LsParticipantManager {
+    element;
+    /**
+     * The base editor.
+     * {LSDocumentViewer}
+     */
+    editor;
+    /**
+     * The base template information (as JSON).
+     * {LSApiTemplate}
+     */
+    template;
+    mutate;
+    update;
+    addParticipant;
+    selectedHandler(_role) {
+        //console.log(role, 'participant manager')
+    }
+    deleteHandler(role) {
+        this.update.emit([{ action: 'delete', data: role }]);
+        this.mutate.emit([{ action: 'delete', data: role }]);
+    }
+    swapHandler(role1, role2) {
+        this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);
+    }
+    handleOpened(event) {
+        const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+        participants.forEach(element => {
+            const isTarget = element.signer?.id === event.detail.id;
+            element.editable = isTarget;
+            if (isTarget) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+    }
+    handleOpenNewWitness(event) {
+        const { parent } = event.detail;
+        const observer = new MutationObserver(() => {
+            const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');
+            participants.forEach(element => {
+                const isTarget = element.signer?.signerParent === parent;
+                element.editable = isTarget;
+                if (isTarget) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            });
+            observer.disconnect();
+        });
+        observer.observe(this.element.shadowRoot, { childList: true, subtree: true });
+    }
+    render() {
+        return (h(Host, { key: 'b432bfa837219b1bf941691f5396fab3a31c5c41' }, h("div", { key: 'f7479949b11200e0e62494a7b48c8430c8272724', class: "ls-editor-infobox" }, h("h2", { key: 'f9c80d6ada12a534a67d69b5cf2074f5131d1ffa', class: "toolbox-section-title" }, "Participants"), h("p", { key: '0edfa48751d0106be270d41e78707e86b51b2503', class: "toolbox-section-description" }, "Select and Click to place Signature fields where you\u2019d like on the Document.")), h("div", { key: '205bcd1da03d487ab7ebc4ef41dd6f6b2babdd7b', class: "participant-list" }, this.template &&
+            this.template?.roles.map((r, index) => {
+                return (h("ls-participant-card", { signer: r, index: index, template: this.template, onOpened: event => {
+                        this.handleOpened.bind(this)(event);
+                    }, onAddParticipant: event => this.handleOpenNewWitness(event) }));
+            })), h("div", { key: 'f4d05934683c00849950292e10038ad10f998913', class: 'add-participant-button' }, h("button", { key: 'bad170dc190ca65497233d4da6b5ff249740bae5', onClick: () => this.addParticipant.emit({ type: 'SIGNER' }) }, h("ls-icon", { key: 'd030d8ef5ffb5ee5a4e2dc95d3cb87caf6d36fb6', name: "user-add", size: "1.25rem", color: "var(--gray-100, #45484D);" }), h("p", { key: '3ad89f11b2f72f8f69ef593fa464b506910ee893' }, "Add Participant"))), h("slot", { key: '7d2f911962968e51dd0f87f2434f1cef8a62df02' })));
+    }
+    static get is() { return "ls-participant-manager"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-participant-manager.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-participant-manager.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "editor": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LsDocumentViewer",
+                    "resolved": "LsDocumentViewer",
+                    "references": {
+                        "LsDocumentViewer": {
+                            "location": "import",
+                            "path": "../ls-document-viewer/ls-document-viewer",
+                            "id": "src/components/ls-document-viewer/ls-document-viewer.tsx::LsDocumentViewer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The base editor.\n{LSDocumentViewer}"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "template": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LSApiTemplate",
+                    "resolved": "{ id: string; title: string; pageCount: number; fileName: string; link: string; autoArchive: boolean; valid: boolean; locked: boolean; tags: string[]; groupId: string; roles: LSApiRole[]; canOpenSign: boolean; directLinks: []; elementConnection: { templateElements: LSApiElement[]; totalCount: number; }; elements: LSApiElement[]; createdBy: string; created: Date; modified: Date; lastSent: Date; pageDimensionArray: [number, number][]; pageDimensions: string; fixSignatureScale?: boolean; documentRetentionDays: number; }",
+                    "references": {
+                        "LSApiTemplate": {
+                            "location": "import",
+                            "path": "../../types/LSApiTemplate",
+                            "id": "src/types/LSApiTemplate.ts::LSApiTemplate"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The base template information (as JSON).\n{LSApiTemplate}"
+                },
+                "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"
+                        }
+                    }
+                }
+            }, {
+                "method": "addParticipant",
+                "name": "addParticipant",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ type: LSApiRoleType; parent?: string | null }",
+                    "resolved": "{ type: LSApiRoleType; parent?: string; }",
+                    "references": {
+                        "LSApiRoleType": {
+                            "location": "import",
+                            "path": "../../types/LSApiRole",
+                            "id": "src/types/LSApiRole.ts::LSApiRoleType"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=ls-participant-manager.js.map

package/dist/collection/components/ls-participant-manager/ls-participant-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-participant-manager.js","sourceRoot":"","sources":["../../../src/components/ls-participant-manager/ls-participant-manager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { LSApiTemplate } from '../../types/LSApiTemplate';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { LSApiRole, LSApiRoleType } from '../../types/LSApiRole';\nimport { LSMutateEvent } from '../../types/LSMutateEvent';\n\n@Component({\n  tag: 'ls-participant-manager',\n  styleUrl: 'ls-participant-manager.css',\n  shadow: true,\n})\nexport class LsParticipantManager {\n  @Element() element: HTMLElement;\n  /**\n   * The base editor.\n   * {LSDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  /**\n   * The base template information (as JSON).\n   * {LSApiTemplate}\n   */\n  @Prop() template: LSApiTemplate;\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  @Event({\n    bubbles: true,\n    composed: true,\n  })\n  addParticipant: EventEmitter<{ type: LSApiRoleType; parent?: string | null }>;\n\n  selectedHandler(_role) {\n    //console.log(role, 'participant manager')\n  }\n\n  deleteHandler(role: LSApiRole) {\n    this.update.emit([{ action: 'delete', data: role }]);\n    this.mutate.emit([{ action: 'delete', data: role }]);\n  }\n\n  swapHandler(role1, role2) {\n    this.update.emit([{ action: 'swap', data: role1, data2: role2 }]);\n  }\n\n  handleOpened(event) {\n    const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');\n\n    participants.forEach(element => {\n      const isTarget = element.signer?.id === event.detail.id;\n      element.editable = isTarget;\n\n      if (isTarget) {\n        element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n      }\n    });\n  }\n\n  handleOpenNewWitness(event: CustomEvent<{ type: LSApiRoleType; parent?: string | null }>) {\n    const { parent } = event.detail;\n    const observer = new MutationObserver(() => {\n      const participants = this.element.shadowRoot.querySelectorAll('ls-participant-card');\n\n      participants.forEach(element => {\n        const isTarget = element.signer?.signerParent === parent;\n        element.editable = isTarget;\n\n        if (isTarget) {\n          element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        }\n      });\n\n      observer.disconnect();\n    });\n    observer.observe(this.element.shadowRoot, { childList: true, subtree: true });\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ls-editor-infobox\">\n          <h2 class=\"toolbox-section-title\">Participants</h2>\n          <p class=\"toolbox-section-description\">Select and Click to place Signature fields where you’d like on the Document.</p>\n        </div>\n        <div class=\"participant-list\">\n          {this.template &&\n            this.template?.roles.map((r, index) => {\n              return (\n                <ls-participant-card\n                  signer={r}\n                  index={index}\n                  template={this.template}\n                  onOpened={event => {\n                    this.handleOpened.bind(this)(event);\n                  }}\n                  onAddParticipant={event => this.handleOpenNewWitness(event)}\n                />\n              );\n            })}\n        </div>\n        <div class={'add-participant-button'}>\n          <button onClick={() => this.addParticipant.emit({ type: 'SIGNER' })}>\n            <ls-icon name=\"user-add\" size=\"1.25rem\" color=\"var(--gray-100, #45484D);\" />\n            <p>Add Participant</p>\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-participant-select/ls-participant-select.css

@@ -0,0 +1,431 @@
+:host {
+  display: inline-block;
+}
+
+* {
+  margin: 0;
+}
+
+.dropdown {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.dropdown-header {
+  border-radius: 0.625rem;
+  border: 1px solid var(--gray-20, #edeff2);
+  background: var(--gray-10, #f7f8fa);
+  display: flex;
+  padding: 0.125rem 0.125rem 0.125rem 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.placing-fields-text {
+  color: var(--gray-90, #5e6066);
+  text-align: center;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  margin: 0;
+}
+
+.selected-role-label {
+  display: flex;
+  padding: 0.125rem 0.375rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.25rem; /* 142.857% */
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 3rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  width: 18.5625rem;
+  padding: 0.25rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: white;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.dropdown-item {
+  display: flex;
+  padding: 0.5rem 0.875rem 0.5rem 0.5rem;
+  align-items: center;
+  gap: 0.75rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+}
+
+.dropdown-item.selected,
+.dropdown-item.selected:hover {
+  background: var(--background-selected, #e0e2e5);
+}
+
+.dropdown-item:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.add-participant-row {
+  all: unset;
+  display: flex;
+  padding: 0.5rem 0.875rem 0.5rem 0.5rem;
+  align-items: center;
+  gap: 0.75rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  border: 1px dashed var(--gray-30, #e0e2e5);
+  cursor: pointer;
+}
+
+.add-participant-row:hover {
+  background: var(--gray-10, #f7f8fa);
+}
+
+.plus-icon {
+  color: var(--gray-40, #d8d9dc);
+}
+
+.role-icon {
+  display: flex;
+  padding: 0.5rem;
+  border-radius: 0.625rem;
+}
+
+.add-participant-icon {
+  display: flex;
+  padding: 0.5rem;
+  border-radius: 0.625rem;
+  color: white;
+  background: var(--primary-60, #4456f6);
+}
+
+.role-text {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.dropdown-item .check-icon {
+  color: var(--gray-40, #d8d9dc);
+}
+
+.dropdown-item.selected .check-icon {
+  color: var(--check-icon-selected);
+}
+
+.role-name {
+  color: var(--gray-100, #45484d);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1rem; /* 133.333% */
+}
+
+.role-type {
+  color: var(--gray-80, #787a80);
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem; /* 133.333% */
+}
+
+.dropdown-item.selected .role-name {
+  color: var(--role-name-selected);
+}
+
+.dropdown-item.selected .role-type {
+  color: var(--role-type-selected);
+}
+
+/* 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: fit-content;
+}
+
+#selectorIcon {
+  position: absolute;
+  top: 50%;
+  right: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+#selectLeadingIcon {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-80, #6c6e73);
+}
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active,
+select:active,
+textarea:active {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+.expand-button {
+  border: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  justify-content: center;
+  text-transform: capitalize;
+  min-height: 2rem;
+  min-width: 2rem;
+  max-height: 2rem;
+  max-width: 2rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-10, #f7f8fa);
+}
+
+.button-group {
+  display: flex;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gray-30, #e0e2e5);
+  background: var(--white, #ffffff);
+  overflow: clip;
+}
+
+.button-group button {
+  display: flex;
+  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);
+}