@verdocs/web-sdk 4.2.55 → 4.2.57

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

@@ -46,11 +46,14 @@ export class VerdocsFieldTextbox {
     }
     componentDidRender() {
         interact.dynamicDrop(true);
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        let { multiline = false } = field || {};
         if (this.editable) {
             interact(this.el).resizable({
-                edges: { top: multiline, bottom: multiline, left: true, right: true },
+                edges: { top: true, bottom: false, left: true, right: true },
+                modifiers: [
+                    interact.modifiers.restrictSize({
+                        min: { width: 30, height: 15 },
+                    }),
+                ],
                 listeners: {
                     start: this.handleResizeStart.bind(this),
                     move: this.handleResize.bind(this),
@@ -81,8 +84,12 @@ export class VerdocsFieldTextbox {
     handleResizeEnd(e) {
         const { fieldname = '' } = this;
         const width = Math.round(parseFloat(e.target.style.width));
-        const height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
+        let height = Math.round(parseFloat(e.target.style.height));
+        if (height < 20) {
+            height = 15;
+        }
+        const multiline = height > 15;
+        updateField(this.endpoint, this.templateid, this.fieldname, { width, height, multiline })
             .then(field => {
             var _a;
             updateStoreField(this.fieldStore, this.fieldname, field);

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { DEFAULT_FIELD_HEIGHTS, DEFAULT_FIELD_WIDTHS, deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
 import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateStore } from "../../../utils/TemplateStore";
@@ -25,7 +25,6 @@ export class VerdocsTemplateFieldProperties {
         this.type = 'textbox';
         this.name = '';
         this.required = false;
-        this.multiline = false;
         this.roleName = '';
         this.group = '';
         this.fieldType = '';
@@ -79,7 +78,6 @@ export class VerdocsTemplateFieldProperties {
         this.options = field.options || [];
         this.placeholder = field.placeholder || '';
         this.defaultValue = field.default || '';
-        this.multiline = field.multiline || false;
         this.dirty = false;
         this.loading = false;
         this.cleanupOptions();
@@ -99,17 +97,10 @@ export class VerdocsTemplateFieldProperties {
             required: this.required,
             label: this.label,
             group: this.group,
-            multiline: this.multiline,
             placeholder: this.placeholder,
             default: this.defaultValue,
             options: this.options,
         };
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-        if (!newProperties.multiline && field.multiline) {
-            console.log('Switching off multiline');
-            newProperties.width = DEFAULT_FIELD_WIDTHS.textbox;
-            newProperties.height = DEFAULT_FIELD_HEIGHTS.textbox;
-        }
         console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
@@ -186,10 +177,7 @@ export class VerdocsTemplateFieldProperties {
             } }))), 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;
-            } })), this.type === 'textbox' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-multline", class: "input-label" }, "Multi-Line"), h("verdocs-checkbox", { id: "verdocs-is-multiline", name: "is-multiline", checked: this.multiline, value: "on", onInput: (e) => {
-                this.multiline = e.target.checked;
-                this.dirty = true;
-            } }))), this.type === 'dropdown' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (h("div", { class: "options" }, h("div", { class: "options-header" }, h("div", { class: "options-header-label" }, "ID"), h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+            } })), this.type === 'dropdown' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (h("div", { class: "options" }, h("div", { class: "options-header" }, h("div", { class: "options-header-label" }, "ID"), h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
                 this.options[index].id = e.target.value;
                 this.dirty = true;
                 this.cleanupOptions();
@@ -302,7 +290,6 @@ export class VerdocsTemplateFieldProperties {
             "type": {},
             "name": {},
             "required": {},
-            "multiline": {},
             "roleName": {},
             "group": {},
             "fieldType": {},

package/dist/components/verdocs-contact-picker2.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
-const verdocsContactPickerCss = "@-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-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
+const verdocsContactPickerCss = "@-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-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .names-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px}verdocs-contact-picker form .names-row>input{min-width:0}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}";
 const VerdocsContactPickerStyle0 = verdocsContactPickerCss;
 
 const messageIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';
@@ -24,7 +24,6 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateRole = null;
         this.contactSuggestions = [];
-        this.name = undefined;
         this.first_name = undefined;
         this.last_name = undefined;
         this.email = undefined;
@@ -44,10 +43,10 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     }
     componentWillLoad() {
         if (this.templateRole) {
+            // TODO: For backwards compatibility, may be removed once templateRole no longer has a full_name
             const nameComponents = (this.templateRole.full_name || '').split(' ');
-            const firstName = nameComponents.shift() || '';
-            const lastName = nameComponents.join(' ');
-            this.name = this.templateRole.full_name || '';
+            const firstName = this.templateRole.first_name || nameComponents.shift() || '';
+            const lastName = this.templateRole.last_name || nameComponents.join(' ') || '';
             this.first_name = firstName;
             this.last_name = lastName;
             this.email = this.templateRole.email || '';
@@ -61,10 +60,15 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
             this.pinCode = '';
         }
     }
-    handleNameChange(e) {
+    handleFirstNameChange(e) {
         var _a;
-        this.name = e.target.value;
-        (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit({ query: this.name });
+        this.first_name = e.target.value;
+        (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit({ query: this.first_name });
+    }
+    handleLastNameChange(e) {
+        var _a;
+        this.last_name = e.target.value;
+        (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit({ query: this.last_name });
     }
     handleEmailChange(e) {
         this.email = e.target.value;
@@ -86,7 +90,6 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
         e.stopPropagation();
         this.showSuggestions = false;
         (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
-            full_name: this.name,
             first_name: this.first_name,
             last_name: this.last_name,
             email: this.email,
@@ -97,7 +100,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     }
     handleSelectSuggestion(e, suggestion) {
         e.stopPropagation();
-        this.name = suggestion.name;
+        console.log('Selected', suggestion);
         this.first_name = suggestion.first_name;
         this.last_name = suggestion.last_name;
         this.email = suggestion.email;
@@ -107,31 +110,30 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        return (h("form", { key: 'd4a74d3f95d9c13bf7b4afdc0391aafdc504b053', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '329611e08994741cc94d01d62ab563ad182243ba', class: "row" }, h("label", { key: 'fd235b92d011939bbc20cf4efbe6428d953c454d', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: 'e3531ddf8308a1be0a3fd43205fde1e99bca5dbc', style: { display: 'flex', flexDirection: 'row', gap: '8px;' } }, h("input", { key: 'b8bf71e3f6ce8e5aad6ee9cb03d1119935206f0c', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleNameChange(e) }), h("input", { key: '9d53c8d43ed0ca4d3f17d39b6d90bece9afd68a7', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleNameChange(e) })), this.showSuggestions && (h("div", { key: 'f53fc8a9ec12e31401afc4d22c98269ba96d0048', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+        return (h("form", { key: '8af5dbd2e066184e5bcafaa8ce88607b3c45eb3c', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '866df17f478ea88eebd4066b37dbc2633e9a3125', class: "row" }, h("label", { key: 'e9218a81ae6c5b14ce3eb6362b5b2a32de918e25', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '655c9a8bfca059dc3e0a3cedf2a59138d255248f', class: "names-row" }, h("input", { key: '6f2451ab980513e7fb840b2e2c3f3a51a6fc2bfb', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: '187fc2767904dd61a853786c2571c4a9bf6a5377', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: '4bea4ff52a5824336f769aa71fd9d07357f9bcc4', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: '29211a4aeccb45c1f6ce4581ce89eef56fd0efa0', class: "row" }, h("label", { key: '32fb4eaa0599ea08364af828e93dd182ee36b42b', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '9a75b49d558dab786d4cec8e74e1d4970da63467', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: 'd5e07b3b8b24283acb158a8b44a981b1281c0964', class: "row" }, h("label", { key: '0d76a478038a18d4b16f73c14fe8ec53a014ca37', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '7c957fa5584d100e08bcb4ef808ec21ef507df32', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: '3d48f1e8c4941700ecbc07a57fa3a8e22e866c26', class: "row" }, h("div", { key: '94f76f6449c8939dbd989507d03f8c7323b0487d', class: "label-with-icon" }, h("label", { key: '516dd082ac4cd08e881bffc1ab22d14ed3cc4c52' }, "KBA:"), h("verdocs-help-icon", { key: 'e12ca24140bbcfb1645c14c2bfcf3e7326d3033a', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: 'eadc53ce819c1ff21a9a3c51e4771a8dd7076eee', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+        })))), h("div", { key: '11be90948242134e109d1e2d0bc8ed99abbcbf76', class: "row" }, h("label", { key: '06745e80fb6cac8f7f94a13dd03cb88bcf9176bf', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '41f636a6b44ca22d7f7766f7034cf6c7eab95a64', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { key: '4af9e4f820a6a2d0a3daf9264797b193718122a8', class: "row" }, h("label", { key: '1c35261e9941adbc584e03fcd26f1c85d3c594b1', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'e7b0010c8047785f7ccdf1c5b69114a79077baf5', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: '6f0a224dbf3ee2a269f4e9506dbe4d570bcd7fbf', class: "row" }, h("div", { key: '64dbfdec97ba55010a44dd7e8504b1457be8e852', class: "label-with-icon" }, h("label", { key: '33fe672a3ba66fc3dc95d1fcf6694c3ee0e73785' }, "KBA:"), h("verdocs-help-icon", { key: 'f42c59f44000a76b6dd5b457f966bdb72f0fdc99', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), h("verdocs-select-input", { key: '89d90d77187246062073084c38ab16fd6388bc9a', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
                 { label: 'None', value: '' },
                 { label: 'PIN Code', value: 'pin' },
                 { label: 'Full Verification', value: 'kba' },
-            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'db7162ba5935448fdf6b335b57c2ac91283563b6', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '2ff18d49d7bd4181ba6fbf1ecacb64ba458b66d2', class: "row" }, h("label", { key: '2c22e7f0c17c5e86e4c920399ba3d4b0500a495e', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'ff3a0a753f1cb6418e02cb0f4abffbe540fd4213', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: 'cec56a872a810a5cedc49e57f3afe1ecf3c3ade6', class: "buttons" }, h("verdocs-toggle-button", { key: '6f9e177a3e8d077144b5d4382a18a95b44616d12', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+            ] }), this.kbaMethod === 'pin' && (h("input", { key: 'e53128bbc3732379e0bf98e8ae70151e55b2ff64', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: '5ff8d72b8da46eb6adbf712bd87571613b7b5d81', class: "row" }, h("label", { key: '8f18c67eb9bb51dc138da21068c1d05bd714e5fc', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: '9c0d81f831335a1a712d097c57e79fdd3b901465', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: 'fda4e846bddb572c9a8baa7cd009bdb2ff6c5814', class: "buttons" }, h("verdocs-toggle-button", { key: 'faf34cacb6a7f21d98d266113e230e58c3673a72', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
                 this.showKba = e.detail.active;
                 if (!e.detail.active) {
                     this.pinCode = '';
                     this.kbaMethod = '';
                 }
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: '8d7468bdc795eff356f4636bff62b9536c0a2d59', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: 'c7790cc8c9beb9ad8f3e69dfe62436fe9365463e', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: 'a902c45f33e944655d42f758b67c082fa57c93ca', class: "flex-fill" }), h("verdocs-button", { key: 'b24bce7779c3049c5f578cc55b2dec550258c57a', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '6445645ad05e49aa28c149bed65ee95ce6889e2a', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: '0c12444bf7ce9bbaa2ddac54f2d219b9b86157a4', class: "flex-fill" }), h("verdocs-button", { key: '3f7f3356cfd19f407ea7fcb8c2e8e641b69bf03a', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '598bff5040b18bb4eff4e35b848b7a99fe536953', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
     }
     static get style() { return VerdocsContactPickerStyle0; }
 }, [0, "verdocs-contact-picker", {
         "endpoint": [16],
         "templateRole": [16],
         "contactSuggestions": [16],
-        "name": [32],
         "first_name": [32],
         "last_name": [32],
         "email": [32],

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

@@ -59,11 +59,14 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
     }
     componentDidRender() {
         interact.dynamicDrop(true);
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        let { multiline = false } = field || {};
         if (this.editable) {
             interact(this.el).resizable({
-                edges: { top: multiline, bottom: multiline, left: true, right: true },
+                edges: { top: true, bottom: false, left: true, right: true },
+                modifiers: [
+                    interact.modifiers.restrictSize({
+                        min: { width: 30, height: 15 },
+                    }),
+                ],
                 listeners: {
                     start: this.handleResizeStart.bind(this),
                     move: this.handleResize.bind(this),
@@ -94,8 +97,12 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
     handleResizeEnd(e) {
         const { fieldname = '' } = this;
         const width = Math.round(parseFloat(e.target.style.width));
-        const height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
+        let height = Math.round(parseFloat(e.target.style.height));
+        if (height < 20) {
+            height = 15;
+        }
+        const multiline = height > 15;
+        updateField(this.endpoint, this.templateid, this.fieldname, { width, height, multiline })
             .then(field => {
             var _a;
             updateStoreField(this.fieldStore, this.fieldname, field);

package/dist/components/verdocs-preview2.js

@@ -68,7 +68,6 @@ const VerdocsPreview = /*@__PURE__*/ proxyCustomElement(class VerdocsPreview ext
     }
     async loadTemplate(templateId) {
         if (templateId) {
-            console.log('lt', templateId);
             getTemplateStore(this.endpoint, templateId, false)
                 .then(ts => {
                 this.templateStore = ts;

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { VerdocsEndpoint, DEFAULT_FIELD_WIDTHS, DEFAULT_FIELD_HEIGHTS, updateField, deleteField } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
@@ -38,7 +38,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
         this.type = 'textbox';
         this.name = '';
         this.required = false;
-        this.multiline = false;
         this.roleName = '';
         this.group = '';
         this.fieldType = '';
@@ -92,7 +91,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
         this.options = field.options || [];
         this.placeholder = field.placeholder || '';
         this.defaultValue = field.default || '';
-        this.multiline = field.multiline || false;
         this.dirty = false;
         this.loading = false;
         this.cleanupOptions();
@@ -112,17 +110,10 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
             required: this.required,
             label: this.label,
             group: this.group,
-            multiline: this.multiline,
             placeholder: this.placeholder,
             default: this.defaultValue,
             options: this.options,
         };
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-        if (!newProperties.multiline && field.multiline) {
-            console.log('Switching off multiline');
-            newProperties.width = DEFAULT_FIELD_WIDTHS.textbox;
-            newProperties.height = DEFAULT_FIELD_HEIGHTS.textbox;
-        }
         console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
@@ -199,10 +190,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
             } }))), 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;
-            } })), this.type === 'textbox' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-multline", class: "input-label" }, "Multi-Line"), h("verdocs-checkbox", { id: "verdocs-is-multiline", name: "is-multiline", checked: this.multiline, value: "on", onInput: (e) => {
-                this.multiline = e.target.checked;
-                this.dirty = true;
-            } }))), this.type === 'dropdown' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (h("div", { class: "options" }, h("div", { class: "options-header" }, h("div", { class: "options-header-label" }, "ID"), h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+            } })), this.type === 'dropdown' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (h("div", { class: "options" }, h("div", { class: "options-header" }, h("div", { class: "options-header-label" }, "ID"), h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
                 this.options[index].id = e.target.value;
                 this.dirty = true;
                 this.cleanupOptions();
@@ -229,7 +217,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
         "type": [32],
         "name": [32],
         "required": [32],
-        "multiline": [32],
         "roleName": [32],
         "group": [32],
         "fieldType": [32],