@verdocs/web-sdk 1.9.9 → 1.9.14

package/dist/components/verdocs-template-fields2.js

@@ -1,46 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
 import './Types.js';
 import { g as getRGBA } from './Colors.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
+import { r as renderDocumentField, a as getRoleIndex, u as updateCssTransform } from './utils.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$c } from './verdocs-button2.js';
-import { d as defineCustomElement$b } from './verdocs-button-panel2.js';
-import { d as defineCustomElement$a } from './verdocs-document-page2.js';
-import { d as defineCustomElement$9 } from './verdocs-field-signature2.js';
-import { d as defineCustomElement$8 } from './verdocs-loader2.js';
-import { d as defineCustomElement$7 } from './verdocs-select-input2.js';
-import { d as defineCustomElement$6 } from './verdocs-signature-dialog2.js';
-import { d as defineCustomElement$5 } from './verdocs-text-input2.js';
-import { d as defineCustomElement$4 } from './verdocs-toolbar-icon2.js';
-import { d as defineCustomElement$3 } from './verdocs-view2.js';
-import { d as defineCustomElement$2 } from './verdocs-view-envelope-document2.js';
-import { d as defineCustomElement$1 } from './verdocs-view-template-document2.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-document-page2.js';
+import { d as defineCustomElement$6 } from './verdocs-field-signature2.js';
+import { d as defineCustomElement$5 } from './verdocs-loader2.js';
+import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$3 } from './verdocs-signature-dialog2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$1 } from './verdocs-toolbar-icon2.js';
 
-const verdocsTemplateFieldsCss = "verdocs-template-fields{position:relative;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}";
+const verdocsTemplateFieldsCss = "verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
-/**
- * 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 iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconMultiline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
 const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
@@ -52,7 +30,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   constructor() {
     super();
     this.__registerHost();
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
+    this.next = createEvent(this, "next", 7);
     this.cancel = createEvent(this, "cancel", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -93,11 +71,11 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[FIELDS] Page rendered', pageInfo);
-    const fields = state.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+    const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     console.log('[FIELDS] Fields on page', fields);
     fields.forEach(field => {
-      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
+      const el = renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
       // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
       if (!el) {
         return;
@@ -106,8 +84,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
         el.setAttribute('roleindex', getRoleIndex(state.roleNames, e.detail));
         // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));
       });
-      el.setAttribute('xScale', pageInfo.renderedPage.xScale);
-      el.setAttribute('yScale', pageInfo.renderedPage.yScale);
+      el.setAttribute('xScale', pageInfo.xScale);
+      el.setAttribute('yScale', pageInfo.yScale);
       interact(el).draggable({
         listeners: {
           start(event) {
@@ -147,13 +125,19 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       },
       page_sequence: 0,
     };
-    if (state.loading) {
+    // TODO: Render a better error
+    if (state.loading || !state.template) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, null, state.template ? (h(Fragment, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onPress: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onPress: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onPress: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onPress: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onPress: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onPress: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onPress: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => console.log('save'), disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => console.log('close'), class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
-        { name: 'page', type: 'canvas' },
-        { name: 'controls', type: 'div' },
-      ] }))) : (h("div", null, "Error loading Template. Please try again later."))));
+    const pages = [...state.template.pages];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    return (h(Host, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onClick: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onClick: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onClick: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onClick: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onClick: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onClick: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onClick: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => { var _a; return (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(state.template); }, disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => { var _a; return (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit(); }, class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("div", { class: "pages" }, pages.map(page => {
+      console.log('rendering page', page);
+      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] }));
+    }))));
   }
   static get style() { return verdocsTemplateFieldsCss; }
 }, [0, "verdocs-template-fields", {
@@ -164,7 +148,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-fields", "verdocs-button", "verdocs-button-panel", "verdocs-document-page", "verdocs-field-signature", "verdocs-loader", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-text-input", "verdocs-toolbar-icon", "verdocs-view", "verdocs-view-envelope-document", "verdocs-view-template-document"];
+  const components = ["verdocs-template-fields", "verdocs-button", "verdocs-button-panel", "verdocs-document-page", "verdocs-field-signature", "verdocs-loader", "verdocs-select-input", "verdocs-signature-dialog", "verdocs-text-input", "verdocs-toolbar-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-template-fields":
       if (!customElements.get(tagName)) {
@@ -172,61 +156,46 @@ function defineCustomElement() {
       }
       break;
     case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "verdocs-button-panel":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "verdocs-document-page":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "verdocs-field-signature":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "verdocs-loader":
+    case "verdocs-button-panel":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "verdocs-select-input":
+    case "verdocs-document-page":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "verdocs-signature-dialog":
+    case "verdocs-field-signature":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "verdocs-text-input":
+    case "verdocs-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "verdocs-toolbar-icon":
+    case "verdocs-select-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "verdocs-view":
+    case "verdocs-signature-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "verdocs-view-envelope-document":
+    case "verdocs-text-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
       break;
-    case "verdocs-view-template-document":
+    case "verdocs-toolbar-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/verdocs-template-fields2.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-fields2.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,wBAAwB,GAAG,s9CAAs9C;;ACWv/C;;;;;;;AAOA,MAAM,kBAAkB,GAAG,CAAC,EAAe,EAAE,GAAW,EAAE,KAAa;;EAErE,MAAM,gBAAgB,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;;EAE5C,MAAM,UAAU,GAAG,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC;EACxE,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG;IACnB,UAAU;OACP,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;OACzC,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;IACjC,GAAG,GAAG,IAAI,KAAK,GAAG;GACnB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,oIAAoI,CAAC;AAE5J,MAAM,aAAa,GACjB,6LAA6L,CAAC;AAEhM,MAAM,SAAS,GACb,oYAAoY,CAAC;AAEvY,MAAM,SAAS,GACb,2pBAA2pB,CAAC;AAE9pB,MAAM,cAAc,GAClB,0sBAA0sB,CAAC;AAE7sB,MAAM,aAAa,GACjB,qWAAqW,CAAC;AAExW,MAAM,WAAW,GAAG,6JAA6J,CAAC;MAWrK,qBAAqB;;;;;;;oBAOI,eAAe,CAAC,UAAU,EAAE;sBAK5B,IAAI;;EAkBxC,MAAM,iBAAiB;;IACrB,IAAI;MACF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;MAE5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACpB,OAAO,CAAC,GAAG,CAAC,yCAAyC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QACxE,OAAO;OACR;MAED,IAAI;QACF,OAAO,CAAC,GAAG,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAC5D,MAAM,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;OACpD;MAAC,OAAO,CAAC,EAAE;QACV,OAAO,CAAC,GAAG,CAAC,iCAAiC,EAAE,CAAC,CAAC,CAAC;QAClD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;OACpF;KACF;IAAC,OAAO,CAAC,EAAE;MACV,OAAO,CAAC,GAAG,CAAC,qCAAqC,EAAE,CAAC,CAAC,CAAC;MACtD,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,MAAM,EAAE,MAAA,CAAC,CAAC,QAAQ,0CAAE,IAAI,CAAC,CAAC,CAAC;KACpF;GACF;EAED,kBAAkB;;;;IAIhB,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC;GAC9D;EAED,MAAM,iBAAiB,CAAC,KAAqB,EAAE,CAAM,EAAE,QAAiB;IACtE,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;GAC/D;EAED,kBAAkB,CAAC,CAAC;IAClB,MAAM,QAAQ,GAAG,CAAC,CAAC,MAA0B,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,wBAAwB,EAAE,QAAQ,CAAC,CAAC;IAEhD,MAAM,MAAM,GAAGA,KAAa,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,aAAa,KAAK,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;;IAE9G,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,CAAC,OAAO,CAAC,KAAK;MAClB,MAAM,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,YAAY,EAAE,YAAY,CAACA,KAAa,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;;MAE/J,IAAI,CAAC,EAAE,EAAE;QACP,OAAO;OACR;MAED,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC;QACvC,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,YAAY,CAACA,KAAa,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;;OAE/E,CAAC,CAAC;MAEH,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;MACxD,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;MAExD,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC;QACrB,SAAS,EAAE;UACT,KAAK,CAAC,KAAK;YACT,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;WAChE;UACD,IAAI,CAAC,KAAK;YACR,MAAM,IAAI,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,MAAM,IAAI,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;YACvD,MAAM,MAAM,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3D,MAAM,MAAM,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;YACtC,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;YACtC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACxC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YACxC,kBAAkB,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,OAAO,IAAI,IAAI,CAAC,CAAC;WACvE;UACD,GAAG,CAAC,KAAK;YACP,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;;;;WAI3C;SACF;OACF,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,SAAS,GAAmB;MAChC,WAAW,EAAE,EAAE;MACf,IAAI,EAAE,MAAM;MACZ,SAAS,EAAE,aAAa;MACxB,IAAI,EAAE,SAAS;MACf,QAAQ,EAAE,IAAI;MACd,OAAO,EAAE;QACP,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;OACL;MACD,aAAa,EAAE,CAAC;KACjB,CAAC;IAEF,IAAIA,KAAa,CAAC,OAAO,EAAE;MACzB,QACE,EAAC,IAAI,QACH,yBAAkB,CACb,EACP;KACH;IAED,QACE,EAAC,IAAI,QACFA,KAAa,CAAC,QAAQ,IACrB,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,YAAY,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAoB,CAAC,IACxE,WAAK,KAAK,EAAC,OAAO,iBAAiB,EACnC,4BAAsB,IAAI,EAAE,cAAc,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,GAAI,EACtH,4BAAsB,IAAI,EAAE,aAAa,EAAE,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAI,EACnH,4BAAsB,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAI,EACpG,4BAAsB,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,GAAI,EACxG,4BAAsB,IAAI,EAAE,cAAc,EAAE,IAAI,EAAC,aAAa,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GAAI,EAC3G,4BAAsB,IAAI,EAAE,aAAa,EAAE,IAAI,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAI,EAC7G,4BAAsB,IAAI,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,GAAI,EACxG,WAAK,KAAK,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,GAAI,EAC3B,cAAQ,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,WAEpE,EACT,cAAQ,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,EAAC,WAAW,YAErD,CACL,EAEN,WAAK,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,IAClE,WAAK,KAAK,EAAC,oBAAoB,IAC7B,WAAK,KAAK,EAAC,OAAO,yBAAyB,EAC3C,+BACE,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,EAAC,EACvH,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,IAAI,GACd,CACE,CACF,EAEN,oBACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,UAAU,EAAE;QACV,EAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC;QAC9B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC;OAChC,GACD,CACO,KAEX,iEAA0D,CAC3D,CACI,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  position: relative;\n  font-family: $verdocs-primary-font;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .fields-bar {\n    height: 50px;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    padding: 5px 20px;\n    line-height: 28px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-blue;\n\n    .label {\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      margin-right: 8px;\n    }\n\n    .icon {\n      margin: 0 4px;\n      display: flex;\n      transform: scale(0.8, 0.8);\n\n      svg {\n        fill: #ffffff;\n      }\n    }\n\n    .operation {\n      border: none;\n      outline: none;\n      color: #ffffff;\n      cursor: pointer;\n      font-size: 16px;\n      margin-left: 10px;\n      background: transparent;\n      text-transform: uppercase;\n\n      &:disabled {\n        color: #cccccc;\n        cursor: inherit;\n        pointer-events: none;\n      }\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host} from '@stencil/core';\nimport {IPageRenderEvent} from '../../embeds/verdocs-view/verdocs-view';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of\n * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the\n * specified component if it's already set and replace it with the new value, without touching the other components that\n * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant\n * to be used for order-sensitive components e.g. translate-then-rotate.\n */\nconst updateCssTransform = (el: HTMLElement, key: string, value: string) => {\n  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'\n  const currentTransform = el.style.transform;\n  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]\n  const components = [...currentTransform.matchAll(/(\\w+)\\(([^)]*)\\)/gi)];\n  el.style.transform = [\n    components //\n      .filter(component => component[1] !== key) // Remove the entry if it's already set\n      .map(component => component[0]), // Convert back the remaining entries\n    `${key}(${value})`,\n  ].join(' ');\n};\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  page0El: HTMLDivElement;\n  toolbarEl: HTMLDivElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      try {\n        console.log(`[FIELDS] Loading template ${this.templateId}`);\n        await loadTemplate(this.endpoint, this.templateId);\n      } catch (e) {\n        console.log('[FIELDS] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[FIELDS] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // console.log('rendered', this.page0El, this.toolbarEl);\n    // console.log('w', this.page0El.clientWidth);\n    // console.log('t', this.toolbarEl.clientWidth);\n    interact.dynamicDrop(true);\n    this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[FIELDS] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[FIELDS] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[FIELDS] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n      });\n\n      el.setAttribute('xScale', pageInfo.renderedPage.xScale);\n      el.setAttribute('yScale', pageInfo.renderedPage.yScale);\n\n      interact(el).draggable({\n        listeners: {\n          start(event) {\n            console.log('[FIELDS] Drag started', event.type, event.target);\n          },\n          move(event) {\n            const oldX = +(event.target.getAttribute('posX') || 0);\n            const oldY = +(event.target.getAttribute('posY') || 0);\n            const xScale = +(event.target.getAttribute('xScale') || 1);\n            const yScale = +(event.target.getAttribute('yScale') || 1);\n            const newX = event.dx / xScale + oldX;\n            const newY = event.dy / yScale + oldY;\n            event.target.setAttribute('posX', newX);\n            event.target.setAttribute('posy', newY);\n            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n          },\n          end(event) {\n            console.log('[FIELDS] Drag ended', event);\n            // event.target.setAttribute('posX', 0);\n            // event.target.setAttribute('posy', 0);\n            // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n          },\n        },\n      });\n    });\n  }\n\n  render() {\n    const testField: ITemplateField = {\n      template_id: '',\n      name: 'test',\n      role_name: 'Recipient 1',\n      type: 'textbox',\n      required: true,\n      setting: {\n        x: 0,\n        y: 0,\n      },\n      page_sequence: 0,\n    };\n\n    if (TemplateStore.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {TemplateStore.template ? (\n          <Fragment>\n            <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n              <div class=\"label\">Add Field:</div>\n              <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onPress={() => console.log('single press')} />\n              <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onPress={() => console.log('multi press')} />\n              <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onPress={() => console.log('check press')} />\n              <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onPress={() => console.log('radio press')} />\n              <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onPress={() => console.log('date press')} />\n              <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onPress={() => console.log('signature press')} />\n              <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onPress={() => console.log('initial press')} />\n              <div style={{flex: '1'}} />\n              <button onClick={() => console.log('save')} disabled={true} class=\"operation\">\n                Save\n              </button>\n              <button onClick={() => console.log('close')} class=\"operation\">\n                Close\n              </button>\n            </div>\n\n            <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n              <div class=\"user-placed-fields\">\n                <div class=\"title\">User-Placed Fields</div>\n                <verdocs-field-signature\n                  field={testField}\n                  style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n                  moveable={true}\n                  editable={true}\n                />\n              </div>\n            </div>\n\n            <verdocs-view\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onPageRendered={e => this.handlePageRendered(e)}\n              pageLayers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          </Fragment>\n        ) : (\n          <div>Error loading Template. Please try again later.</div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-fields2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","./src/components/elements/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  font-family: $verdocs-primary-font;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .fields-bar {\n    height: 50px;\n    display: flex;\n    z-index: 10000;\n    position: fixed;\n    padding: 5px 20px;\n    line-height: 28px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-blue;\n\n    .label {\n      color: #ffffff;\n      font-size: 14px;\n      font-weight: bold;\n      margin-right: 8px;\n    }\n\n    .icon {\n      margin: 0 4px;\n      display: flex;\n      transform: scale(0.8, 0.8);\n\n      svg {\n        fill: #ffffff;\n      }\n    }\n\n    .operation {\n      border: none;\n      outline: none;\n      color: #ffffff;\n      cursor: pointer;\n      font-size: 16px;\n      margin-left: 10px;\n      background: transparent;\n      text-transform: uppercase;\n\n      &:disabled {\n        color: #cccccc;\n        cursor: inherit;\n        pointer-events: none;\n      }\n    }\n  }\n\n  .pages {\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n\n    div,\n    canvas {\n      box-sizing: border-box;\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplate, ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, Host} from '@stencil/core';\nimport {getRoleIndex, renderDocumentField, updateCssTransform} from '../../../utils/utils';\nimport TemplateStore from '../../../utils/templateStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\nconst iconSingleline = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconMultiline =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  page0El: HTMLDivElement;\n  toolbarEl: HTMLDivElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) next: EventEmitter<ITemplate>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      try {\n        console.log(`[FIELDS] Loading template ${this.templateId}`);\n        await loadTemplate(this.endpoint, this.templateId);\n      } catch (e) {\n        console.log('[FIELDS] Error loading template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      }\n    } catch (e) {\n      console.log('[FIELDS] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // console.log('rendered', this.page0El, this.toolbarEl);\n    // console.log('w', this.page0El.clientWidth);\n    // console.log('t', this.toolbarEl.clientWidth);\n    interact.dynamicDrop(true);\n    this.toolbarEl.style.width = `${this.page0El.clientWidth}px`;\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[FIELDS] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[FIELDS] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.pageNumber);\n    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[FIELDS] Fields on page', fields);\n    fields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true, true, true);\n      // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('recipientChanged', e => {\n        el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail));\n        // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));\n      });\n\n      el.setAttribute('xScale', pageInfo.xScale);\n      el.setAttribute('yScale', pageInfo.yScale);\n\n      interact(el).draggable({\n        listeners: {\n          start(event) {\n            console.log('[FIELDS] Drag started', event.type, event.target);\n          },\n          move(event) {\n            const oldX = +(event.target.getAttribute('posX') || 0);\n            const oldY = +(event.target.getAttribute('posY') || 0);\n            const xScale = +(event.target.getAttribute('xScale') || 1);\n            const yScale = +(event.target.getAttribute('yScale') || 1);\n            const newX = event.dx / xScale + oldX;\n            const newY = event.dy / yScale + oldY;\n            event.target.setAttribute('posX', newX);\n            event.target.setAttribute('posy', newY);\n            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n          },\n          end(event) {\n            console.log('[FIELDS] Drag ended', event);\n            // event.target.setAttribute('posX', 0);\n            // event.target.setAttribute('posy', 0);\n            // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n          },\n        },\n      });\n    });\n  }\n\n  render() {\n    const testField: ITemplateField = {\n      template_id: '',\n      name: 'test',\n      role_name: 'Recipient 1',\n      type: 'textbox',\n      required: true,\n      setting: {\n        x: 0,\n        y: 0,\n      },\n      page_sequence: 0,\n    };\n\n    // TODO: Render a better error\n    if (TemplateStore.loading || !TemplateStore.template) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    const pages = [...TemplateStore.template.pages];\n    pages.sort((a, b) => a.sequence - b.sequence);\n\n    return (\n      <Host>\n        <div class=\"fields-bar\" ref={el => (this.toolbarEl = el as HTMLDivElement)}>\n          <div class=\"label\">Add Field:</div>\n          <verdocs-toolbar-icon icon={iconSingleline} text=\"Single-line Text Box\" onClick={() => console.log('single press')} />\n          <verdocs-toolbar-icon icon={iconMultiline} text=\"Multi-line Text Box\" onClick={() => console.log('multi press')} />\n          <verdocs-toolbar-icon icon={iconCheck} text=\"Checkbox\" onClick={() => console.log('check press')} />\n          <verdocs-toolbar-icon icon={iconRadio} text=\"Radio Button\" onClick={() => console.log('radio press')} />\n          <verdocs-toolbar-icon icon={iconDatepicker} text=\"Date Picker\" onClick={() => console.log('date press')} />\n          <verdocs-toolbar-icon icon={iconSignature} text=\"Signature\" onClick={() => console.log('signature press')} />\n          <verdocs-toolbar-icon icon={iconInitial} text=\"Initials\" onClick={() => console.log('initial press')} />\n          <div style={{flex: '1'}} />\n          <button onClick={() => this.next?.emit(TemplateStore.template)} disabled={true} class=\"operation\">\n            Save\n          </button>\n          <button onClick={() => this.cancel?.emit()} class=\"operation\">\n            Close\n          </button>\n        </div>\n\n        <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>\n          <div class=\"user-placed-fields\">\n            <div class=\"title\">User-Placed Fields</div>\n            <verdocs-field-signature\n              field={testField}\n              style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}\n              moveable={true}\n              editable={true}\n            />\n          </div>\n        </div>\n\n        <div class=\"pages\">\n          {pages.map(page => {\n            console.log('rendering page', page);\n            return (\n              <verdocs-document-page\n                pageImageUri={page.display_uri}\n                virtualWidth={612}\n                virtualHeight={792}\n                pageNumber={page.sequence}\n                onPageRendered={e => this.handlePageRendered(e)}\n                layers={[\n                  {name: 'page', type: 'canvas'},\n                  {name: 'controls', type: 'div'},\n                ]}\n              />\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -16,7 +16,7 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.cancel = createEvent(this, "cancel", 7);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
+    this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
@@ -48,10 +48,6 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
-  handleMessageChange(e) {
-    console.log(e);
-    // this.message = e.target.value;
-  }
   handleCancel(e) {
     var _a;
     e.stopPropagation();
@@ -60,32 +56,15 @@ const VerdocsTemplateProperties = /*@__PURE__*/ proxyCustomElement(class extends
   handleSubmit(e) {
     var _a;
     e.stopPropagation();
-    console.log('new', {
-      name: this.name,
-      visibility: this.visibility,
-      firstReminderDays: +this.firstReminderDays,
-      reminderDays: +this.reminderDays,
-      sendReminders: this.sendReminders,
-    });
-    (_a = this.settingsUpdated) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       name: this.name,
       firstReminderDays: +this.firstReminderDays,
       reminderDays: +this.reminderDays,
       sendReminders: this.sendReminders,
     });
-    // this.contactSelected?.emit({
-    //   delegator: this.delegator,
-    // });
   }
   render() {
-    console.log('vals', { firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name });
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => {
-        this.name = e.target.value;
-      } })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onSelected: e => (this.sendReminders = e.detail.value === 'on') })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private" }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => (this.name = e.target.value) })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => (this.sendReminders = e.target.checked) })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => (this.firstReminderDays = e.target.value) })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => (this.reminderDays = e.target.value) }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private", onChange: () => (this.visibility = 'private') }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared", onChange: () => (this.visibility = 'shared') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public", onChange: () => (this.visibility = 'shared_public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: this.visibility === 'public', value: "public", onChange: () => (this.visibility = 'public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
   }
   static get style() { return verdocsTemplatePropertiesCss; }
 }, [0, "verdocs-template-properties", {

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

@@ -1 +1 @@
-{"file":"verdocs-template-properties2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 14px;\n      font-weight: 400;\n      margin: 0 0 6px 0;\n    }\n\n    .row {\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    fieldset {\n      width: 440px;\n      border: none;\n      max-width: 100%;\n      margin: 0 0 20px 0;\n      box-sizing: border-box;\n      padding: 20px 20px 10px 20px;\n      background-color: $verdocs-grey-4;\n      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .input-row {\n      display: flex;\n      margin: 0 0 10px 0;\n      align-items: center;\n      flex-direction: row;\n\n      label {\n        flex: 1;\n        display: flex;\n      }\n\n      verdocs-text-input {\n        margin: 0;\n        display: flex;\n        flex: 0 0 40px;\n\n        input {\n          text-align: center;\n        }\n      }\n\n      verdocs-checkbox {\n        display: flex;\n        flex: 0 0 40px;\n        justify-content: center;\n      }\n    }\n\n    .radio-row {\n      display: flex;\n      position: relative;\n      margin: 0 0 10px 0;\n      flex-direction: row;\n\n      verdocs-radio-button {\n        display: flex;\n        flex: 0 0 30px;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/**\n * Displays a collection of settings boxes that allow a user to configure a template's behavior.\n */\n@Component({\n  tag: 'verdocs-template-properties',\n  styleUrl: 'verdocs-template-properties.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateProperties {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) settingsUpdated: EventEmitter<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n  @State() name: string = '';\n  @State() visibility: string = '';\n  @State() sendReminders = false;\n  @State() firstReminderDays = '1';\n  @State() reminderDays = '1';\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n      if (!template) {\n        console.log('[PREVIEW] Unable to load template');\n        return;\n      }\n\n      console.log('[PROPERTIES] Got template', template);\n      this.template = template;\n      TemplateStore.template = template;\n      this.name = template.name;\n      this.sendReminders = template.reminder_id !== null;\n    } catch (e) {\n      console.log('[PROPERTIES] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleMessageChange(e: any) {\n    console.log(e);\n    // this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    console.log('new', {\n      name: this.name,\n      visibility: this.visibility,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n    this.settingsUpdated?.emit({\n      name: this.name,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n\n    // this.contactSelected?.emit({\n    //   delegator: this.delegator,\n    // });\n  }\n\n  render() {\n    console.log('vals', {firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name});\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Template Name</h5>\n        <fieldset>\n          <verdocs-text-input\n            value={this.name}\n            autocomplete=\"off\"\n            onInput={(e: any) => {\n              this.name = e.target.value;\n            }}\n          />\n        </fieldset>\n\n        <h5>Reminders</h5>\n        <fieldset>\n          <div class=\"input-row\">\n            <label>Send Automatic Reminders</label>\n            <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onSelected={e => (this.sendReminders = e.detail.value === 'on')} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input\n              value={this.firstReminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input\n              value={this.reminderDays}\n              onInput={(e: any) => {\n                this.firstReminderDays = e.target.value;\n              }}\n            />\n          </div>\n        </fieldset>\n\n        <h5>Template Visibility</h5>\n        <fieldset>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-private\">\n              <div class=\"title\">Private</div>\n              <div class=\"description\">Only you can share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n              <div class=\"title\">Shared to your organization</div>\n              <div class=\"description\">Give access to your organization to share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n              <div class=\"title\">Shared to your organization and Public</div>\n              <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"public\" />\n            <label htmlFor=\"verdocs-radio-button-visibility-public\">\n              <div class=\"title\">Public</div>\n              <div class=\"description\">Anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n        </fieldset>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onPress={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onPress={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"verdocs-template-properties2.js","mappings":"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","names":["TemplateStore"],"sources":["./src/components/elements/verdocs-template-properties/verdocs-template-properties.scss?tag=verdocs-template-properties","./src/components/elements/verdocs-template-properties/verdocs-template-properties.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-properties {\n  font-family: $verdocs-primary-font;\n\n  form {\n    display: flex;\n    flex-direction: column;\n\n    h5 {\n      font-size: 14px;\n      font-weight: 400;\n      margin: 0 0 6px 0;\n    }\n\n    .row {\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    fieldset {\n      width: 440px;\n      border: none;\n      max-width: 100%;\n      margin: 0 0 20px 0;\n      box-sizing: border-box;\n      padding: 20px 20px 10px 20px;\n      background-color: $verdocs-grey-4;\n      box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .input-row {\n      display: flex;\n      margin: 0 0 10px 0;\n      align-items: center;\n      flex-direction: row;\n\n      label {\n        flex: 1;\n        display: flex;\n      }\n\n      verdocs-text-input {\n        margin: 0;\n        display: flex;\n        flex: 0 0 40px;\n\n        input {\n          text-align: center;\n        }\n      }\n\n      verdocs-checkbox {\n        display: flex;\n        flex: 0 0 40px;\n        justify-content: center;\n      }\n    }\n\n    .radio-row {\n      display: flex;\n      position: relative;\n      margin: 0 0 10px 0;\n      flex-direction: row;\n\n      verdocs-radio-button {\n        display: flex;\n        flex: 0 0 30px;\n      }\n\n      label {\n        display: flex;\n        flex-direction: column;\n\n        .title {\n          font-size: 16px;\n          font-weight: 500;\n        }\n\n        .description {\n          font-size: 14px;\n          font-weight: 400;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {SDKError} from '../../../utils/errors';\nimport TemplateStore from '../../../utils/templateStore';\n\n/**\n * Displays a collection of settings boxes that allow a user to configure a template's behavior.\n */\n@Component({\n  tag: 'verdocs-template-properties',\n  styleUrl: 'verdocs-template-properties.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateProperties {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user completes the step.\n   */\n  @Event({composed: true}) next: EventEmitter<{name: string; sendReminders: boolean; firstReminderDays: number; reminderDays: number}>;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n  @State() name: string = '';\n  @State() visibility: string = '';\n  @State() sendReminders = false;\n  @State() firstReminderDays = '1';\n  @State() reminderDays = '1';\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      console.log(`[PROPERTIES] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n      if (!template) {\n        console.log('[PREVIEW] Unable to load template');\n        return;\n      }\n\n      console.log('[PROPERTIES] Got template', template);\n      this.template = template;\n      TemplateStore.template = template;\n      this.name = template.name;\n      this.sendReminders = template.reminder_id !== null;\n    } catch (e) {\n      console.log('[PROPERTIES] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.next?.emit({\n      name: this.name,\n      firstReminderDays: +this.firstReminderDays,\n      reminderDays: +this.reminderDays,\n      sendReminders: this.sendReminders,\n    });\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <h5>Template Name</h5>\n        <fieldset>\n          <verdocs-text-input value={this.name} autocomplete=\"off\" onInput={(e: any) => (this.name = e.target.value)} />\n        </fieldset>\n\n        <h5>Reminders</h5>\n        <fieldset>\n          <div class=\"input-row\">\n            <label>Send Automatic Reminders</label>\n            <verdocs-checkbox name=\"automatic-reminders\" checked={this.sendReminders} value=\"on\" onInput={(e: any) => (this.sendReminders = e.target.checked)} />\n          </div>\n\n          <div class=\"input-row\">\n            <label>Days Before First Reminder</label>\n            <verdocs-text-input value={this.firstReminderDays} onInput={(e: any) => (this.firstReminderDays = e.target.value)} />\n          </div>\n          <div class=\"input-row\">\n            <label>Days Between Reminders</label>\n            <verdocs-text-input value={this.reminderDays} onInput={(e: any) => (this.reminderDays = e.target.value)} />\n          </div>\n        </fieldset>\n\n        <h5>Template Visibility</h5>\n        <fieldset>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"private\" onChange={() => (this.visibility = 'private')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-private\">\n              <div class=\"title\">Private</div>\n              <div class=\"description\">Only you can share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared\" onChange={() => (this.visibility = 'shared')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared\">\n              <div class=\"title\">Shared to your organization</div>\n              <div class=\"description\">Give access to your organization to share and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={true} value=\"shared_public\" onChange={() => (this.visibility = 'shared_public')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-shared_public\">\n              <div class=\"title\">Shared to your organization and Public</div>\n              <div class=\"description\">Give access to your organization to share this template, and anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n          <div class=\"radio-row\">\n            <verdocs-radio-button name=\"visibility\" checked={this.visibility === 'public'} value=\"public\" onChange={() => (this.visibility = 'public')} />\n            <label htmlFor=\"verdocs-radio-button-visibility-public\">\n              <div class=\"title\">Public</div>\n              <div class=\"description\">Anyone on the Web can find and use this template</div>\n            </label>\n          </div>\n        </fieldset>\n\n        <div class=\"buttons\">\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-template-recipients2.js

@@ -33,8 +33,7 @@ const VerdocsTemplateRecipients = /*@__PURE__*/ proxyCustomElement(class extends
     this.__registerHost();
     this.searchContacts = createEvent(this, "searchContacts", 7);
     this.cancel = createEvent(this, "cancel", 7);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
-    this.contactSelected = createEvent(this, "contactSelected", 7);
+    this.next = createEvent(this, "next", 7);
     this.sequences = [];
     this.rolesAtSequence = {};
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -195,17 +194,16 @@ const VerdocsTemplateRecipients = /*@__PURE__*/ proxyCustomElement(class extends
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
-    var _a, _b;
+    var _a;
     e.stopPropagation();
     this.showSuggestions = false;
-    (_a = this.contactSelected) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       full_name: this.name,
       email: this.email,
       phone: this.phone,
       message: this.message,
       delegator: this.delegator,
     });
-    (_b = this.settingsUpdated) === null || _b === void 0 ? void 0 : _b.emit({});
   }
   render() {
     console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));
@@ -214,9 +212,9 @@ const VerdocsTemplateRecipients = /*@__PURE__*/ proxyCustomElement(class extends
     return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Participant Order"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[this.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" }))), this.sequences.map(sequence => (h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence }), this.rolesAtSequence[sequence].map(role => {
       beforeOrder = role.order;
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence })));
-    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { open: true, value: this.sender, onCancel: () => (this.showingSenderDialog = false), onDone: e => {
+    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { value: this.sender, onCancel: () => (this.showingSenderDialog = false), onNext: e => {
         this.showingSenderDialog = false;
-        this.sender = e.detail.sender;
+        this.sender = e.detail;
       } }))));
   }
   static get style() { return verdocsTemplateRecipientsCss; }