@verdocs/web-sdk 1.14.5 → 1.14.8

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

@@ -2,6 +2,9 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { i as interact } from './interact.min.js';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
+import { u as updateField } from './Fields.js';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -11,7 +14,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox .resizer{position:absolute;bottom:1px;right:1px;width:8px;height:8px;z-index:9999}verdocs-field-textbox .resizer:hover{cursor:nwse-resize}verdocs-field-textbox .resizer .resizer-inner{position:absolute;bottom:0}verdocs-field-textbox .resizer .resizer-inner:before{position:absolute;top:-4px;left:-0.5px;content:\"\";display:block;width:10px;height:1px;background-color:rgba(0, 0, 0, 0.32);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}verdocs-field-textbox .resizer .resizer-inner:after{position:absolute;top:-1.5px;left:4.5px;content:\"\";display:block;width:5px;height:1px;background-color:rgba(0, 0, 0, 0.32);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
+const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -20,6 +23,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -48,30 +52,42 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   componentDidRender() {
     interact.dynamicDrop(true);
     if (this.editable) {
-      interact(this.resizeHandle).resizable({
+      interact(this.el).resizable({
+        edges: { top: false, bottom: false, left: true, right: true },
         listeners: {
-          start(event) {
-            console.log('[TEXTBOX] Resize started', event.type, event.target);
-          },
+          start: this.handleResizeStart.bind(this),
           move: this.handleResize.bind(this),
-          end(event) {
-            console.log('[TEXTBOX] Resize end', event);
-          },
+          end: this.handleResizeEnd.bind(this),
         },
       });
     }
   }
-  handleResize(event) {
-    console.log('[TEXTBOX] Resize', event.delta);
-    const oldX = +(event.target.getAttribute('resizeX') || 0);
-    const oldY = +(event.target.getAttribute('resizeY') || 0);
-    const newX = event.dx + oldX;
-    const newY = event.dy + oldY;
-    this.el.style.width = `${parseFloat(this.el.style.width || '0') + event.dx}px`;
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(e) {
+    console.log('resize', e);
+    const oldX = +(e.target.getAttribute('resizeX') || 0);
+    const oldY = +(e.target.getAttribute('resizeY') || 0);
+    const newX = e.dx + oldX;
+    const newY = e.dy + oldY;
+    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
     // Single line text fields are not resizeable in height
     // this.el.style.height = `${parseFloat(this.el.style.height || '0') + event.dy}px`;
-    event.target.setAttribute('resizeX', newX);
-    event.target.setAttribute('resizeY', newY);
+    e.target.setAttribute('resizeX', newX);
+    e.target.setAttribute('resizeY', newY);
+  }
+  handleResizeEnd(e) {
+    console.log('resizeEnd', e);
+    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
+    const settings = getFieldSettings(this.field);
+    const newWidth = (settings.width || 150) + resizeWidth;
+    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth) };
+    delete newSettings['result'];
+    updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
+      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .catch(e => console.log('Field update failed', e));
   }
   render() {
     var _a, _b, _c, _d;
@@ -85,7 +101,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: this.field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -98,6 +114,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   get el() { return this; }
   static get style() { return verdocsFieldTextboxCss; }
 }, [0, "verdocs-field-textbox", {
+    "endpoint": [16],
     "templateid": [1],
     "field": [16],
     "disabled": [4],

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
+import { F as FORMAT_TIMESTAMP } from './Types2.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -52,7 +53,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
-    const formatted = format(dt, 'PPpp');
+    const formatted = format(dt, FORMAT_TIMESTAMP);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, formatted);
     }

package/dist/components/verdocs-sign.js

@@ -6,6 +6,7 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
 import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
+import { a as FORMAT_DATE } from './Types2.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -271,7 +272,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'date':
         const iso = e.target.getAttribute('iso');
         console.log('Formatting date for save', iso);
-        const formatted = format(new Date(iso), 'PP');
+        const formatted = format(new Date(iso), FORMAT_DATE);
         console.log('Formatted', formatted);
         return this.saveFieldChange(field.name, { prepared: false, value: formatted });
       case 'timestamp':

package/dist/components/verdocs-status-indicator.js

@@ -7413,9 +7413,10 @@ const VerdocsStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
         return 'Submitted';
       case 'some-signed':
         return 'Partly Signed';
-      default:
       case 'pending':
         return 'Pending';
+      default:
+        return status;
     }
   }
   render() {

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

@@ -311,7 +311,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       var _a, _b;
       this.dirty = false;
       this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -349,7 +349,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       var _a, _b;
       this.dirty = false;
       this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {

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

@@ -112,16 +112,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', () => {
+    el.addEventListener('settingsChanged', e => {
       var _a, _b, _c, _d;
+      console.log('[FIELDS] settingsChanged', e.detail);
+      Object.assign(field.setting, e.detail.settings);
       this.selectedRoleName = field.role_name;
-      console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
       el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
       (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
-      console.log('Re-rendering field', field.name, pageInfo.pageNumber);
+      console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
       this.reRenderField(field, pageInfo.pageNumber);
       const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
       if (!newEl) {