@verdocs/web-sdk 2.3.88 → 4.0.5

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

@@ -1,309 +1,310 @@
-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 { deleteStoreRole, getTemplateRoleStore, updateStoreRole } from '../../../utils/TemplateRoleStore';
-import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
-import { getTemplateStore } from '../../../utils/TemplateStore';
-import { SDKError } from '../../../utils/errors';
+import { h, Host } from "@stencil/core";
+import { deleteTemplateRole, updateTemplateRole, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { deleteStoreRole, getTemplateRoleStore, updateStoreRole } from "../../../utils/TemplateRoleStore";
+import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
+import { getTemplateStore } from "../../../utils/TemplateStore";
+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.templateStore = null;
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.roleName = '';
-    this.sender = TemplateSenderTypes.EVERYONE;
-    this.dirty = false;
-    this.saving = false;
-    this.name = '';
-    this.type = 'signer';
-    this.full_name = '';
-    this.email = '';
-    this.phone = '';
-    this.delegator = false;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[ROLE_PROPERTIES] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[ROLE_PROPERTIES] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.fieldStore = getTemplateFieldStore(this.templateId);
-      // FIXME: This was createTemplateRoleStore, which it didn't have to be. But that shouldn't break anything,
-      //  and using create() will reload the roles from the TEMPLATE, not the server. Creating/deleting roles
-      //  isn't updating the template, so if you add a role and then pop this dialog the store will be reloaded
-      //  without the newly-added role in place causing the dialog (and future role edits) to break. We should
-      //  a) when creating/updating/deleting roles, update the template/store not just the roles, and b) review
-      //  and confirm that all things that look at roles are mapped to the role store, not the template.
-      this.roleStore = getTemplateRoleStore(this.templateId);
-      const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
-      if (editingRole) {
-        this.name = editingRole.name;
-        this.type = editingRole.type;
-        this.full_name = editingRole.full_name;
-        this.email = editingRole.email;
-        this.phone = editingRole.phone;
-        this.delegator = editingRole.delegator;
-        console.log('[ROLE_PROPERTIES] Editing role', editingRole);
-      }
+    constructor() {
+        this.templateStore = null;
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.roleName = '';
+        this.sender = 'everyone';
+        this.dirty = false;
+        this.saving = false;
+        this.name = '';
+        this.type = 'signer';
+        this.full_name = '';
+        this.email = '';
+        this.phone = '';
+        this.delegator = false;
     }
-    catch (e) {
-      console.log('[ROLE_PROPERTIES Error with preview session', 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));
-    }
-  }
-  handleCancel(e) {
-    var _a;
-    e.stopPropagation();
-    const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
-    if (editingRole) {
-      this.name = editingRole.name;
-      this.type = editingRole.type;
-      this.full_name = editingRole.full_name;
-      this.email = editingRole.email;
-      this.phone = editingRole.phone;
-      this.delegator = editingRole.delegator;
-    }
-    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.full_name,
-      email: this.email,
-      phone: this.phone,
-      delegator: this.delegator,
-    })
-      .then(async (r) => {
-      var _a;
-      console.log('[ROLE_PROPERTIES] Update result', r);
-      this.saving = false;
-      this.dirty = false;
-      updateStoreRole(this.roleStore, this.roleName, r);
-      (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
-    })
-      .catch(e => {
-      console.log('[ROLE_PROPERTIES Update error', e);
-      this.saving = false;
-    });
-  }
-  async handleDelete(e) {
-    e.stopPropagation();
-    if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {
-      deleteRole(this.endpoint, this.templateId, this.roleName)
-        .then(() => {
-        var _a;
-        deleteStoreRole(this.roleStore, this.roleName);
-        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
-      })
-        .catch(e => {
-        console.log('[ROLE_PROPERTIES Deletion error', e);
-      });
-    }
-  }
-  render() {
-    const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-    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-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
-        ? 'This role has fields assigned and can no longer be renamed.'
-        : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role 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.full_name, 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.full_name = 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.delegator, onInput: (e) => {
-        this.delegator = 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"
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[ROLE_PROPERTIES] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[ROLE_PROPERTIES] Unable to start builder session, must be authenticated');
+                return;
             }
-          }
-        },
-        "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"
+            this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
+            this.fieldStore = getTemplateFieldStore(this.templateId);
+            // FIXME: This was createTemplateRoleStore, which it didn't have to be. But that shouldn't break anything,
+            //  and using create() will reload the roles from the TEMPLATE, not the server. Creating/deleting roles
+            //  isn't updating the template, so if you add a role and then pop this dialog the store will be reloaded
+            //  without the newly-added role in place causing the dialog (and future role edits) to break. We should
+            //  a) when creating/updating/deleting roles, update the template/store not just the roles, and b) review
+            //  and confirm that all things that look at roles are mapped to the role store, not the template.
+            this.roleStore = getTemplateRoleStore(this.templateId);
+            const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
+            if (editingRole) {
+                this.name = editingRole.name;
+                this.type = editingRole.type;
+                this.full_name = editingRole.full_name;
+                this.email = editingRole.email;
+                this.phone = editingRole.phone;
+                this.delegator = editingRole.delegator;
+                console.log('[ROLE_PROPERTIES] Editing role', editingRole);
             }
-          }
-        },
-        "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": {},
-      "full_name": {},
-      "email": {},
-      "phone": {},
-      "delegator": {}
-    };
-  }
-  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": {}
+        catch (e) {
+            console.log('[ROLE_PROPERTIES Error with preview session', 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));
         }
-      }, {
-        "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"
-            }
-          }
+    }
+    handleCancel(e) {
+        var _a;
+        e.stopPropagation();
+        const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
+        if (editingRole) {
+            this.name = editingRole.name;
+            this.type = editingRole.type;
+            this.full_name = editingRole.full_name;
+            this.email = editingRole.email;
+            this.phone = editingRole.phone;
+            this.delegator = editingRole.delegator;
         }
-      }];
-  }
+        this.dirty = false;
+        (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    async handleSave(e) {
+        e.stopPropagation();
+        this.saving = true;
+        updateTemplateRole(this.endpoint, this.templateId, this.roleName, {
+            name: this.name,
+            type: this.type,
+            full_name: this.full_name,
+            email: this.email,
+            phone: this.phone,
+            delegator: this.delegator,
+        })
+            .then(async (r) => {
+            var _a;
+            console.log('[ROLE_PROPERTIES] Update result', r);
+            this.saving = false;
+            this.dirty = false;
+            updateStoreRole(this.roleStore, this.roleName, r);
+            (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+        })
+            .catch(e => {
+            console.log('[ROLE_PROPERTIES Update error', e);
+            this.saving = false;
+        });
+    }
+    async handleDelete(e) {
+        e.stopPropagation();
+        if (window.confirm('Are you sure you wish to remove this role? All associated fields will be removed as well. This action cannot be undone.')) {
+            deleteTemplateRole(this.endpoint, this.templateId, this.roleName)
+                .then(() => {
+                var _a;
+                deleteStoreRole(this.roleStore, this.roleName);
+                (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+            })
+                .catch(e => {
+                console.log('[ROLE_PROPERTIES Deletion error', e);
+            });
+        }
+    }
+    render() {
+        const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
+        return (h(Host, { key: 'f26ffe2f3c4cf162dc113e38a57347cf6c426074' }, h("div", { key: 'd9c5104918e6cf08b28d70b6278d7493a40d36e5', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: 'b1001937ae574b088c17d2f866296cb10ae8f237', class: "dialog" }, h("form", { key: 'd46822f635025195120735636d68a4c0424370f0', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: '6d115e047e1fa310397d52f7873b68301f84ba1f', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+                ? 'This role has fields assigned and can no longer be renamed.'
+                : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
+                this.name = e.target.value;
+                this.dirty = true;
+            } }), h("div", { key: '8a775c7e42acd009e25859726f48e777203304a3', class: "row" }, h("div", { key: '284d78cd23689e9c8683cf1f8fe55252ae1070cc', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: 'f996e3e885cd40a3aeff9469d2051fd09dd43274', 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", { key: 'a320b1084f1a2333638c0e8b17d82efeb0a7bf1a', 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", { key: 'e554caea134e5955f0577397b902c8e6083520bf', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, 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.full_name = e.target.value;
+                this.dirty = true;
+            } }), h("verdocs-text-input", { key: '21aae473dc54ed8cb94adcc1e72fdedf3a3f91d9', 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", { key: 'd5ebf4575a092d3f70570d1a7c419aa90c75c64b', 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", { key: 'f7aca6f48663383ee649c7e3f11488c6a54f0420', class: "row" }, h("div", { key: 'f5304cffb00b6cf7edc92c9f2f9cb4013a8f16e8', class: "input-label" }, "May Delegate:"), h("div", { key: '78f6e51ccdfb7cccf4ad4d7c173eb29495ad93a9', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '319258417639cd160e0ad63de3feb413f8d18a9f', checked: this.delegator, onInput: (e) => {
+                this.delegator = e.target.checked;
+                this.dirty = true;
+            } })), h("verdocs-help-icon", { key: 'e8614cdde73aac4c52fef105562058a2e34773ee', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '66302c80e7ce3cfb80d71ca9eb798832bbee64cd', class: "buttons" }, h("button", { key: '4198669a9355ba0b5065944c4dd28648ba4fd7d2', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'f7eccd789c90c1e3e570b54d0a8a3b947a5c5cf1', style: { flex: '1' } }), h("verdocs-button", { key: '0ad00a425bd9fc3ef21405c73b0159fc5a8dd13d', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '8b11ea5d3f0797775909cb8590aec5a4518637ce', 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",
+                            "id": ""
+                        }
+                    }
+                },
+                "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": "TTemplateSenderType",
+                    "resolved": "\"creator\" | \"everyone\" | \"everyone_as_creator\" | \"organization_member\" | \"organization_member_as_creator\"",
+                    "references": {
+                        "TTemplateSenderType": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "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": "'everyone'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dirty": {},
+            "saving": {},
+            "name": {},
+            "type": {},
+            "full_name": {},
+            "email": {},
+            "phone": {},
+            "delegator": {}
+        };
+    }
+    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",
+                            "id": "src/utils/errors.ts::SDKError"
+                        }
+                    }
+                }
+            }];
+    }
 }

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.css

@@ -137,7 +137,7 @@ verdocs-template-roles > form .row .dropzone.visible {
 verdocs-template-roles > form .row .dropzone.active {
   flex: 0 0 120px;
   border-radius: 30px;
-  background: #654dcb7f;
+  background: rgba(101, 77, 203, 0.4980392157);
   border: 1px dashed #654dcb;
 }
 verdocs-template-roles > form label {
@@ -204,7 +204,7 @@ verdocs-template-roles.dragging .row.add-sequence .dropzone {
   flex: 0 0 120px;
   border-radius: 30px;
   align-items: center;
-  background: #654dcb7f;
+  background: rgba(101, 77, 203, 0.4980392157);
   justify-content: center;
   border: 1px dashed #654dcb;
 }