@verdocs/web-sdk 2.3.16 → 2.3.18

package/dist/collection/utils/utils.js

@@ -63,6 +63,7 @@ export 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;
+  // console.log('scs', field, settings, x, y);
   const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -96,6 +97,7 @@ export const updateDocumentFieldValue = (field) => {
 };
 export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
+  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
@@ -283,13 +285,6 @@ export const saveAttachment = async (endpoint, envelope, documentId) => {
   const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
-export const saveCertificate = async (endpoint, envelope, documentId) => {
-  // e.g "Colorado Motor Vehicle Bill of Sale_certificate.pdf"
-  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
-  const fileName = `${envelope.name} - ${date}_certificate.pdf`;
-  const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
-  downloadBlob(data, fileName);
-};
 export const saveEnvelopesAsZip = async (endpoint, envelopes) => {
   var _a;
   const zip = new jszip();

package/dist/components/TemplateFieldStore.js

@@ -0,0 +1,23 @@
+import { c as createStore } from './index4.js';
+
+const templateFieldStores = {};
+const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
+const createTemplateFieldStore = (template) => {
+  let store = getTemplateFieldStore(template.id);
+  if (!store) {
+    console.log('Creating template field store for template', template.id);
+    store = createStore({});
+    templateFieldStores[template.id] = store;
+  }
+  else {
+    console.log('Resetting template field store for template', template.id);
+    console.trace('Stack');
+    store.reset();
+  }
+  template.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};
+
+export { createTemplateFieldStore as c, getTemplateFieldStore as g };

package/dist/components/TemplateStore.js

@@ -1,23 +1,6 @@
 import { c as createStore } from './index4.js';
 import { g as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
-
-const templateFieldStores = {};
-const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
-const createTemplateFieldStore = (template) => {
-  console.log('Creating template field store for template: ', template);
-  let store = getTemplateFieldStore(template.id);
-  if (!store) {
-    store = createStore({});
-    templateFieldStores[template.id] = store;
-  }
-  else {
-    store.reset();
-  }
-  template.fields.forEach(field => {
-    store.set(field.name, field);
-  });
-  return store;
-};
+import { c as createTemplateFieldStore } from './TemplateFieldStore.js';
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
@@ -86,6 +69,7 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;
+      createTemplateFieldStore(template);
     }
     catch (e) {
       console.error('[TEMPLATES] Error loading template', e);
@@ -97,9 +81,8 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
     store.state.isLoading = false;
     store.state.updateCount++;
   }
-  createTemplateFieldStore(store.state);
   return store;
 };
 const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };
 
-export { getTemplateFieldStore as a, getRoleNames as b, createTemplateFieldStore as c, getTemplateStore as g };
+export { getRoleNames as a, getTemplateStore as g };

package/dist/components/utils.js

@@ -84,6 +84,7 @@ 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;
+  // console.log('scs', field, settings, x, y);
   const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -117,6 +118,7 @@ const updateDocumentFieldValue = (field) => {
 };
 const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
+  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');

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

@@ -1,4 +1,97 @@
-import { V as VerdocsButtonPanel$1, d as defineCustomElement$1 } from './verdocs-button-panel2.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createPopper } from './popper.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 VerdocsButtonPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    // Not marked as @State because it's not the thing that controls our rendering
+    this.showing = false;
+    this.icon = '';
+  }
+  componentDidRender() {
+    document.body.appendChild(this.panelEl);
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+    this.popperInstance = 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;
+    }
+    if (this.panelEl) {
+      this.panelEl.remove();
+    }
+  }
+  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);
+  }
+  async hidePanel() {
+    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() {
+    if (this.showing) {
+      await this.hidePanel();
+    }
+    else {
+      await this.showPanel();
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "icon", innerHTML: this.icon, onClick: (e) => {
+        e.stopPropagation();
+        return this.toggle();
+      }, ref: el => (this.iconEl = el) }), h("div", { role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { "data-popper-arrow": "true", class: "arrow" }), h("slot", null))));
+  }
+  static get style() { return verdocsButtonPanelCss; }
+}, [4, "verdocs-button-panel", {
+    "icon": [1],
+    "showPanel": [64],
+    "hidePanel": [64],
+    "toggle": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-button-panel"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-button-panel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsButtonPanel$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const VerdocsButtonPanel = VerdocsButtonPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-field-attachment.js

@@ -1,17 +1,18 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
-import { d as defineCustomElement$9 } from './verdocs-button-panel2.js';
-import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$6 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$8 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$7 } from './verdocs-help-icon2.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-template-field-properties2.js';
 import { d as defineCustomElement$3 } from './verdocs-text-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-upload-dialog2.js';
 
-const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{cursor:inherit;width:20px}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{cursor:inherit;width:20px}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}";
 
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
@@ -23,8 +24,9 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.attached = createEvent(this, "attached", 7);
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
@@ -33,6 +35,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.xscale = 1;
     this.yscale = 1;
     this.rerender = 0;
+    this.showingProperties = false;
   }
   async focusField() {
     this.handleShow();
@@ -50,39 +53,48 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     document.body.append(this.dialog);
   }
   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();
     }
   }
+  async componentWillLoad() {
+    this.fieldStore = getTemplateFieldStore(this.templateid);
+  }
   render() {
     var _a, _b;
-    const settings = getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const { url } = settings;
     console.log('Attachment settings', url, settings);
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), this.editable && (h(Fragment, null, 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 && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, 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;
-        console.log('here');
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
-      }, helpText: 'Attachment fields allow files to be uploaded during signing. Files will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must attach a file before proceeding.' })))));
+      }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' })))))));
   }
   static get style() { return verdocsFieldAttachmentCss; }
 }, [0, "verdocs-field-attachment", {
     "templateid": [1],
-    "field": [16],
+    "fieldname": [1],
     "disabled": [4],
     "editable": [4],
     "moveable": [4],
@@ -91,6 +103,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "xscale": [2],
     "yscale": [2],
     "rerender": [2],
+    "showingProperties": [32],
     "focusField": [64],
     "showSettingsPanel": [64],
     "hideSettingsPanel": [64]
@@ -99,7 +112,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
+  const components = ["verdocs-field-attachment", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input", "verdocs-upload-dialog"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-field-attachment":
       if (!customElements.get(tagName)) {
@@ -111,22 +124,22 @@ function defineCustomElement$1() {
         defineCustomElement$a();
       }
       break;
-    case "verdocs-button-panel":
+    case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "verdocs-checkbox":
+    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "verdocs-component-error":
+    case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "verdocs-help-icon":
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }

package/dist/components/verdocs-field-checkbox.js

@@ -1,16 +1,17 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
-import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
-import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$6 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$5 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$6 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$5 } from './verdocs-portal2.js';
 import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{cursor:inherit;width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{cursor:inherit;width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-checkbox .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-checkbox .settings-icon svg{fill:#707ae5}verdocs-field-checkbox .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 VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -19,8 +20,9 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.fieldStore = null;
     this.templateid = '';
-    this.field = null;
+    this.fieldname = '';
     this.option = 0;
     this.disabled = false;
     this.done = false;
@@ -28,43 +30,56 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.editable = false;
     this.moveable = false;
     this.rerender = 0;
+    this.xscale = 1;
+    this.yscale = 1;
+    this.showingProperties = false;
   }
   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 = getTemplateFieldStore(this.templateid);
+  }
   render() {
     var _a, _b, _c, _d;
-    const settings = getFieldSettings(this.field);
+    const field = this.fieldStore.get(this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
+    const settings = getFieldSettings(field);
     const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
     const disabled = (_d = (_c = this.disabled) !== null && _c !== void 0 ? _c : settings.disabled) !== null && _d !== void 0 ? _d : false;
-    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
+    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: this.field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h(Fragment, null, 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 && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, 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: 'Check boxes allow the user to select one or more (non-exclusive) options.' }))))))));
   }
   static get style() { return verdocsFieldCheckboxCss; }
 }, [0, "verdocs-field-checkbox", {
     "templateid": [1],
-    "field": [16],
+    "fieldname": [1],
     "option": [2],
     "disabled": [4],
     "done": [4],
@@ -72,6 +87,9 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "editable": [4],
     "moveable": [4],
     "rerender": [2],
+    "xscale": [2],
+    "yscale": [2],
+    "showingProperties": [32],
     "showSettingsPanel": [64],
     "hideSettingsPanel": [64]
   }]);
@@ -79,7 +97,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-field-checkbox", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+  const components = ["verdocs-field-checkbox", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-field-checkbox":
       if (!customElements.get(tagName)) {
@@ -91,22 +109,22 @@ function defineCustomElement$1() {
         defineCustomElement$9();
       }
       break;
-    case "verdocs-button-panel":
+    case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "verdocs-checkbox":
+    case "verdocs-component-error":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "verdocs-component-error":
+    case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "verdocs-help-icon":
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }