@verdocs/web-sdk 1.10.1 → 1.10.4

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.js

@@ -2,6 +2,7 @@ import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Display a timestamp field.
@@ -18,6 +19,19 @@ export class VerdocsFieldTimestamp {
   async focusField() {
     this.el.focus();
   }
+  async showSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.showPanel) {
+      settingsPanel.showPanel();
+    }
+  }
+  async hideSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.hidePanel) {
+      settingsPanel.hidePanel();
+    }
+    TemplateStore.updateCount++;
+  }
   render() {
     var _a, _b, _c;
     const settings = getFieldSettings(this.field);
@@ -32,10 +46,11 @@ export class VerdocsFieldTimestamp {
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon }, h("h6", null, "Field Settings"), h("form", null, h("verdocs-select-input", { label: "Recipient", options: [
-        { label: 'Buyer', value: 'Buyer' },
-        { label: 'Seller', value: 'Seller' },
-      ] }), h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', e) }))))));
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+        return this.hideSettingsPanel();
+      } })))));
   }
   static get is() { return "verdocs-field-timestamp"; }
   static get originalStyleUrls() {
@@ -167,6 +182,24 @@ export class VerdocsFieldTimestamp {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "settingsChanged",
+        "name": "settingsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the field's settings are changed."
+        },
+        "complexType": {
+          "original": "{fieldName: string}",
+          "resolved": "{ fieldName: string; }",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "focusField": {
@@ -184,6 +217,38 @@ export class VerdocsFieldTimestamp {
           "text": "",
           "tags": []
         }
+      },
+      "showSettingsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hideSettingsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -0,0 +1,23 @@
+verdocs-template-attachments {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+}
+verdocs-template-attachments h5 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 10px 0;
+  color: #4c56cb;
+}
+verdocs-template-attachments .attachment {
+  display: flex;
+  padding: 5px 10px;
+  align-items: center;
+  flex-direction: row;
+  color: #33364b;
+  border: 1px solid #cccccc;
+}
+verdocs-template-attachments svg {
+  width: 24px;
+  height: 24px;
+  fill: #5c6575;
+  margin: 2px 10px 0 0;
+}

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

@@ -0,0 +1,137 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import TemplateStore from '../../../utils/templateStore';
+import { loadTemplate } from '../../../utils/Templates';
+import { SDKError } from '../../../utils/errors';
+const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
+/**
+ * Displays an edit form that allows the user to view, add, or remove a template's attachments.
+ * Note that an active session and valid template ID must be supplied.
+ */
+export class VerdocsTemplateAttachments {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.loading = true;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      await loadTemplate(this.endpoint, this.templateId);
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[TEMPLATE NAME] Error loading template', e);
+      this.loading = false;
+      (_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));
+    }
+  }
+  render() {
+    if (this.loading) {
+      return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
+    }
+    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+    if (!this.endpoint.session || !TemplateStore.template) {
+      return h(Host, { class: "empty" });
+    }
+    return (h(Host, null, h("h5", null, "Attachments"), TemplateStore.template.template_documents.map(document => (h("div", { class: "attachment" }, h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
+  }
+  static get is() { return "verdocs-template-attachments"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-attachments.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-attachments.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": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "loading": {}
+    };
+  }
+  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-attachments/verdocs-template-attachments.stories.js

@@ -0,0 +1,19 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Templates/Attachments',
+  component: 'verdocs-template-attachments',
+  args: {
+    // templateId: '',
+    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+  },
+  argTypes: {
+    onClose: { action: 'close' },
+  },
+};
+export const Attachments = ({ onClose, templateId }) => templateId
+  ? html `
+        <div style="width: 360px; background: #ffffff; padding: 20px; box-sizing: border-box">
+          <verdocs-template-attachments .templateId=${templateId} @close=${onClose} />
+        </div>
+      `
+  : html `<img src="https://verdocs-public-assets.s3.amazonaws.com/storybook-placeholders/template-name.png" alt="Placeholder" />`;

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Templates/Template Create',
+  title: 'Templates/Create',
   component: 'verdocs-template-create',
   args: {
     templateRole: {
@@ -26,7 +26,7 @@ export default {
     contactSelected: { action: 'contactSelected' },
   },
 };
-export const TemplateCreate = ({ templateRole, contactSuggestions, searchContacts, cancel, contactSelected }) => html `<verdocs-template-create
+export const Create = ({ templateRole, contactSuggestions, searchContacts, cancel, contactSelected }) => html `<verdocs-template-create
     .templateRole=${templateRole}
     .contactSuggestions=${contactSuggestions}
     @searchContacts=${searchContacts}

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.css

@@ -0,0 +1,70 @@
+verdocs-template-field-properties {
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+}
+verdocs-template-field-properties .buttons {
+  display: flex;
+  margin-top: 30px;
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+verdocs-template-field-properties .buttons verdocs-button {
+  margin-left: 16px;
+}
+verdocs-template-field-properties form .row {
+  display: flex;
+  column-gap: 15px;
+  margin: 0 0 10px 0;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-template-field-properties form .row .input-label {
+  display: block;
+  color: #555570;
+  font-weight: 700;
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  flex: 0 0 100px;
+}
+verdocs-template-field-properties verdocs-select-input {
+  flex: 1;
+  margin: 0;
+}
+verdocs-template-field-properties verdocs-text-input label {
+  margin: 0;
+  display: flex;
+  column-gap: 15px;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-template-field-properties verdocs-text-input .input-label {
+  flex: 0 0 100px;
+}
+verdocs-template-field-properties verdocs-text-input input {
+  flex: 1;
+  display: flex;
+}
+verdocs-template-field-properties verdocs-text-input verdocs-text-input {
+  margin: 0;
+}
+verdocs-template-field-properties .checkbox-wrapper {
+  flex: 1;
+  display: flex;
+}
+verdocs-template-field-properties .delete-button {
+  height: 34px;
+  display: flex;
+  cursor: pointer;
+  background: none;
+  border-radius: 4px;
+  align-items: center;
+  border: 1px solid #999;
+  justify-content: center;
+}
+verdocs-template-field-properties .delete-button:active {
+  background: #f3f3f3;
+}
+verdocs-template-field-properties .delete-button svg {
+  width: 24px;
+  height: 24px;
+}

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

@@ -0,0 +1,293 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { deleteField, updateField } from '@verdocs/js-sdk/Templates/Fields';
+import { h, Host } from '@stencil/core';
+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>`;
+/**
+ * Displays an edit form that allows the user to adjust a field's settings.
+ */
+export class VerdocsTemplateFieldProperties {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.fieldName = '';
+    this.dirty = false;
+    this.loading = true;
+    this.type = 'signature';
+    this.name = '';
+    this.roleName = '';
+    this.required = false;
+    this.placeholder = '';
+    this.defaultValue = '';
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.error(`[FIELD PROPERTIES] Missing required template ID`);
+        return;
+      }
+      if (!this.fieldName) {
+        console.error(`[FIELD PROPERTIES] Missing required field name`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.error('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      await loadTemplate(this.endpoint, this.templateId);
+      const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+      if (!field) {
+        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
+      }
+      this.type = field.type;
+      this.name = field.name;
+      this.roleName = field.role_name;
+      this.required = field.required;
+      this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
+      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+      this.dirty = false;
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[FIELD PROPERTIES] Error loading template', e);
+      this.loading = false;
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+    }
+  }
+  handleCancel(e) {
+    var _a, _b;
+    e.stopPropagation();
+    const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+    if (field) {
+      this.name = field.name;
+      this.roleName = field.role_name;
+      this.required = field.required;
+      this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
+      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+    }
+    this.dirty = false;
+    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+  }
+  handleSave(e) {
+    e.stopPropagation();
+    updateField(this.endpoint, this.templateId, this.fieldName, {
+      name: this.name,
+      required: this.required,
+      role_name: this.roleName,
+      // TODO: Default value in setting?
+    })
+      .then(() => {
+      var _a, _b;
+      this.dirty = false;
+      TemplateStore.fields.forEach(field => {
+        field.name = this.name;
+        field.role_name = this.roleName;
+        field.required = this.required;
+        field.label = this.placeholder;
+        field.setting.result = this.defaultValue;
+      });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    })
+      .catch(() => {
+      console.log('Field update failed', e);
+    });
+  }
+  async handleDelete(e) {
+    e.stopPropagation();
+    if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
+      deleteField(this.endpoint, this.templateId, this.fieldName)
+        .then(r => {
+        var _a;
+        console.log('Field deleted', r);
+        TemplateStore.fields = [...TemplateStore.fields.filter(field => field.name !== this.fieldName)];
+        TemplateStore.template.roles.forEach(role => {
+          role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
+        });
+        (_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() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+    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: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off", helpText: "The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key.", placeholder: "Field Name...", onInput: (e) => {
+        this.name = e.target.value;
+        this.dirty = true;
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: TemplateStore.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+        this.roleName = e.target.value;
+        this.dirty = true;
+      } }), h("verdocs-help-icon", { text: "The participant who will complete this field." })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off", helpText: "Placeholder to display if the field is empty.", placeholder: "Placeholder...", onInput: (e) => {
+        this.placeholder = e.target.value;
+        this.dirty = true;
+      } })), ['signature', 'initial'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
+        this.required = e.target.checked;
+        this.dirty = true;
+      } }))), 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-field-properties"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-field-properties.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-field-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": "''"
+      },
+      "fieldName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The field to configure."
+        },
+        "attribute": "field-name",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dirty": {},
+      "loading": {},
+      "type": {},
+      "name": {},
+      "roleName": {},
+      "required": {},
+      "placeholder": {},
+      "defaultValue": {}
+    };
+  }
+  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": "settingsChanged",
+        "name": "settingsChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the field's settings are changed."
+        },
+        "complexType": {
+          "original": "{fieldName: string}",
+          "resolved": "{ fieldName: 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"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}