@verdocs/web-sdk 1.10.1 → 1.10.3

package/dist/components/verdocs-template-role-properties.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateRoleProperties extends Components.VerdocsTemplateRoleProperties, HTMLElement {}
+export const VerdocsTemplateRoleProperties: {
+  prototype: VerdocsTemplateRoleProperties;
+  new (): VerdocsTemplateRoleProperties;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-template-role-properties.js

@@ -0,0 +1,6 @@
+import { V as VerdocsTemplateRoleProperties$1, d as defineCustomElement$1 } from './verdocs-template-role-properties2.js';
+
+const VerdocsTemplateRoleProperties = VerdocsTemplateRoleProperties$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTemplateRoleProperties, defineCustomElement };

package/dist/components/verdocs-template-role-properties2.js

@@ -0,0 +1,229 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint.js';
+import { s as state } from './templateStore.js';
+import { l as loadTemplate } from './Templates.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
+
+/**
+ * A "role" is an individual participant in a signing flow, such as a signer or CC contact. Roles are identified by
+ * their names, which must be unique (e.g. 'Recipient 1'). Template fields are assigned to roles for signing operations,
+ * so you may have 'Recipient 1 Signature 1' and so forth.
+ *
+ * @module
+ */
+var createRole = function (endpoint, templateId, params) {
+    return endpoint.api //
+        .post("/templates/".concat(templateId, "/roles/"), params)
+        .then(function (r) { return r.data; });
+};
+var updateRole = function (endpoint, templateId, roleName, params) {
+    return endpoint.api //
+        .put("/templates/".concat(templateId, "/roles/").concat(roleName), params)
+        .then(function (r) { return r.data; });
+};
+var deleteRole = function (endpoint, templateId, roleName) {
+    return endpoint.api //
+        .delete("/templates/".concat(templateId, "/roles/").concat(roleName))
+        .then(function (r) { return r.data; });
+};
+
+const verdocsTemplateRolePropertiesCss = "verdocs-template-role-properties{font-family:\"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: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-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;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:active{background:#f3f3f3}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}";
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.close = createEvent(this, "close", 7);
+    this.delete = createEvent(this, "delete", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.roleName = '';
+    this.sender = 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, _f;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[TEMPLATE ROLE PROPERTIES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[TEMPLATE ROLE PROPERTIES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      try {
+        console.log(`[TEMPLATE ROLE PROPERTIES] Loading template ${this.templateId}`, this.endpoint.session);
+        await loadTemplate(this.endpoint, this.templateId);
+      }
+      catch (e) {
+        console.log('[TEMPLATE ROLE PROPERTIES] Error loading template', e);
+        (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      }
+      const editingRole = state.template.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('Got role', editingRole);
+      }
+    }
+    catch (e) {
+      console.log('[TEMPLATE ROLE PROPERTIES] Error with preview session', e);
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+    }
+  }
+  handleCancel(e) {
+    var _a;
+    e.stopPropagation();
+    this.name = state.template.name;
+    this.dirty = false;
+    (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+  }
+  async handleSave(e) {
+    e.stopPropagation();
+    this.saving = true;
+    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(r => {
+      var _a;
+      console.log('Update result', r);
+      this.saving = false;
+      this.dirty = false;
+      state.template.roles.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;
+        }
+      });
+      (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    })
+      .catch(e => {
+      console.log('Uopdate 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.')) {
+      deleteRole(this.endpoint, this.templateId, this.roleName)
+        .then(r => {
+        var _a;
+        console.log('Role deleted', r);
+        state.template.roles = [...state.template.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() {
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { class: "dialog" }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { id: "verdocs-recipient-name", label: "Role Name", value: this.name, autocomplete: "off", helpText: "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;
+      } }), h("div", { class: "row" }, h("div", { class: "input-label" }, "Type:"), 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;
+      } }), 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." })), 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;
+      } }), 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;
+      } }), 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;
+      } }), h("div", { class: "row" }, h("div", { class: "input-label" }, "May Delegate:"), h("div", { class: "checkbox-wrapper" }, h("verdocs-checkbox", { checked: this.allowDelegation, onInput: (e) => {
+        this.allowDelegation = e.target.checked;
+        this.dirty = true;
+      } })), h("verdocs-help-icon", { text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+  }
+  static get style() { return verdocsTemplateRolePropertiesCss; }
+}, [0, "verdocs-template-role-properties", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"],
+    "roleName": [1, "role-name"],
+    "sender": [1],
+    "dirty": [32],
+    "saving": [32],
+    "name": [32],
+    "type": [32],
+    "fullName": [32],
+    "email": [32],
+    "phone": [32],
+    "allowDelegation": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-role-properties", "verdocs-button", "verdocs-checkbox", "verdocs-help-icon", "verdocs-select-input", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-role-properties":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateRoleProperties);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTemplateRoleProperties as V, createRole as c, defineCustomElement as d, updateRole as u };

package/dist/components/verdocs-template-sender.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateSender extends Components.VerdocsTemplateSender, HTMLElement {}
+export const VerdocsTemplateSender: {
+  prototype: VerdocsTemplateSender;
+  new (): VerdocsTemplateSender;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-template-sender.js

@@ -0,0 +1,6 @@
+import { V as VerdocsTemplateSender$1, d as defineCustomElement$1 } from './verdocs-template-sender2.js';
+
+const VerdocsTemplateSender = VerdocsTemplateSender$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTemplateSender, defineCustomElement };

package/dist/components/verdocs-template-sender2.js

@@ -0,0 +1,116 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { u as updateTemplate } from './Templates2.js';
+import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint.js';
+import { s as state } from './templateStore.js';
+import { l as loadTemplate } from './Templates.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$3 } from './verdocs-button2.js';
+import { d as defineCustomElement$2 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$1 } from './verdocs-radio-button2.js';
+
+const verdocsTemplateSenderCss = "verdocs-template-sender{font-family:\"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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.close = createEvent(this, "close", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.sender = TemplateSenderTypes.EVERYONE;
+    this.saving = false;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d, _e, _f;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[TEMPLATE SENDER] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[TEMPLATE SENDER] Unable to start builder session, must be authenticated');
+        return;
+      }
+      try {
+        console.log(`[TEMPLATE SENDER] Loading template ${this.templateId}`, this.endpoint.session);
+        await loadTemplate(this.endpoint, this.templateId);
+      }
+      catch (e) {
+        console.log('[TEMPLATE SENDER] Error loading template', e);
+        (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+      }
+      this.sender = state.template.sender;
+      console.log('s', this.sender);
+    }
+    catch (e) {
+      console.log('[TEMPLATE SENDER] Error with preview session', e);
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.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;
+    updateTemplate(this.endpoint, this.templateId, { sender: value })
+      .then(r => {
+      console.log('Update result', r);
+      state.template.sender = value;
+      this.saving = false;
+      this.sender = value;
+    })
+      .catch(e => {
+      console.log('Error saving', e);
+      this.saving = false;
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "options" }, h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE, checked: this.sender === TemplateSenderTypes.EVERYONE, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.EVERYONE_AS_CREATOR, checked: this.sender === TemplateSenderTypes.EVERYONE_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER, checked: this.sender === TemplateSenderTypes.ORGANIZATION_MEMBER, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, checked: this.sender === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Anyone in my organization as me"), 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'.)" }))), h("div", { class: "option" }, h("verdocs-radio-button", { name: "template-sender", value: TemplateSenderTypes.CREATOR, checked: this.sender === TemplateSenderTypes.CREATOR, onInput: () => this.handleSelectSetting(TemplateSenderTypes.CREATOR) }), h("div", { class: "description" }, h("div", { class: "name" }, "Me"), h("verdocs-help-icon", { text: "Only I can use this template." })))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Close", onClick: () => this.handleClose() }))))));
+  }
+  static get style() { return verdocsTemplateSenderCss; }
+}, [0, "verdocs-template-sender", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"],
+    "sender": [1],
+    "saving": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-sender", "verdocs-button", "verdocs-help-icon", "verdocs-radio-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-sender":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateSender);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-radio-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTemplateSender as V, defineCustomElement as d };

package/dist/components/verdocs-template-visibility.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { u as updateTemplate } from './Templates2.js';
-import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
@@ -9,7 +8,7 @@ import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$2 } from './verdocs-component-error2.js';
 
-const verdocsTemplateVisibilityCss = "verdocs-template-visibility{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-visibility.loading{min-height:300px;position:relative;display:block}verdocs-template-visibility.empty{display:none}verdocs-template-visibility form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-visibility form .description{font-size:14px;text-align:justify;margin-bottom:20px;color:#5c6575}verdocs-template-visibility form label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:18px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-visibility form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-visibility form input:focus{outline:none}verdocs-template-visibility form .input-row{display:-ms-flexbox;display:flex;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px}verdocs-template-visibility form .input-row verdocs-text-input input{text-align:center}verdocs-template-visibility form .input-row verdocs-checkbox{display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px;-ms-flex-pack:center;justify-content:center}verdocs-template-visibility .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-moz-placeholder{color:#aaaaaa}verdocs-template-visibility :-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::placeholder{color:#aaaaaa}";
+const verdocsTemplateVisibilityCss = "verdocs-template-visibility{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-visibility.loading{min-height:300px;position:relative;display:block}verdocs-template-visibility.empty{display:none}verdocs-template-visibility form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-visibility form .description{font-size:14px;text-align:justify;color:#5c6575}verdocs-template-visibility form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0}verdocs-template-visibility form label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;margin:0 0 4px 0;color:#33364b}verdocs-template-visibility form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-visibility form input:focus{outline:none}verdocs-template-visibility form .input-row{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px}verdocs-template-visibility form .input-row verdocs-text-input input{text-align:center}verdocs-template-visibility form .input-row verdocs-checkbox{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}verdocs-template-visibility form .input-row verdocs-checkbox label>input[type=checkbox]+*::before{margin-right:0}verdocs-template-visibility .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:25px;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-moz-placeholder{color:#aaaaaa}verdocs-template-visibility :-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::placeholder{color:#aaaaaa}";
 
 const VerdocsTemplateVisibility$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -65,7 +64,7 @@ const VerdocsTemplateVisibility$1 = /*@__PURE__*/ proxyCustomElement(class exten
     if (!this.endpoint.session || !state.template) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-personal" }, "Personal"), h("verdocs-checkbox", { id: "verdocs-is-personal", name: "is-personal", checked: this.personal, value: "on", onInput: (e) => {
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Visibility"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-personal" }, "Personal"), h("verdocs-checkbox", { id: "verdocs-is-personal", name: "is-personal", checked: this.personal, value: "on", onInput: (e) => {
         this.personal = e.target.checked;
         this.dirty = true;
       } })), h("div", { class: "description" }, "Personal templates are hidden from other members of your Organization (if any)."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-public" }, "Public"), h("verdocs-checkbox", { id: "verdocs-is-public", name: "is-public", checked: this.public, value: "on", onInput: (e) => {

package/dist/components/verdocs-text-input2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './verdocs-help-icon2.js';
 
 const verdocsTextInputCss = "verdocs-text-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input [data-lastpass-icon-root]{display:none !important}";
 
@@ -10,11 +11,12 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.label = '';
     this.placeholder = '';
     this.autocomplete = '';
+    this.helpText = '';
     this.type = 'text';
     this.disabled = false;
   }
   render() {
-    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }))));
+    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
   }
   static get style() { return verdocsTextInputCss; }
 }, [0, "verdocs-text-input", {
@@ -22,6 +24,7 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "label": [1],
     "placeholder": [1],
     "autocomplete": [1],
+    "helpText": [1, "help-text"],
     "type": [1],
     "disabled": [4]
   }]);
@@ -29,13 +32,18 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-text-input"];
+  const components = ["verdocs-text-input", "verdocs-help-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsTextInput);
       }
       break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }
 defineCustomElement();

package/dist/components/verdocs-view2.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getEnvelopeById, s as state } from './Envelopes.js';
 import { S as SDKError } from './errors.js';

package/dist/custom-elements.json

@@ -934,6 +934,19 @@
         }
       ]
     },
+    {
+      "name": "verdocs-template-attachments",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays an edit form that allows the user to view, add, or remove a template's attachments.\nNote that an active session and valid template ID must be supplied."
+      },
+      "attributes": [
+        {
+          "name": "template-id",
+          "description": "The template ID to edit."
+        }
+      ]
+    },
     {
       "name": "verdocs-template-card",
       "description": {
@@ -993,7 +1006,7 @@
       "name": "verdocs-template-recipients",
       "description": {
         "kind": "markdown",
-        "value": "Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n\nThis picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\nuser interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\nThe parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\nhard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\nto always display the user's own contact record."
+        "value": "Displays an edit form that allows the user to adjust a template's recipients and workflow."
       },
       "attributes": [
         {
@@ -1006,7 +1019,7 @@
       "name": "verdocs-template-reminders",
       "description": {
         "kind": "markdown",
-        "value": "Displays a collection of settings boxes that allow a user to configure a template's behavior."
+        "value": "Displays an edit form that allows the user to adjust a template's reminders."
       },
       "attributes": [
         {
@@ -1016,15 +1029,74 @@
       ]
     },
     {
-      "name": "verdocs-template-sender-dialog",
+      "name": "verdocs-template-role-properties",
       "description": {
         "kind": "markdown",
         "value": "Display a dialog that allows a template sender to be selected."
       },
       "attributes": [
         {
-          "name": "value",
-          "description": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+          "name": "role-name",
+          "description": "The role name to edit."
+        },
+        {
+          "name": "sender",
+          "description": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.",
+          "values": [
+            {
+              "name": "creator"
+            },
+            {
+              "name": "everyone"
+            },
+            {
+              "name": "everyone_as_creator"
+            },
+            {
+              "name": "organization_member"
+            },
+            {
+              "name": "organization_member_as_creator"
+            }
+          ]
+        },
+        {
+          "name": "template-id",
+          "description": "The template ID to edit."
+        }
+      ]
+    },
+    {
+      "name": "verdocs-template-sender",
+      "description": {
+        "kind": "markdown",
+        "value": "Display a dialog that allows a template sender to be selected."
+      },
+      "attributes": [
+        {
+          "name": "sender",
+          "description": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.",
+          "values": [
+            {
+              "name": "creator"
+            },
+            {
+              "name": "everyone"
+            },
+            {
+              "name": "everyone_as_creator"
+            },
+            {
+              "name": "organization_member"
+            },
+            {
+              "name": "organization_member_as_creator"
+            }
+          ]
+        },
+        {
+          "name": "template-id",
+          "description": "The template ID to edit."
         }
       ]
     },
@@ -1040,7 +1112,7 @@
       "name": "verdocs-template-visibility",
       "description": {
         "kind": "markdown",
-        "value": "Displays a collection of settings boxes that allow a user to configure a template's behavior."
+        "value": "Displays an edit form that allows the user to adjust a template's visibility."
       },
       "attributes": [
         {
@@ -1064,6 +1136,10 @@
           "name": "disabled",
           "description": "Should the field be disabled?"
         },
+        {
+          "name": "help-text",
+          "description": "If supplied, a help icon will be displayed to provide the user more information."
+        },
         {
           "name": "label",
           "description": "The label for the field."