@verdocs/web-sdk 4.2.36 → 4.2.40

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -1,11 +1,12 @@
 import interact from "interactjs";
+import { h, Host } from "@stencil/core";
 import { createField, integerSequence, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { defaultHeight, defaultWidth, getFieldId, removeCssTransform, updateCssTransform } from "../../../utils/utils";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
-import { defaultHeight, defaultWidth, getFieldId, getFieldOptionId, removeCssTransform, updateCssTransform } from "../../../utils/utils";
-import { h, Host } from "@stencil/core";
 import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateStore } from "../../../utils/TemplateStore";
 import { SDKError } from "../../../utils/errors";
+import { VerdocsToast } from "../../../utils/Toast";
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconTextarea = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
 const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
@@ -15,21 +16,22 @@ const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width
 const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
 const iconTimestamp = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z"></path></svg>';
 const iconDropdown = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
+const iconAttachment = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';
 const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
 const menuOptions = [
-    { id: 'signature', tooltip: 'Signature', icon: iconSignature },
-    { id: 'initial', tooltip: 'Initials', icon: iconInitial },
-    { id: 'sep1', tooltip: '', icon: separator },
-    { id: 'textbox', tooltip: 'Text Box', icon: iconTextbox },
-    { id: 'textarea', tooltip: 'Text Area', icon: iconTextarea },
-    { id: 'checkbox_group', tooltip: 'Check Box', icon: iconCheck },
-    { id: 'radio_button_group', tooltip: 'Radio Button', icon: iconRadio },
-    { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown },
-    { id: 'sep2', tooltip: '', icon: separator },
-    { id: 'date', tooltip: 'Date', icon: iconDatepicker },
-    { id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp },
+    { id: 'signature', tooltip: 'Signature', icon: iconSignature, class: 'signature' },
+    { id: 'initial', tooltip: 'Initials', icon: iconInitial, class: 'initial' },
+    { id: 'sep1', tooltip: '', icon: separator, class: 'separator' },
+    { id: 'textbox', tooltip: 'Text Box', icon: iconTextbox, class: 'textbox' },
+    { id: 'textarea', tooltip: 'Text Area', icon: iconTextarea, class: 'textarea' },
+    { id: 'checkbox_group', tooltip: 'Check Box', icon: iconCheck, class: 'checkbox' },
+    { id: 'radio_button_group', tooltip: 'Radio Button', icon: iconRadio, class: 'radio' },
+    { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown, class: 'dropdown' },
+    { id: 'sep2', tooltip: '', icon: separator, class: 'separator' },
+    { id: 'date', tooltip: 'Date', icon: iconDatepicker, class: 'date' },
+    { id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp, class: 'timestamp' },
     // {id: 'sep3', tooltip: '', icon: separator},
-    // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
+    { id: 'attachment', tooltip: 'Attachment', icon: iconAttachment, class: 'attachment' },
     // {id: 'payment', tooltip: 'Payment', icon: 'P'},
 ];
 /**
@@ -82,7 +84,7 @@ export class VerdocsTemplateFields {
             });
         }
         catch (e) {
-            console.log('[FIELDS] Error with preview session', e);
+            console.log('[FIELDS] Error with fields session', e);
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
@@ -116,7 +118,7 @@ export class VerdocsTemplateFields {
     }
     attachFieldAttributes(pageInfo, field, el) {
         el.addEventListener('input', e => this.handleFieldChange(field, e));
-        el.addEventListener('settingsChanged', e => {
+        el.addEventListener('settingsChanged', (e) => {
             var _a, _b;
             console.log('Settings changed', e.detail);
             (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
@@ -129,9 +131,9 @@ export class VerdocsTemplateFields {
         });
         el.setAttribute('templateid', this.templateId);
         el.setAttribute('fieldname', field.name);
-        el.setAttribute('pageNumber', pageInfo.pageNumber);
-        el.setAttribute('xScale', pageInfo.xScale);
-        el.setAttribute('yScale', pageInfo.yScale);
+        el.setAttribute('pageNumber', String(pageInfo.pageNumber));
+        el.setAttribute('xScale', String(pageInfo.xScale));
+        el.setAttribute('yScale', String(pageInfo.yScale));
         el.setAttribute('name', field.name);
     }
     handlePageRendered(e) {
@@ -143,20 +145,19 @@ export class VerdocsTemplateFields {
             .get('fields')
             .filter(field => field && field.page === pageInfo.pageNumber)
             .forEach(field => {
-            // TODO: Why isn't the attr already on the element carrying through?
             switch (field.type) {
-                case 'checkbox_group':
-                case 'radio_button_group':
-                    (field.settings || {}).options.map((_, index) => {
-                        const id = getFieldOptionId(field, index);
-                        const el = document.getElementById(id);
-                        if (el) {
-                            el.setAttribute('fieldname', field.name);
-                            el.setAttribute('pagenumber', String(field.page));
-                            this.makeDraggable(el);
-                        }
-                    });
-                    break;
+                // case 'checkbox_group':
+                // case 'radio_button_group':
+                //   (field.settings || {}).options.map((_, index) => {
+                //     const id = getFieldOptionId(field, index);
+                //     const el = document.getElementById(id);
+                //     if (el) {
+                //       el.setAttribute('fieldname', field.name);
+                //       el.setAttribute('pagenumber', String(field.page));
+                //       this.makeDraggable(el);
+                //     }
+                //   });
+                //   break;
                 default:
                     const id = getFieldId(field);
                     const el = document.getElementById(id);
@@ -189,7 +190,7 @@ export class VerdocsTemplateFields {
         updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
     async handleMoveEnd(event) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         const name = event.target.getAttribute('fieldname');
         const option = +(event.target.getAttribute('option') || '0');
         const field = this.fieldStore.get('fields').find(field => field.name === name);
@@ -209,35 +210,25 @@ export class VerdocsTemplateFields {
         const newX = Math.max(clientRect.left - parentRect.left, 0);
         const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
         const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
-        switch (field.type) {
-            case 'attachment':
-            case 'payment':
-            case 'initial':
-            case 'signature':
-            case 'date':
-            case 'dropdown':
-            case 'textarea':
-            case 'textbox':
-            case 'timestamp':
-                break;
-            case 'checkbox_group':
-            case 'radio_button_group':
-                {
-                    const opt = field.settings.options[option];
-                    if (opt) {
-                        opt.x = x;
-                        opt.y = y;
-                    }
-                }
-                break;
+        try {
+            const params = { x, y };
+            console.log('[FIELDS] Will update', name, y, option, params);
+            const newFieldData = await updateField(this.endpoint, this.templateId, name, params);
+            console.log('[FIELDS] Updated', newFieldData);
+            updateStoreField(this.fieldStore, name, newFieldData);
+            event.target.removeAttribute('posX');
+            event.target.removeAttribute('posY');
+            removeCssTransform(event.target);
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+        }
+        catch (e) {
+            VerdocsToast('Error updating field, please try again later', { style: 'error' });
+            console.log('[FIELDS] Error updating field', e);
+            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+            event.target.removeAttribute('posX');
+            event.target.removeAttribute('posY');
+            removeCssTransform(event.target);
         }
-        console.log('[FIELDS] Will update', name, y, option, field);
-        const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
-        updateStoreField(this.fieldStore, name, newFieldData);
-        event.target.removeAttribute('posX');
-        event.target.removeAttribute('posY');
-        removeCssTransform(event.target);
-        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
     }
     generateFieldName(type, pageNumber) {
         let i = 1;
@@ -273,84 +264,22 @@ export class VerdocsTemplateFields {
                 template_id: this.templateId,
                 document_id: cachedPage.documentId,
                 type: this.placing,
-                required: true,
+                required: this.placing === 'radio' ? false : true,
                 page: pageNumber,
                 validator: null,
                 label: null,
                 default: null,
                 placeholder: null,
                 group: null,
-                settings: { x, y }, // In the future, this is all we should send, see below
+                settings: {},
                 x,
                 y,
                 width,
                 height,
+                multiline: false,
+                options: this.placing === 'radio' ? [{ value: 'option-1', label: 'Option 1' }] : [],
             };
             console.log('[FIELDS] Will save new field', field);
-            // TODO: Fix how the server validates all this. It uses a JSON schema and is very particular about shapes for each field type.
-            //  That makes it harder for third party developers to create fields via API calls. It would be better to always set X/Y and
-            //  let the server normalize the rest, discarding properties that are invalid and back-filling defaults as needed.
-            switch (field.type) {
-                case 'attachment':
-                case 'payment':
-                    field.settings = { x, y };
-                    break;
-                case 'initial':
-                case 'signature':
-                    field.settings = { x, y, result: '' };
-                    break;
-                case 'checkbox_group':
-                    // @ts-ignore
-                    field.setting = {
-                        minimum_checked: 0,
-                        maximum_checked: 1000,
-                        options: [
-                            {
-                                id: `${field.name}-1`,
-                                value: 'Option 1',
-                                checked: false,
-                                x,
-                                y,
-                            },
-                        ],
-                    };
-                    break;
-                case 'date':
-                    field.settings = { x, y, width, height, result: '' };
-                    break;
-                case 'dropdown':
-                    field.required = false;
-                    field.settings = { x, y, width, height, value: null, placeholder: 'Choose', options: [{ id: 'option-1', value: 'Option 1' }] };
-                    break;
-                case 'radio_button_group':
-                    // @ts-ignore
-                    field.setting = {
-                        options: [
-                            {
-                                id: `${field.name}-1`,
-                                value: 'Option 1',
-                                selected: false,
-                                x,
-                                y,
-                            },
-                        ],
-                    };
-                    break;
-                // TODO: What about textareas?
-                case 'textarea':
-                case 'textbox':
-                    field.settings = { x, y, width, height, result: '', leading: 0, alignment: 0, upperCase: false };
-                    break;
-                case 'timestamp':
-                    field.settings = { x, y, width, height };
-                    break;
-            }
-            // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
-            // as a textbox with a leading>0 (typically 16).
-            if (field.type === 'textarea') {
-                field.settings.leading = 16;
-                field.type = 'textbox';
-            }
             const saved = await createField(this.endpoint, this.templateId, field);
             console.log('[FIELDS] Saved field', saved);
             this.fieldStore.set('fields', [...this.fieldStore.get('fields'), saved]);
@@ -367,7 +296,7 @@ export class VerdocsTemplateFields {
             return (h(Host, null, h("verdocs-loader", null)));
         }
         const selectableRoles = this.roleStore.get('roles').map(role => ({ value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name }));
-        return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, onSubmit: () => { } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
+        return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, onSubmit: () => { } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, class: option.class, onClick: () => {
                 // We ignore empty-tooltip entries because they're separators
                 if (option.tooltip) {
                     // We require a role to be selected first
@@ -409,7 +338,7 @@ export class VerdocsTemplateFields {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -506,12 +435,12 @@ export class VerdocsTemplateFields {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -532,12 +461,12 @@ export class VerdocsTemplateFields {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateField"
                         }
                     }
                 }

package/dist/collection/components/templates/verdocs-template-name/verdocs-template-name.js

@@ -90,7 +90,7 @@ export class VerdocsTemplateName {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -182,12 +182,12 @@ export class VerdocsTemplateName {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }

package/dist/collection/components/templates/verdocs-template-reminders/verdocs-template-reminders.js

@@ -126,7 +126,7 @@ export class VerdocsTemplateReminders {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -221,12 +221,12 @@ export class VerdocsTemplateReminders {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }

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

@@ -167,7 +167,7 @@ export class VerdocsTemplateRoleProperties {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -225,7 +225,7 @@ export class VerdocsTemplateRoleProperties {
                         "TTemplateSenderType": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::TTemplateSenderType"
                         }
                     }
                 },

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.js

@@ -281,7 +281,7 @@ export class VerdocsTemplateRoles {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -390,12 +390,12 @@ export class VerdocsTemplateRoles {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "IRole": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::IRole"
                         }
                     }
                 }

package/dist/collection/components/templates/verdocs-template-sender/verdocs-template-sender.js

@@ -86,7 +86,7 @@ export class VerdocsTemplateSender {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -126,7 +126,7 @@ export class VerdocsTemplateSender {
                         "TTemplateSenderType": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::TTemplateSenderType"
                         }
                     }
                 },

package/dist/collection/components/templates/verdocs-template-star/verdocs-template-star.js

@@ -63,7 +63,7 @@ export class VerdocsTemplateStar {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -85,7 +85,7 @@ export class VerdocsTemplateStar {
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 },

package/dist/collection/components/templates/verdocs-template-visibillity/verdocs-template-visibility.js

@@ -96,7 +96,7 @@ export class VerdocsTemplateVisibility {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -189,12 +189,12 @@ export class VerdocsTemplateVisibility {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }

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

@@ -235,7 +235,7 @@ export class VerdocsTemplatesList {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -446,12 +446,12 @@ export class VerdocsTemplatesList {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -472,12 +472,12 @@ export class VerdocsTemplatesList {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -498,12 +498,12 @@ export class VerdocsTemplatesList {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -524,12 +524,12 @@ export class VerdocsTemplatesList {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -550,12 +550,12 @@ export class VerdocsTemplatesList {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         },
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }

package/dist/collection/utils/Toast.js

@@ -52,7 +52,7 @@ export const VerdocsToast = (text, config = {}) => {
     toast.innerHTML = toastBody;
     toast.style.cssText = `
 display: flex; flex-direction: row; gap: 10px; align-items: center;
-position: fixed; top: 20px; right: 20px; z-index: 2147483647; width: 80%; max-width: calc(100% - 40px);
+position: fixed; top: 20px; right: 20px; z-index: 2147483647; width: 50%; max-width: calc(100% - 40px);
 color: #ffffff; background: ${color}; font-family: 'Barlow', sans-serif;
 border-radius: 2px; padding-left: 10px;
 box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);`;

package/dist/collection/utils/utils.js

@@ -18,6 +18,7 @@ export const defaultWidth = (type) => {
         case 'attachment':
         case 'payment':
             return 24;
+        case 'radio':
         case 'checkbox':
         case 'checkbox_group':
         case 'radio_button_group':
@@ -45,6 +46,7 @@ export const defaultHeight = (type) => {
         case 'attachment':
         case 'payment':
             return 24;
+        case 'radio':
         case 'checkbox':
         case 'checkbox_group':
         case 'radio_button_group':
@@ -162,8 +164,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             controlsDiv.appendChild(el);
             return el;
         }
-        // @ts-ignore
-        case 'checkbox':
+        case 'checkbox': {
             const id = getFieldOptionId(field, 0);
             const existingField = document.getElementById(id);
             if (existingField) {
@@ -189,6 +190,34 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, 0);
             controlsDiv.appendChild(cbEl);
             return cbEl;
+        }
+        case 'radio': {
+            const id = getFieldOptionId(field, 0);
+            const existingField = document.getElementById(id);
+            if (existingField) {
+                setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+                return existingField;
+            }
+            const radioEl = document.createElement(`verdocs-field-radio`);
+            radioEl.field = field;
+            radioEl.setAttribute('id', id);
+            radioEl.setAttribute('option', 0);
+            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, 0);
+            controlsDiv.appendChild(radioEl);
+            return radioEl;
+        }
         case 'checkbox_group':
             return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
                 const id = getFieldOptionId(field, checkboxIndex);
@@ -245,13 +274,6 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
                 controlsDiv.appendChild(radioEl);
                 return radioEl;
             });
-        // case 'attachment':
-        //   el = document.createElement('verdocs-field-attachment');
-        //   el.setAttribute('value', result || '');
-        //   break;
-        // case 'payment':
-        //   el = document.createElement('verdocs-field-payment');
-        //   break;
         default:
             console.log('[PREVIEW] Skipping unsupported field type', field);
             return null;