@verdocs/web-sdk 1.10.1 → 1.10.4

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 an edit form that allows the user to adjust a role's setitngs.
+ */
+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,10 +57,10 @@ 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) => {
-        this.personal = e.target.checked;
+    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-shared" }, "Shared"), h("verdocs-checkbox", { id: "verdocs-is-shared", name: "is-shared", 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) => {
+      } })), h("div", { class: "description" }, "Shared templates are visible to 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) => {
         this.public = e.target.checked;
         this.dirty = true;
       } })), h("div", { class: "description" }, "Public templates may appear in results when any other user searches for templates. Note that a template may be both Personal and Public, which may be useful if you want your template to be found via search but not otherwise displayed to other members of your Organization (if any)."), h("div", { class: "buttons" }, 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) })))));