@verdocs/web-sdk 1.10.1 → 1.10.3

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

@@ -0,0 +1,303 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { deleteRole, updateRole } from '@verdocs/js-sdk/Templates/Roles';
+import { h, Host } from '@stencil/core';
+import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
+import TemplateStore from '../../../utils/templateStore';
+import { loadTemplate } from '../../../utils/Templates';
+import { SDKError } from '../../../utils/errors';
+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>`;
+/**
+ * Display a dialog that allows a template sender to be selected.
+ */
+export class VerdocsTemplateRoleProperties {
+  constructor() {
+    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 = TemplateStore.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 = TemplateStore.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;
+      TemplateStore.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);
+        TemplateStore.template.roles = [...TemplateStore.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 is() { return "verdocs-template-role-properties"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-role-properties.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-role-properties.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()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template ID to edit."
+        },
+        "attribute": "template-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "roleName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The role name to edit."
+        },
+        "attribute": "role-name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "sender": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TTemplateSender",
+          "resolved": "\"creator\" | \"everyone\" | \"everyone_as_creator\" | \"organization_member\" | \"organization_member_as_creator\"",
+          "references": {
+            "TTemplateSender": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+        },
+        "attribute": "sender",
+        "reflect": false,
+        "defaultValue": "TemplateSenderTypes.EVERYONE"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dirty": {},
+      "saving": {},
+      "name": {},
+      "type": {},
+      "fullName": {},
+      "email": {},
+      "phone": {},
+      "allowDelegation": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user cancels the dialog."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "delete",
+        "name": "delete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user deletes the role. The parent should update its UI to reflect the removal. When this event is emitted,\nthe role will have already been deleted server-side."
+        },
+        "complexType": {
+          "original": "{templateId: string; roleName: string}",
+          "resolved": "{ templateId: string; roleName: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Templates/Role Properties',
+  component: 'verdocs-template-role-properties',
+  args: {
+    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
+    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+  },
+  argTypes: {
+    onClose: { action: 'close' },
+  },
+};
+export const RoleProperties = ({ value, onClose }) => html `<verdocs-template-role-properties .value=${value} @close=${onClose} />`;

package/dist/collection/components/{dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.css → templates/verdocs-template-sender/verdocs-template-sender.css}

@@ -1,11 +1,11 @@
-verdocs-template-sender-dialog {
+verdocs-template-sender {
   font-family: "Barlow", sans-serif;
   box-sizing: border-box;
 }
-verdocs-template-sender-dialog div {
+verdocs-template-sender div {
   box-sizing: border-box;
 }
-verdocs-template-sender-dialog .background-overlay {
+verdocs-template-sender .background-overlay {
   position: absolute;
   z-index: 10000;
   top: 0;
@@ -17,7 +17,7 @@ verdocs-template-sender-dialog .background-overlay {
   justify-content: center;
   background: #0000007f;
 }
-verdocs-template-sender-dialog .dialog {
+verdocs-template-sender .dialog {
   width: 340px;
   display: flex;
   flex-direction: column;
@@ -27,33 +27,33 @@ verdocs-template-sender-dialog .dialog {
   padding: 16px;
   box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);
 }
-verdocs-template-sender-dialog .heading {
+verdocs-template-sender .heading {
   display: flex;
   font-size: 20px;
   font-weight: 500;
   flex-direction: row;
 }
-verdocs-template-sender-dialog .buttons {
+verdocs-template-sender .buttons {
   display: flex;
   margin-top: 10px;
   align-items: center;
   flex-direction: row;
   justify-content: flex-end;
 }
-verdocs-template-sender-dialog .buttons verdocs-button {
+verdocs-template-sender .buttons verdocs-button {
   margin-left: 16px;
 }
-verdocs-template-sender-dialog .options {
+verdocs-template-sender .options {
   row-gap: 10px;
 }
-verdocs-template-sender-dialog .options .option {
+verdocs-template-sender .options .option {
   display: flex;
   flex-direction: row;
 }
-verdocs-template-sender-dialog .options .option .description {
+verdocs-template-sender .options .option .description {
   margin-left: 10px;
 }
-verdocs-template-sender-dialog .options .option .description .name {
+verdocs-template-sender .options .option .description .name {
   display: inline-block;
   vertical-align: top;
   margin-top: 4px;

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

@@ -0,0 +1,193 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { updateTemplate } from '@verdocs/js-sdk/Templates/Templates';
+import { h, Host } from '@stencil/core';
+import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
+import TemplateStore from '../../../utils/templateStore';
+import { loadTemplate } from '../../../utils/Templates';
+import { SDKError } from '../../../utils/errors';
+/**
+ * Display a dialog that allows a template sender to be selected.
+ */
+export class VerdocsTemplateSender {
+  constructor() {
+    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 = TemplateStore.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);
+      TemplateStore.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 is() { return "verdocs-template-sender"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-sender.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-sender.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()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template ID to edit."
+        },
+        "attribute": "template-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "sender": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TTemplateSender",
+          "resolved": "\"creator\" | \"everyone\" | \"everyone_as_creator\" | \"organization_member\" | \"organization_member_as_creator\"",
+          "references": {
+            "TTemplateSender": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
+        },
+        "attribute": "sender",
+        "reflect": false,
+        "defaultValue": "TemplateSenderTypes.EVERYONE"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "saving": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user cancels the dialog."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/templates/verdocs-template-sender/verdocs-template-sender.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Dialogs/Sender',
+  component: 'verdocs-template-sender',
+  args: {
+    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
+    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+  },
+  argTypes: {
+    onClose: { action: 'close' },
+  },
+};
+export const Sender = ({ value, onClose }) => html `<verdocs-template-sender-dialog .value=${value} @close=${onClose} />`;

package/dist/collection/components/templates/verdocs-template-visibillity/verdocs-template-visibility.css

@@ -16,16 +16,21 @@ verdocs-template-visibility form {
 verdocs-template-visibility form .description {
   font-size: 14px;
   text-align: justify;
-  margin-bottom: 20px;
   color: #5c6575;
 }
+verdocs-template-visibility form h5 {
+  font-size: 16px;
+  font-weight: bold;
+  color: #4c56cb;
+  margin: 0;
+}
 verdocs-template-visibility form label {
   flex: 1;
   display: flex;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 500;
   margin: 0 0 4px 0;
-  color: #5c6575;
+  color: #33364b;
 }
 verdocs-template-visibility form input {
   border: none;
@@ -39,7 +44,7 @@ verdocs-template-visibility form input:focus {
 }
 verdocs-template-visibility form .input-row {
   display: flex;
-  margin: 0 0 10px 0;
+  margin: 20px 0 0 0;
   align-items: center;
   flex-direction: row;
 }
@@ -52,14 +57,17 @@ verdocs-template-visibility form .input-row verdocs-text-input input {
   text-align: center;
 }
 verdocs-template-visibility form .input-row verdocs-checkbox {
+  flex: 0;
   display: flex;
-  flex: 0 0 40px;
   justify-content: center;
 }
+verdocs-template-visibility form .input-row verdocs-checkbox label > input[type=checkbox] + *::before {
+  margin-right: 0;
+}
 verdocs-template-visibility .buttons {
   display: flex;
   column-gap: 8px;
-  margin-top: 16px;
+  margin-top: 25px;
   flex-direction: row;
 }
 verdocs-template-visibility ::placeholder {

package/dist/collection/components/templates/verdocs-template-visibillity/verdocs-template-visibility.js

@@ -5,7 +5,7 @@ import TemplateStore from '../../../utils/templateStore';
 import { loadTemplate } from '../../../utils/Templates';
 import { SDKError } from '../../../utils/errors';
 /**
- * Displays a collection of settings boxes that allow a user to configure a template's behavior.
+ * Displays an edit form that allows the user to adjust a template's visibility.
  */
 export class VerdocsTemplateVisibility {
   constructor() {
@@ -57,7 +57,7 @@ export class VerdocsTemplateVisibility {
     if (!this.endpoint.session || !TemplateStore.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) => {