@verdocs/web-sdk 1.10.10 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdocs/web-sdk",
-  "version": "1.10.10",
+  "version": "1.11.1",
   "private": false,
   "description": "Verdocs Web SDK",
   "license": "MIT",
@@ -32,10 +32,11 @@
     "@stencil/core": "2.20.0",
     "@stencil/store": "^2.0.3",
     "@svgdotjs/svg.js": "^3.1.2",
-    "@verdocs/js-sdk": "^3.0.35",
+    "@verdocs/js-sdk": "^3.0.36",
     "date-fns": "^2.29.3",
     "flatpickr": "^4.6.13",
     "interactjs": "^1.10.17",
+    "jszip": "^3.10.1",
     "workflow-svg.js": "^3.0.2"
   },
   "devDependencies": {

package/dist/cjs/utils-865fd657.js

@@ -1,269 +0,0 @@
-'use strict';
-
-const Envelopes = require('./Envelopes-68058bbe.js');
-const Files = require('./Files-4bdc0c0f.js');
-
-function rescale(r, n) {
-    return r * n;
-}
-
-const defaultWidth = (type) => {
-  // checkbox was a legacy field type
-  switch (type) {
-    case 'textbox':
-      return 150;
-    case 'timestamp':
-      return 64;
-    case 'date':
-      return 64;
-    case 'dropdown':
-      return 64;
-    case 'attachment':
-    case 'payment':
-      return 24;
-    case 'checkbox':
-    case 'checkbox_group':
-    case 'radio_button_group':
-      return 14;
-    case 'signature':
-    case 'initial':
-      // TODO: Review this. 71 seems to line up better with the final render.
-      return 71;
-    // return 82;
-  }
-  return 150;
-};
-const defaultHeight = (type) => {
-  switch (type) {
-    case 'textbox':
-      return 15;
-    case 'timestamp':
-      return 15;
-    case 'date':
-      return 15;
-    case 'dropdown':
-      return 15;
-    case 'attachment':
-    case 'payment':
-      return 24;
-    case 'checkbox':
-    case 'checkbox_group':
-    case 'radio_button_group':
-      return 14;
-    case 'signature':
-    case 'initial':
-      // TODO: Review this. 71 seems to line up better with the final render.
-      return 36;
-    // return 41;
-  }
-  return 50;
-};
-const setControlStyles = (el, field, xScale, yScale, option) => {
-  var _a, _b, _c, _d;
-  const settings = field.setting || field.settings;
-  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
-  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
-  if (optionSettings) {
-    x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
-    y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
-    width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
-    height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
-  }
-  el.style.width = `${width}px`;
-  el.style.height = `${height}px`;
-  el.style.position = 'absolute';
-  el.style.left = `${rescale(xScale, x)}px`;
-  el.style.bottom = `${rescale(yScale, y)}px`;
-  el.style.transform = `scale(${xScale}, ${yScale})`;
-  // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
-};
-const getFieldId = (field) => {
-  return `verdocs-doc-fld-${field.name}`;
-};
-const getFieldOptionId = (field, index) => {
-  return `verdocs-doc-fld-${field.name}-${index}`;
-};
-const updateDocumentFieldValue = (field) => {
-  const id = getFieldId(field);
-  const existingField = document.getElementById(id);
-  if (existingField) {
-    existingField.field = field;
-    existingField.setAttribute('id', id); // We need this to trigger a re-render
-    existingField.setAttribute('disabled', true); // We need this to trigger a re-render
-    existingField.setAttribute('disabled', false); // We need this to trigger a re-render
-  }
-};
-const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
-  const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
-  const controlsDiv = document.getElementById(docPage.containerId + '-controls');
-  if (!controlsDiv) {
-    console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
-    return;
-  }
-  switch (field.type) {
-    case 'attachment':
-    case 'date':
-    case 'dropdown':
-    case 'initial':
-    case 'payment':
-    case 'signature':
-    case 'timestamp':
-    case 'textarea':
-    case 'textbox': {
-      const id = getFieldId(field);
-      const existingField = document.getElementById(id);
-      if (existingField) {
-        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
-        return existingField;
-      }
-      const el = document.createElement(`verdocs-field-${field.type}`);
-      el.field = field;
-      el.setAttribute('id', id);
-      el.setAttribute('roleIndex', roleIndex);
-      if (disabled) {
-        el.setAttribute('tabindex', -1);
-        el.setAttribute('disabled', true);
-      }
-      else {
-        el.setAttribute('tabIndex', 1);
-      }
-      if (editable) {
-        el.setAttribute('editable', true);
-      }
-      if (draggable) {
-        el.setAttribute('draggable', true);
-      }
-      if (done) {
-        el.setAttribute('done', true);
-      }
-      setControlStyles(el, field, docPage.xScale, docPage.yScale);
-      controlsDiv.appendChild(el);
-      return el;
-    }
-    case 'checkbox_group':
-      return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
-        const id = getFieldOptionId(field, checkboxIndex);
-        const existingField = document.getElementById(id);
-        if (existingField) {
-          setControlStyles(existingField, field, docPage.xScale, docPage.yScale, checkboxIndex);
-          return existingField;
-        }
-        const cbEl = document.createElement(`verdocs-field-checkbox`);
-        cbEl.field = field;
-        cbEl.setAttribute('id', id);
-        cbEl.setAttribute('roleIndex', roleIndex);
-        cbEl.setAttribute('option', checkboxIndex);
-        if (disabled) {
-          cbEl.setAttribute('disabled', true);
-        }
-        if (done) {
-          cbEl.setAttribute('done', true);
-        }
-        if (editable) {
-          cbEl.setAttribute('editable', true);
-        }
-        if (draggable) {
-          cbEl.setAttribute('draggable', true);
-        }
-        setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
-        controlsDiv.appendChild(cbEl);
-        return cbEl;
-      });
-    case 'radio_button_group':
-      return (field.settings || field.setting || {}).options.map((_, buttonIndex) => {
-        const id = getFieldOptionId(field, buttonIndex);
-        const existingField = document.getElementById(id);
-        if (existingField) {
-          setControlStyles(existingField, field, docPage.xScale, docPage.yScale, buttonIndex);
-          return existingField;
-        }
-        const radioEl = document.createElement(`verdocs-field-radio-button`);
-        radioEl.field = field;
-        radioEl.setAttribute('id', id);
-        radioEl.setAttribute('roleIndex', roleIndex);
-        radioEl.setAttribute('option', buttonIndex);
-        if (disabled) {
-          radioEl.setAttribute('disabled', true);
-        }
-        if (done) {
-          radioEl.setAttribute('done', true);
-        }
-        if (editable) {
-          radioEl.setAttribute('editable', true);
-        }
-        if (draggable) {
-          radioEl.setAttribute('draggable', true);
-        }
-        setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
-        controlsDiv.appendChild(radioEl);
-        return radioEl;
-      });
-    // case 'attachment':
-    //   el = document.createElement('verdocs-field-attachment');
-    //   el.setAttribute('value', result || '');
-    //   break;
-    // case 'payment':
-    //   el = document.createElement('verdocs-field-payment');
-    //   break;
-    default:
-      console.log('[PREVIEW] Skipping unsupported field type', field);
-      return null;
-  }
-};
-const getRoleIndex = (roles, role) => roles.indexOf(role) || 0;
-// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,
-//   but then merge the SDK types to encourage developers to use just `settings`.
-const getFieldSettings = (field) => {
-  if (field.setting) {
-    return field.setting;
-  }
-  if (field.settings) {
-    return field.settings;
-  }
-  return { x: 0, y: 0, required: false, disabled: false, result: '', value: '' };
-};
-/**
- * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
- * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
- * specified component if it's already set and replace it with the new value, without touching the other components that
- * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant
- * to be used for order-sensitive components e.g. translate-then-rotate.
- */
-const updateCssTransform = (el, key, value) => {
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-};
-const savePDF = async (endpoint, envelope, documentId) => {
-  const fileName = `${envelope.name} - ${envelope.updated_at.split('T')[0]}.pdf`;
-  const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
-  Files.downloadBlob(data, fileName);
-};
-/**
- * Throttle a given function by a delay value. Useful for things like resizeObserver.
- */
-const throttle = (f, delay) => {
-  let timer = 0;
-  return function (...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => f.apply(this, args), delay);
-  };
-};
-
-exports.defaultHeight = defaultHeight;
-exports.defaultWidth = defaultWidth;
-exports.getFieldId = getFieldId;
-exports.getFieldSettings = getFieldSettings;
-exports.getRoleIndex = getRoleIndex;
-exports.renderDocumentField = renderDocumentField;
-exports.savePDF = savePDF;
-exports.throttle = throttle;
-exports.updateCssTransform = updateCssTransform;
-exports.updateDocumentFieldValue = updateDocumentFieldValue;

package/dist/esm/utils-274e2e93.js

@@ -1,258 +0,0 @@
-import { a as getEnvelopeFile } from './Envelopes-130fd6ea.js';
-import { d as downloadBlob } from './Files-70a192df.js';
-
-function rescale(r, n) {
-    return r * n;
-}
-
-const defaultWidth = (type) => {
-  // checkbox was a legacy field type
-  switch (type) {
-    case 'textbox':
-      return 150;
-    case 'timestamp':
-      return 64;
-    case 'date':
-      return 64;
-    case 'dropdown':
-      return 64;
-    case 'attachment':
-    case 'payment':
-      return 24;
-    case 'checkbox':
-    case 'checkbox_group':
-    case 'radio_button_group':
-      return 14;
-    case 'signature':
-    case 'initial':
-      // TODO: Review this. 71 seems to line up better with the final render.
-      return 71;
-    // return 82;
-  }
-  return 150;
-};
-const defaultHeight = (type) => {
-  switch (type) {
-    case 'textbox':
-      return 15;
-    case 'timestamp':
-      return 15;
-    case 'date':
-      return 15;
-    case 'dropdown':
-      return 15;
-    case 'attachment':
-    case 'payment':
-      return 24;
-    case 'checkbox':
-    case 'checkbox_group':
-    case 'radio_button_group':
-      return 14;
-    case 'signature':
-    case 'initial':
-      // TODO: Review this. 71 seems to line up better with the final render.
-      return 36;
-    // return 41;
-  }
-  return 50;
-};
-const setControlStyles = (el, field, xScale, yScale, option) => {
-  var _a, _b, _c, _d;
-  const settings = field.setting || field.settings;
-  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
-  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
-  if (optionSettings) {
-    x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
-    y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
-    width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
-    height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
-  }
-  el.style.width = `${width}px`;
-  el.style.height = `${height}px`;
-  el.style.position = 'absolute';
-  el.style.left = `${rescale(xScale, x)}px`;
-  el.style.bottom = `${rescale(yScale, y)}px`;
-  el.style.transform = `scale(${xScale}, ${yScale})`;
-  // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
-};
-const getFieldId = (field) => {
-  return `verdocs-doc-fld-${field.name}`;
-};
-const getFieldOptionId = (field, index) => {
-  return `verdocs-doc-fld-${field.name}-${index}`;
-};
-const updateDocumentFieldValue = (field) => {
-  const id = getFieldId(field);
-  const existingField = document.getElementById(id);
-  if (existingField) {
-    existingField.field = field;
-    existingField.setAttribute('id', id); // We need this to trigger a re-render
-    existingField.setAttribute('disabled', true); // We need this to trigger a re-render
-    existingField.setAttribute('disabled', false); // We need this to trigger a re-render
-  }
-};
-const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
-  const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
-  const controlsDiv = document.getElementById(docPage.containerId + '-controls');
-  if (!controlsDiv) {
-    console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
-    return;
-  }
-  switch (field.type) {
-    case 'attachment':
-    case 'date':
-    case 'dropdown':
-    case 'initial':
-    case 'payment':
-    case 'signature':
-    case 'timestamp':
-    case 'textarea':
-    case 'textbox': {
-      const id = getFieldId(field);
-      const existingField = document.getElementById(id);
-      if (existingField) {
-        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
-        return existingField;
-      }
-      const el = document.createElement(`verdocs-field-${field.type}`);
-      el.field = field;
-      el.setAttribute('id', id);
-      el.setAttribute('roleIndex', roleIndex);
-      if (disabled) {
-        el.setAttribute('tabindex', -1);
-        el.setAttribute('disabled', true);
-      }
-      else {
-        el.setAttribute('tabIndex', 1);
-      }
-      if (editable) {
-        el.setAttribute('editable', true);
-      }
-      if (draggable) {
-        el.setAttribute('draggable', true);
-      }
-      if (done) {
-        el.setAttribute('done', true);
-      }
-      setControlStyles(el, field, docPage.xScale, docPage.yScale);
-      controlsDiv.appendChild(el);
-      return el;
-    }
-    case 'checkbox_group':
-      return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
-        const id = getFieldOptionId(field, checkboxIndex);
-        const existingField = document.getElementById(id);
-        if (existingField) {
-          setControlStyles(existingField, field, docPage.xScale, docPage.yScale, checkboxIndex);
-          return existingField;
-        }
-        const cbEl = document.createElement(`verdocs-field-checkbox`);
-        cbEl.field = field;
-        cbEl.setAttribute('id', id);
-        cbEl.setAttribute('roleIndex', roleIndex);
-        cbEl.setAttribute('option', checkboxIndex);
-        if (disabled) {
-          cbEl.setAttribute('disabled', true);
-        }
-        if (done) {
-          cbEl.setAttribute('done', true);
-        }
-        if (editable) {
-          cbEl.setAttribute('editable', true);
-        }
-        if (draggable) {
-          cbEl.setAttribute('draggable', true);
-        }
-        setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
-        controlsDiv.appendChild(cbEl);
-        return cbEl;
-      });
-    case 'radio_button_group':
-      return (field.settings || field.setting || {}).options.map((_, buttonIndex) => {
-        const id = getFieldOptionId(field, buttonIndex);
-        const existingField = document.getElementById(id);
-        if (existingField) {
-          setControlStyles(existingField, field, docPage.xScale, docPage.yScale, buttonIndex);
-          return existingField;
-        }
-        const radioEl = document.createElement(`verdocs-field-radio-button`);
-        radioEl.field = field;
-        radioEl.setAttribute('id', id);
-        radioEl.setAttribute('roleIndex', roleIndex);
-        radioEl.setAttribute('option', buttonIndex);
-        if (disabled) {
-          radioEl.setAttribute('disabled', true);
-        }
-        if (done) {
-          radioEl.setAttribute('done', true);
-        }
-        if (editable) {
-          radioEl.setAttribute('editable', true);
-        }
-        if (draggable) {
-          radioEl.setAttribute('draggable', true);
-        }
-        setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
-        controlsDiv.appendChild(radioEl);
-        return radioEl;
-      });
-    // case 'attachment':
-    //   el = document.createElement('verdocs-field-attachment');
-    //   el.setAttribute('value', result || '');
-    //   break;
-    // case 'payment':
-    //   el = document.createElement('verdocs-field-payment');
-    //   break;
-    default:
-      console.log('[PREVIEW] Skipping unsupported field type', field);
-      return null;
-  }
-};
-const getRoleIndex = (roles, role) => roles.indexOf(role) || 0;
-// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,
-//   but then merge the SDK types to encourage developers to use just `settings`.
-const getFieldSettings = (field) => {
-  if (field.setting) {
-    return field.setting;
-  }
-  if (field.settings) {
-    return field.settings;
-  }
-  return { x: 0, y: 0, required: false, disabled: false, result: '', value: '' };
-};
-/**
- * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
- * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
- * specified component if it's already set and replace it with the new value, without touching the other components that
- * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant
- * to be used for order-sensitive components e.g. translate-then-rotate.
- */
-const updateCssTransform = (el, key, value) => {
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-};
-const savePDF = async (endpoint, envelope, documentId) => {
-  const fileName = `${envelope.name} - ${envelope.updated_at.split('T')[0]}.pdf`;
-  const data = await getEnvelopeFile(endpoint, envelope.id, documentId);
-  downloadBlob(data, fileName);
-};
-/**
- * Throttle a given function by a delay value. Useful for things like resizeObserver.
- */
-const throttle = (f, delay) => {
-  let timer = 0;
-  return function (...args) {
-    clearTimeout(timer);
-    timer = setTimeout(() => f.apply(this, args), delay);
-  };
-};
-
-export { getRoleIndex as a, getFieldId as b, updateCssTransform as c, defaultWidth as d, defaultHeight as e, getFieldSettings as g, renderDocumentField as r, savePDF as s, throttle as t, updateDocumentFieldValue as u };

package/dist/esm-es5/Envelopes-91d7e139.js

@@ -1 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,o){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function l(e){try{i(o.next(e))}catch(e){a(e)}}function s(e){try{i(o["throw"](e))}catch(e){a(e)}}function i(e){e.done?n(e.value):r(e.value).then(l,s)}i((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,r,a,l;return l={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function s(e){return function(t){return i([e,t])}}function i(l){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,r&&(a=l[0]&2?r["return"]:l[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,l[1])).done)return a;if(r=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;r=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){n.label=l[1];break}if(l[0]===6&&n.label<a[1]){n.label=a[1];a=l;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(l);break}if(a[2])n.ops.pop();n.trys.pop();continue}l=t.call(e,n)}catch(e){l=[6,e];r=0}finally{o=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};import{g as getEnvelope}from"./Envelopes-130fd6ea.js";import{c as createStore}from"./index-fd7b8a34.js";import{g as getTemplate}from"./Templates-8e4ab976.js";var _c=createStore({envelope:null,template:null,loadProgress:0,loading:true,error:"",roleNames:[],dirty:false}),state=_c.state,onChange=_c.onChange;onChange("envelope",(function(e){return __awaiter(void 0,void 0,void 0,(function(){return __generator(this,(function(t){if(!e){console.log("[ENVELOPESTORE] Clearing envelope");state.roleNames=[];state.dirty=false;state.loading=false;state.error="";state.loadProgress=0;return[2]}console.log("[ENVELOPESTORE] Loaded envelope",e);state.roleNames=e.recipients.map((function(e){return e.role_name}));console.log("[ENVELOPESTORE] Loaded roles",state.roleNames);return[2]}))}))}));var getEnvelopeById=function(e,t){return __awaiter(void 0,void 0,void 0,(function(){var n,o,r,a,l;return __generator(this,(function(s){switch(s.label){case 0:if(!t){console.log("[ENVELOPES] Missing required envelope ID");return[2]}if(((n=state.envelope)===null||n===void 0?void 0:n.id)===t){console.log("[ENVELOPES] Skipping load for already-loaded envelope ID");return[2]}state.error="";state.loading=true;state.envelope=null;s.label=1;case 1:s.trys.push([1,4,,5]);console.log("[ENVELOPES] Loading envelope ".concat(t));return[4,getEnvelope(e,t,true)];case 2:r=s.sent();if(!r){console.log("[ENVELOPES] Unable to load envelope");return[2]}state.envelope=r;return[4,getTemplate(e,r.template_id,true)];case 3:a=s.sent();if(!r){console.log("[ENVELOPES] Unable to load template");return[2]}state.template=a;state.loading=false;return[3,5];case 4:l=s.sent();state.loading=false;state.error=((o=l===null||l===void 0?void 0:l.response)===null||o===void 0?void 0:o.status)===401?"Authentication required":l.message;console.log("[ENVELOPES] Error loading envelope",l);throw l;case 5:return[2]}}))}))};export{getEnvelopeById as g,state as s};