@verdocs/web-sdk 1.12.42 → 1.12.43

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -42,6 +42,7 @@ export class VerdocsButtonPanel {
     (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
     this.showing = true;
     this.hiderEl = document.createElement('div');
+    this.hiderEl.id = 'verdocs-button-panel-hider';
     this.hiderEl.style.zIndex = '100';
     this.hiderEl.style.position = 'absolute';
     this.hiderEl.style.top = '0px';
@@ -55,9 +56,11 @@ export class VerdocsButtonPanel {
     document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    var _a, _b;
-    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    var _a;
+    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
+      el.removeAttribute('data-show');
+    });
+    (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
     this.showing = false;
   }
   async toggle() {

package/dist/collection/components/embeds/verdocs-preview/verdocs-preview.stories.js

@@ -5,9 +5,6 @@ export default {
   args: {
     templateId: '',
   },
-  argTypes: {
-    templateId: { control: { type: 'string' } },
-  },
   parameters: {
     layout: 'fullscreen',
   },

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

@@ -1,4 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import uuidv4 from 'uuid-browser';
 import { deleteField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import TemplateStore from '../../../utils/templateStore';
@@ -75,7 +76,6 @@ export class VerdocsTemplateFieldProperties {
     var _a, _b;
     e.stopPropagation();
     const field = TemplateStore.fields.find(field => field.name === this.fieldName);
-    console.log('hc', e, field);
     if (field) {
       this.name = field.name;
       this.roleName = field.role_name;
@@ -105,6 +105,53 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
+    updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
+      .then(() => {
+      var _a, _b;
+      this.dirty = false;
+      const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+      if (field) {
+        field.name = this.name;
+        field.role_name = this.roleName;
+        field.required = this.required;
+        field.label = this.placeholder;
+        field.setting.result = this.defaultValue;
+        if (field.setting.options) {
+          field.setting.options = this.options;
+        }
+      }
+      (_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);
+    });
+  }
+  handleAddOption(e) {
+    e.stopPropagation();
+    const newProperties = {
+      name: this.name,
+      required: this.required,
+      role_name: this.roleName,
+      // TODO: Default value in setting?
+    };
+    this.options.push(this.type === 'radio_button_group'
+      ? {
+        id: uuidv4(),
+        value: `Option ${this.options.length + 1}`,
+        selected: false,
+        x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
+        y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
+      }
+      : {
+        id: uuidv4(),
+        value: `Option ${this.options.length + 1}`,
+        checked: false,
+        x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
+        y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
+      });
+    newProperties.setting = this.setting;
+    newProperties.setting.options = this.options;
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
@@ -119,6 +166,7 @@ export class VerdocsTemplateFieldProperties {
       }
       (_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();
+      TemplateStore.updateCount++;
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -153,7 +201,7 @@ export class VerdocsTemplateFieldProperties {
     if (this.helpText && this.showingHelp) {
       return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
     }
-    return (h(Host, null, h("h6", null, capitalize(this.fieldType.replace('_', ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), 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",
+    return (h(Host, null, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), 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;
@@ -161,9 +209,6 @@ export class VerdocsTemplateFieldProperties {
       } })), 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;
-      } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-group", label: "Group Name", value: this.group, autocomplete: "off", placeholder: "Group Name...", onInput: (e) => {
-        this.group = e.target.value;
-        this.dirty = true;
       } })), ['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) => {
@@ -172,7 +217,7 @@ export class VerdocsTemplateFieldProperties {
       } })), 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;
-      } })), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
+      } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
         marginTop: '15px',
         marginBottom: '15px',
         textAlign: 'center',

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

@@ -103,9 +103,16 @@ export class VerdocsTemplateFields {
       this.selectedRoleName = field.role_name;
       console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, field.role_name));
+      el.field = TemplateStore.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: TemplateStore.template, event: 'updated-field' });
+      console.log('Re-rendering field', field.name, pageInfo.pageNumber);
+      this.reRenderField(field, pageInfo.pageNumber);
+      const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+      if (!newEl) {
+        return;
+      }
     });
     el.addEventListener('deleted', () => {
       var _a;
@@ -126,41 +133,19 @@ export class VerdocsTemplateFields {
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
     const fields = TemplateStore.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);
-    fields.forEach(field => {
-      const roleIndex = getRoleIndex(TemplateStore.roleNames, field.role_name);
-      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
-      if (!el) {
-        return;
-      }
-      if (Array.isArray(el)) {
-        el.forEach(e => {
-          this.attachFieldAttributes(pageInfo, field, roleIndex, e);
-          interact(e).draggable({
-            listeners: {
-              start(event) {
-                console.log('[FIELDS] Drag started', event.type, event.target);
-              },
-              move(event) {
-                const oldX = +(event.target.getAttribute('posX') || 0);
-                const oldY = +(event.target.getAttribute('posY') || 0);
-                const xScale = +(event.target.getAttribute('xScale') || 1);
-                const yScale = +(event.target.getAttribute('yScale') || 1);
-                const newX = event.dx / xScale + oldX;
-                const newY = event.dy / yScale + oldY;
-                event.target.setAttribute('posX', newX);
-                event.target.setAttribute('posy', newY);
-                updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-              },
-              end: this.handleMoveField.bind(this),
-            },
-          });
-        });
-      }
-      else {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-        interact(el).draggable({
+    fields.forEach(field => this.reRenderField(field, pageInfo.pageNumber));
+  }
+  reRenderField(field, pageNumber) {
+    const pageInfo = this.cachedPageInfo[pageNumber];
+    const roleIndex = getRoleIndex(TemplateStore.roleNames, field.role_name);
+    const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    if (!el) {
+      return;
+    }
+    if (Array.isArray(el)) {
+      el.forEach(e => {
+        this.attachFieldAttributes(pageInfo, field, roleIndex, e);
+        interact(e).draggable({
           listeners: {
             start(event) {
               console.log('[FIELDS] Drag started', event.type, event.target);
@@ -179,8 +164,30 @@ export class VerdocsTemplateFields {
             end: this.handleMoveField.bind(this),
           },
         });
-      }
-    });
+      });
+    }
+    else {
+      this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+      interact(el).draggable({
+        listeners: {
+          start(event) {
+            console.log('[FIELDS] Drag started', event.type, event.target);
+          },
+          move(event) {
+            const oldX = +(event.target.getAttribute('posX') || 0);
+            const oldY = +(event.target.getAttribute('posY') || 0);
+            const xScale = +(event.target.getAttribute('xScale') || 1);
+            const yScale = +(event.target.getAttribute('yScale') || 1);
+            const newX = event.dx / xScale + oldX;
+            const newY = event.dy / yScale + oldY;
+            event.target.setAttribute('posX', newX);
+            event.target.setAttribute('posy', newY);
+            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+          },
+          end: this.handleMoveField.bind(this),
+        },
+      });
+    }
   }
   async handleMoveField(e) {
     const pageNumber = e.target.getAttribute('pageNumber');

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

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Role Properties',
   component: 'verdocs-template-role-properties',
   args: {
-    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
-    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },

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

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Roles',
   component: 'verdocs-template-roles',
   args: {
-    // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onSave: { action: 'save' },

package/dist/collection/utils/utils.js

@@ -13,9 +13,9 @@ export const defaultWidth = (type) => {
     case 'timestamp':
       return 64;
     case 'date':
-      return 74;
+      return 84;
     case 'dropdown':
-      return 64;
+      return 85;
     case 'attachment':
     case 'payment':
       return 24;
@@ -42,7 +42,7 @@ export const defaultHeight = (type) => {
     case 'date':
       return 15;
     case 'dropdown':
-      return 15;
+      return 20;
     case 'attachment':
     case 'payment':
       return 24;

package/dist/components/_commonjsHelpers.js

@@ -0,0 +1,21 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { createCommonjsModule as a, commonjsRequire as b, commonjsGlobal as c, getDefaultExportFromCjs as g };

package/dist/components/interact.min.js

@@ -1,4 +1,4 @@
-import { i as getDefaultExportFromCjs, j as createCommonjsModule } from './utils.js';
+import { g as getDefaultExportFromCjs, a as createCommonjsModule } from './_commonjsHelpers.js';
 
 var interact_min = createCommonjsModule(function (module, exports) {
 /* interact.js 1.10.17 | https://interactjs.io/license */

package/dist/components/utils.js

@@ -1,3 +1,4 @@
+import { a as createCommonjsModule, c as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers.js';
 import { e as getEnvelopeFile, f as getFieldAttachment } from './Envelopes.js';
 import './Types.js';
 import { d as downloadBlob } from './Files.js';
@@ -7,26 +8,6 @@ function rescale(r, n) {
     return r * n;
 }
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
 var jszip_min = createCommonjsModule(function (module, exports) {
 /*!
 
@@ -53,9 +34,9 @@ const defaultWidth = (type) => {
     case 'timestamp':
       return 64;
     case 'date':
-      return 74;
+      return 84;
     case 'dropdown':
-      return 64;
+      return 85;
     case 'attachment':
     case 'payment':
       return 24;
@@ -82,7 +63,7 @@ const defaultHeight = (type) => {
     case 'date':
       return 15;
     case 'dropdown':
-      return 15;
+      return 20;
     case 'attachment':
     case 'payment':
       return 24;
@@ -368,4 +349,4 @@ const throttle = (f, delay) => {
   };
 };
 
-export { getRoleIndex as a, getFieldId as b, updateCssTransform as c, defaultWidth as d, defaultHeight as e, saveEnvelopesAsZip as f, getFieldSettings as g, saveCertificate as h, getDefaultExportFromCjs as i, createCommonjsModule as j, renderDocumentField as r, saveAttachment as s, throttle as t, updateDocumentFieldValue as u };
+export { getRoleIndex as a, getFieldId as b, updateCssTransform as c, defaultWidth as d, defaultHeight as e, saveEnvelopesAsZip as f, getFieldSettings as g, saveCertificate as h, renderDocumentField as r, saveAttachment as s, throttle as t, updateDocumentFieldValue as u };

package/dist/components/verdocs-button-panel2.js

@@ -36,6 +36,7 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
     this.showing = true;
     this.hiderEl = document.createElement('div');
+    this.hiderEl.id = 'verdocs-button-panel-hider';
     this.hiderEl.style.zIndex = '100';
     this.hiderEl.style.position = 'absolute';
     this.hiderEl.style.top = '0px';
@@ -49,9 +50,11 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    var _a, _b;
-    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    var _a;
+    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
+      el.removeAttribute('data-show');
+    });
+    (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
     this.showing = false;
   }
   async toggle() {