@verdocs/web-sdk 1.10.3 → 1.10.4

package/dist/components/verdocs-help-icon2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createPopper } from './popper.js';
 
-const verdocsHelpIconCss = "verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3}verdocs-help-icon:hover{opacity:1;cursor:none}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .icon svg{fill:#5c6575}verdocs-help-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;position:relative;padding:5px 10px;font-size:13px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const verdocsHelpIconCss = "verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .icon svg{fill:#5c6575}verdocs-help-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;position:relative;padding:5px 10px;font-size:13px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
 
 const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const VerdocsHelpIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/verdocs-send.js

@@ -113,10 +113,10 @@ const VerdocsSend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return isValidEmail(recipient.email) || isValidPhone(recipient.phone);
     }).length >= ((_c = this.template) === null || _c === void 0 ? void 0 : _c.roles.length);
     console.log('assigned', allRecipientsAssigned);
-    return (h(Host, { class: {} }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Document")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (h(Host, { class: {} }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c;
       return (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.recipientsAssigned[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onCancel: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.recipientsAssigned[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => console.log('Search', e.detail) }))));
-    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onClick: e => this.handleSend(e) }))));
+    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onClick: e => this.handleSend(e) }))));
   }
   static get style() { return verdocsSendCss; }
 }, [0, "verdocs-send", {

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

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

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

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

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

@@ -0,0 +1,212 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { u as updateField, d as deleteField } from './Fields.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { s as state } from './templateStore.js';
+import { l as loadTemplate } from './Templates.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$6 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$4 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
+
+const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}";
+
+const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
+const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.close = createEvent(this, "close", 7);
+    this.delete = createEvent(this, "delete", 7);
+    this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    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 = state.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 = state.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;
+      state.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);
+        state.fields = [...state.fields.filter(field => field.name !== this.fieldName)];
+        state.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 || !state.template) {
+      return h(Host, { class: "empty" });
+    }
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "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: state.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) })))));
+  }
+  get el() { return this; }
+  static get style() { return verdocsTemplateFieldPropertiesCss; }
+}, [0, "verdocs-template-field-properties", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"],
+    "fieldName": [1, "field-name"],
+    "dirty": [32],
+    "loading": [32],
+    "type": [32],
+    "name": [32],
+    "roleName": [32],
+    "required": [32],
+    "placeholder": [32],
+    "defaultValue": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-field-properties", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-select-input", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-field-properties":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateFieldProperties);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTemplateFieldProperties as V, defineCustomElement as d };

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
+import { u as updateField, c as createField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as getRoleIndex, r as renderDocumentField, c as updateCssTransform, d as defaultWidth, e as defaultHeight } from './utils.js';
 import { s as state } from './templateStore.js';
@@ -11,23 +12,6 @@ import { d as defineCustomElement$3 } from './verdocs-floating-menu2.js';
 import { d as defineCustomElement$2 } from './verdocs-loader2.js';
 import { d as defineCustomElement$1 } from './verdocs-toolbar-icon2.js';
 
-/**
- * Add a field to a template.
- */
-var createField = function (endpoint, templateId, params) {
-    return endpoint.api //
-        .post("/templates/".concat(templateId, "/fields"), params)
-        .then(function (r) { return r.data; });
-};
-/**
- * Update a template field.
- */
-var editField = function (endpoint, templateId, fieldName, params) {
-    return endpoint.api //
-        .put("/templates/".concat(templateId, "/fields/").concat(fieldName), params)
-        .then(function (r) { return r.data; });
-};
-
 const verdocsTemplateFieldsCss = "verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;position:relative}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields.placing-attachment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-timestamp{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}";
 
 const iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
@@ -100,6 +84,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
+    el.addEventListener('settingsChanged', () => {
+      el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
+    });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -111,7 +98,6 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     console.log('[FIELDS] Page rendered', pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    console.log('tsf', pageInfo.pageNumber, state.fields);
     const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     console.log('[FIELDS] Fields on page', fields);
@@ -165,8 +151,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (field) {
       field.setting.x = x;
       field.setting.y = y;
-      const edited = await editField(this.endpoint, this.templateId, name, field);
-      console.log('edited field', edited);
+      await updateField(this.endpoint, this.templateId, name, field);
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
@@ -188,8 +173,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
-      const width = defaultWidth({ type: this.placing });
-      const height = defaultHeight({ type: this.placing });
+      const width = defaultWidth(this.placing);
+      const height = defaultHeight(this.placing);
       const { naturalWidth = 612, naturalHeight = 792 } = this.cachedPageInfo[pageNumber];
       const { x, y } = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const field = {
@@ -216,6 +201,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   render() {
+    console.log('rendering', state.updateCount);
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -225,7 +211,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
     const pages = [...state.template.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
-    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {} }, h("div", { class: "pages" }, pages.map(page => {
+    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": state.updateCount, onSubmit: () => {
+        console.log('onSubmit');
+      } }, h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);
       return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },

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

@@ -64,10 +64,10 @@ const VerdocsTemplateVisibility$1 = /*@__PURE__*/ proxyCustomElement(class exten
     if (!this.endpoint.session || !state.template) {
       return h(Host, { class: "empty" });
     }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("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;
+    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) })))));