@verdocs/web-sdk 4.2.36 → 4.2.40

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

@@ -0,0 +1,350 @@
+import { getRGBA } from "@verdocs/js-sdk";
+import { h, Host, Fragment } from "@stencil/core";
+import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
+import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
+import { getFieldSettings } from "../../../utils/utils";
+import { SettingsIcon } from "../../../utils/Icons";
+const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
+const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
+/**
+ * Displays a radio button.
+ */
+export class VerdocsFieldRadio {
+    constructor() {
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.templateid = '';
+        this.fieldname = '';
+        this.option = 0;
+        this.disabled = false;
+        this.done = false;
+        this.editable = false;
+        this.moveable = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
+    }
+    async showSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.showPanel) {
+            settingsPanel.showPanel();
+        }
+    }
+    async hideSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.hidePanel) {
+            settingsPanel.hidePanel();
+        }
+    }
+    async componentWillLoad() {
+        this.fieldStore = getTemplateFieldStore(this.templateid);
+        this.roleStore = getTemplateRoleStore(this.templateid);
+    }
+    render() {
+        const { templateid, fieldname = '', option, 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 backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { id = 'option1', selected = false } = options[option] || {};
+        const fieldId = `${fieldname}-${id}`;
+        if (done) {
+            return (h(Host, { class: { done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
+        }
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), 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: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: "Radio buttons capture the recipient's selection of just one of several related (exclusive) options." })))))));
+    }
+    static get is() { return "verdocs-field-radio"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-field-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-field-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "templateid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+                },
+                "attribute": "templateid",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "fieldname": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the field to display."
+                },
+                "attribute": "fieldname",
+                "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,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "done": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
+                },
+                "attribute": "done",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
+                },
+                "attribute": "editable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "moveable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
+                },
+                "attribute": "moveable",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "xscale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, the field will be be scaled horizontally by this factor."
+                },
+                "attribute": "xscale",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "yscale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, the field will be be scaled vertically by this factor."
+                },
+                "attribute": "yscale",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "pagenumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The page the field is on"
+                },
+                "attribute": "pagenumber",
+                "reflect": true,
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showingProperties": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "settingsChanged",
+                "name": "settingsChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "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; }",
+                    "references": {
+                        "ITemplateFieldSetting": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": "node_modules::ITemplateFieldSetting"
+                        },
+                        "ITemplateField": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": "node_modules::ITemplateField"
+                        }
+                    }
+                }
+            }, {
+                "method": "deleted",
+                "name": "deleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when the field is deleted."
+                },
+                "complexType": {
+                    "original": "{fieldName: string}",
+                    "resolved": "{ fieldName: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showSettingsPanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hideSettingsPanel": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -283,12 +283,12 @@ export class VerdocsFieldRadioButton {
                         "ITemplateFieldSetting": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateFieldSetting"
                         },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateField"
                         }
                     }
                 }

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

@@ -344,12 +344,12 @@ export class VerdocsFieldSignature {
                         "ITemplateFieldSetting": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateFieldSetting"
                         },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateField"
                         }
                     }
                 }

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

@@ -140,7 +140,7 @@ export class VerdocsFieldTextarea {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -340,12 +340,12 @@ export class VerdocsFieldTextarea {
                         "ITemplateFieldSetting": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateFieldSetting"
                         },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateField"
                         }
                     }
                 }

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

@@ -16,6 +16,7 @@ export class VerdocsFieldTextbox {
         this.templateid = '';
         this.fieldname = '';
         this.disabled = false;
+        this.multiline = false;
         this.editable = false;
         this.moveable = false;
         this.done = false;
@@ -94,14 +95,18 @@ export class VerdocsFieldTextbox {
     render() {
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', placeholder = '' } = field || {};
-        const { result: value = '', width = 150 } = getFieldSettings(field);
+        let { required = false, role_name = '', placeholder = '', width = 150, height = 15, default: value = '' } = field || {};
+        // TODO: Consolidate value/defaultValue handling between template and envelope fields
+        if (field.value) {
+            value = field.value;
+        }
         // TODO: This is an outdated technique from the old system. We should compute it.
         const maxlength = width / 5;
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
+        console.log('text field', { multiline: this.multiline, value, placeholder, maxlength, width, height });
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, h("input", { type: "text", name: fieldname, value: value, disabled: disabled, required: required, placeholder: placeholder, maxlength: maxlength, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
@@ -138,7 +143,7 @@ export class VerdocsFieldTextbox {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -204,6 +209,24 @@ export class VerdocsFieldTextbox {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
+                },
+                "attribute": "multiline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "editable": {
                 "type": "boolean",
                 "mutable": false,
@@ -338,12 +361,12 @@ export class VerdocsFieldTextbox {
                         "ITemplateFieldSetting": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateFieldSetting"
                         },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateField"
                         }
                     }
                 }

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

@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import { format } from "date-fns/format";
 import { getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
@@ -267,12 +267,12 @@ export class VerdocsFieldTimestamp {
                         "ITemplateFieldSetting": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateFieldSetting"
                         },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplateField"
                         }
                     }
                 }

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

@@ -153,7 +153,7 @@ export class VerdocsTemplateAttachments {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -228,7 +228,7 @@ export class VerdocsTemplateAttachments {
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -249,12 +249,12 @@ export class VerdocsTemplateAttachments {
                         "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-build-tabs/verdocs-template-build-tabs.js

@@ -131,7 +131,7 @@ export class VerdocsTemplateBuildTabs {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },

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

@@ -37,7 +37,7 @@ export class VerdocsTemplateCard {
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 },

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

@@ -116,7 +116,7 @@ export class VerdocsTemplateCreate {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -171,7 +171,7 @@ export class VerdocsTemplateCreate {
                         "ITemplate": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::ITemplate"
                         }
                     }
                 }
@@ -213,12 +213,12 @@ export class VerdocsTemplateCreate {
                         "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-document-page/verdocs-template-document-page.js

@@ -100,14 +100,15 @@ export class VerdocsTemplateDocumentPage {
                 .map(field => {
                 var _a, _b;
                 const id = getFieldId(field);
-                let { name, type } = field;
+                let { name, type, multiline } = field;
                 const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
                 if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
                     type = 'textarea';
+                    multiline = true;
                 }
                 switch (type) {
                     case 'textbox':
-                        return (h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                        return (h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
                     case 'textarea':
                         return (h("verdocs-field-textarea", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
                     case 'date':
@@ -122,11 +123,13 @@ export class VerdocsTemplateDocumentPage {
                         return (h("verdocs-field-signature", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
                     case 'timestamp':
                         return (h("verdocs-field-timestamp", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'checkbox':
                     case 'checkbox_group':
                         return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
                             const id = getFieldOptionId(field, checkboxIndex);
                             return (h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, option: checkboxIndex, style: getControlStyles(field, xScale, yScale, checkboxIndex) }));
                         });
+                    case 'radio':
                     case 'radio_button_group':
                         return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
                             const id = getFieldOptionId(field, checkboxIndex);
@@ -173,7 +176,7 @@ export class VerdocsTemplateDocumentPage {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },

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

@@ -16,7 +16,13 @@ verdocs-template-field-properties {
   background: #ffffff;
   border: 1px solid #ccc;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1215686275);
+  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1215686275);
+}
+@media all and (max-width: 600px) {
+  verdocs-template-field-properties {
+    padding: 10px;
+    transform: scale(0.8);
+  }
 }
 verdocs-template-field-properties .buttons {
   display: flex;