@verdocs/web-sdk 1.9.10 → 1.9.15

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>';
@@ -93,21 +71,18 @@ 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.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
+      const el = renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), { disabled: true, editable: true, draggable: true });
       if (!el) {
         return;
       }
-      el.addEventListener('recipientChanged', e => {
-        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.addEventListener('input', e => this.handleFieldChange(field, e));
+      el.addEventListener('recipientChanged', e => el.setAttribute('roleindex', getRoleIndex(state.roleNames, e.detail)));
+      el.setAttribute('xScale', pageInfo.xScale);
+      el.setAttribute('yScale', pageInfo.yScale);
       interact(el).draggable({
         listeners: {
           start(event) {
@@ -147,13 +122,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", 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("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 +145,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 +153,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":"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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  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 {ITemplate, 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}) 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 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\" 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            <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), {disabled: true, editable: true, draggable: true});\n      if (!el) {\n        return;\n      }\n\n      el.addEventListener('input', e => this.handleFieldChange(field, e));\n      el.addEventListener('recipientChanged', e => el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, e.detail)));\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-view.js

@@ -1,4 +1,300 @@
-import { V as VerdocsView$1, d as defineCustomElement$1 } from './verdocs-view2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { a as getEnvelopeById, u as updateEnvelopeField, s as state } from './Envelopes.js';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { r as renderDocumentField, a as getRoleIndex } from './utils.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$3 } from './verdocs-document-page2.js';
+import { d as defineCustomElement$2 } from './verdocs-loader2.js';
+
+const verdocsViewCss = "verdocs-view{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;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-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+
+const VerdocsView$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.envelopeId) {
+      console.error(`[VIEW] Missing reuqired envelopeId`);
+      return;
+    }
+    try {
+      await getEnvelopeById(this.endpoint, this.envelopeId);
+    }
+    catch (e) {
+      (_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));
+    }
+  }
+  // Determine whether a page is "rotated" (in either direction)
+  // isRotated(rotation) {
+  //   return rotation !== 0 && rotation % 180 !== 0;
+  // }
+  // Render one document page. Note that pageNumber is 1-based.
+  // async renderPage(pageNumber: number): Promise<void> {
+  //   const domPage = this.domPages[pageNumber];
+  //
+  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.
+  //   if (!domPage) {
+  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});
+  //     return;
+  //   }
+  //
+  //   const pageMetrics = this.sourcePageMetrics[pageNumber];
+  //
+  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});
+  //   try {
+  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);
+  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});
+  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);
+  //
+  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;
+  //     // if (!canvas) {
+  //     //   console.log('[VIEW] Unable to find canvas element');
+  //     //   return;
+  //     // }
+  //     //
+  //     // canvas.width = domPage.renderedWidth;
+  //     // canvas.height = domPage.renderedHeight;
+  //     // const canvasContext = canvas.getContext('2d');
+  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);
+  //     // await pdfPage.render({canvasContext, viewport});
+  //
+  //     this.pageRendered.emit({
+  //       renderedPage: domPage,
+  //       sourcePageMetrics: pageMetrics,
+  //       pages: this.domPages,
+  //     });
+  //   } catch (e) {
+  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //     console.warn('[VIEW] Error rendering page', e);
+  //   }
+  // }
+  // async renderPages(): Promise<void> {
+  //   const pageNumbersToRender = integerSequence(1, this.numPages);
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     try {
+  //       await this.renderPage(pageNumber);
+  //     } catch (e) {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.warn('[VIEW] Error rendering pages', e);
+  //     }
+  //   }
+  // }
+  // onProgress(progress: OnProgressParameters) {
+  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);
+  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);
+  // }
+  // After a document is done loading, go through its pages to get their dimensions
+  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {
+  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);
+  //
+  //   for await (let pageNumber of pageNumbersToRender) {
+  //     const pdfPage = await pdfDocument.getPage(1);
+  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;
+  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};
+  //   }
+  //
+  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);
+  // }
+  // loadAndRender(src: string): void {
+  //   console.log('[VIEW] Loading', src);
+  //
+  //   const token = this.endpoint.getToken();
+  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};
+  //
+  //   const source = {
+  //     url: src,
+  //     cMapUrl: CMAPS_URL,
+  //     cMapPacked: true,
+  //     httpHeaders,
+  //     withCredentials: true,
+  //     stopAtErrors: true,
+  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,
+  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,
+  //   } as DocumentInitParameters;
+  //
+  //   // @ts-ignore
+  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);
+  //   loadingTask.onProgress = this.onProgress;
+  //   loadingTask.promise
+  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {
+  //       await this.parsePageMetrics(pdfDocument);
+  //
+  //       this.pdfDocument = pdfDocument;
+  //       this.numPages = pdfDocument.numPages;
+  //       this.fingerprints = pdfDocument.fingerprints;
+  //       console.log(`[VIEW] Got PDF document fingerprints "${this.fingerprints.join(', ')}", ${this.numPages} page(s)`);
+  //
+  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in
+  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.
+  //       this.loadProgress = 100;
+  //     })
+  //     .catch(e => {
+  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));
+  //       console.log('[VIEW] Loading error', e);
+  //     });
+  // }
+  // async handlePageRendered(e: any) {
+  //   e.stopPropagation();
+  //
+  //   const domPage = e.detail as IDocumentPageInfo;
+  //   this.domPages[domPage.pageNumber] = domPage;
+  //   await this.renderPage(domPage.pageNumber);
+  // }
+  async handleFieldChange(field, e, optionId) {
+    console.log('fieldChange', field, e);
+    switch (field.type) {
+      case 'textbox':
+        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c, _d, _e, _f;
+          (_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));
+          if (((_d = e.response) === null || _d === void 0 ? void 0 : _d.status) === 401 && ((_f = (_e = e.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error) === 'jwt expired') {
+            console.log('jwt expired');
+          }
+          console.log('Error updating', e);
+        });
+        break;
+      case 'checkbox_group':
+        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_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));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'radio_button_group':
+        const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
+        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: { options } })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_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));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'dropdown':
+        updateEnvelopeField(this.endpoint, this.envelopeId, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => {
+          var _a, _b, _c;
+          (_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));
+          console.log('Error updating', e);
+        });
+        break;
+      case 'initial':
+        console.log('Got initial', e.detail);
+        break;
+      case 'signature':
+        console.log('Got signature', e.detail);
+        break;
+    }
+  }
+  handlePageRendered(e) {
+    const pageInfo = e.detail;
+    console.log('[SIGN] Page rendered', pageInfo);
+    state.envelope.recipients.map(recipient => {
+      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);
+      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+      console.log('[SIGN] Fields on page', fields);
+      fields.forEach(field => {
+        const el = renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.recipient_role), { disabled: true, editable: false, draggable: false });
+        if (!el) {
+          return;
+        }
+        el.addEventListener('input', e => {
+          console.log('Field input', e.target.value, e.target);
+          this.handleFieldChange(field, e);
+        });
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+        // interact(el).draggable({
+        //   listeners: {
+        //     start(event) {
+        //       console.log('[FIELDS] Drag started', event.type, event.target);
+        //     },
+        //     move(event) {
+        //       const oldX = +(event.target.getAttribute('posX') || 0);
+        //       const oldY = +(event.target.getAttribute('posY') || 0);
+        //       const xScale = +(event.target.getAttribute('xScale') || 1);
+        //       const yScale = +(event.target.getAttribute('yScale') || 1);
+        //       const newX = event.dx / xScale + oldX;
+        //       const newY = event.dy / yScale + oldY;
+        //       event.target.setAttribute('posX', newX);
+        //       event.target.setAttribute('posy', newY);
+        //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+        //     },
+        //     end(event) {
+        //       console.log('[FIELDS] Drag ended', event);
+        //       // event.target.setAttribute('posX', 0);
+        //       // event.target.setAttribute('posy', 0);
+        //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);
+        //     },
+        //   },
+        // });
+      });
+    });
+  }
+  render() {
+    var _a;
+    console.log('[VIEW] Rendering', state.error, state.loading, state.envelope);
+    if (state.loading || !state.envelope) {
+      return (h(Host, null, h("verdocs-loader", null)));
+    }
+    if (state.error) {
+      return (h(Host, null, h("div", null, state.error)));
+    }
+    return (h(Host, null, (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.documents) || []).map(envelopeDocument => {
+      const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];
+      pages.sort((a, b) => a.sequence - b.sequence);
+      return (h(Fragment, null, pages.map(page => (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' },
+        ] })))));
+    })));
+  }
+  get component() { return this; }
+  static get style() { return verdocsViewCss; }
+}, [0, "verdocs-view", {
+    "endpoint": [16],
+    "envelopeId": [1, "envelope-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-view", "verdocs-document-page", "verdocs-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-view":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsView$1);
+      }
+      break;
+    case "verdocs-document-page":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const VerdocsView = VerdocsView$1;
 const defineCustomElement = defineCustomElement$1;