@verdocs/web-sdk 1.10.0 → 1.10.3

package/dist/collection/components/elements/verdocs-template-recipients/verdocs-template-recipients.js

@@ -1,368 +0,0 @@
-import interact from 'interactjs';
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
-import { h, Fragment } from '@stencil/core';
-import { getRoleIndex } from '../../../utils/utils';
-const arrayMove = (arr, fromIndex, toIndex) => {
-  const newArr = [...arr];
-  newArr.splice(toIndex, 0, newArr.splice(fromIndex, 1)[0]);
-  return newArr;
-};
-const senderLabels = {
-  [TemplateSenderTypes.EVERYONE]: 'Everyone',
-  [TemplateSenderTypes.EVERYONE_AS_CREATOR]: 'Everyone as Me',
-  [TemplateSenderTypes.ORGANIZATION_MEMBER]: 'Organization member',
-  [TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR]: 'Organization Member as Me',
-  [TemplateSenderTypes.CREATOR]: 'Me',
-};
-const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z"/></svg>';
-const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
-const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
-const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
-/**
- * Displays a contact picker suitable for filling out Recipient objects when sending Documents.
- *
- * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the
- * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.
- * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be
- * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as "Recently Used" contacts, or
- * to always display the user's own contact record.
- */
-export class VerdocsTemplateRecipients {
-  constructor() {
-    this.sequences = [];
-    this.rolesAtSequence = {};
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateRole = null;
-    this.contactSuggestions = [];
-    this.name = undefined;
-    this.email = undefined;
-    this.phone = undefined;
-    this.message = undefined;
-    this.showSuggestions = false;
-    this.showMessage = false;
-    this.delegator = false;
-    this.sender = TemplateSenderTypes.CREATOR;
-    this.showingSenderDialog = false;
-    this.orderedRoles = [];
-  }
-  componentWillLoad() {
-    this.endpoint.loadSession();
-    if (this.templateRole) {
-      this.name = this.templateRole.full_name || '';
-      this.email = this.templateRole.email || '';
-      this.phone = this.templateRole.phone || '';
-      this.delegator = this.templateRole.delegator || false;
-      this.message = this.templateRole.message || '';
-      this.showMessage = this.message !== '';
-    }
-    this.orderedRoles = [
-      {
-        order: 0,
-        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',
-        name: 'Seller 1',
-        full_name: '',
-        email: '',
-        type: 'signer',
-        sequence: 1,
-        fields: [],
-        delegator: false,
-        phone: '',
-      },
-      {
-        order: 1,
-        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',
-        name: 'Seller 2',
-        full_name: '',
-        email: '',
-        type: 'signer',
-        sequence: 1,
-        fields: [],
-        delegator: false,
-        phone: '',
-      },
-      {
-        order: 2,
-        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',
-        name: 'Buyer 1',
-        full_name: '',
-        email: '',
-        type: 'signer',
-        sequence: 2,
-        fields: [],
-        delegator: false,
-        phone: '',
-      },
-      {
-        order: 3,
-        template_id: '951016b0-c5ef-450d-b628-9a0c5b84b163',
-        name: 'Buyer 2',
-        full_name: '',
-        email: '',
-        type: 'signer',
-        sequence: 2,
-        fields: [],
-        delegator: false,
-        phone: '',
-      },
-    ];
-    this.computeRolesBySequence();
-  }
-  componentDidRender() {
-    interact.dynamicDrop(true);
-    interact('.recipient').draggable({
-      listeners: {
-        start(event) {
-          console.log('drag start', event.type, event.target);
-        },
-        move(event) {
-          const oldX = +(event.target.getAttribute('posX') || 0);
-          const oldY = +(event.target.getAttribute('posY') || 0);
-          const newX = event.dx + oldX;
-          const newY = event.dy + oldY;
-          event.target.setAttribute('posX', newX);
-          event.target.setAttribute('posy', newY);
-          event.target.style.transform = `translate(${newX}px, ${newY}px)`;
-        },
-        end(event) {
-          console.log('end', event);
-          event.target.setAttribute('posX', 0);
-          event.target.setAttribute('posy', 0);
-          event.target.style.transform = `translate(0px, 0px)`;
-        },
-      },
-    });
-    interact('.dropzone').dropzone({
-      overlap: 0.05,
-      ondrop: event => {
-        event.target.classList.remove('active');
-        console.log(event.relatedTarget.id + ' was dropped into ' + event.target.id);
-        const roleName = event.relatedTarget.dataset.rolename;
-        const targetOrder = +event.target.dataset.order;
-        const targetSequence = +event.target.dataset.sequence;
-        // const roleIndex = this.orderedRoles.findIndex(role => role.name === roleToMove);
-        const roleIndex = this.orderedRoles.findIndex(role => role.name === roleName);
-        if (roleIndex !== -1) {
-          console.log('Will move', { roleName, targetOrder, targetSequence, roleIndex });
-          const role = this.orderedRoles[roleIndex];
-          role.sequence = targetSequence;
-          console.log('before', JSON.parse(JSON.stringify(this.orderedRoles)));
-          this.orderedRoles = arrayMove(this.orderedRoles, roleIndex, targetOrder);
-          this.orderedRoles.forEach((role, index) => {
-            role.order = index;
-          });
-          console.log('after', JSON.parse(JSON.stringify(this.orderedRoles)));
-          this.computeRolesBySequence();
-        }
-      },
-      ondropactivate: e => {
-        // console.log('drop activated');
-        e.target.classList.add('visible');
-      },
-      ondropdeactivate: e => {
-        e.target.classList.remove('visible');
-      },
-      ondragenter: e => {
-        // console.log('drag enter', e);
-        e.target.classList.add('active');
-      },
-      ondragleave: e => {
-        // console.log('drag leave', e);
-        e.target.classList.remove('active');
-      },
-    });
-  }
-  computeRolesBySequence() {
-    const rolesAtSequence = {};
-    this.orderedRoles.forEach(role => {
-      var _a;
-      rolesAtSequence[_a = role.sequence] || (rolesAtSequence[_a] = []);
-      rolesAtSequence[role.sequence].push(role);
-    });
-    this.rolesAtSequence = rolesAtSequence;
-    console.log('ras', this.rolesAtSequence);
-    this.sequences = Object.keys(rolesAtSequence).map(levelStr => +levelStr);
-    this.sequences.sort((a, b) => a - b);
-  }
-  handleCancel(e) {
-    var _a;
-    e.stopPropagation();
-    this.showSuggestions = false;
-    (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
-  }
-  handleSubmit(e) {
-    var _a;
-    e.stopPropagation();
-    this.showSuggestions = false;
-    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
-      full_name: this.name,
-      email: this.email,
-      phone: this.phone,
-      message: this.message,
-      delegator: this.delegator,
-    });
-  }
-  render() {
-    console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));
-    const roleNames = this.orderedRoles.map(role => role.name) || [];
-    let beforeOrder = 0;
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Participant Order"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[this.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" }))), this.sequences.map(sequence => (h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence }), this.rolesAtSequence[sequence].map(role => {
-      beforeOrder = role.order;
-      return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence })));
-    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { value: this.sender, onCancel: () => (this.showingSenderDialog = false), onNext: e => {
-        this.showingSenderDialog = false;
-        this.sender = e.detail;
-      } }))));
-  }
-  static get is() { return "verdocs-template-recipients"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-template-recipients.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-template-recipients.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "endpoint": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "VerdocsEndpoint",
-          "resolved": "VerdocsEndpoint",
-          "references": {
-            "VerdocsEndpoint": {
-              "location": "import",
-              "path": "@verdocs/js-sdk"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
-        },
-        "defaultValue": "VerdocsEndpoint.getDefault()"
-      },
-      "templateRole": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IRole | null",
-          "resolved": "IRole",
-          "references": {
-            "IRole": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Templates/Types"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The role that this contact will be assigned to."
-        },
-        "defaultValue": "null"
-      },
-      "contactSuggestions": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(IEmailContact | IPhoneContact)[]",
-          "resolved": "(IEmailContact | IPhoneContact)[]",
-          "references": {
-            "IEmailContact": {
-              "location": "local"
-            },
-            "IPhoneContact": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\nof suggestions be limited to the 5 best matching records."
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "name": {},
-      "email": {},
-      "phone": {},
-      "message": {},
-      "showSuggestions": {},
-      "showMessage": {},
-      "delegator": {},
-      "sender": {},
-      "showingSenderDialog": {},
-      "orderedRoles": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "searchContacts",
-        "name": "searchContacts",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user enters text in the search field. The calling application may use this to update\nthe `contactSuggestions` property."
-        },
-        "complexType": {
-          "original": "IContactSearchEvent",
-          "resolved": "IContactSearchEvent",
-          "references": {
-            "IContactSearchEvent": {
-              "location": "local"
-            }
-          }
-        }
-      }, {
-        "method": "cancel",
-        "name": "cancel",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user cancels the dialog."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "next",
-        "name": "next",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the user selects a contact."
-        },
-        "complexType": {
-          "original": "IContactSelectEvent",
-          "resolved": "IContactSelectEvent",
-          "references": {
-            "IContactSelectEvent": {
-              "location": "local"
-            }
-          }
-        }
-      }];
-  }
-}

package/dist/collection/components/elements/verdocs-template-recipients/verdocs-template-recipients.stories.js

@@ -1,35 +0,0 @@
-import { html } from 'lit-html';
-export default {
-  title: 'Elements/Template Recipients',
-  component: 'verdocs-template-recipients',
-  args: {
-    templateRole: {
-      template_id: '65cbba07-d0ac-4b62-afe3-25d186238938',
-      name: 'Recipient 1',
-      full_name: '',
-      email: '',
-      phone: '',
-      type: 'signer',
-      sequence: 1,
-      message: '',
-    },
-    contactSuggestions: [
-      { name: 'Me', email: 'myuser@nomail.com', phone: '212-555-6664' },
-      { name: 'Will Power', email: 'will.power@nomail.com', avatar: 'https://i.pravatar.cc/48?img=59' },
-      { name: 'Paige Turner', email: 'paige.turner@nomail.com', phone: '212-555-6664', avatar: 'https://i.pravatar.cc/48?img=41' },
-      { name: 'Bill Board', phone: '212-555-6664' },
-    ],
-  },
-  argTypes: {
-    searchContacts: { action: 'searchContacts' },
-    cancel: { action: 'cancel' },
-    contactSelected: { action: 'contactSelected' },
-  },
-};
-export const TemplateRecipients = ({ templateRole, contactSuggestions, searchContacts, cancel, contactSelected }) => html `<verdocs-template-recipients
-    .templateRole=${templateRole}
-    .contactSuggestions=${contactSuggestions}
-    @searchContacts=${searchContacts}
-    @cancel=${cancel}
-    @contactSelected=${contactSelected}
-  />`;

package/dist/components/Types.js

@@ -1,43 +0,0 @@
-var TemplatePermissions;
-(function (TemplatePermissions) {
-    TemplatePermissions["TEMPLATE_CREATOR_CREATE_PUBLIC"] = "template:creator:create:public";
-    TemplatePermissions["TEMPLATE_CREATOR_CREATE_ORG"] = "template:creator:create:org";
-    TemplatePermissions["TEMPLATE_CREATOR_CREATE_PERSONAL"] = "template:creator:create:personal";
-    TemplatePermissions["TEMPLATE_CREATOR_DELETE"] = "template:creator:delete";
-    TemplatePermissions["TEMPLATE_CREATOR_VISIBILITY"] = "template:creator:visibility";
-    TemplatePermissions["TEMPLATE_MEMBER_READ"] = "template:member:read";
-    TemplatePermissions["TEMPLATE_MEMBER_WRITE"] = "template:member:write";
-    TemplatePermissions["TEMPLATE_MEMBER_DELETE"] = "template:member:delete";
-    TemplatePermissions["TEMPLATE_MEMBER_VISIBILITY"] = "template:member:visibility";
-})(TemplatePermissions || (TemplatePermissions = {}));
-var TemplateSenderTypes;
-(function (TemplateSenderTypes) {
-    TemplateSenderTypes["CREATOR"] = "creator";
-    TemplateSenderTypes["ORGANIZATION_MEMBER"] = "organization_member";
-    TemplateSenderTypes["ORGANIZATION_MEMBER_AS_CREATOR"] = "organization_member_as_creator";
-    TemplateSenderTypes["EVERYONE"] = "everyone";
-    TemplateSenderTypes["EVERYONE_AS_CREATOR"] = "everyone_as_creator";
-})(TemplateSenderTypes || (TemplateSenderTypes = {}));
-var TemplateActions;
-(function (TemplateActions) {
-    TemplateActions["CREATE_PERSONAL"] = "create_personal";
-    TemplateActions["CREATE_ORG"] = "create_org";
-    TemplateActions["CREATE_PUBLIC"] = "create_public";
-    TemplateActions["READ"] = "read";
-    TemplateActions["WRITE"] = "write";
-    TemplateActions["DELETE"] = "delete";
-    TemplateActions["CHANGE_VISIBILITY_PERSONAL"] = "change_visibility_personal";
-    TemplateActions["CHANGE_VISIBILITY_ORG"] = "change_visibility_org";
-    TemplateActions["CHANGE_VISIBILITY_PUBLIC"] = "change_visibility_public";
-})(TemplateActions || (TemplateActions = {}));
-var SortOptions;
-(function (SortOptions) {
-    SortOptions["CREATED_AT"] = "created_at";
-    SortOptions["UPDATED_AT"] = "updated_at";
-    SortOptions["NAME"] = "name";
-    SortOptions["LAST_USED_AT"] = "last_used_at";
-    SortOptions["COUNTER"] = "counter";
-    SortOptions["STAR_COUNTER"] = "star_counter";
-})(SortOptions || (SortOptions = {}));
-
-export { TemplateSenderTypes as T };