@verdocs/web-sdk 4.2.36 → 4.2.40

package/dist/esm/{verdocs-checkbox_4.entry.js → verdocs-checkbox_5.entry.js}

@@ -1,10 +1,11 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-b89cf6a4.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-32329b5a.js';
-import { g as getTemplateRoleStore } from './TemplateRoleStore-0a4f98cb.js';
-import { g as getTemplateStore } from './TemplateStore-7d41d941.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-4ee5d16c.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore-018f4e74.js';
+import { g as getTemplateStore } from './TemplateStore-b4149301.js';
 import { S as SDKError } from './errors-887f1e88.js';
-import './index-296aabaf.js';
+import { V as VerdocsToast } from './Toast-c4843828.js';
+import './index-e58b15f6.js';
 import './index-7588a071.js';
 
 const verdocsCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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;margin-right:8px;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}";
@@ -57,26 +58,12 @@ const VerdocsSelectInput = class {
 };
 VerdocsSelectInput.style = VerdocsSelectInputStyle0;
 
-const verdocsTemplateFieldPropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0px rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0px rgba(0, 0, 0, 0.1215686275)}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
+const verdocsTemplateFieldPropertiesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-field-properties{padding:20px;display:block;border-radius:4px;background:#ffffff;border:1px solid #ccc;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);box-shadow:2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275)}@media all and (max-width: 600px){verdocs-template-field-properties{padding:10px;-webkit-transform:scale(0.8);transform:scale(0.8)}}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input{margin:0;-ms-flex:1;flex:1}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}verdocs-template-field-properties h6{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:bold;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;color:#092c4c}verdocs-template-field-properties h6 .help-icon{opacity:0.5}verdocs-template-field-properties h6 .help-icon:hover{opacity:1;cursor:pointer}verdocs-template-field-properties .row-header{gap:15px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties .row-header h6{margin-bottom:0}verdocs-template-field-properties .row-header verdocs-help-icon{-webkit-transform:scale(0.85);transform:scale(0.85)}verdocs-template-field-properties .row-header verdocs-help-icon svg{margin-bottom:-5px}verdocs-template-field-properties .row-header .add-button{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-field-properties .row-header .add-button:hover{opacity:1}verdocs-template-field-properties .row-header .add-button svg{width:32px;height:32px}verdocs-template-field-properties .option-row{margin:15px 0}verdocs-template-field-properties .option-row .remove-button{height:28px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .option-row .remove-button:active{background:#f3f3f3}verdocs-template-field-properties .option-row .remove-button:hover svg{stroke:rgb(165, 0, 33)}verdocs-template-field-properties .option-row .remove-button svg{width:20px;height:20px;stroke:#333333}verdocs-template-field-properties .options{background:#f3f3f3;padding:0 0 10px 0}verdocs-template-field-properties .options .row-header,verdocs-template-field-properties .options .option-row{padding:0 10px}verdocs-template-field-properties .options .add-option-button{border-radius:5px;border:1px solid #cccccc;background:#46497d;color:#ffffff;padding:3px 8px}verdocs-template-field-properties .options .option-row .input-element{font-size:14px}verdocs-template-field-properties .options verdocs-help-icon{opacity:1;-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-field-properties .options verdocs-help-icon svg{fill:#ffffff}";
 const VerdocsTemplateFieldPropertiesStyle0 = verdocsTemplateFieldPropertiesCss;
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
-// Credit: https://stackoverflow.com/a/78196510/1812436
-// NOTE: This is NOT safe or cryptographically strong, so it's not part of our core SDK's or Utils modules.
-// It should never be used anywhere a real GUID is required. But we don't need one here, we just need a
-// "GUID-like" value for one step of a field update operation (adding items to lists). There are no security
-// implications in how we use IDs for list items. They only need to be GUID-like for historical reasons that
-// we may change shortly anyway.
-function generateWeakGuid() {
-    const s4 = () => {
-        return Math.floor((1 + Math.random()) * 0x10000)
-            .toString(16)
-            .substring(1);
-    };
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-}
 const VerdocsTemplateFieldProperties = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -93,7 +80,6 @@ const VerdocsTemplateFieldProperties = class {
         this.helpText = '';
         this.dirty = false;
         this.loading = true;
-        this.setting = null;
         this.label = '';
         this.type = 'textbox';
         this.name = '';
@@ -103,12 +89,12 @@ const VerdocsTemplateFieldProperties = class {
         this.fieldType = '';
         this.options = [];
         this.placeholder = '';
-        this.value = '';
-        this.leading = 0;
+        this.multiline = false;
+        this.defaultValue = '';
         this.showingHelp = false;
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.templateId) {
@@ -124,154 +110,84 @@ const VerdocsTemplateFieldProperties = class {
                 return;
             }
             this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
-            this.fieldStore = await getTemplateFieldStore(this.templateId);
-            this.roleStore = await getTemplateRoleStore(this.templateId);
-            // console.log('tfs', this.fieldStore?.state);
-            const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-            // console.log('gf', field);
-            if (!field) {
-                console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
-            }
-            else {
-                console.log('props', field);
-            }
-            this.type = field.type;
-            this.name = field.name;
-            this.label = field.label;
-            this.group = field.name;
-            this.roleName = field.role_name;
-            this.required = field.required;
-            this.fieldType = field.type;
-            // TODO: Talk about how we want to handle labels/placeholders
-            this.placeholder = ((_a = field.settings) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-            this.value = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '';
-            this.leading = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.leading) || 0;
-            this.setting = field.settings || {};
-            this.options = ((_d = field.settings) === null || _d === void 0 ? void 0 : _d.options) || [];
-            this.dirty = false;
-            this.loading = false;
-            console.log('Displaying settings for', this.setting);
+            this.fieldStore = getTemplateFieldStore(this.templateId);
+            this.roleStore = getTemplateRoleStore(this.templateId);
+            this.resetForm();
         }
         catch (e) {
             console.log('[FIELD PROPERTIES] Error loading template', e);
             this.loading = false;
-            (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+            (_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));
         }
     }
-    handleCancel(e) {
-        var _a, _b, _c, _d, _e;
-        e.stopPropagation();
+    resetForm() {
         const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-        if (field) {
-            this.name = field.name;
-            this.label = field.label;
-            this.roleName = field.role_name;
-            this.required = field.required;
-            // TODO: Talk about how we want to handle labels/placeholders
-            this.placeholder = ((_a = field.settings) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-            this.value = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '';
-            this.leading = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.leading) || 0;
+        if (!field) {
+            console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
+        }
+        else {
+            console.log('[FIELD PROPERTIES]', field);
         }
+        this.type = field.type;
+        this.name = field.name;
+        this.label = field.label;
+        this.group = field.name;
+        this.roleName = field.role_name;
+        this.required = field.required;
+        this.fieldType = field.type;
+        this.options = field.options;
+        this.placeholder = field.placeholder || '';
+        this.defaultValue = field.default || '';
+        this.multiline = field.multiline || false;
         this.dirty = false;
-        (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
-        (_e = document.getElementById('verdocs-template-field-properties')) === null || _e === void 0 ? void 0 : _e.remove();
+        this.loading = false;
     }
-    handleSave(e) {
+    handleCancel(e) {
+        var _a, _b;
         e.stopPropagation();
-        const newProperties = {
-            name: this.name,
-            label: this.label || null,
-            required: this.required,
-            role_name: this.roleName,
-            // TODO: Default value in setting?
-        };
-        if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
-            newProperties.settings = this.setting;
-            newProperties.settings.options = this.options;
-        }
-        else if (this.type === 'textarea' || this.type === 'textbox') {
-            newProperties.settings = { ...this.setting };
-            newProperties.settings.result = (this.value || '').trim();
-        }
-        else if (this.type === 'dropdown') {
-            newProperties.settings = {
-                x: this.setting.x,
-                y: this.setting.y,
-                options: this.options,
-            };
-        }
-        console.log('FP: Will update', this.fieldName, newProperties);
-        updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-            .then(updated => {
-            var _a, _b, _c;
-            this.dirty = false;
-            updateStoreField(this.fieldStore, this.fieldName, updated);
-            // if (this.fieldname !== newSettings.name) {
-            //   this.fieldname = newSettings.name;
-            //   console.log('new name', this.fieldname);
-            // }
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
-            (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
-            (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
-        })
-            .catch(() => {
-            console.log('Field update failed', e);
-        });
+        this.resetForm();
+        (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+        (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
     }
-    handleAddOption(e) {
+    handleSave(e) {
         e.stopPropagation();
         const newProperties = {
             name: this.name,
-            required: this.required,
             role_name: this.roleName,
-            // TODO: Default value in setting?
+            required: this.required,
+            label: this.label,
+            group: this.group,
+            multiline: this.multiline,
+            placeholder: this.placeholder,
+            default: this.defaultValue,
+            options: this.options,
         };
-        this.options.push(this.type === 'radio_button_group'
-            ? {
-                id: generateWeakGuid(),
-                value: `Option ${this.options.length + 1}`,
-                selected: false,
-                x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
-                y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
-            }
-            : {
-                id: generateWeakGuid(),
-                value: `Option ${this.options.length + 1}`,
-                checked: false,
-                x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
-                y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
-            });
-        newProperties.settings = { ...this.setting };
-        delete newProperties.settings.result;
-        newProperties.settings.options = [...this.options];
+        console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
             var _a, _b, _c;
-            this.dirty = false;
             updateStoreField(this.fieldStore, this.fieldName, updated);
-            this.fieldName = updated.name;
+            this.resetForm();
             (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
             (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
             (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
         })
             .catch(() => {
-            console.log('Field update failed', e);
+            console.log('[FIELD PROPERTIES] Update failed', e);
         });
     }
     async handleDelete(e) {
         e.stopPropagation();
-        if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
-            deleteField(this.endpoint, this.templateId, this.fieldName)
-                .then(() => {
-                var _a, _b;
-                this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
-                (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
-                (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
-            })
-                .catch(e => {
-                console.log('[FIELD PROPERTIES] Deletion error', e);
-            });
-        }
+        deleteField(this.endpoint, this.templateId, this.fieldName)
+            .then(() => {
+            var _a, _b;
+            this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
+            (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+            (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
+        })
+            .catch(e => {
+            console.log('[FIELD PROPERTIES] Deletion error', e);
+        });
     }
     render() {
         var _a;
@@ -286,7 +202,6 @@ const VerdocsTemplateFieldProperties = class {
         if (this.helpText && this.showingHelp) {
             return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
         }
-        // console.log('tfp', this.templateId, this.fieldName);
         return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
             //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
             placeholder: "Field Name...", onInput: (e) => {
@@ -300,8 +215,8 @@ const VerdocsTemplateFieldProperties = class {
             } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.roleStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
                 this.roleName = e.target.value;
                 this.dirty = true;
-            } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
-                this.value = e.target.value;
+            } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Default Value", value: this.defaultValue, autocomplete: "off", placeholder: "Pre-filled value...", onInput: (e) => {
+                this.defaultValue = e.target.value;
                 this.dirty = true;
             } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
             // helpText="Placeholder to display if the field is empty."
@@ -311,7 +226,7 @@ const VerdocsTemplateFieldProperties = class {
             } }))), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
                 this.required = e.target.checked;
                 this.dirty = true;
-            } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
+            } })), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
                 marginTop: '15px',
                 marginBottom: '15px',
                 textAlign: 'center',
@@ -339,4 +254,56 @@ const VerdocsTemplateFieldProperties = class {
 };
 VerdocsTemplateFieldProperties.style = VerdocsTemplateFieldPropertiesStyle0;
 
-export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties };
+const verdocsTextInputCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}verdocs-text-input .input-container{position:relative}verdocs-text-input .clear{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .clear:hover{fill:#720101;cursor:pointer}verdocs-text-input .copy{top:7px;right:5px;width:18px;height:18px;fill:#cccccc;position:absolute}verdocs-text-input .copy:hover{fill:#654dcb;cursor:pointer}verdocs-text-input .toggle-pw{top:5px;right:7px;width:18px;height:18px;stroke:#cccccc;position:absolute}verdocs-text-input .toggle-pw:hover{fill:#654dcb;cursor:pointer}verdocs-text-input.clearable .input-element,verdocs-text-input.copyable .input-element{padding-right:32px}";
+const VerdocsTextInputStyle0 = verdocsTextInputCss;
+
+const ClearIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.881 122.88"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M61.44,0c33.933,0,61.441,27.507,61.441,61.439 c0,33.933-27.508,61.44-61.441,61.44C27.508,122.88,0,95.372,0,61.439C0,27.507,27.508,0,61.44,0L61.44,0z M81.719,36.226 c1.363-1.363,3.572-1.363,4.936,0c1.363,1.363,1.363,3.573,0,4.936L66.375,61.439l20.279,20.278c1.363,1.363,1.363,3.573,0,4.937 c-1.363,1.362-3.572,1.362-4.936,0L61.44,66.376L41.162,86.654c-1.362,1.362-3.573,1.362-4.936,0c-1.363-1.363-1.363-3.573,0-4.937 l20.278-20.278L36.226,41.162c-1.363-1.363-1.363-3.573,0-4.936c1.363-1.363,3.573-1.363,4.936,0L61.44,56.504L81.719,36.226 L81.719,36.226z"/></g></svg>`;
+const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0118 5.25v6.5A2.25 2.25 0 0115.75 14H13.5V7A2.5 2.5 0 0011 4.5H8.128a2.252 2.252 0 011.884-1.488A2.25 2.25 0 0112.25 1h1.5a2.25 2.25 0 012.238 2.012zM11.5 3.25a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v.25h-3v-.25z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M2 7a1 1 0 011-1h8a1 1 0 011 1v10a1 1 0 01-1 1H3a1 1 0 01-1-1V7zm2 3.25a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75zm0 3.5a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" /></svg>`;
+const EyeIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`;
+const EyeSlashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`;
+const VerdocsTextInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.value = '';
+        this.label = '';
+        this.placeholder = '';
+        this.autocomplete = '';
+        this.helpText = '';
+        this.clearable = false;
+        this.copyable = false;
+        this.type = 'text';
+        this.disabled = false;
+        this.required = false;
+        this.showingPw = false;
+    }
+    copyToClipboard() {
+        this.inputEl.select();
+        navigator.clipboard
+            .writeText(this.value)
+            .then(() => VerdocsToast('Copied!'))
+            .catch(e => console.log('Error copying to clipboard', e));
+    }
+    render() {
+        return (h(Host, { key: '39ca7e3389e89d00c1b15adcbc949f3b260ea257', class: `input-field ${this.clearable ? 'clearable' : ''} ${this.copyable ? 'copyable' : ''}` }, h("label", { key: '1d6d01c8cb3b3ac3794b6dc26c96929685989089' }, this.label && (h("div", { key: '95a771234d7cdc4484c999144b655b6eacbe27d1', class: "input-label" }, this.label + ':', this.required && h("span", { key: 'a41ddd971cd71b61eeb37464083f29a55bf8a030', class: "required" }, "*"))), h("div", { key: '4ccb0473d02f0aee9a0bc94c4a59293eef1e3eef', class: "input-container" }, h("input", { key: '614f5193c19137c5f06ccc5173299fc3db3d99ff', type: this.type === 'password' && this.showingPw ? 'text' : this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete, ref: el => (this.inputEl = el), onInput: (e) => (this.value = e.target.value) }), this.clearable && this.value && (h("span", { key: '1d750d5890434d4a6dfb1faca659d442025ad515', innerHTML: ClearIcon, class: "clear", onClick: () => {
+                // We need to allow the onInput event to fire first in case
+                // the user was focused on this field before clicking clear.
+                setTimeout(() => {
+                    var _a;
+                    this.value = '';
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute('value', '');
+                    // We need to allow the value to "settle"
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('focusout'));
+                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.blur();
+                    }, 50);
+                }, 50);
+            } })), this.type === 'password' && (h("span", { key: 'c9c856949e5cd6675c2f723fe0434527044db36f', innerHTML: this.showingPw ? EyeIcon : EyeSlashIcon, class: "toggle-pw", onClick: () => {
+                this.showingPw = !this.showingPw;
+            } })), !this.clearable && this.copyable && this.value && h("span", { key: 'b95ccfa39c6d2f8ec110aa282a5ec902e015de94', innerHTML: CopyIcon, class: "copy", onClick: () => this.copyToClipboard() })), this.helpText && h("verdocs-help-icon", { key: 'd8b934d8038cd6f0eeb39bff7092314aed2d0029', text: this.helpText }))));
+    }
+    get hostEl() { return getElement(this); }
+};
+VerdocsTextInput.style = VerdocsTextInputStyle0;
+
+export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties, VerdocsTextInput as verdocs_text_input };

package/dist/esm/verdocs-contact-picker_2.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { i as convertToE164 } from './utils-8f9e83b4.js';
+import { i as convertToE164 } from './utils-7d128d3c.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 

package/dist/esm/verdocs-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 
 const verdocsDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-dialog .background-overlay{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:absolute;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}verdocs-dialog .dialog{width:420px;display:-ms-flexbox;display:flex;max-width:100%;overflow:hidden;border-radius:4px;-ms-flex-direction:column;flex-direction:column;background:#ffffff;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-dialog .heading{display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;padding:8px 16px;-ms-flex-direction:row;flex-direction:row;color:#ffffff;background:#46497d}verdocs-dialog .content{padding:16px}verdocs-dialog .content p{margin:0 0 1em 0}verdocs-dialog .buttons{gap:14px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
 const VerdocsDialogStyle0 = verdocsDialogCss;

package/dist/esm/verdocs-dropdown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3476681c.js';
 
 const verdocsDropdownCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-dropdown{display:block;position:relative;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}#verdocs-dropdown-menu-items{width:200px;z-index:10000;position:absolute;border-radius:5px;background:#33354c;border:1px solid #654dcb}.verdocs-dropdown-menu-separator{height:1px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255, 255, 255, 0.3725490196)}.verdocs-dropdown-menu-option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}.verdocs-dropdown-menu-option:hover{cursor:pointer;background:#55bc81}.verdocs-dropdown-menu-option[disabled]{color:#aaaaaa}.verdocs-dropdown-menu-option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}";
 const VerdocsDropdownStyle0 = verdocsDropdownCss;

package/dist/esm/verdocs-envelope-document-page.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint, getEnvelopeDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { t as throttle } from './utils-8f9e83b4.js';
+import { t as throttle } from './utils-7d128d3c.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';
 

package/dist/esm/verdocs-envelope-recipient-link_2.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 import { VerdocsEndpoint, getInPersonLink, getRecipientsWithActions, recipientCanAct } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-1ed5dc8f.js';
-import { V as VerdocsToast } from './Toast-3e2645fc.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-dbec0399.js';
+import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
-import './index-296aabaf.js';
+import './index-e58b15f6.js';
 import './index-7588a071.js';
 
 const verdocsEnvelopeRecipientLinkCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-recipient-link{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-recipient-link .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-link .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-link .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-link .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-link .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-link .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .summary-recipient .recipient-link{width:120px;padding:0 16px;font-weight:500;margin:0 0 0 8px;text-align:center;font-size:0.875rem;border-radius:100%;color:rgb(55, 65, 81);line-height:1.25rem;background-color:#d8d8d8;border:2px solid rgb(156, 163, 175)}verdocs-envelope-recipient-link .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-link .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-link .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-link .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-link .buttons verdocs-button button{width:100%}";

package/dist/esm/verdocs-envelope-sidebar.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 import { VerdocsEndpoint, resendInvitation, cancelEnvelope, userIsEnvelopeOwner } from '@verdocs/js-sdk';
-import { g as getEnvelopeStore } from './EnvelopeStore-1ed5dc8f.js';
+import { g as getEnvelopeStore } from './EnvelopeStore-dbec0399.js';
 import { F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
-import { V as VerdocsToast } from './Toast-3e2645fc.js';
+import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import { d as dateFns } from './index-0329eed3.js';
-import './index-296aabaf.js';
+import './index-e58b15f6.js';
 import './index-7588a071.js';
 
 const verdocsEnvelopeSidebarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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;max-width:100%;width:400px}@media screen and (max-width: 500px){verdocs-envelope-sidebar.open{-ms-flex:0 0 300px;flex:0 0 300px;width:300px}}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 verdocs-ok-dialog .content{color:black}verdocs-envelope-sidebar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400}verdocs-envelope-sidebar .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap;width:100%;margin:0 0 10px 0}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .manage-recipients-button button{width:100%}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}@media screen and (max-width: 500px){verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 60px;flex:1 1 60px;max-width:60px;min-width:60px}}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .recipient-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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}";

package/dist/esm/verdocs-envelopes-list.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-3476681c.js';
 import { VerdocsEndpoint, getEnvelopes, integerSequence, getRecipientsWithActions, userCanCancelEnvelope, userCanAct, cancelEnvelope } from '@verdocs/js-sdk';
-import { s as saveEnvelopesAsZip } from './utils-8f9e83b4.js';
-import { V as VerdocsToast } from './Toast-3e2645fc.js';
+import { s as saveEnvelopesAsZip } from './utils-7d128d3c.js';
+import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './Types-e4a6eba5.js';
 import './index-0329eed3.js';

package/dist/esm/verdocs-field-attachment_13.entry.js

@@ -1,13 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-b89cf6a4.js';
-import { i as interact } from './interact.min-565d696f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-3476681c.js';
+import { i as interact } from './interact.min-18f44045.js';
 import { VerdocsEndpoint, updateField, getRGBA, fileToDataUrl } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-0a4f98cb.js';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-32329b5a.js';
-import { l as getFieldSettings, h as commonjsGlobal } from './utils-8f9e83b4.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-018f4e74.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-4ee5d16c.js';
+import { g as getFieldSettings, h as commonjsGlobal } from './utils-7d128d3c.js';
 import { S as SettingsIcon } from './Icons-faf0377f.js';
 import { a as FORMAT_DATE, F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';
 import { d as dateFns } from './index-0329eed3.js';
-import './index-296aabaf.js';
+import { n as format } from './format-2bf71189.js';
+import './index-e58b15f6.js';
 
 const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:16px;height:16px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{cursor:inherit;width:20px}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}";
 const VerdocsFieldAttachmentStyle0 = verdocsFieldAttachmentCss;
@@ -774,6 +775,7 @@ const VerdocsFieldTextbox = class {
         this.templateid = '';
         this.fieldname = '';
         this.disabled = false;
+        this.multiline = false;
         this.editable = false;
         this.moveable = false;
         this.done = false;
@@ -852,14 +854,18 @@ const VerdocsFieldTextbox = class {
     render() {
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', placeholder = '' } = field || {};
-        const { result: value = '', width = 150 } = getFieldSettings(field);
+        let { required = false, role_name = '', placeholder = '', width = 150, height = 15, default: value = '' } = field || {};
+        // TODO: Consolidate value/defaultValue handling between template and envelope fields
+        if (field.value) {
+            value = field.value;
+        }
         // TODO: This is an outdated technique from the old system. We should compute it.
         const maxlength = width / 5;
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
+        console.log('text field', { multiline: this.multiline, value, placeholder, maxlength, width, height });
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, h("input", { type: "text", name: fieldname, value: value, disabled: disabled, required: required, placeholder: placeholder, maxlength: maxlength, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
@@ -923,7 +929,7 @@ const VerdocsFieldTimestamp = class {
         const { required = false, role_name = '', placeholder = '' } = field || {};
         const { value = '' } = getFieldSettings(field);
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        const formatted = dateFns.format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
+        const formatted = format.format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
         if (done) {
             return h(Host, { class: { done } }, formatted);
         }

package/dist/esm/verdocs-field-payment.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-b89cf6a4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-3476681c.js';
 import { getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-0a4f98cb.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-32329b5a.js';
-import './index-296aabaf.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-018f4e74.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore-4ee5d16c.js';
+import './index-e58b15f6.js';
 
 const verdocsFieldPaymentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{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}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;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) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}";
 const VerdocsFieldPaymentStyle0 = verdocsFieldPaymentCss;