@verdocs/web-sdk 2.3.62 → 2.3.64

package/dist/components/verdocs-sign.js

@@ -123,8 +123,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.nextButtonLabel = 'Next';
       }
       this.envelope = await getEnvelope(this.endpoint, this.envelopeId);
-      const fs = createTemplateFieldStoreFromEnvelope(this.envelope);
-      console.log('made fs', fs);
+      createTemplateFieldStoreFromEnvelope(this.envelope);
       this.sortedRecipients = [...this.envelope.recipients];
       this.sortedRecipients.sort((a, b) => {
         return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
@@ -144,9 +143,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
       this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
       this.checkRecipientFields();
-      // TODO: Fix service to allow this?
-      // const sigs = await getSignatures();
-      // console.log('sigs', sigs);
       (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     catch (e) {
@@ -291,8 +287,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         });
       case 'date':
         const { date, formattedDate } = e.detail;
-        console.log('dt', { date, formattedDate });
-        return this.saveFieldChange(field.name, { prepared: false, value: formattedDate });
+        if (formattedDate) {
+          console.log('dt', { date, formattedDate });
+          return this.saveFieldChange(field.name, { prepared: false, value: formattedDate });
+        }
+        break;
       case 'timestamp':
         console.log('Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
         break;
@@ -324,7 +323,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'textarea':
       case 'date':
       case 'attachment':
-        console.log('Checking date-type field validity', { required, result, output: !required || result !== '' });
         return !required || result !== '';
       case 'dropdown':
         return !required || value !== '';
@@ -406,7 +404,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     }
     else {
-      console.log('[SIGN] Remaining invalid fields', invalidFields);
+      console.log('[SIGN] c invalid fields', invalidFields);
       this.nextButtonLabel = 'Next';
       this.nextSubmits = false;
     }

package/dist/components/verdocs-template-document-page2.js

@@ -1,8 +1,30 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getTemplateDocumentPageDisplayUri } from './TemplateDocuments.js';
-import { t as throttle } from './utils.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
+import { t as throttle, e as getControlStyles, b as getFieldId, f as getFieldOptionId } from './utils.js';
+import { d as defineCustomElement$l } from './verdocs-button2.js';
+import { d as defineCustomElement$k } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$j } from './verdocs-component-error2.js';
+import { d as defineCustomElement$i } from './verdocs-field-attachment2.js';
+import { d as defineCustomElement$h } from './verdocs-field-checkbox2.js';
+import { d as defineCustomElement$g } from './verdocs-field-date2.js';
+import { d as defineCustomElement$f } from './verdocs-field-dropdown2.js';
+import { d as defineCustomElement$e } from './verdocs-field-initial2.js';
+import { d as defineCustomElement$d } from './verdocs-field-radio-button2.js';
+import { d as defineCustomElement$c } from './verdocs-field-signature2.js';
+import { d as defineCustomElement$b } from './verdocs-field-textarea2.js';
+import { d as defineCustomElement$a } from './verdocs-field-textbox2.js';
+import { d as defineCustomElement$9 } from './verdocs-field-timestamp2.js';
+import { d as defineCustomElement$8 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$7 } from './verdocs-initial-dialog2.js';
+import { d as defineCustomElement$6 } from './verdocs-portal2.js';
+import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$4 } from './verdocs-signature-dialog2.js';
+import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$1 } from './verdocs-upload-dialog2.js';
 
 const verdocsTemplateDocumentPageCss = "verdocs-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}";
 
@@ -11,7 +33,10 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
     super();
     this.__registerHost();
     this.pageRendered = createEvent(this, "pageRendered", 7);
+    this.fieldStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
+    this.editable = false;
+    this.done = false;
     this.templateId = '';
     this.documentId = '';
     this.pageNumber = 1;
@@ -26,9 +51,12 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
     this.aspectRatio = this.virtualWidth / this.virtualHeight;
     this.skipFirstNotification = true;
     this.pageDisplayUri = '';
+    this.xScale = 1;
+    this.yScale = 1;
   }
   async componentWillLoad() {
     this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
+    this.fieldStore = getTemplateFieldStore(this.templateId);
   }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(throttle(entries => {
@@ -57,6 +85,14 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
       this.skipFirstNotification = false;
       return;
     }
+    const xScale = this.renderedWidth / this.virtualWidth;
+    if (this.xScale !== xScale) {
+      this.xScale = xScale;
+    }
+    const yScale = this.renderedHeight / this.virtualHeight;
+    if (this.yScale !== yScale) {
+      this.yScale = yScale;
+    }
     this.pageRendered.emit({
       // container: this.container,
       containerId: this.containerId,
@@ -69,13 +105,49 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
       naturalWidth: this.naturalWidth,
       naturalHeight: this.naturalHeight,
       aspectRatio: this.aspectRatio,
-      xScale: this.renderedWidth / this.virtualWidth,
-      yScale: this.renderedHeight / this.virtualHeight,
+      xScale,
+      yScale,
     });
   }
   render() {
     const height = `${this.renderedHeight}px`;
-    return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+    return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+      this.fieldStore
+        .get('fields')
+        .filter(field => field && field.page_sequence === this.pageNumber)
+        .map(field => {
+        const id = getFieldId(field);
+        switch (field.type) {
+          case 'textbox':
+            return (h("verdocs-field-textbox", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'textarea':
+            return (h("verdocs-field-textarea", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'date':
+            return (h("verdocs-field-date", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'attachment':
+            return (h("verdocs-field-attachment", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'dropdown':
+            return (h("verdocs-field-dropdown", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, done: this.done, xscale: this.xScale, yscale: this.yScale, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'initial':
+            return (h("verdocs-field-initial", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'signature':
+            return (h("verdocs-field-signature", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'timestamp':
+            return (h("verdocs-field-timestamp", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
+          case 'checkbox_group':
+            return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
+              const id = getFieldOptionId(field, checkboxIndex);
+              return (h("verdocs-field-checkbox", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, option: checkboxIndex, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, checkboxIndex) }));
+            });
+          case 'radio_button_group':
+            return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
+              const id = getFieldOptionId(field, checkboxIndex);
+              return (h("verdocs-field-radio-button", { id: id, templateid: this.templateId, fieldname: field.name, editable: this.editable, xscale: this.xScale, yscale: this.yScale, done: this.done, option: checkboxIndex, pagenumber: this.pageNumber, style: getControlStyles(field, this.xScale, this.yScale, checkboxIndex) }));
+            });
+          default:
+            return h(Fragment, null, field.name);
+        }
+      }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
         // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
         // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
         // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
@@ -94,6 +166,8 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
   static get style() { return verdocsTemplateDocumentPageCss; }
 }, [0, "verdocs-template-document-page", {
     "endpoint": [16],
+    "editable": [4],
+    "done": [4],
     "templateId": [1, "template-id"],
     "documentId": [1, "document-id"],
     "pageNumber": [2, "page-number"],
@@ -107,19 +181,126 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
     "naturalHeight": [32],
     "aspectRatio": [32],
     "skipFirstNotification": [32],
-    "pageDisplayUri": [32]
+    "pageDisplayUri": [32],
+    "xScale": [32],
+    "yScale": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-document-page"];
+  const components = ["verdocs-template-document-page", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio-button", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-portal", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-document-page":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsTemplateDocumentPage);
       }
       break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "verdocs-field-attachment":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "verdocs-field-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "verdocs-field-date":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "verdocs-field-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "verdocs-field-initial":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "verdocs-field-radio-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "verdocs-field-signature":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "verdocs-field-textarea":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "verdocs-field-textbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "verdocs-field-timestamp":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-initial-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-portal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-signature-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-template-field-properties":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-upload-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }
 defineCustomElement();

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as commonjsGlobal } from './_commonjsHelpers.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { u as updateField, d as deleteField } from './Fields.js';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
@@ -14,6 +13,31 @@ 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';
 
+/**
+ * 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 updateField = function (endpoint, templateId, fieldName, params) {
+    return endpoint.api //
+        .put("/templates/".concat(templateId, "/fields/").concat(fieldName), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * REmove a field from a template.
+ */
+var deleteField = function (endpoint, templateId, fieldName) {
+    return endpoint.api //
+        .delete("/templates/".concat(templateId, "/fields/").concat(fieldName))
+        .then(function (r) { return r.data; });
+};
+
 // Unique ID creation requires a high quality random # generator.  In the
 // browser this is a little complicated due to unknown quality of Math.random()
 // and inconsistent support for the `crypto` API.  We do the best we can via
@@ -337,15 +361,11 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       .then(updated => {
       var _a, _b, _c;
       this.dirty = false;
-      const newFields = [
-        ...this.fieldStore.get('fields').map(field => {
-          if (field.name !== this.fieldName) {
-            return field;
-          }
-          return { ...field, ...updated };
-        }),
-      ];
-      this.fieldStore.set('fields', newFields);
+      updateStoreField(this.fieldStore, this.fieldName, updated);
+      // if (this.fieldname !== newSettings.name) {
+      //   this.fieldname = newSettings.name;
+      //   console.log('new name', this.fieldname);
+      // }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
       (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
@@ -539,4 +559,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { VerdocsTemplateFieldProperties as V, defineCustomElement as d };
+export { VerdocsTemplateFieldProperties as V, createField as c, defineCustomElement as d, updateField as u };