@verdocs/web-sdk 1.14.7 → 1.14.9

package/dist/components/Toast.js

@@ -1,76 +1,3 @@
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-/**
- * Update a recipient's status block
- */
-var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, endpoint.api //
-                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
-                .then(function (r) { return r.data; })];
-    });
-}); };
-/**
- * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
- */
-var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
-};
-/**
- * Decline to complete an envelope (signing will not terminated).
- */
-var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
-};
-/**
- * Agree to electronic signing.
- */
-var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
-};
-/**
- * Get an in-person signing link.
- */
-var getInPersonLink = function (endpoint, envelopeId, roleName) {
-    return endpoint.api //
-        .get("/envelopes/".concat(envelopeId, "/recipients/").concat(encodeURIComponent(roleName), "?in_person_link=true"))
-        .then(function (r) { return r.data; });
-};
-
 /**
  * Simple helper to display basic toast messages. These toasts do not stack, and
  * because of this are meant to be used only for infrequent notifications (those
@@ -135,4 +62,4 @@ box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232
   setTimeout(removeToasts, duration);
 };
 
-export { VerdocsToast as V, envelopeRecipientDecline as a, envelopeRecipientSubmit as b, envelopeRecipientAgree as e, getInPersonLink as g };
+export { VerdocsToast as V };

package/dist/components/index.d.ts

@@ -50,7 +50,6 @@ export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../t
 export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
 export { VerdocsTemplateFields as VerdocsTemplateFields } from '../types/components/templates/verdocs-template-fields/verdocs-template-fields';
 export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/templates/verdocs-template-name/verdocs-template-name';
-export { VerdocsTemplateProperties as VerdocsTemplateProperties } from '../types/components/templates/verdocs-template-properties/verdocs-template-properties';
 export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/components/templates/verdocs-template-reminders/verdocs-template-reminders';
 export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
 export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-roles/verdocs-template-roles';

package/dist/components/index.js

@@ -50,7 +50,6 @@ export { VerdocsTemplateDocumentPage, defineCustomElement as defineCustomElement
 export { VerdocsTemplateFieldProperties, defineCustomElement as defineCustomElementVerdocsTemplateFieldProperties } from './verdocs-template-field-properties.js';
 export { VerdocsTemplateFields, defineCustomElement as defineCustomElementVerdocsTemplateFields } from './verdocs-template-fields.js';
 export { VerdocsTemplateName, defineCustomElement as defineCustomElementVerdocsTemplateName } from './verdocs-template-name.js';
-export { VerdocsTemplateProperties, defineCustomElement as defineCustomElementVerdocsTemplateProperties } from './verdocs-template-properties.js';
 export { VerdocsTemplateReminders, defineCustomElement as defineCustomElementVerdocsTemplateReminders } from './verdocs-template-reminders.js';
 export { VerdocsTemplateRoleProperties, defineCustomElement as defineCustomElementVerdocsTemplateRoleProperties } from './verdocs-template-role-properties.js';
 export { VerdocsTemplateRoles, defineCustomElement as defineCustomElementVerdocsTemplateRoles } from './verdocs-template-roles.js';

package/dist/components/verdocs-auth.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import './Types.js';
+import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$5 } from './verdocs-button2.js';
-import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$4 } from './verdocs-button2.js';
+import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
 /**
@@ -41,7 +41,6 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.password = '';
     this.loggingIn = false;
     this.activeSession = null;
-    this.loginError = null;
   }
   componentWillLoad() {
     var _a, _b;
@@ -69,15 +68,13 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: true, session: this.endpoint.session });
     })
       .catch(e => {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d;
       console.log('[AUTH] Authentication error', e.response, JSON.stringify(e));
       this.loggingIn = false;
       this.activeSession = null;
       (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
       (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
-      if (((_e = e === null || e === void 0 ? void 0 : e.response) === null || _e === void 0 ? void 0 : _e.status) === 403) {
-        this.loginError = 'Please check your username and password and try again.';
-      }
+      VerdocsToast('Login failed. Please check your username and password and try again.', { style: 'error' });
     });
   }
   handleLogout() {
@@ -86,20 +83,17 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.isAuthenticated = false;
     (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
   }
-  handleClearError() {
-    this.loginError = null;
-  }
   render() {
     if (!this.visible) {
       return h("div", { style: { display: 'none' } }, "Authenticated");
     }
     if (this.isAuthenticated) {
-      return h("div", { class: "status-result" }, "Authenticated");
+      return (h("verdocs-button", { label: "Sign Out", disabled: this.loggingIn, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
     }
     if (this.displayMode === 'signup') {
       return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Signup", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
     }
-    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } })), this.loginError ? h("verdocs-ok-dialog", { heading: "Login Error", message: this.loginError, onNext: () => this.handleClearError() }) : h("div", null)));
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
   }
   static get style() { return verdocsAuthCss; }
 }, [0, "verdocs-auth", {
@@ -111,14 +105,13 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "username": [32],
     "password": [32],
     "loggingIn": [32],
-    "activeSession": [32],
-    "loginError": [32]
+    "activeSession": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-ok-dialog", "verdocs-text-input"];
+  const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-auth":
       if (!customElements.get(tagName)) {
@@ -126,16 +119,11 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "verdocs-ok-dialog":
+    case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-checkbox2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const verdocsCheckboxCss = "@charset \"UTF-8\";verdocs-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
+const verdocsCheckboxCss = "@charset \"UTF-8\";verdocs-checkbox{line-height:18px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
 
 const VerdocsCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-envelope-recipient-summary2.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRecipientsWithActions, r as recipientCanAct } from './Permissions.js';
-import { V as VerdocsToast, g as getInPersonLink } from './Toast.js';
+import { g as getInPersonLink } from './Recipients.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { c as createStore } from './index3.js';
 import { d as getEnvelope } from './Envelopes.js';
+import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 

package/dist/components/verdocs-envelope-sidebar.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$3 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$2 } from './verdocs-envelope-recipient-summary2.js';
 import { f as format } from './index2.js';
 
-const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar .title{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
+const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .side-buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .side-buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex;overflow-y:scroll}verdocs-envelope-sidebar .title{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize;font-size:14px;padding:3px 0}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
 
 const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;
 const Users = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>`;

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

@@ -10,7 +10,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 verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -10,7 +10,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 verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
+const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
 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 VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -1,6 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { u as updateField } from './Fields.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
+import { i as interact } from './interact.min.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';
@@ -10,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 verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea 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-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldTextareaCss = "verdocs-field-textarea{width:150px;height:15px;display:block;font-size:11px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{width:100%;height:100%;resize:none;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-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea 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-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 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 VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -19,6 +23,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     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;
@@ -29,7 +34,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.rerender = 0;
   }
   async focusField() {
-    this.el.focus();
+    this.inputEl.focus();
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
@@ -44,6 +49,45 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     }
     // TemplateStore.updateCount++;
   }
+  componentDidRender() {
+    interact.dynamicDrop(true);
+    if (this.editable) {
+      interact(this.el).resizable({
+        edges: { top: true, bottom: true, left: true, right: true },
+        listeners: {
+          start: this.handleResizeStart.bind(this),
+          move: this.handleResize.bind(this),
+          end: this.handleResizeEnd.bind(this),
+        },
+      });
+    }
+  }
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(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`;
+    this.el.style.height = `${parseFloat(this.el.style.height || '0') + e.dy}px`;
+    e.target.setAttribute('resizeX', newX);
+    e.target.setAttribute('resizeY', newY);
+  }
+  handleResizeEnd(e) {
+    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
+    const resizeHeight = +(e.target.getAttribute('resizeY') || 0);
+    const settings = getFieldSettings(this.field);
+    const newWidth = (settings.width || 150) + resizeWidth;
+    const newHeight = (settings.height || 41) + resizeHeight;
+    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth), height: Math.round(newHeight) };
+    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;
     const settings = getFieldSettings(this.field);
@@ -52,7 +96,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.inputEl = el) }), 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();
@@ -62,8 +106,10 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
         return this.hideSettingsPanel();
       } })))));
   }
+  get el() { return this; }
   static get style() { return verdocsFieldTextareaCss; }
 }, [0, "verdocs-field-textarea", {
+    "endpoint": [16],
     "templateid": [1],
     "field": [16],
     "disabled": [4],

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

@@ -1,5 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
+import './Types.js';
+import { u as updateField } from './Fields.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.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,40 @@ 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) {
+    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) {
+    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 +99,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 +112,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-sign.js

@@ -1,13 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes.js';
 import { R as RecipientStates } from './Types.js';
-import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, V as VerdocsToast, b as envelopeRecipientSubmit } from './Toast.js';
+import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, b as envelopeRecipientSubmit } from './Recipients.js';
 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 { V as VerdocsToast } from './Toast.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$6 } from './verdocs-dropdown2.js';

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

@@ -7199,7 +7199,7 @@ function RecipientFlow() {
   };
 }
 
-const verdocsStatusIndicatorCss = "verdocs-status-indicator{display:-ms-flexbox;display:flex;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;padding:4px 12px;border-radius:6px;color:#33364b;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-status-indicator.has-document:hover{cursor:pointer;background:rgba(0, 0, 0, 0.1)}verdocs-status-indicator .icon{width:25px;height:25px;margin:0 10px -4px 0}verdocs-status-indicator.dark{color:#ffffff}verdocs-status-indicator.small{font-size:16px}verdocs-status-indicator.small .icon{width:20px;height:20px;margin:0 8px -4px 0}verdocs-status-indicator .detail-panel{display:none;background:#ffffff;border:1px solid #1e2031;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;border-radius:10px;font-weight:500}verdocs-status-indicator .detail-panel h1{font-size:44px;color:#092c4c}verdocs-status-indicator .detail-panel[data-show]{display:-ms-flexbox;display:flex}";
+const verdocsStatusIndicatorCss = "verdocs-status-indicator{display:-ms-flexbox;display:flex;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-status-indicator.has-document:hover{cursor:pointer;background:rgba(0, 0, 0, 0.1)}verdocs-status-indicator .icon{width:25px;height:25px;margin:0 10px 0 0}verdocs-status-indicator.dark{color:#ffffff}verdocs-status-indicator.small{font-size:16px}verdocs-status-indicator.small .icon{width:20px;height:20px;margin:0 8px 0 0}verdocs-status-indicator .detail-panel{display:none;background:#ffffff;border:1px solid #1e2031;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;border-radius:10px;font-weight:500}verdocs-status-indicator .detail-panel h1{font-size:44px;color:#092c4c}verdocs-status-indicator .detail-panel[data-show]{display:-ms-flexbox;display:flex}";
 
 const AcceptedDark = `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12.5" cy="12.5" r="11.5" stroke="white" stroke-width="2"/><path d="M11.728 15.968C11.7067 15.9893 11.7013 16.0107 11.712 16.032C11.7227 16.0533 11.744 16.064 11.776 16.064H16.112C16.1653 16.064 16.208 16.0853 16.24 16.128C16.2827 16.16 16.304 16.2027 16.304 16.256V17.808C16.304 17.8613 16.2827 17.9093 16.24 17.952C16.208 17.984 16.1653 18 16.112 18H8.912C8.85867 18 8.81067 17.984 8.768 17.952C8.736 17.9093 8.72 17.8613 8.72 17.808V16.336C8.72 16.24 8.752 16.16 8.816 16.096C9.33867 15.584 9.872 15.0293 10.416 14.432C10.96 13.824 11.3013 13.4453 11.44 13.296C11.7387 12.944 12.0427 12.608 12.352 12.288C13.3227 11.2107 13.808 10.4107 13.808 9.888C13.808 9.51467 13.6747 9.21067 13.408 8.976C13.1413 8.73067 12.7947 8.608 12.368 8.608C11.9413 8.608 11.5947 8.73067 11.328 8.976C11.0613 9.21067 10.928 9.52533 10.928 9.92V10.32C10.928 10.3733 10.9067 10.4213 10.864 10.464C10.832 10.496 10.7893 10.512 10.736 10.512H8.848C8.79467 10.512 8.74667 10.496 8.704 10.464C8.672 10.4213 8.656 10.3733 8.656 10.32V9.568C8.688 8.992 8.86933 8.48533 9.2 8.048C9.53067 7.6 9.968 7.25867 10.512 7.024C11.0667 6.78933 11.6853 6.672 12.368 6.672C13.1253 6.672 13.7813 6.816 14.336 7.104C14.9013 7.38133 15.3333 7.76 15.632 8.24C15.9413 8.72 16.096 9.25333 16.096 9.84C16.096 10.288 15.984 10.7467 15.76 11.216C15.536 11.6853 15.2 12.192 14.752 12.736C14.4213 13.152 14.064 13.5627 13.68 13.968C13.296 14.3733 12.7253 14.96 11.968 15.728L11.728 15.968Z" fill="white"/></svg>`;
 const AcceptedLight = `<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12.5" cy="12.5" r="11.5" stroke="#654DCB" stroke-width="2"/><path d="M11.728 15.968C11.7067 15.9893 11.7013 16.0107 11.712 16.032C11.7227 16.0533 11.744 16.064 11.776 16.064H16.112C16.1653 16.064 16.208 16.0853 16.24 16.128C16.2827 16.16 16.304 16.2027 16.304 16.256V17.808C16.304 17.8613 16.2827 17.9093 16.24 17.952C16.208 17.984 16.1653 18 16.112 18H8.912C8.85867 18 8.81067 17.984 8.768 17.952C8.736 17.9093 8.72 17.8613 8.72 17.808V16.336C8.72 16.24 8.752 16.16 8.816 16.096C9.33867 15.584 9.872 15.0293 10.416 14.432C10.96 13.824 11.3013 13.4453 11.44 13.296C11.7387 12.944 12.0427 12.608 12.352 12.288C13.3227 11.2107 13.808 10.4107 13.808 9.888C13.808 9.51467 13.6747 9.21067 13.408 8.976C13.1413 8.73067 12.7947 8.608 12.368 8.608C11.9413 8.608 11.5947 8.73067 11.328 8.976C11.0613 9.21067 10.928 9.52533 10.928 9.92V10.32C10.928 10.3733 10.9067 10.4213 10.864 10.464C10.832 10.496 10.7893 10.512 10.736 10.512H8.848C8.79467 10.512 8.74667 10.496 8.704 10.464C8.672 10.4213 8.656 10.3733 8.656 10.32V9.568C8.688 8.992 8.86933 8.48533 9.2 8.048C9.53067 7.6 9.968 7.25867 10.512 7.024C11.0667 6.78933 11.6853 6.672 12.368 6.672C13.1253 6.672 13.7813 6.816 14.336 7.104C14.9013 7.38133 15.3333 7.76 15.632 8.24C15.9413 8.72 16.096 9.25333 16.096 9.84C16.096 10.288 15.984 10.7467 15.76 11.216C15.536 11.6853 15.2 12.192 14.752 12.736C14.4213 13.152 14.064 13.5627 13.68 13.968C13.296 14.3733 12.7253 14.96 11.968 15.728L11.728 15.968Z" fill="#654DCB"/></svg>`;
@@ -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) {