@verdocs/web-sdk 2.3.16 → 2.3.19

package/dist/cjs/verdocs-field-timestamp.cjs.entry.js

@@ -4,15 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-0916d10f.js');
+const utils = require('./utils-aeaf4a31.js');
 const Types = require('./Types-fb95ed6b.js');
+const TemplateFieldStore = require('./TemplateFieldStore-40e85b9d.js');
 const index$1 = require('./index-7c19ba1d.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
+require('./index-f712049c.js');
 
-const verdocsFieldTimestampCss = "verdocs-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{position:absolute;cursor:inherit;width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldTimestampCss = "verdocs-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{position:absolute;cursor:inherit;width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-timestamp .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-timestamp .settings-icon svg{fill:#707ae5}verdocs-field-timestamp .settings-icon:hover{opacity:1}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTimestamp = class {
@@ -20,54 +22,68 @@ const VerdocsFieldTimestamp = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
   }
   async focusField() {
     this.el.focus();
   }
   async showSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.showPanel) {
       settingsPanel.showPanel();
     }
   }
   async hideSettingsPanel() {
-    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
     // TemplateStore.updateCount++;
   }
+  async componentWillLoad() {
+    this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+  }
   render() {
-    var _a, _b, _c;
-    const settings = utils.getFieldSettings(this.field);
+    var _a, _b;
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return index.h(index.Fragment, null);
+    }
+    const settings = utils.getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || Colors.getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || Colors.getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
     const formatted = index$1.format(dt, Types.FORMAT_TIMESTAMP);
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, formatted);
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
+    return (index.h(index.Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+        e.stopPropagation();
+        this.showingProperties = !this.showingProperties;
+      } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
         var _a;
-        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      } })))));
+      }, helpText: 'Time stamps are automatically set when the recipient signs the document.' })))))));
   }
 };
 VerdocsFieldTimestamp.style = verdocsFieldTimestampCss;

package/dist/cjs/verdocs-pagination_2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-0916d10f.js');
+const utils = require('./utils-aeaf4a31.js');
 const popper = require('./popper-d7adcfc6.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');

package/dist/cjs/{verdocs-button-panel_2.cjs.entry.js → verdocs-portal_2.cjs.entry.js}

@@ -3,87 +3,85 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
-const popper = require('./popper-d7adcfc6.js');
 const _commonjsHelpers = require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Fields = require('./Fields-705a2168.js');
-const TemplateFieldStore = require('./TemplateFieldStore-7449e5ff.js');
-const TemplateStore = require('./TemplateStore-0074c71d.js');
+const TemplateFieldStore = require('./TemplateFieldStore-40e85b9d.js');
+const TemplateStore = require('./TemplateStore-6a75cdac.js');
 const errors = require('./errors-0396da3d.js');
 require('./index-f712049c.js');
 
-const verdocsButtonPanelCss = "verdocs-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
+const verdocsPortalCss = "";
 
-const VerdocsButtonPanel = class {
+const Z_INDEX = '10001';
+const VerdocsPortal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    // Not marked as @State because it's not the thing that controls our rendering
-    this.showing = false;
-    this.icon = '';
+    this.clickAway = index.createEvent(this, "clickAway", 7);
+    this.moved = false;
+    this.anchor = undefined;
+    this.voffset = 0;
+    this.align = 'left';
   }
-  componentDidRender() {
-    document.body.appendChild(this.panelEl);
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
+  handleScroll() {
+    this.calculatePosition();
+  }
+  handleResize() {
+    this.calculatePosition();
+  }
+  handleClick(e) {
+    var _a;
+    if (!this.element.contains(e.target)) {
+      (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
     }
-    this.popperInstance = popper.createPopper(this.iconEl, this.panelEl, {
-    // placement: 'top-end',
-    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    });
   }
-  disconnectedCallback() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+  calculateLeft() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    if (this.align === 'left') {
+      return Math.max(anchorRect.left, 0);
     }
-    if (this.panelEl) {
-      this.panelEl.remove();
+    if (this.align === 'right') {
+      return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
     }
+    return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
   }
-  async showPanel() {
-    var _a, _b;
-    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
-    (_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';
-    this.hiderEl.style.left = '0px';
-    this.hiderEl.style.right = '0px';
-    this.hiderEl.style.bottom = '0px';
-    this.hiderEl.onclick = (e) => {
-      e.stopPropagation();
-      this.toggle();
-    };
-    document.body.appendChild(this.hiderEl);
+  calculateTop() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    return anchorRect.bottom + this.voffset;
+  }
+  calculatePosition() {
+    this.portal.style.top = `${this.calculateTop()}px`;
+    this.portal.style.left = `${this.calculateLeft()}px`;
   }
-  async hidePanel() {
+  componentWillLoad() {
     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;
+    const id = `${this.anchor}-portal`;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+    this.portal = document.createElement('div');
+    this.portal.setAttribute('id', id);
+    this.portal.style.zIndex = Z_INDEX;
+    this.portal.style.position = 'absolute';
+    document.body.append(this.portal);
   }
-  async toggle() {
-    if (this.showing) {
-      await this.hidePanel();
-    }
-    else {
-      await this.showPanel();
-    }
+  componentDidLoad() {
+    this.portal.appendChild(this.element);
+    this.calculatePosition();
+  }
+  disconnectedCallback() {
+    this.moved ? this.portal.remove() : (this.moved = true);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "icon", innerHTML: this.icon, onClick: (e) => {
-        e.stopPropagation();
-        return this.toggle();
-      }, ref: el => (this.iconEl = el) }), index.h("div", { role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, index.h("div", { "data-popper-arrow": "true", class: "arrow" }), index.h("slot", null))));
+    return (index.h(index.Host, { ref: el => (this.element = el) }, index.h("slot", null)));
   }
 };
-VerdocsButtonPanel.style = verdocsButtonPanelCss;
+VerdocsPortal.style = verdocsPortalCss;
 
 // Unique ID creation requires a high quality random # generator.  In the
 // browser this is a little complicated due to unknown quality of Math.random()
@@ -274,7 +272,7 @@ uuid.v4 = v4_1;
 
 var uuidBrowser = uuid;
 
-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{margin:0;-ms-flex:1;flex:1}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 .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}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;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 .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
+const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0px #0000001f;box-shadow:2px 2px 10px 0px #0000001f}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{margin:0;-ms-flex:1;flex:1}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 .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}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;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 .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:#a50021}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 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>`;
@@ -326,33 +324,34 @@ const VerdocsTemplateFieldProperties = class {
         return;
       }
       this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId);
+      TemplateFieldStore.createTemplateFieldStore(this.templateStore.state);
       this.fieldStore = await TemplateFieldStore.createTemplateFieldStore(this.templateStore.state);
+      // console.log('tfs', this.fieldStore?.state);
       const field = this.fieldStore.get(this.fieldName);
+      // console.log('gf', field);
       if (!field) {
         console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
       }
       else {
         console.log('props', field);
       }
-      TemplateFieldStore.createTemplateFieldStore(this.templateStore.state);
-      this.watcher = this.fieldStore.onChange(this.fieldName, field => {
-        var _a, _b, _c, _d;
+      this.watcher = this.fieldStore.onChange(this.fieldName, (field) => {
         console.log('Field changed', field);
-        this.type = field.type;
-        this.name = field.name;
-        this.label = field.label;
-        this.group = field.name;
-        this.roleName = field.role_name;
-        this.required = field.required;
-        this.fieldType = field.type;
-        // TODO: Talk about how we want to handle labels/placeholders
-        this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-        this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
-        this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
-        this.setting = field.setting || {};
-        this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
-        this.dirty = false;
-        this.loading = false;
+        // this.type = field.type;
+        // this.name = field.name;
+        // this.label = field.label;
+        // this.group = field.name;
+        // this.roleName = field.role_name;
+        // this.required = field.required;
+        // this.fieldType = field.type;
+        // // TODO: Talk about how we want to handle labels/placeholders
+        // this.placeholder = field.setting?.placeholder || '';
+        // this.value = field.setting?.result || '';
+        // this.leading = field.setting?.leading || 0;
+        // this.setting = field.setting || {};
+        // this.options = field.setting?.options || [];
+        // this.dirty = false;
+        // this.loading = false;
       });
       console.log('watcher', this.watcher);
       this.type = field.type;
@@ -419,7 +418,7 @@ const VerdocsTemplateFieldProperties = class {
         options: this.options,
       };
     }
-    console.log('FP: Will update', newProperties);
+    console.log('FP: Will update', this.fieldName, newProperties);
     Fields.updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(field => {
       var _a, _b;
@@ -472,9 +471,8 @@ const VerdocsTemplateFieldProperties = class {
   }
   updateField(newField) {
     const oldField = this.fieldStore.get(this.fieldName) || {};
-    console.log('Updating field', newField, oldField);
+    console.log('Updating field', this.fieldName, newField);
     Object.assign(oldField, newField);
-    this.fieldStore.set(this.fieldName, newField);
   }
   async handleDelete(e) {
     e.stopPropagation();
@@ -503,6 +501,7 @@ const VerdocsTemplateFieldProperties = class {
     if (this.helpText && this.showingHelp) {
       return (index.h(index.Host, null, index.h("h6", null, capitalize(this.fieldType), " Settings ", index.h("div", { style: { flex: '1' } }), index.h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), index.h("p", { class: "instructions", innerHTML: this.helpText })));
     }
+    // console.log('tfp', this.templateId, this.fieldName);
     return (index.h(index.Host, null, index.h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", index.h("div", { style: { flex: '1' } }), this.helpText && index.h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { class: "row" }, index.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) => {
@@ -555,5 +554,5 @@ const VerdocsTemplateFieldProperties = class {
 };
 VerdocsTemplateFieldProperties.style = verdocsTemplateFieldPropertiesCss;
 
-exports.verdocs_button_panel = VerdocsButtonPanel;
+exports.verdocs_portal = VerdocsPortal;
 exports.verdocs_template_field_properties = VerdocsTemplateFieldProperties;

package/dist/cjs/verdocs-preview_8.cjs.entry.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
-const utils = require('./utils-0916d10f.js');
-const TemplateStore = require('./TemplateStore-0074c71d.js');
+const utils = require('./utils-aeaf4a31.js');
+const TemplateStore = require('./TemplateStore-6a75cdac.js');
 const errors = require('./errors-0396da3d.js');
 const Envelopes = require('./Envelopes-0b9deb2c.js');
 const Validators = require('./Validators-16e6d7d1.js');
@@ -19,7 +19,7 @@ require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
 require('./index-f712049c.js');
-require('./TemplateFieldStore-7449e5ff.js');
+require('./TemplateFieldStore-40e85b9d.js');
 
 /**
  * Enable automatic reminders. setup_time is the number of days after the envelope is sent that the first reminder

package/dist/cjs/verdocs-settings-api-keys_4.cjs.entry.js

@@ -10,7 +10,7 @@ const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 const Profiles = require('./Profiles-1a26e4eb.js');
 const index$1 = require('./index-7c19ba1d.js');
-const utils = require('./utils-0916d10f.js');
+const utils = require('./utils-aeaf4a31.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Files-4bdc0c0f.js');

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -9,13 +9,15 @@ const Recipients = require('./Recipients-f3d6cf10.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-0916d10f.js');
+const utils = require('./utils-aeaf4a31.js');
+const TemplateFieldStore = require('./TemplateFieldStore-40e85b9d.js');
 const Types = require('./Types-fb95ed6b.js');
 const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 const index$1 = require('./index-7c19ba1d.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Files-4bdc0c0f.js');
+require('./index-f712049c.js');
 
 /**
  * Create a signature block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
@@ -121,7 +123,9 @@ const VerdocsSign = class {
       if (this.agreed) {
         this.nextButtonLabel = 'Next';
       }
-      this.envelope = await Envelopes.throttledGetEnvelope(this.endpoint, this.envelopeId);
+      this.envelope = await Envelopes.getEnvelope(this.endpoint, this.envelopeId);
+      const fs = TemplateFieldStore.createTemplateFieldStoreFromEnvelope(this.envelope);
+      console.log('made fs', fs);
       this.sortedRecipients = [...this.envelope.recipients];
       this.sortedRecipients.sort((a, b) => {
         return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
@@ -215,7 +219,7 @@ const VerdocsSign = class {
   }
   updateRecipientFieldValue(fieldName, updateResult) {
     console.log('[SIGN] updateRecipientFieldValue', fieldName);
-    this.recipient.fields.forEach(oldField => {
+    this.getRecipientFields().forEach(oldField => {
       if (oldField.name === fieldName) {
         oldField.settings = updateResult.settings;
         // TODO: When we break out other fields like value, update them here too
@@ -366,7 +370,7 @@ const VerdocsSign = class {
       return;
     }
     // Find and focus the next incomplete required field
-    const requiredFields = this.recipient.fields.filter(field => field.required);
+    const requiredFields = this.getRecipientFields().filter(field => field.required);
     const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
     let nextFocusedIndex = focusedIndex + 1;
     if (nextFocusedIndex >= requiredFields.length) {
@@ -393,9 +397,12 @@ const VerdocsSign = class {
       this.focusedField = nextRequiredField.name;
     }
   }
+  getRecipientFields() {
+    return this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name);
+  }
   // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
   checkRecipientFields() {
-    const invalidFields = this.recipient.fields.filter(field => !this.isFieldValid(field));
+    const invalidFields = this.getRecipientFields().filter(field => !this.isFieldValid(field));
     if (invalidFields.length < 1) {
       this.nextButtonLabel = 'Finish';
       if (!this.nextSubmits) {
@@ -433,6 +440,8 @@ const VerdocsSign = class {
     });
     el.addEventListener('focusout', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
     el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));
+    el.setAttribute('templateid', this.envelope.template_id);
+    el.setAttribute('fieldname', field.name);
     el.setAttribute('page', pageInfo.pageNumber);
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -443,7 +452,8 @@ const VerdocsSign = class {
   handlePageRendered(e) {
     const pageInfo = e.detail;
     const roleIndex = utils.getRoleIndex(this.roleNames, this.recipient.role_name);
-    const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+    console.log('hpr', this.recipient, this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name));
+    const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
     // First render the fields for the signer
     recipientFields
@@ -465,7 +475,7 @@ const VerdocsSign = class {
       .filter(r => r.role_name !== this.recipient.role_name && (r.status === Types$1.RecipientStates.INVITED || r.status === Types$1.RecipientStates.OPENED || r.status === Types$1.RecipientStates.PENDING))
       .forEach(recipient => {
       const otherIndex = utils.getRoleIndex(this.roleNames, recipient.role_name);
-      recipient.fields
+      this.getRecipientFields()
         .filter(field => field.page === pageInfo.pageNumber)
         .forEach(field => {
         const el = utils.renderDocumentField(field, pageInfo, otherIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });

package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
-const utils = require('./utils-0916d10f.js');
+const utils = require('./utils-aeaf4a31.js');
 const popper = require('./popper-d7adcfc6.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');