@verdocs/web-sdk 4.2.43 → 4.2.47

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

@@ -144,24 +144,24 @@ export class VerdocsTemplatesList {
         // In addition to the server query we also filter locally. This provides a faster UI update
         // while the onBlur re-queries the server for any new records that now qualify by the filter.
         const locallyFilteredTemplates = !this.localNameFilter ? this.templates : this.templates.filter(t => t.name.toLowerCase().includes(this.localNameFilter.toLowerCase()));
-        return (h(Host, { key: '567fb81399e2719e52ad2ede3f6786ac9b81dd28' }, h("div", { key: '9b8c57ecc7ec397ae2a295263e44283d48408d1f', class: "header" }, h("div", { key: '902b1e9c4e636ada6b55ba01e5d9ff855892a5d4', class: "filter" }, h("verdocs-text-input", { key: '0cff9a689fec70e1516d828823adc411d6b9353f', id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
+        return (h(Host, { key: '9d14c5bae8ea56281a33536160450cb0488dc52f' }, h("div", { key: 'c59959d7087a0a714b5c6b3a493c5c7446e71906', class: "header" }, h("div", { key: 'e51316310fbb444100962cb0b5a3e4d373af7d04', class: "filter" }, h("verdocs-text-input", { key: 'f528b443e50837c14af05aecf3e55cd89fa25f54', id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
                 var _a;
                 this.name = e.target.value.trim();
                 this.localNameFilter = e.target.value.trim();
                 (_a = this.changeName) === null || _a === void 0 ? void 0 : _a.emit(this.name);
-            } })), h("verdocs-quick-filter", { key: 'd972df79f9706106ac104d1dc332891650440f02', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: '80693fdb171cc9ebe2b1488413adaf9c1499f24a', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
                 var _a;
                 this.sharing = e.detail.value;
                 (_a = this.changeSharing) === null || _a === void 0 ? void 0 : _a.emit(this.sharing);
-            } }), h("verdocs-quick-filter", { key: '59f5120af2e4142d1df9d7fd7745d750aefed1a9', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
+            } }), h("verdocs-quick-filter", { key: 'b2ad4b67caf43236a2ace3973d36f27856f51610', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
                 var _a;
                 this.starred = e.detail.value;
                 (_a = this.changeStarred) === null || _a === void 0 ? void 0 : _a.emit(this.starred);
-            } }), h("verdocs-quick-filter", { key: '136ba69d6a611450f5a7577377fdc49077bc7c75', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
+            } }), h("verdocs-quick-filter", { key: 'a448da8ee694fcb964d047cd35c19740abd80d49', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
                 var _a;
                 this.sort = e.detail.value;
                 (_a = this.changeSort) === null || _a === void 0 ? void 0 : _a.emit(this.sort);
-            } }), this.loading && h("verdocs-spinner", { key: '2f5ecff99858ac58cb9c3163ebf29de9c9af0600', mode: "dark", size: 24 }), h("div", { key: '002f869e168bede8529f5a1eef34193a1c7fa2a4', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
+            } }), this.loading && h("verdocs-spinner", { key: 'f4bc962a22034a2faa3ed815d40d33f47e70c408', mode: "dark", size: 24 }), h("div", { key: 'a0434d9ec54346c558999ac88bbcff024ade0727', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
             const dateToShow = this.sort === 'created_at' ? 'created_at' : this.sort === 'updated_at' ? 'updated_at' : 'last_used_at';
             const date = template[dateToShow];
             const MENU_OPTIONS = [];
@@ -208,9 +208,9 @@ export class VerdocsTemplatesList {
                     var _a;
                     (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template });
                 } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: template, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("div", { class: "name" }, template.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon, title: "Usage Counter" }), template.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, dateToShow === 'created_at' && h("span", { innerHTML: CreatedIcon, title: "Created" }), dateToShow === 'updated_at' && h("span", { innerHTML: UpdatedIcon, title: "Last Updated" }), dateToShow === 'last_used_at' && h("span", { innerHTML: LastUsedIcon, title: "Last Used" }), date ? format(new Date(date), 'P') : 'Never'), h("div", { class: "spacer ownership-spacer" }), template.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !template.is_public && !template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !template.is_public && template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, template) }))));
-        }), !this.initiallyLoaded && (h("div", { key: '474cabc9eec73c09797ced3f8a30f96cdfcf8c83' }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { key: '0672ebc51ac1fb5277bf4221d3e5317989e31a07', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.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: '0f5ae9865209b24176770ab2f9af2657e20fc8f7' }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { key: '42a3642519dedc31dfb49b798b03179a6c7449c6', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.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)), this.confirmDelete && (h("verdocs-ok-dialog", { key: '891cd4b0f6930b148b6144a17285c487aae56b51', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
+            } }))) : (h("div", null)), this.confirmDelete && (h("verdocs-ok-dialog", { key: '6d5f37081d75a19f0d5579b8387d19e45c585f92', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
     }
     static get is() { return "verdocs-templates-list"; }
     static get originalStyleUrls() {

package/dist/collection/utils/EnvelopeStore.js

@@ -66,9 +66,6 @@ export const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false
                 if (!document.order) {
                     document.order = 0;
                 }
-                if (document.page_numbers) {
-                    document.pages = document.page_numbers;
-                }
             });
             console.debug('[ENVELOPES] Got envelope', envelope);
             Object.assign(store.state, envelope);

package/dist/collection/utils/TemplateStore.js

@@ -40,7 +40,7 @@ const createTemplateStore = (templateId) => {
 };
 const templateStores = {};
 export const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
-    var _a, _b;
+    var _a;
     let created = false;
     if (!templateStores[templateId]) {
         console.debug('[TEMPLATES] No template store found for ID, creating', templateId);
@@ -68,11 +68,6 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
                     document.pages = document.page_numbers;
                 }
             });
-            (_b = template.fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
-                if (field.setting) {
-                    field.settings = field.setting;
-                }
-            });
             console.debug('[TEMPLATES] Got template', template);
             Object.assign(store.state, template);
             store.state.isLoaded = true;

package/dist/collection/utils/utils.js

@@ -20,8 +20,6 @@ export const defaultWidth = (type) => {
             return 24;
         case 'radio':
         case 'checkbox':
-        case 'checkbox_group':
-        case 'radio_button_group':
             return 14;
         case 'signature':
         case 'initial':
@@ -48,8 +46,6 @@ export const defaultHeight = (type) => {
             return 24;
         case 'radio':
         case 'checkbox':
-        case 'checkbox_group':
-        case 'radio_button_group':
             return 14;
         case 'signature':
         case 'initial':
@@ -59,17 +55,16 @@ export const defaultHeight = (type) => {
     }
     return 50;
 };
-export const setControlStyles = (el, field, xScale, yScale, option) => {
-    var _a, _b, _c, _d;
+export const setControlStyles = (el, field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    const settings = field.settings || field.settings;
-    const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    if (optionSettings) {
-        x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
-        y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
-        width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
-        height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
-    }
+    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
+    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
+    // if (optionSettings) {
+    //   x = optionSettings.x ?? x;
+    //   y = optionSettings.y ?? y;
+    //   width = optionSettings.width ?? width;
+    //   height = optionSettings.height ?? height;
+    // }
     el.style.width = `${width}px`;
     el.style.height = `${height}px`;
     el.style.position = 'absolute';
@@ -78,17 +73,16 @@ export const setControlStyles = (el, field, xScale, yScale, option) => {
     el.style.transform = `scale(${xScale}, ${yScale})`;
     // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
 };
-export const getControlStyles = (field, xScale, yScale, option) => {
-    var _a, _b, _c, _d;
+export const getControlStyles = (field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    const settings = field.settings || field.settings;
-    const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    if (optionSettings) {
-        x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
-        y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
-        width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
-        height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
-    }
+    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
+    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
+    // if (optionSettings) {
+    //   x = optionSettings.x ?? x;
+    //   y = optionSettings.y ?? y;
+    //   width = optionSettings.width ?? width;
+    //   height = optionSettings.height ?? height;
+    // }
     return {
         width: `${width}px`,
         height: `${height}px`,
@@ -122,6 +116,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
         console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
         return;
     }
+    console.log('[renderDocumentField] Rendering field', field);
     switch (field.type) {
         case 'attachment':
         case 'date':
@@ -168,7 +163,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             const id = getFieldOptionId(field, 0);
             const existingField = document.getElementById(id);
             if (existingField) {
-                setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+                setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
                 return existingField;
             }
             const cbEl = document.createElement(`verdocs-field-checkbox`);
@@ -187,7 +182,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             if (draggable) {
                 cbEl.setAttribute('draggable', true);
             }
-            setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, 0);
+            setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);
             controlsDiv.appendChild(cbEl);
             return cbEl;
         }
@@ -195,7 +190,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             const id = getFieldOptionId(field, 0);
             const existingField = document.getElementById(id);
             if (existingField) {
-                setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+                setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
                 return existingField;
             }
             const radioEl = document.createElement(`verdocs-field-radio`);
@@ -214,72 +209,16 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             if (draggable) {
                 radioEl.setAttribute('draggable', true);
             }
-            setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, 0);
+            setControlStyles(radioEl, field, docPage.xScale, docPage.yScale);
             controlsDiv.appendChild(radioEl);
             return radioEl;
         }
-        case 'checkbox_group':
-            return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
-                const id = getFieldOptionId(field, checkboxIndex);
-                const existingField = document.getElementById(id);
-                if (existingField) {
-                    setControlStyles(existingField, field, docPage.xScale, docPage.yScale, checkboxIndex);
-                    return existingField;
-                }
-                const cbEl = document.createElement(`verdocs-field-checkbox`);
-                cbEl.field = field;
-                cbEl.setAttribute('id', id);
-                cbEl.setAttribute('option', checkboxIndex);
-                if (disabled) {
-                    cbEl.setAttribute('disabled', true);
-                }
-                if (done) {
-                    cbEl.setAttribute('done', true);
-                }
-                if (editable) {
-                    cbEl.setAttribute('editable', true);
-                }
-                if (draggable) {
-                    cbEl.setAttribute('draggable', true);
-                }
-                setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
-                controlsDiv.appendChild(cbEl);
-                return cbEl;
-            });
-        case 'radio_button_group':
-            return (field.settings || field.setting || {}).options.map((_, buttonIndex) => {
-                const id = getFieldOptionId(field, buttonIndex);
-                const existingField = document.getElementById(id);
-                if (existingField) {
-                    setControlStyles(existingField, field, docPage.xScale, docPage.yScale, buttonIndex);
-                    return existingField;
-                }
-                const radioEl = document.createElement(`verdocs-field-radio-button`);
-                radioEl.field = field;
-                radioEl.setAttribute('id', id);
-                radioEl.setAttribute('option', buttonIndex);
-                if (disabled) {
-                    radioEl.setAttribute('disabled', true);
-                }
-                if (done) {
-                    radioEl.setAttribute('done', true);
-                }
-                if (editable) {
-                    radioEl.setAttribute('editable', true);
-                }
-                if (draggable) {
-                    radioEl.setAttribute('draggable', true);
-                }
-                setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
-                controlsDiv.appendChild(radioEl);
-                return radioEl;
-            });
         default:
             console.log('[PREVIEW] Skipping unsupported field type', field);
             return null;
     }
 };
-export const getFieldSettings = (field) => (field === null || field === void 0 ? void 0 : field.settings) || {};
+// export const getFieldSettings = (field: ITemplateField | IEnvelopeField | undefined) => field?.settings || {};
 /**
  * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
  * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the

package/dist/components/EnvelopeStore.js

@@ -67,9 +67,6 @@ const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
                 if (!document.order) {
                     document.order = 0;
                 }
-                if (document.page_numbers) {
-                    document.pages = document.page_numbers;
-                }
             });
             console.debug('[ENVELOPES] Got envelope', envelope);
             Object.assign(store.state, envelope);

package/dist/components/TemplateStore.js

@@ -41,7 +41,7 @@ const createTemplateStore = (templateId) => {
 };
 const templateStores = {};
 const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
-    var _a, _b;
+    var _a;
     let created = false;
     if (!templateStores[templateId]) {
         console.debug('[TEMPLATES] No template store found for ID, creating', templateId);
@@ -69,11 +69,6 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
                     document.pages = document.page_numbers;
                 }
             });
-            (_b = template.fields) === null || _b === void 0 ? void 0 : _b.forEach(field => {
-                if (field.setting) {
-                    field.settings = field.setting;
-                }
-            });
             console.debug('[TEMPLATES] Got template', template);
             Object.assign(store.state, template);
             store.state.isLoaded = true;

package/dist/components/index.js

@@ -1,4 +1,3 @@
-import { VerdocsActivityBox } from './verdocs-activity-box.js';
 import { VerdocsAuth } from './verdocs-auth.js';
 import { VerdocsBuild } from './verdocs-build.js';
 import { VerdocsButton } from './verdocs-button.js';
@@ -20,7 +19,6 @@ import { VerdocsFieldDropdown } from './verdocs-field-dropdown.js';
 import { VerdocsFieldInitial } from './verdocs-field-initial.js';
 import { VerdocsFieldPayment } from './verdocs-field-payment.js';
 import { VerdocsFieldRadio } from './verdocs-field-radio.js';
-import { VerdocsFieldRadioButton } from './verdocs-field-radio-button.js';
 import { VerdocsFieldSignature } from './verdocs-field-signature.js';
 import { VerdocsFieldTextarea } from './verdocs-field-textarea.js';
 import { VerdocsFieldTextbox } from './verdocs-field-textbox.js';
@@ -77,7 +75,6 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {
         [
-            VerdocsActivityBox,
             VerdocsAuth,
             VerdocsBuild,
             VerdocsButton,
@@ -99,7 +96,6 @@ const defineCustomElements = (opts) => {
             VerdocsFieldInitial,
             VerdocsFieldPayment,
             VerdocsFieldRadio,
-            VerdocsFieldRadioButton,
             VerdocsFieldSignature,
             VerdocsFieldTextarea,
             VerdocsFieldTextbox,

package/dist/components/utils.js

@@ -41,8 +41,6 @@ const defaultWidth = (type) => {
             return 24;
         case 'radio':
         case 'checkbox':
-        case 'checkbox_group':
-        case 'radio_button_group':
             return 14;
         case 'signature':
         case 'initial':
@@ -69,8 +67,6 @@ const defaultHeight = (type) => {
             return 24;
         case 'radio':
         case 'checkbox':
-        case 'checkbox_group':
-        case 'radio_button_group':
             return 14;
         case 'signature':
         case 'initial':
@@ -80,17 +76,16 @@ const defaultHeight = (type) => {
     }
     return 50;
 };
-const setControlStyles = (el, field, xScale, yScale, option) => {
-    var _a, _b, _c, _d;
+const setControlStyles = (el, field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    const settings = field.settings || field.settings;
-    const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    if (optionSettings) {
-        x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
-        y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
-        width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
-        height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
-    }
+    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
+    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
+    // if (optionSettings) {
+    //   x = optionSettings.x ?? x;
+    //   y = optionSettings.y ?? y;
+    //   width = optionSettings.width ?? width;
+    //   height = optionSettings.height ?? height;
+    // }
     el.style.width = `${width}px`;
     el.style.height = `${height}px`;
     el.style.position = 'absolute';
@@ -99,17 +94,16 @@ const setControlStyles = (el, field, xScale, yScale, option) => {
     el.style.transform = `scale(${xScale}, ${yScale})`;
     // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
 };
-const getControlStyles = (field, xScale, yScale, option) => {
-    var _a, _b, _c, _d;
+const getControlStyles = (field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    const settings = field.settings || field.settings;
-    const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    if (optionSettings) {
-        x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
-        y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
-        width = (_c = optionSettings.width) !== null && _c !== void 0 ? _c : width;
-        height = (_d = optionSettings.height) !== null && _d !== void 0 ? _d : height;
-    }
+    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
+    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
+    // if (optionSettings) {
+    //   x = optionSettings.x ?? x;
+    //   y = optionSettings.y ?? y;
+    //   width = optionSettings.width ?? width;
+    //   height = optionSettings.height ?? height;
+    // }
     return {
         width: `${width}px`,
         height: `${height}px`,
@@ -143,6 +137,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
         console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
         return;
     }
+    console.log('[renderDocumentField] Rendering field', field);
     switch (field.type) {
         case 'attachment':
         case 'date':
@@ -189,7 +184,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             const id = getFieldOptionId(field, 0);
             const existingField = document.getElementById(id);
             if (existingField) {
-                setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+                setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
                 return existingField;
             }
             const cbEl = document.createElement(`verdocs-field-checkbox`);
@@ -208,7 +203,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             if (draggable) {
                 cbEl.setAttribute('draggable', true);
             }
-            setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, 0);
+            setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);
             controlsDiv.appendChild(cbEl);
             return cbEl;
         }
@@ -216,7 +211,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             const id = getFieldOptionId(field, 0);
             const existingField = document.getElementById(id);
             if (existingField) {
-                setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+                setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
                 return existingField;
             }
             const radioEl = document.createElement(`verdocs-field-radio`);
@@ -235,72 +230,16 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             if (draggable) {
                 radioEl.setAttribute('draggable', true);
             }
-            setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, 0);
+            setControlStyles(radioEl, field, docPage.xScale, docPage.yScale);
             controlsDiv.appendChild(radioEl);
             return radioEl;
         }
-        case 'checkbox_group':
-            return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
-                const id = getFieldOptionId(field, checkboxIndex);
-                const existingField = document.getElementById(id);
-                if (existingField) {
-                    setControlStyles(existingField, field, docPage.xScale, docPage.yScale, checkboxIndex);
-                    return existingField;
-                }
-                const cbEl = document.createElement(`verdocs-field-checkbox`);
-                cbEl.field = field;
-                cbEl.setAttribute('id', id);
-                cbEl.setAttribute('option', checkboxIndex);
-                if (disabled) {
-                    cbEl.setAttribute('disabled', true);
-                }
-                if (done) {
-                    cbEl.setAttribute('done', true);
-                }
-                if (editable) {
-                    cbEl.setAttribute('editable', true);
-                }
-                if (draggable) {
-                    cbEl.setAttribute('draggable', true);
-                }
-                setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
-                controlsDiv.appendChild(cbEl);
-                return cbEl;
-            });
-        case 'radio_button_group':
-            return (field.settings || field.setting || {}).options.map((_, buttonIndex) => {
-                const id = getFieldOptionId(field, buttonIndex);
-                const existingField = document.getElementById(id);
-                if (existingField) {
-                    setControlStyles(existingField, field, docPage.xScale, docPage.yScale, buttonIndex);
-                    return existingField;
-                }
-                const radioEl = document.createElement(`verdocs-field-radio-button`);
-                radioEl.field = field;
-                radioEl.setAttribute('id', id);
-                radioEl.setAttribute('option', buttonIndex);
-                if (disabled) {
-                    radioEl.setAttribute('disabled', true);
-                }
-                if (done) {
-                    radioEl.setAttribute('done', true);
-                }
-                if (editable) {
-                    radioEl.setAttribute('editable', true);
-                }
-                if (draggable) {
-                    radioEl.setAttribute('draggable', true);
-                }
-                setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
-                controlsDiv.appendChild(radioEl);
-                return radioEl;
-            });
         default:
             console.log('[PREVIEW] Skipping unsupported field type', field);
             return null;
     }
 };
-const getFieldSettings = (field) => (field === null || field === void 0 ? void 0 : field.settings) || {};
+// export const getFieldSettings = (field: ITemplateField | IEnvelopeField | undefined) => field?.settings || {};
 /**
  * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
  * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
@@ -405,4 +344,4 @@ const convertToE164 = (input) => {
     return `+1${temp}`;
 };
 
-export { saveAttachment as a, getFieldId as b, convertToE164 as c, renderedTextWidth as d, getControlStyles as e, getFieldOptionId as f, getFieldSettings as g, updateCssTransform as h, removeCssTransform as i, defaultWidth as j, defaultHeight as k, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, renderedTextWidth as b, convertToE164 as c, getControlStyles as d, updateCssTransform as e, removeCssTransform as f, getFieldId as g, defaultWidth as h, defaultHeight as i, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

package/dist/components/verdocs-build.js

@@ -2,17 +2,16 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$K } from './verdocs-button2.js';
-import { d as defineCustomElement$J } from './verdocs-button-panel2.js';
-import { d as defineCustomElement$I } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$H } from './verdocs-component-error2.js';
-import { d as defineCustomElement$G } from './verdocs-contact-picker2.js';
-import { d as defineCustomElement$F } from './verdocs-field-attachment2.js';
-import { d as defineCustomElement$E } from './verdocs-field-checkbox2.js';
-import { d as defineCustomElement$D } from './verdocs-field-date2.js';
-import { d as defineCustomElement$C } from './verdocs-field-dropdown2.js';
-import { d as defineCustomElement$B } from './verdocs-field-initial2.js';
-import { d as defineCustomElement$A } from './verdocs-field-radio-button2.js';
+import { d as defineCustomElement$J } from './verdocs-button2.js';
+import { d as defineCustomElement$I } from './verdocs-button-panel2.js';
+import { d as defineCustomElement$H } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$G } from './verdocs-component-error2.js';
+import { d as defineCustomElement$F } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$E } from './verdocs-field-attachment2.js';
+import { d as defineCustomElement$D } from './verdocs-field-checkbox2.js';
+import { d as defineCustomElement$C } from './verdocs-field-date2.js';
+import { d as defineCustomElement$B } from './verdocs-field-dropdown2.js';
+import { d as defineCustomElement$A } from './verdocs-field-initial2.js';
 import { d as defineCustomElement$z } from './verdocs-field-signature2.js';
 import { d as defineCustomElement$y } from './verdocs-field-textarea2.js';
 import { d as defineCustomElement$x } from './verdocs-field-textbox2.js';
@@ -171,7 +170,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio-button", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
+    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-build":
             if (!customElements.get(tagName)) {
@@ -179,56 +178,51 @@ function defineCustomElement$1() {
             }
             break;
         case "verdocs-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$K();
-            }
-            break;
-        case "verdocs-button-panel":
             if (!customElements.get(tagName)) {
                 defineCustomElement$J();
             }
             break;
-        case "verdocs-checkbox":
+        case "verdocs-button-panel":
             if (!customElements.get(tagName)) {
                 defineCustomElement$I();
             }
             break;
-        case "verdocs-component-error":
+        case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$H();
             }
             break;
-        case "verdocs-contact-picker":
+        case "verdocs-component-error":
             if (!customElements.get(tagName)) {
                 defineCustomElement$G();
             }
             break;
-        case "verdocs-field-attachment":
+        case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
                 defineCustomElement$F();
             }
             break;
-        case "verdocs-field-checkbox":
+        case "verdocs-field-attachment":
             if (!customElements.get(tagName)) {
                 defineCustomElement$E();
             }
             break;
-        case "verdocs-field-date":
+        case "verdocs-field-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$D();
             }
             break;
-        case "verdocs-field-dropdown":
+        case "verdocs-field-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$C();
             }
             break;
-        case "verdocs-field-initial":
+        case "verdocs-field-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$B();
             }
             break;
-        case "verdocs-field-radio-button":
+        case "verdocs-field-initial":
             if (!customElements.get(tagName)) {
                 defineCustomElement$A();
             }

package/dist/components/verdocs-button-panel2.js

@@ -67,10 +67,10 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class VerdocsButtonP
         }
     }
     render() {
-        return (h(Host, { key: '997291ad3f463fff0932490fdab478345757b2e4' }, h("div", { key: '02c1929038bcf9f9d3b433b95f9badcfbc3d6a48', class: "icon", innerHTML: this.icon, onClick: (e) => {
+        return (h(Host, { key: 'c77ea175bddafb381b9c2d59820bf5656d271ba6' }, h("div", { key: 'dd26de0092bec750606f81b3e41ded3169bce9ee', class: "icon", innerHTML: this.icon, onClick: (e) => {
                 e.stopPropagation();
                 return this.toggle();
-            }, ref: el => (this.iconEl = el) }), h("div", { key: '6c89badb41660bbe7b826b0f2758c8a6f7525b78', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '069ae9f31df8fdb08d4cdf37526f22494a4108f8', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'fc5af74e822ca9e0c4c2620585c66e1dcda8f237' }))));
+            }, ref: el => (this.iconEl = el) }), h("div", { key: '6708d3cb957b99e854747e74044040bbf8cbe418', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '9e4b2f228527b4474a6869ef436c3c6cb59d0ad7', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'ca4dc0f4d9cbee017c45dc084b772c0d303547f8' }))));
     }
     static get style() { return VerdocsButtonPanelStyle0; }
 }, [4, "verdocs-button-panel", {