@verdocs/web-sdk 1.10.3 → 1.10.5

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -13,6 +13,7 @@ import { h, Host } from '@stencil/core';
  */
 export class VerdocsButtonPanel {
   constructor() {
+    // Not marked as @State because it's not the thing that controls our rendering
     this.showing = false;
     this.icon = '';
   }
@@ -35,9 +36,18 @@ export class VerdocsButtonPanel {
       this.panelEl.remove();
     }
   }
-  toggle(e) {
+  async showPanel() {
+    if (!this.showing) {
+      await this.toggle();
+    }
+  }
+  async hidePanel() {
+    if (this.showing) {
+      await this.toggle();
+    }
+  }
+  async toggle() {
     var _a, _b, _c, _d;
-    e.stopPropagation();
     if (this.showing) {
       (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
       (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
@@ -54,12 +64,18 @@ export class VerdocsButtonPanel {
       this.hiderEl.style.left = '0px';
       this.hiderEl.style.right = '0px';
       this.hiderEl.style.bottom = '0px';
-      this.hiderEl.onclick = (e) => this.toggle(e);
+      this.hiderEl.onclick = (e) => {
+        e.stopPropagation();
+        this.toggle();
+      };
       document.body.appendChild(this.hiderEl);
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "icon", innerHTML: this.icon, onClick: (e) => this.toggle(e), ref: el => (this.iconEl = el) }), h("div", { role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { "data-popper-arrow": "true", class: "arrow" }), h("slot", null))));
+    return (h(Host, null, h("div", { class: "icon", innerHTML: this.icon, onClick: (e) => {
+        e.stopPropagation();
+        return this.toggle();
+      }, ref: el => (this.iconEl = el) }), h("div", { role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { "data-popper-arrow": "true", class: "arrow" }), h("slot", null))));
   }
   static get is() { return "verdocs-button-panel"; }
   static get originalStyleUrls() {
@@ -94,4 +110,56 @@ export class VerdocsButtonPanel {
       }
     };
   }
+  static get methods() {
+    return {
+      "showPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hidePanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

package/dist/collection/components/controls/verdocs-help-icon/verdocs-help-icon.css

@@ -5,7 +5,6 @@ verdocs-help-icon {
 }
 verdocs-help-icon:hover {
   opacity: 1;
-  cursor: none;
 }
 verdocs-help-icon .icon {
   display: inline-block;

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

@@ -75,12 +75,12 @@ export class VerdocsContactPicker {
     this.showSuggestions = false;
   }
   render() {
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-name" }, "Name:"), h("input", { id: "verdocs-contact-picker-name", name: "verdocs-contact-picker-name", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-name" }, "Name:"), h("input", { id: "verdocs-contact-picker-name", name: "verdocs-contact-picker-name", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
       // onBlur={() => (this.showSuggestions = false)}
       onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { class: "dropdown" }, this.contactSuggestions.map(suggestion => {
       var _a;
       return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-    })))), h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-email" }, "Email:"), h("input", { id: "verdocs-contact-picker-email", name: "verdocs-contact-picker-email", type: "text", "data-lpignore": "true", autoComplete: "off", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-phone" }, "Phone:"), h("input", { id: "verdocs-contact-picker-phone", name: "verdocs-contact-picker-phone", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "off", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { class: "buttons" }, h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+    })))), h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-email" }, "Email:"), h("input", { id: "verdocs-contact-picker-email", name: "verdocs-contact-picker-email", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-phone" }, "Phone:"), h("input", { id: "verdocs-contact-picker-phone", name: "verdocs-contact-picker-phone", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { class: "buttons" }, h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
         this.showMessage = e.detail.active;
         this.showSuggestions = false;
       } }), h("verdocs-toggle-button", { icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {

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

@@ -1,58 +1,49 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
-import { getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
 import { h, Host } from '@stencil/core';
+import TemplateStore from '../../../utils/templateStore';
+import { loadTemplate } from '../../../utils/Templates';
 import { getRoleIndex } from '../../../utils/utils';
+import { SDKError } from '../../../utils/errors';
 const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
 const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
 const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
 const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
 /**
- * Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.
- * If the user is authenticated
+ * Display a form to collect recipient information for a new Envelope. If used anonymously, the specified `templateId` must be public.
+ * Because most applications have custom workflow requirements to trigger after sending an Envelope, this component does not actually
+ * perform that operation. Parent applications should listen for the `onSend` event, and can pass the contents of `event.detail`
+ * directly to the `createEnvelope()` call in JS-SDK.
  */
 export class VerdocsSend {
   constructor() {
     this.levels = [];
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
-    this.template = null;
-    this.pdfUrl = null;
     this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
     this.rolesAtLevel = {};
     this.showPickerForId = '';
     this.sessionContacts = [];
-    this.recipientsAssigned = {};
+    this.rolesCompleted = {};
+  }
+  reset() {
+    this.rolesCompleted = {};
   }
   async componentWillLoad() {
-    var _a;
-    this.sessionContacts = [];
-    try {
-      const result = await this.endpoint.loadSession();
-      if ((_a = result.session) === null || _a === void 0 ? void 0 : _a.profile) {
-        this.sessionContacts.push({
-          id: result.session.profile.id,
-          name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,
-          email: result.session.profile.email,
-          phone: result.session.profile.phone,
-        });
-      }
-    }
-    catch (e) {
-      console.log('Error loading session', e);
+    var _a, _b, _c, _d, _e;
+    const loadSessionResult = this.endpoint.loadSession();
+    if (!this.templateId) {
+      console.log(`[SEND] Missing required template ID ${this.templateId}`);
+      return;
     }
-  }
-  async componentDidLoad() {
-    console.log('[SEND] Showing template', this.templateId);
     try {
       console.log(`[SEND] Loading template ${this.templateId}`);
-      const template = await getTemplate(this.endpoint, this.templateId);
-      console.log('[SEND] Got template', template);
-      this.template = template;
-      if (template === null || template === void 0 ? void 0 : template.roles) {
+      await loadTemplate(this.endpoint, this.templateId);
+      if ((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) {
         const rolesAtLevel = {};
-        template.roles.forEach(role => {
+        this.rolesCompleted = {};
+        TemplateStore.template.roles.forEach(role => {
           const level = role.sequence - 1;
           rolesAtLevel[level] || (rolesAtLevel[level] = []);
           const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -64,7 +55,16 @@ export class VerdocsSend {
       }
     }
     catch (e) {
-      console.log('[SEND] Error getting template', e);
+      console.log('[SEND] Error loading template', e);
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+    }
+    if ((_e = loadSessionResult.session) === null || _e === void 0 ? void 0 : _e.profile) {
+      this.sessionContacts.push({
+        id: loadSessionResult.session.profile.id,
+        name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
+        email: loadSessionResult.session.profile.email,
+        phone: loadSessionResult.session.profile.phone,
+      });
     }
   }
   getLevelIcon(level) {
@@ -81,7 +81,7 @@ export class VerdocsSend {
   handleSelectContact(e, role) {
     e.preventDefault();
     e.detail; // IContactSelectEvent
-    this.recipientsAssigned[role.id] = { ...role, ...e.detail };
+    this.rolesCompleted[role.id] = { ...role, ...e.detail };
     this.showPickerForId = '';
   }
   handleClickRole(e, role) {
@@ -91,7 +91,7 @@ export class VerdocsSend {
   handleSend(e) {
     var _a;
     e.stopPropagation();
-    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ recipientsAssigned: Object.values(this.recipientsAssigned) });
+    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: TemplateStore.template.name, template_id: this.templateId });
   }
   handleCancel(e) {
     var _a;
@@ -99,18 +99,14 @@ export class VerdocsSend {
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    var _a, _b, _c;
-    const roleNames = ((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.roles) === null || _b === void 0 ? void 0 : _b.map(role => role.name)) || [];
-    const allRecipientsAssigned = Object.values(this.recipientsAssigned).filter(recipient => {
-      console.log('valid email', isValidEmail(recipient.email), recipient.email);
-      console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);
-      return isValidEmail(recipient.email) || isValidPhone(recipient.phone);
-    }).length >= ((_c = this.template) === null || _c === void 0 ? void 0 : _c.roles.length);
-    console.log('assigned', allRecipientsAssigned);
-    return (h(Host, { class: {} }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Document")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    const roleNames = TemplateStore.template.roles.map(role => role.name) || [];
+    const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
+    const allRolesAssigned = rolesAssigned.length >= roleNames.length;
+    console.log('r', this.rolesCompleted, allRolesAssigned, rolesAssigned);
+    return (h(Host, { class: {} }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c;
-      return (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.recipientsAssigned[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onCancel: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.recipientsAssigned[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => console.log('Search', e.detail) }))));
-    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onClick: e => this.handleSend(e) }))));
+      return (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onCancel: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => console.log('Search', e.detail) }))));
+    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned, onClick: e => this.handleSend(e) }))));
   }
   static get is() { return "verdocs-send"; }
   static get originalStyleUrls() {
@@ -168,13 +164,11 @@ export class VerdocsSend {
   }
   static get states() {
     return {
-      "template": {},
-      "pdfUrl": {},
       "containerId": {},
       "rolesAtLevel": {},
       "showPickerForId": {},
       "sessionContacts": {},
-      "recipientsAssigned": {}
+      "rolesCompleted": {}
     };
   }
   static get events() {
@@ -189,8 +183,8 @@ export class VerdocsSend {
           "text": "The user completed the form and clicked send."
         },
         "complexType": {
-          "original": "{recipientsAssigned: IRole[]}",
-          "resolved": "{ recipientsAssigned: IRole[]; }",
+          "original": "{roles: IRole[]; name: string; template_id: string}",
+          "resolved": "{ roles: IRole[]; name: string; template_id: string; }",
           "references": {
             "IRole": {
               "location": "import",
@@ -235,4 +229,20 @@ export class VerdocsSend {
         }
       }];
   }
+  static get methods() {
+    return {
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {},
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
 }

package/dist/collection/components/embeds/verdocs-send/verdocs-send.stories.js

@@ -7,9 +7,10 @@ export default {
   },
   argTypes: {
     templateId: { control: { type: 'string' } },
+    onSend: { action: 'send' },
   },
   parameters: {
     layout: 'fullscreen',
   },
 };
-export const Send = ({ templateId }) => html `<verdocs-send .templateId=${templateId} />`;
+export const Send = ({ templateId, onSend }) => html `<verdocs-send .templateId=${templateId} @send=${onSend} />`;

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

@@ -1,5 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
+import TemplateStore from '../../../utils/templateStore';
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 /**
  * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
@@ -21,6 +22,19 @@ export class VerdocsFieldAttachment {
     document.addEventListener('done', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
     document.body.append(this.dialog);
   }
+  async showSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.showPanel) {
+      settingsPanel.showPanel();
+    }
+  }
+  async hideSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.hidePanel) {
+      settingsPanel.hidePanel();
+    }
+    TemplateStore.updateCount++;
+  }
   render() {
     var _a, _b, _c, _d;
     let settings = { x: 0, y: 0 };
@@ -110,6 +124,24 @@ export class VerdocsFieldAttachment {
       }
     };
   }
+  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}",
+          "resolved": "{ fieldName: string; }",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "focusField": {
@@ -127,6 +159,38 @@ export class VerdocsFieldAttachment {
           "text": "",
           "tags": []
         }
+      },
+      "showSettingsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hideSettingsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

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

@@ -41,4 +41,9 @@ verdocs-field-checkbox.hide {
 }
 verdocs-field-checkbox.focused {
   animation: verdocs-field-pulse 0.75s 2;
+}
+verdocs-field-checkbox verdocs-button-panel {
+  margin-left: -20px;
+  margin-top: -4px;
+  transform: scale(0.7);
 }

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

@@ -1,6 +1,8 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
+import TemplateStore from '../../../utils/templateStore';
+const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Displays a checkbox.
  */
@@ -11,6 +13,21 @@ export class VerdocsFieldCheckbox {
     this.disabled = false;
     this.done = false;
     this.roleindex = 0;
+    this.editable = false;
+    this.moveable = false;
+  }
+  async showSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.showPanel) {
+      settingsPanel.showPanel();
+    }
+  }
+  async hideSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.hidePanel) {
+      settingsPanel.hidePanel();
+    }
+    TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -21,7 +38,11 @@ export class VerdocsFieldCheckbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null))));
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: TemplateStore.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+        return this.hideSettingsPanel();
+      } }))))));
   }
   static get is() { return "verdocs-field-checkbox"; }
   static get originalStyleUrls() {
@@ -132,6 +153,96 @@ export class VerdocsFieldCheckbox {
         "attribute": "roleindex",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "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": false,
+        "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": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  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}",
+          "resolved": "{ fieldName: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showSettingsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hideSettingsPanel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }