@verdocs/web-sdk 2.0.4 → 2.0.6

package/dist/cjs/verdocs-radio-button_3.cjs.entry.js

@@ -0,0 +1,241 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1d5fc518.js');
+require('./Types-f89f9116.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-2ff96f90.js');
+const Roles = require('./Roles-9b593b95.js');
+const TemplateStore = require('./TemplateStore-07e274ab.js');
+const errors = require('./errors-0396da3d.js');
+const Templates = require('./Templates-f6e75719.js');
+require('./index-f664e4d0.js');
+
+const verdocsRadioButtonCss = "verdocs-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-radio-button.disabled{opacity:0.5}verdocs-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-radio-button input[type=radio]+label:before{content:\"\";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:16px;height:16px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-radio-button.hide{display:none}verdocs-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsRadioButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checked = false;
+    this.name = '';
+    this.value = '';
+    this.disabled = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: { disabled: this.disabled } }, index.h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+  }
+};
+VerdocsRadioButton.style = verdocsRadioButtonCss;
+
+const verdocsTemplateRolePropertiesCss = "verdocs-template-role-properties{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .background-overlay{position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-role-properties .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-role-properties verdocs-text-input{margin:0 0 10px 0}verdocs-template-role-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;padding:0 6px;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}";
+
+const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
+const VerdocsTemplateRoleProperties = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    this.delete = index.createEvent(this, "delete", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.store = null;
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.roleName = '';
+    this.sender = VerdocsEndpoint.TemplateSenderTypes.EVERYONE;
+    this.dirty = false;
+    this.saving = false;
+    this.name = '';
+    this.type = 'signer';
+    this.fullName = '';
+    this.email = '';
+    this.phone = '';
+    this.allowDelegation = false;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d, _e;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[ROLE_PROPERTIES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[ROLE_PROPERTIES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+      const editingRole = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles.find(role => role.name === this.roleName);
+      if (editingRole) {
+        this.name = editingRole.name;
+        this.type = editingRole.type;
+        this.fullName = editingRole.full_name;
+        this.email = editingRole.email;
+        this.phone = editingRole.phone;
+        this.allowDelegation = editingRole.delegator;
+        console.log('[ROLES] Editing role', editingRole);
+      }
+    }
+    catch (e) {
+      console.log('[TEMPLATE ROLE PROPERTIES] Error with preview session', e);
+      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+    }
+  }
+  handleCancel(e) {
+    var _a, _b, _c;
+    e.stopPropagation();
+    this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
+    this.dirty = false;
+    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
+  }
+  async handleSave(e) {
+    e.stopPropagation();
+    this.saving = true;
+    Roles.updateRole(this.endpoint, this.templateId, this.roleName, {
+      name: this.name,
+      type: this.type,
+      full_name: this.fullName,
+      email: this.email,
+      phone: this.phone,
+      delegator: this.allowDelegation,
+    })
+      .then(async (r) => {
+      var _a;
+      console.log('[ROLE_PROPERTIES] Update result', r);
+      this.saving = false;
+      this.dirty = false;
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, true);
+      // this.sortTemplateRoles();
+      // this.renumberTemplateRoles();
+      // const newRoles = [...this.store.state.roles];
+      // newRoles.forEach(role => {
+      //   if (role.name === this.roleName) {
+      //     role.name = this.name;
+      //     role.type = this.type;
+      //     role.full_name = this.fullName;
+      //     role.email = this.email;
+      //     role.phone = this.phone;
+      //     role.delegator = this.allowDelegation;
+      //   }
+      // });
+      // this.store.state.roles = newRoles;
+      (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    })
+      .catch(e => {
+      console.log('Update error', e);
+      this.saving = false;
+    });
+  }
+  async handleDelete(e) {
+    e.stopPropagation();
+    if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {
+      Roles.deleteRole(this.endpoint, this.templateId, this.roleName)
+        .then(r => {
+        var _a;
+        console.log('Role deleted', r);
+        this.store.state.roles = [...this.store.state.roles.filter(role => role.name !== this.roleName)];
+        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+      })
+        .catch(e => {
+        console.log('Deletion error', e);
+      });
+    }
+  }
+  render() {
+    const hasFields = (this.store.state.fields || []).findIndex(field => field.role_name === this.roleName) !== -1;
+    return (index.h(index.Host, null, index.h("div", { class: "background-overlay", onClick: e => this.handleCancel(e) }, index.h("div", { class: "dialog" }, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("verdocs-text-input", { id: "verdocs-recipient-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        ? 'This role has fields assigned and can no longer be renamed.'
+        : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Template Name...", onInput: (e) => {
+        this.name = e.target.value;
+        this.dirty = true;
+      } }), index.h("div", { class: "row" }, index.h("div", { class: "input-label" }, "Type:"), index.h("verdocs-select-input", { value: this.type, options: [
+        { label: 'Signer', value: 'signer' },
+        { label: 'CC', value: 'cc' },
+        { label: 'Approver', value: 'approver' },
+      ], onInput: (e) => {
+        this.type = e.target.value;
+        this.dirty = true;
+      } }), index.h("verdocs-help-icon", { text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), index.h("verdocs-text-input", { id: "verdocs-recipient-email", label: "Full Name", value: this.fullName, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
+        this.fullName = e.target.value;
+        this.dirty = true;
+      } }), index.h("verdocs-text-input", { id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+        this.email = e.target.value;
+        this.dirty = true;
+      } }), index.h("verdocs-text-input", { id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+        this.phone = e.target.value;
+        this.dirty = true;
+      } }), index.h("div", { class: "row" }, index.h("div", { class: "input-label" }, "May Delegate:"), index.h("div", { class: "checkbox-wrapper" }, index.h("verdocs-checkbox", { checked: this.allowDelegation, onInput: (e) => {
+        this.allowDelegation = e.target.checked;
+        this.dirty = true;
+      } })), index.h("verdocs-help-icon", { text: "If enabled, this recipient may delegate their actions to another individual." })), index.h("div", { class: "buttons" }, index.h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { style: { flex: '1' } }), index.h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+  }
+};
+VerdocsTemplateRoleProperties.style = verdocsTemplateRolePropertiesCss;
+
+const verdocsTemplateSenderCss = "verdocs-template-sender{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-sender .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-sender .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-sender .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-sender .buttons verdocs-button{margin-left:16px}verdocs-template-sender .options{row-gap:10px}verdocs-template-sender .options .option{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-sender .options .option .description{margin-left:10px}verdocs-template-sender .options .option .description .name{display:inline-block;vertical-align:top;margin-top:4px;margin-right:4px}";
+
+const VerdocsTemplateSender = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.store = null;
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.sender = VerdocsEndpoint.TemplateSenderTypes.EVERYONE;
+    this.saving = false;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d, _e;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[SENDER] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[SENDER] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+      this.sender = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.sender;
+    }
+    catch (e) {
+      console.log('[SENDER] Error with preview session', e);
+      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+    }
+  }
+  handleClose() {
+    this.close.emit();
+  }
+  // We need a separate event handler for clicking the background because it can receive events "through" other child components
+  handleDismiss(e) {
+    if (e.target.className === 'background-overlay') {
+      e.preventDefault();
+      this.handleClose();
+    }
+  }
+  async handleSelectSetting(value) {
+    this.saving = true;
+    Templates.updateTemplate(this.endpoint, this.templateId, { sender: value })
+      .then(r => {
+      var _a;
+      console.log('Update result', r);
+      if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
+        this.store.state.sender = value;
+      }
+      this.saving = false;
+      this.sender = value;
+    })
+      .catch(e => {
+      console.log('Error saving', e);
+      this.saving = false;
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, index.h("div", { class: "dialog" }, index.h("div", { class: "options" }, index.h("div", { class: "option" }, index.h("verdocs-radio-button", { name: "template-sender", value: VerdocsEndpoint.TemplateSenderTypes.EVERYONE, checked: this.sender === VerdocsEndpoint.TemplateSenderTypes.EVERYONE, onInput: () => this.handleSelectSetting(VerdocsEndpoint.TemplateSenderTypes.EVERYONE) }), index.h("div", { class: "description" }, index.h("div", { class: "name" }, "Anyone on the Web"), index.h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), index.h("div", { class: "option" }, index.h("verdocs-radio-button", { name: "template-sender", value: VerdocsEndpoint.TemplateSenderTypes.EVERYONE_AS_CREATOR, checked: this.sender === VerdocsEndpoint.TemplateSenderTypes.EVERYONE_AS_CREATOR, onInput: () => this.handleSelectSetting(VerdocsEndpoint.TemplateSenderTypes.EVERYONE_AS_CREATOR) }), index.h("div", { class: "description" }, index.h("div", { class: "name" }, "Anyone on the Web as me"), index.h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), index.h("div", { class: "option" }, index.h("verdocs-radio-button", { name: "template-sender", value: VerdocsEndpoint.TemplateSenderTypes.ORGANIZATION_MEMBER, checked: this.sender === VerdocsEndpoint.TemplateSenderTypes.ORGANIZATION_MEMBER, onInput: () => this.handleSelectSetting(VerdocsEndpoint.TemplateSenderTypes.ORGANIZATION_MEMBER) }), index.h("div", { class: "description" }, index.h("div", { class: "name" }, "Anyone in my organization"), index.h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), index.h("div", { class: "option" }, index.h("verdocs-radio-button", { name: "template-sender", value: VerdocsEndpoint.TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, checked: this.sender === VerdocsEndpoint.TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onInput: () => this.handleSelectSetting(VerdocsEndpoint.TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), index.h("div", { class: "description" }, index.h("div", { class: "name" }, "Anyone in my organization as me"), index.h("verdocs-help-icon", { text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), index.h("div", { class: "option" }, index.h("verdocs-radio-button", { name: "template-sender", value: VerdocsEndpoint.TemplateSenderTypes.CREATOR, checked: this.sender === VerdocsEndpoint.TemplateSenderTypes.CREATOR, onInput: () => this.handleSelectSetting(VerdocsEndpoint.TemplateSenderTypes.CREATOR) }), index.h("div", { class: "description" }, index.h("div", { class: "name" }, "Me"), index.h("verdocs-help-icon", { text: "Only I can use this template." })))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Close", onClick: () => this.handleClose() }))))));
+  }
+};
+VerdocsTemplateSender.style = verdocsTemplateSenderCss;
+
+exports.verdocs_radio_button = VerdocsRadioButton;
+exports.verdocs_template_role_properties = VerdocsTemplateRoleProperties;
+exports.verdocs_template_sender = VerdocsTemplateSender;

package/dist/cjs/verdocs-send.cjs.entry.js

@@ -7,11 +7,11 @@ require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-2ff96f90.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
-const TemplateStore = require('./TemplateStore-cd05c035.js');
+const TemplateStore = require('./TemplateStore-07e274ab.js');
 const utils = require('./utils-ce815868.js');
 const errors = require('./errors-0396da3d.js');
 require('./index-f664e4d0.js');
-require('./Templates-6fb62dcd.js');
+require('./Templates-f6e75719.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-dba86ae4.js');
 require('./Files-4bdc0c0f.js');