@verdocs/web-sdk 4.2.36 → 4.2.40

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

@@ -7,20 +7,6 @@ import { SDKError } from "../../../utils/errors";
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
-// Credit: https://stackoverflow.com/a/78196510/1812436
-// NOTE: This is NOT safe or cryptographically strong, so it's not part of our core SDK's or Utils modules.
-// It should never be used anywhere a real GUID is required. But we don't need one here, we just need a
-// "GUID-like" value for one step of a field update operation (adding items to lists). There are no security
-// implications in how we use IDs for list items. They only need to be GUID-like for historical reasons that
-// we may change shortly anyway.
-function generateWeakGuid() {
-    const s4 = () => {
-        return Math.floor((1 + Math.random()) * 0x10000)
-            .toString(16)
-            .substring(1);
-    };
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-}
 /**
  * Displays an edit form that allows the user to adjust a field's settings.
  */
@@ -35,7 +21,6 @@ export class VerdocsTemplateFieldProperties {
         this.helpText = '';
         this.dirty = false;
         this.loading = true;
-        this.setting = null;
         this.label = '';
         this.type = 'textbox';
         this.name = '';
@@ -45,12 +30,12 @@ export class VerdocsTemplateFieldProperties {
         this.fieldType = '';
         this.options = [];
         this.placeholder = '';
-        this.value = '';
-        this.leading = 0;
+        this.multiline = false;
+        this.defaultValue = '';
         this.showingHelp = false;
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.templateId) {
@@ -66,154 +51,84 @@ export class VerdocsTemplateFieldProperties {
                 return;
             }
             this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
-            this.fieldStore = await getTemplateFieldStore(this.templateId);
-            this.roleStore = await getTemplateRoleStore(this.templateId);
-            // console.log('tfs', this.fieldStore?.state);
-            const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-            // console.log('gf', field);
-            if (!field) {
-                console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
-            }
-            else {
-                console.log('props', field);
-            }
-            this.type = field.type;
-            this.name = field.name;
-            this.label = field.label;
-            this.group = field.name;
-            this.roleName = field.role_name;
-            this.required = field.required;
-            this.fieldType = field.type;
-            // TODO: Talk about how we want to handle labels/placeholders
-            this.placeholder = ((_a = field.settings) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-            this.value = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '';
-            this.leading = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.leading) || 0;
-            this.setting = field.settings || {};
-            this.options = ((_d = field.settings) === null || _d === void 0 ? void 0 : _d.options) || [];
-            this.dirty = false;
-            this.loading = false;
-            console.log('Displaying settings for', this.setting);
+            this.fieldStore = getTemplateFieldStore(this.templateId);
+            this.roleStore = getTemplateRoleStore(this.templateId);
+            this.resetForm();
         }
         catch (e) {
             console.log('[FIELD PROPERTIES] Error loading template', e);
             this.loading = false;
-            (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+            (_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));
         }
     }
-    handleCancel(e) {
-        var _a, _b, _c, _d, _e;
-        e.stopPropagation();
+    resetForm() {
         const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
-        if (field) {
-            this.name = field.name;
-            this.label = field.label;
-            this.roleName = field.role_name;
-            this.required = field.required;
-            // TODO: Talk about how we want to handle labels/placeholders
-            this.placeholder = ((_a = field.settings) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
-            this.value = ((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '';
-            this.leading = ((_c = field.settings) === null || _c === void 0 ? void 0 : _c.leading) || 0;
+        if (!field) {
+            console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
+        }
+        else {
+            console.log('[FIELD PROPERTIES]', field);
         }
+        this.type = field.type;
+        this.name = field.name;
+        this.label = field.label;
+        this.group = field.name;
+        this.roleName = field.role_name;
+        this.required = field.required;
+        this.fieldType = field.type;
+        this.options = field.options;
+        this.placeholder = field.placeholder || '';
+        this.defaultValue = field.default || '';
+        this.multiline = field.multiline || false;
         this.dirty = false;
-        (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
-        (_e = document.getElementById('verdocs-template-field-properties')) === null || _e === void 0 ? void 0 : _e.remove();
+        this.loading = false;
     }
-    handleSave(e) {
+    handleCancel(e) {
+        var _a, _b;
         e.stopPropagation();
-        const newProperties = {
-            name: this.name,
-            label: this.label || null,
-            required: this.required,
-            role_name: this.roleName,
-            // TODO: Default value in setting?
-        };
-        if (this.type === 'checkbox_group' || this.type === 'radio_button_group') {
-            newProperties.settings = this.setting;
-            newProperties.settings.options = this.options;
-        }
-        else if (this.type === 'textarea' || this.type === 'textbox') {
-            newProperties.settings = { ...this.setting };
-            newProperties.settings.result = (this.value || '').trim();
-        }
-        else if (this.type === 'dropdown') {
-            newProperties.settings = {
-                x: this.setting.x,
-                y: this.setting.y,
-                options: this.options,
-            };
-        }
-        console.log('FP: Will update', this.fieldName, newProperties);
-        updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-            .then(updated => {
-            var _a, _b, _c;
-            this.dirty = false;
-            updateStoreField(this.fieldStore, this.fieldName, updated);
-            // if (this.fieldname !== newSettings.name) {
-            //   this.fieldname = newSettings.name;
-            //   console.log('new name', this.fieldname);
-            // }
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
-            (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
-            (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
-        })
-            .catch(() => {
-            console.log('Field update failed', e);
-        });
+        this.resetForm();
+        (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
+        (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
     }
-    handleAddOption(e) {
+    handleSave(e) {
         e.stopPropagation();
         const newProperties = {
             name: this.name,
-            required: this.required,
             role_name: this.roleName,
-            // TODO: Default value in setting?
+            required: this.required,
+            label: this.label,
+            group: this.group,
+            multiline: this.multiline,
+            placeholder: this.placeholder,
+            default: this.defaultValue,
+            options: this.options,
         };
-        this.options.push(this.type === 'radio_button_group'
-            ? {
-                id: generateWeakGuid(),
-                value: `Option ${this.options.length + 1}`,
-                selected: false,
-                x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
-                y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
-            }
-            : {
-                id: generateWeakGuid(),
-                value: `Option ${this.options.length + 1}`,
-                checked: false,
-                x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
-                y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
-            });
-        newProperties.settings = { ...this.setting };
-        delete newProperties.settings.result;
-        newProperties.settings.options = [...this.options];
+        console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
             var _a, _b, _c;
-            this.dirty = false;
             updateStoreField(this.fieldStore, this.fieldName, updated);
-            this.fieldName = updated.name;
+            this.resetForm();
             (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
             (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
             (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
         })
             .catch(() => {
-            console.log('Field update failed', e);
+            console.log('[FIELD PROPERTIES] Update failed', e);
         });
     }
     async handleDelete(e) {
         e.stopPropagation();
-        if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
-            deleteField(this.endpoint, this.templateId, this.fieldName)
-                .then(() => {
-                var _a, _b;
-                this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
-                (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
-                (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
-            })
-                .catch(e => {
-                console.log('[FIELD PROPERTIES] Deletion error', e);
-            });
-        }
+        deleteField(this.endpoint, this.templateId, this.fieldName)
+            .then(() => {
+            var _a, _b;
+            this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
+            (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+            (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
+        })
+            .catch(e => {
+            console.log('[FIELD PROPERTIES] Deletion error', e);
+        });
     }
     render() {
         var _a;
@@ -228,7 +143,6 @@ export class VerdocsTemplateFieldProperties {
         if (this.helpText && this.showingHelp) {
             return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
         }
-        // console.log('tfp', this.templateId, this.fieldName);
         return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
             //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
             placeholder: "Field Name...", onInput: (e) => {
@@ -242,8 +156,8 @@ export class VerdocsTemplateFieldProperties {
             } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.roleStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
                 this.roleName = e.target.value;
                 this.dirty = true;
-            } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
-                this.value = e.target.value;
+            } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Default Value", value: this.defaultValue, autocomplete: "off", placeholder: "Pre-filled value...", onInput: (e) => {
+                this.defaultValue = e.target.value;
                 this.dirty = true;
             } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
             // helpText="Placeholder to display if the field is empty."
@@ -253,7 +167,7 @@ export class VerdocsTemplateFieldProperties {
             } }))), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
                 this.required = e.target.checked;
                 this.dirty = true;
-            } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
+            } })), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
                 marginTop: '15px',
                 marginBottom: '15px',
                 textAlign: 'center',
@@ -300,7 +214,7 @@ export class VerdocsTemplateFieldProperties {
                         "VerdocsEndpoint": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",
-                            "id": ""
+                            "id": "node_modules::VerdocsEndpoint"
                         }
                     }
                 },
@@ -372,7 +286,6 @@ export class VerdocsTemplateFieldProperties {
         return {
             "dirty": {},
             "loading": {},
-            "setting": {},
             "label": {},
             "type": {},
             "name": {},
@@ -382,8 +295,8 @@ export class VerdocsTemplateFieldProperties {
             "fieldType": {},
             "options": {},
             "placeholder": {},
-            "value": {},
-            "leading": {},
+            "multiline": {},
+            "defaultValue": {},
             "showingHelp": {}
         };
     }
@@ -435,12 +348,12 @@ export class VerdocsTemplateFieldProperties {
                         "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-fields/verdocs-template-fields.css

@@ -52,7 +52,6 @@ verdocs-template-fields .pages canvas {
 verdocs-template-fields #verdocs-template-fields-toolbar {
   height: 50px;
   display: flex;
-  flex: 0 0 50px;
   column-gap: 15px;
   font-weight: 700;
   padding: 0 20px 0 0;
@@ -77,6 +76,32 @@ verdocs-template-fields #verdocs-template-fields-toolbar .add-for {
 verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input {
   margin: 0 20px 0 0;
 }
+@media all and (max-width: 1000px) {
+  verdocs-template-fields #verdocs-template-fields-toolbar {
+    column-gap: 8px;
+    padding: 0 10px 0 0;
+  }
+  verdocs-template-fields #verdocs-template-fields-toolbar svg {
+    transform: scale(0.8);
+  }
+  verdocs-template-fields #verdocs-template-fields-toolbar .add-for,
+  verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input {
+    display: none;
+  }
+}
+@media all and (max-width: 600px) {
+  verdocs-template-fields #verdocs-template-fields-toolbar {
+    column-gap: 6px;
+  }
+  verdocs-template-fields #verdocs-template-fields-toolbar svg {
+    transform: scale(0.6);
+  }
+  verdocs-template-fields #verdocs-template-fields-toolbar .separator,
+  verdocs-template-fields #verdocs-template-fields-toolbar .add-for,
+  verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input {
+    display: none;
+  }
+}
 verdocs-template-fields.placing-attachment {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath 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'/%3E%3C/svg%3E") 16 16, pointer;
 }