@verdocs/web-sdk 4.2.43 → 4.2.48

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -80,7 +80,8 @@ export class VerdocsSign {
         }
         try {
             console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
-            const { envelope, recipient, access_token } = await getSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
+            const { envelope, access_token } = await getSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
+            const recipient = envelope.recipients.find(r => r.role_name === this.roleId);
             console.log(`[SIGN] Loaded signing session`, envelope, recipient, access_token);
             this.recipient = recipient;
             console.log('[SIGN] We are recipient', this.recipient);
@@ -187,8 +188,7 @@ export class VerdocsSign {
         console.log('[SIGN] updateRecipientFieldValue', fieldName);
         this.getRecipientFields().forEach(oldField => {
             if (oldField.name === fieldName) {
-                oldField.settings = updateResult.settings;
-                // TODO: When we break out other fields like value, update them here too
+                oldField.value = updateResult.value;
                 updateDocumentFieldValue(oldField);
                 this.checkRecipientFields();
             }
@@ -216,15 +216,11 @@ export class VerdocsSign {
         switch (field.type) {
             case 'textbox':
                 return this.saveFieldChange(field.name, { prepared: false, value });
-            case 'checkbox':
-            case 'checkbox_group': {
-                const options = field.settings.options.map(option => ({ id: option.id, checked: e.target.checked }));
-                return this.saveFieldChange(field.name, { prepared: false, value: { options } });
+            case 'checkbox': {
+                return this.saveFieldChange(field.name, { prepared: false, value: e.target.checked });
             }
-            case 'radio':
-            case 'radio_button_group': {
-                const options = field.settings.options.map(option => ({ id: option.id, selected: e.target.value === option.id }));
-                return this.saveFieldChange(field.name, { prepared: false, value: { options } });
+            case 'radio': {
+                return this.saveFieldChange(field.name, { prepared: false, value: e.target.value === e.target.checked });
             }
             case 'dropdown':
                 return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
@@ -274,42 +270,33 @@ export class VerdocsSign {
         }
     }
     isFieldFilled(field) {
-        var _a, _b, _c, _d, _e, _f;
-        const { result = '', value = '', base64 = '' } = field.settings || {};
+        const { value = '' } = field;
         switch (field.type) {
             case 'textbox':
                 switch (field.validator || '') {
                     case 'email':
-                        return isValidEmail(result);
+                        return isValidEmail(value);
                     case 'phone':
-                        return isValidPhone(result);
+                        return isValidPhone(value);
                     default:
-                        return result !== '';
+                        return value !== '';
                 }
             case 'signature':
             case 'initial':
-                return base64 !== '';
+                return value !== '';
             // Timestamp fields get automatically filled when the envelope is submitted.
             case 'timestamp':
                 return true;
             case 'textarea':
             case 'date':
             case 'attachment':
-                return result !== '';
+                return value !== '';
             case 'dropdown':
                 return value !== '';
             case 'checkbox':
-            case 'checkbox_group':
-                const checkedCount = (((_b = (_a = field.settings) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.filter(option => option.checked)) || []).length;
-                return checkedCount >= (((_c = field.settings) === null || _c === void 0 ? void 0 : _c.minimum_checked) || 0) && checkedCount <= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.maximum_checked) || 999);
+                return !!value;
             case 'radio':
-            case 'radio_button_group':
-                return (((_f = (_e = field.settings) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.filter(option => option.selected)) || []).length > 0;
-            // TODO
-            // case 'checkbox':
-            //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
-            // case 'payment':
-            //   return <verdocs-field-payment style={style} field={field} id={id} />;
+                return !!value;
             default:
                 return false;
         }
@@ -321,11 +308,10 @@ export class VerdocsSign {
     getSortedFillableFields() {
         const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
         recipientFields.sort((a, b) => {
-            var _a, _b, _c, _d;
-            const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
-            const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
-            const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
-            const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
+            const aX = a.x || 0;
+            const aY = a.y || 0;
+            const bX = b.x || 0;
+            const bY = b.y || 0;
             // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
             // left to right. But Y coordinates are inverted in PDFs. The reason for
             // the division is because no human makes perfect templates and frequently
@@ -364,11 +350,10 @@ export class VerdocsSign {
         // Find and focus the next incomplete` field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => !this.isFieldFilled(field));
         emptyFields.sort((a, b) => {
-            var _a, _b, _c, _d;
-            const aX = ((_a = a.settings) === null || _a === void 0 ? void 0 : _a.x) || 0;
-            const aY = ((_b = a.settings) === null || _b === void 0 ? void 0 : _b.y) || 0;
-            const bX = ((_c = b.settings) === null || _c === void 0 ? void 0 : _c.x) || 0;
-            const bY = ((_d = b.settings) === null || _d === void 0 ? void 0 : _d.y) || 0;
+            const aX = a.x || 0;
+            const aY = a.y || 0;
+            const bX = b.x || 0;
+            const bY = b.y || 0;
             // NOTE: Logic looks a little strange X vs Y. It's because we go top down,
             // left to right. But Y coordinates are inverted in PDFs. The reason for
             // the division is because no human makes perfect templates and frequently
@@ -406,7 +391,7 @@ export class VerdocsSign {
         }
     }
     getRecipientFields() {
-        return this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name);
+        return this.envelope.fields.filter(field => field.role_name === this.recipient.role_name);
     }
     // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
     checkRecipientFields() {
@@ -429,7 +414,7 @@ export class VerdocsSign {
             // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
             // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
             // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
-            if (e.target.name.includes('date') || e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
+            if (e.target.name.includes('date') || e.target.name.includes('checkbox') || e.target.name.includes('radio')) {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
             }
             else {

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.js

@@ -21,6 +21,8 @@ export class VerdocsContactPicker {
         this.templateRole = null;
         this.contactSuggestions = [];
         this.name = undefined;
+        this.first_name = undefined;
+        this.last_name = undefined;
         this.email = undefined;
         this.phone = undefined;
         this.message = undefined;
@@ -31,12 +33,19 @@ export class VerdocsContactPicker {
         this.kbaMethod = '';
         this.pinCode = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
+        this.firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;
+        this.lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;
         this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
         this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
     }
     componentWillLoad() {
         if (this.templateRole) {
+            const nameComponents = (this.templateRole.full_name || '').split(' ');
+            const firstName = nameComponents.shift() || '';
+            const lastName = nameComponents.join(' ');
             this.name = this.templateRole.full_name || '';
+            this.first_name = firstName;
+            this.last_name = lastName;
             this.email = this.templateRole.email || '';
             this.phone = this.templateRole.phone || '';
             this.delegator = this.templateRole.delegator || false;
@@ -74,6 +83,8 @@ export class VerdocsContactPicker {
         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,
             phone: this.phone,
             message: this.message,
@@ -83,6 +94,8 @@ export class VerdocsContactPicker {
     handleSelectSuggestion(e, suggestion) {
         e.stopPropagation();
         this.name = suggestion.name;
+        this.first_name = suggestion.first_name;
+        this.last_name = suggestion.last_name;
         this.email = suggestion.email;
         this.phone = suggestion.phone;
         this.showSuggestions = false;
@@ -90,26 +103,24 @@ export class VerdocsContactPicker {
     // 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: 'd5f351153f58ec275d6bc7225db6aee53a5c54e6', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '960ec06a72d7b14c6ad4609ccba90639b746e93e', class: "row" }, h("label", { key: '0ab66bf6689aa26132718cf673d7275708945ae4', htmlFor: this.nameFieldId }, "Name:"), h("input", { key: '25e2406d5b1ad78ada9c999fdefd3c16bccb60eb', id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
-            // onBlur={() => (this.showSuggestions = false)}
-            onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { key: 'ec9dfb86c52a462005b00d857f2f945b6a5861a8', class: "dropdown" }, this.contactSuggestions.map(suggestion => {
+        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 => {
             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: 'e8f2ee3647ffc37a31cb4f1d8a043183ce608268', class: "row" }, h("label", { key: '99840da172556066187691124358fd64c19c466d', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'bba477caa2c14def36cf90f66bc164d58ccae999', 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: 'a3e045ec2fe78e1662c389c2fdb742165e67cbfd', class: "row" }, h("label", { key: '19257fb97c8b0163c7d3882130bb298388c57901', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'ae3bbc51bed7039b716153675e3036abdf161382', 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: 'b05e51e9e9f1abb359113bea8cbc1c61c2979dbc', class: "row" }, h("div", { key: 'a905229b77e8b7941586834d4f942530d0b3d254', class: "label-with-icon" }, h("label", { key: 'b438b090c40ef5cd4c6550cd3cd57c676ab49061' }, "KBA:"), h("verdocs-help-icon", { key: '72fd391e008444b1f55c99833cc6f6e13670f199', 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: '8af56bf9b367faaec0777d4f0d555f9a0f1f4145', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+        })))), 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: [
                 { label: 'None', value: '' },
                 { label: 'PIN Code', value: 'pin' },
                 { label: 'Full Verification', value: 'kba' },
-            ] }), this.kbaMethod === 'pin' && (h("input", { key: '504c018a9c8ad9087ddd6b253b794c493bb16686', 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: '0506d342d5fcbdc812498ffbf19bcd9bd2d1abca', class: "row" }, h("label", { key: 'e62684bc9178188fed71eb77954b186511a0c29d', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'b9638d6435b7d0dc8815f20e42c2b5498ab308a0', 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: 'efc4e30feb9b3c58cc39e85725a6b780d424ca6e', class: "buttons" }, h("verdocs-toggle-button", { key: '6146346933119b33a1cd494e21e0d1a0195378cc', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+            ] }), 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.showKba = e.detail.active;
                 if (!e.detail.active) {
                     this.pinCode = '';
                     this.kbaMethod = '';
                 }
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: 'ba3139369cb582ec7ca246f4ad08a58998eca1eb', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: '8d7468bdc795eff356f4636bff62b9536c0a2d59', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: '52ab10bc5857dc55244d064c20a2d59eb67bca82', class: "flex-fill" }), h("verdocs-button", { key: '4eedb7f847d8004567c24f25c7efa2ae9d6da61b', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '4b4b461f150eaf575e4b22760388ecea92f7da54', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), 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) }))));
     }
     static get is() { return "verdocs-contact-picker"; }
     static get originalStyleUrls() {
@@ -150,13 +161,17 @@ export class VerdocsContactPicker {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "IRole | null",
-                    "resolved": "IRole",
+                    "original": "Partial<IRecipient> | null",
+                    "resolved": "{ id?: string; envelope_id?: string; role_name?: string; profile_id?: string; status?: TRecipientStatus; email?: string; phone?: string; full_name?: string; first_name?: string; last_name?: string; address?: string; city?: string; state?: string; zip?: string; ssn_last_4?: string; sequence?: number; order?: number; type?: TRecipientType; delegator?: boolean; delegated_to?: string; message?: string; claimed?: boolean; agreed?: boolean; key_used_to_conclude?: string; environment?: string; created_at?: string; updated_at?: string; last_attempt_at?: string; kba_method?: \"pin\" | \"identity\"; kba_pin?: string; kba_completed?: boolean; kba_details?: Record<string, any>; envelope?: IEnvelope; profile?: IProfile; }",
                     "references": {
-                        "IRole": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "IRecipient": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": "node_modules::IRole"
+                            "id": "node_modules::IRecipient"
                         }
                     }
                 },
@@ -200,6 +215,8 @@ export class VerdocsContactPicker {
     static get states() {
         return {
             "name": {},
+            "first_name": {},
+            "last_name": {},
             "email": {},
             "phone": {},
             "message": {},
@@ -210,6 +227,8 @@ export class VerdocsContactPicker {
             "kbaMethod": {},
             "pinCode": {},
             "nameFieldId": {},
+            "firstNameFieldId": {},
+            "lastNameFieldId": {},
             "emailFieldId": {},
             "phoneFieldId": {}
         };

package/dist/collection/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.js

@@ -75,7 +75,7 @@ export class VerdocsEnvelopeDocumentPage {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: '1626cbea713462254f8d518479181a39156fd599', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (h(Host, { key: 'f4ffa325b8eb3f8047dbe704cfc89aeeee1aad26', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.css

@@ -37,6 +37,9 @@ verdocs-envelope-sidebar .side-buttons {
   display: flex;
 }
 verdocs-envelope-sidebar .side-buttons button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   height: 50px;
   outline: none;
   border: none;

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.js

@@ -191,18 +191,18 @@ export class VerdocsEnvelopesList {
         });
     }
     render() {
-        return (h(Host, { key: 'c97d8d4415fb171c1335d3fbef9a885329740613' }, h("div", { key: 'dc0117f6476648985fdad07525e3c10c0a4542d3', class: "header" }, h("div", { key: 'ebd6521d3e9afd5ff9883829c7f66c55f31e7659', class: "filter" }, h("verdocs-text-input", { key: 'a5c15206146898551ac7ec9e22385335d1215d0a', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
+        return (h(Host, { key: 'f2d9959d6f173c5f43075cd8e983bfaa204b4d74' }, h("div", { key: '13d4ba423c58911e560b3f0fcd005aefaac9bf85', class: "header" }, h("div", { key: '856651a72ebaa3402985a07adf898c1248ab90fc', class: "filter" }, h("verdocs-text-input", { key: '36e95337804ee01a54c2a2cb09770ceae1a3be12', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
                 var _a;
                 // We don't locally filter envelopes because there are too many fields to match against efficiently.
                 this.match = e.target.value.trim();
                 (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
-            } })), h("verdocs-quick-filter", { key: '497b419b0789a338264523b52e6c2f15de6d02fe', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: 'f3a65dcdbfa5eeae30d0b5c97b936197d48a0c6f', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
                 this.view = e.detail.value;
-            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'ca4c1472e25cf458699a5b3cbd7bd55156938a59', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
+            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: '4eea6c7923251c0d9758cf7eb1fd1e13f62d3e77', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
                 this.status = e.detail.value;
-            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '232cacdc7d067961da8d1c9482d07c6e76b84d38', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
+            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '6b5495e7e03b06f4b0dd0cbccada866a04f0efe8', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
                 this.sort = e.detail.value;
-            } })), this.loading && h("verdocs-spinner", { key: '44c39036f7ac8358a9c8b658e533c393413dc4db', mode: "dark", size: 24 }), h("div", { key: 'f5b8246bf8cdfa9737b8675b59e44fc45df3cc06', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: '9c6f32a107c15af7173ae4fd2ac16265bcc8be6f', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+            } })), this.loading && h("verdocs-spinner", { key: 'c37a510b39de9bd7ddb8617cc3af592eb88a260d', mode: "dark", size: 24 }), h("div", { key: '04db9eca9b23e3dceb163d8cb6bcf766cfb28fa2', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: '0fd88565bbc87bf75c164715a8cc69099c39ba01', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
             var _a;
             const recipientsWithActions = getRecipientsWithActions(envelope);
             const userCanCancel = userCanCancelEnvelope(this.endpoint.profile, envelope);
@@ -243,7 +243,7 @@ export class VerdocsEnvelopesList {
                             break;
                     }
                 } }))));
-        }), !this.initiallyLoaded && (h("div", { key: '3008dcd8a557d2f47041455cf9fa554bbcc0b229', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: 'f1e6ffe23cd5c2d9cf18bafadbf0b61e70984f4d', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+        }), !this.initiallyLoaded && (h("div", { key: '61a9e69c17606600ecce9926286a019a4bd3f6e2', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '8b351e5c629ef3d4610a56b26f0eb264f7b4e6ff', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
                 this.selectedPage = e.detail.selectedPage;
             } }))) : (h("div", null))));
     }

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

@@ -238,11 +238,11 @@ export class VerdocsStatusIndicator {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: '2f8dd56b30f867568973f33f2459fe8492fe046c', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: '16612687bb40047d888f35071a017956c670dfa7', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '19a3fe86138e330435d14d4c8ca9db6021bb7bdc', class: "icon", innerHTML: icon }), h("span", { key: 'f7599f2ac78da17f85348dd67330abb3c6bd071c', class: "content" }, statusMessage), h("div", { key: '57be3fce89a8345d37f4599439e7641cbad6dd07', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'f1962e7251f027ddf9905516ba4136543d382197', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: 'b2d8a3e8916a42773129dfe1e751fec203a8e87e', class: "icon", innerHTML: icon }), h("span", { key: 'c8312f756bfc95da805faf269f583e2b840c6e56', class: "content" }, statusMessage), h("div", { key: '0517fb3aeba6908cf05f517c64fd8e8878c2d0ec', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '2de4e11a3b809b549a96f78e393ef9c95f3a3021', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
     static get is() { return "verdocs-status-indicator"; }
     static get originalStyleUrls() {

package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.css

@@ -12,29 +12,46 @@
 verdocs-field-attachment {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   box-sizing: border-box;
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   display: block;
   font-size: 11px;
   position: relative;
   background-color: transparent;
   transform-origin: bottom left;
 }
+verdocs-field-attachment label {
+  top: -14px;
+  left: -1px;
+  height: 14px;
+  color: white;
+  padding: 0 4px;
+  font-size: 9px;
+  line-height: 13px;
+  position: absolute;
+  background: #4a4a99;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
 verdocs-field-attachment svg {
   width: 16px;
   height: 16px;
 }
-verdocs-field-attachment.disabled {
+verdocs-field-attachment.disabled svg {
   opacity: 0.5;
 }
-verdocs-field-attachment.disabled span {
+verdocs-field-attachment.disabled svg span {
   cursor: inherit;
 }
-verdocs-field-attachment span {
+verdocs-field-attachment .attach {
   cursor: inherit;
-  width: 20px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-verdocs-field-attachment.required span {
+verdocs-field-attachment.required .attach {
   border: 1px solid #cc0000;
 }
 verdocs-field-attachment.focused {

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

@@ -1,9 +1,8 @@
 import interact from "interactjs";
 import { getRGBA, VerdocsEndpoint, updateField } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
-import { getFieldSettings } from "../../../utils/utils";
+import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { SettingsIcon } from "../../../utils/Icons";
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
@@ -79,15 +78,13 @@ export class VerdocsFieldAttachment {
         Object.assign(e.target.dataset, { x, y, h });
     }
     handleResizeEnd(e) {
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const newSettings = { ...getFieldSettings(field) };
-        newSettings.width = Math.round(parseFloat(e.target.style.width));
-        newSettings.height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { settings: newSettings })
+        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 })
             .then(field => {
             var _a;
             updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, field });
             Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
         })
             .catch(e => console.log('Field update failed', e));
@@ -107,14 +104,13 @@ export class VerdocsFieldAttachment {
     render() {
         const { templateid, fieldname = '', editable = false, 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 = '' } = field || {};
-        const { result: url = '' } = getFieldSettings(field);
+        const { required = false, role_name = '', value = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        const hasFile = url || !!this.selectedFile;
+        const hasFile = value || !!this.selectedFile;
         if (done) {
-            return (h(Host, { class: { done } }, h("span", { innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
+            return (h(Host, { class: { done } }, h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("span", { innerHTML: hasFile ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("label", null, label), h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -344,14 +340,9 @@ export class VerdocsFieldAttachment {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.css

@@ -11,16 +11,26 @@
   }
 }
 verdocs-field-checkbox {
+  padding: 0;
   width: 16px;
   height: 16px;
-  padding: 1px;
   display: block;
   box-sizing: border-box;
   transform-origin: bottom left;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
-verdocs-field-checkbox.disabled {
-  opacity: 0.5;
+verdocs-field-checkbox div.label {
+  top: -14px;
+  left: -1px;
+  height: 14px;
+  color: white;
+  padding: 0 4px;
+  font-size: 9px;
+  line-height: 13px;
+  position: absolute;
+  background: #4a4a99;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
 }
 verdocs-field-checkbox label {
   cursor: inherit;
@@ -29,6 +39,9 @@ verdocs-field-checkbox label {
   display: block;
   box-sizing: border-box;
 }
+verdocs-field-checkbox.disabled label {
+  opacity: 0.5;
+}
 verdocs-field-checkbox label > input[type=checkbox] {
   display: none;
 }
@@ -71,7 +84,7 @@ verdocs-field-checkbox verdocs-button-panel {
 }
 verdocs-field-checkbox .settings-icon {
   position: absolute;
-  top: -3px;
+  top: -5px;
   left: -20px;
   display: inline-block;
   cursor: pointer;

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

@@ -2,7 +2,6 @@ import { getRGBA } from "@verdocs/js-sdk";
 import { Fragment, h, Host } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
  * Displays a checkbox.
@@ -13,7 +12,6 @@ export class VerdocsFieldCheckbox {
         this.roleStore = null;
         this.templateid = '';
         this.fieldname = '';
-        this.option = 0;
         this.disabled = false;
         this.done = false;
         this.editable = false;
@@ -40,17 +38,18 @@ export class VerdocsFieldCheckbox {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        const { templateid, fieldname = '', option, editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { templateid, fieldname = '', editable = false, 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 = '' } = field || {};
-        const { options = [] } = getFieldSettings(field);
+        const { required = false, role_name = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        const { id = 'option1', checked = false } = options[option] || {};
+        // TODO
+        const { id = 'option1', checked = false } = {};
+        // const {id = 'option1', checked = false} = options[option] || {};
         const fieldId = `${fieldname}-${id}`;
         if (done) {
             return h(Host, { class: { done } }, checked ? '✓' : '☐');
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required, value: id }), h("span", null), 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) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required, value: id }), h("span", null), 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;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -112,24 +111,6 @@ export class VerdocsFieldCheckbox {
                 "reflect": true,
                 "defaultValue": "''"
             },
-            "option": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The index of the settings option this particular checkbox is for"
-                },
-                "attribute": "option",
-                "reflect": true,
-                "defaultValue": "0"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -275,14 +256,9 @@ export class VerdocsFieldCheckbox {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",