@verdocs/web-sdk 1.10.1 → 1.10.4

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Templates/Template Visibility',
+  title: 'Templates/Visibility',
   component: 'verdocs-template-visibility',
   args: {
     templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
@@ -9,7 +9,7 @@ export default {
     onClose: { action: 'close' },
   },
 };
-export const TemplateVisibility = ({ onClose, templateId }) => templateId
+export const Visibility = ({ onClose, templateId }) => templateId
   ? html `
         <div style="width: 360px; background: #ffffff; padding: 20px; box-sizing: border-box">
           <verdocs-template-visibility .templateId=${templateId} @close=${onClose} />

package/dist/collection/utils/templateStore.js

@@ -7,6 +7,9 @@ const { state, onChange } = createStore({
   template: null,
   loadProgress: 0,
   loading: false,
+  // This can be used as a data field on components that need to force re-rendering when the underlying data has changed. Stencil stores
+  // are handy but not very sophisticated. They don't re-render on "deep" changes.
+  updateCount: 1,
   pageNumbers: [],
   pageUris: {},
   roleNames: [],
@@ -33,6 +36,7 @@ onChange('template', async (newTemplate) => {
   });
   console.log('[TEMPLATESTORE] Loaded fields', state.fields);
   state.pageNumbers = integerSequence(1, newTemplate.pages.length);
+  state.updateCount++;
 });
 onChange('fields', newField => {
   console.log('[TEMPLATESTORE] Field changed', newField);

package/dist/collection/utils/utils.js

@@ -1,8 +1,9 @@
 import { rescale } from '@verdocs/js-sdk/Utils/Fields';
 import { Envelopes } from '@verdocs/js-sdk/Envelopes';
 import { downloadBlob } from '@verdocs/js-sdk/Utils/Files';
-export const defaultWidth = (field) => {
-  switch (field.type) {
+export const defaultWidth = (type) => {
+  // checkbox was a legacy field type
+  switch (type) {
     case 'textbox':
       return 150;
     case 'timestamp':
@@ -26,8 +27,8 @@ export const defaultWidth = (field) => {
   }
   return 150;
 };
-export const defaultHeight = (field) => {
-  switch (field.type) {
+export const defaultHeight = (type) => {
+  switch (type) {
     case 'textbox':
       return 15;
     case 'timestamp':
@@ -54,7 +55,7 @@ export const defaultHeight = (field) => {
 export const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
-  let { x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field) } = settings;
+  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
   const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -152,6 +153,12 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         if (done) {
           cbEl.setAttribute('done', true);
         }
+        if (editable) {
+          cbEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          cbEl.setAttribute('draggable', true);
+        }
         setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
         controlsDiv.appendChild(cbEl);
         return cbEl;
@@ -175,6 +182,12 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         if (done) {
           radioEl.setAttribute('done', true);
         }
+        if (editable) {
+          radioEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          radioEl.setAttribute('draggable', true);
+        }
         setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
         controlsDiv.appendChild(radioEl);
         return radioEl;

package/dist/components/Fields.js

@@ -0,0 +1,26 @@
+/**
+ * Add a field to a template.
+ */
+var createField = function (endpoint, templateId, params) {
+    return endpoint.api //
+        .post("/templates/".concat(templateId, "/fields"), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update a template field.
+ */
+var updateField = function (endpoint, templateId, fieldName, params) {
+    return endpoint.api //
+        .put("/templates/".concat(templateId, "/fields/").concat(fieldName), params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * REmove a field from a template.
+ */
+var deleteField = function (endpoint, templateId, fieldName) {
+    return endpoint.api //
+        .delete("/templates/".concat(templateId, "/fields/").concat(fieldName))
+        .then(function (r) { return r.data; });
+};
+
+export { createField as c, deleteField as d, updateField as u };

package/dist/components/VerdocsEndpoint.js

@@ -1,5 +1,47 @@
 import { d as decodeAccessTokenBody } from './Token.js';
 
+var TemplatePermissions;
+(function (TemplatePermissions) {
+    TemplatePermissions["TEMPLATE_CREATOR_CREATE_PUBLIC"] = "template:creator:create:public";
+    TemplatePermissions["TEMPLATE_CREATOR_CREATE_ORG"] = "template:creator:create:org";
+    TemplatePermissions["TEMPLATE_CREATOR_CREATE_PERSONAL"] = "template:creator:create:personal";
+    TemplatePermissions["TEMPLATE_CREATOR_DELETE"] = "template:creator:delete";
+    TemplatePermissions["TEMPLATE_CREATOR_VISIBILITY"] = "template:creator:visibility";
+    TemplatePermissions["TEMPLATE_MEMBER_READ"] = "template:member:read";
+    TemplatePermissions["TEMPLATE_MEMBER_WRITE"] = "template:member:write";
+    TemplatePermissions["TEMPLATE_MEMBER_DELETE"] = "template:member:delete";
+    TemplatePermissions["TEMPLATE_MEMBER_VISIBILITY"] = "template:member:visibility";
+})(TemplatePermissions || (TemplatePermissions = {}));
+var TemplateSenderTypes;
+(function (TemplateSenderTypes) {
+    TemplateSenderTypes["CREATOR"] = "creator";
+    TemplateSenderTypes["ORGANIZATION_MEMBER"] = "organization_member";
+    TemplateSenderTypes["ORGANIZATION_MEMBER_AS_CREATOR"] = "organization_member_as_creator";
+    TemplateSenderTypes["EVERYONE"] = "everyone";
+    TemplateSenderTypes["EVERYONE_AS_CREATOR"] = "everyone_as_creator";
+})(TemplateSenderTypes || (TemplateSenderTypes = {}));
+var TemplateActions;
+(function (TemplateActions) {
+    TemplateActions["CREATE_PERSONAL"] = "create_personal";
+    TemplateActions["CREATE_ORG"] = "create_org";
+    TemplateActions["CREATE_PUBLIC"] = "create_public";
+    TemplateActions["READ"] = "read";
+    TemplateActions["WRITE"] = "write";
+    TemplateActions["DELETE"] = "delete";
+    TemplateActions["CHANGE_VISIBILITY_PERSONAL"] = "change_visibility_personal";
+    TemplateActions["CHANGE_VISIBILITY_ORG"] = "change_visibility_org";
+    TemplateActions["CHANGE_VISIBILITY_PUBLIC"] = "change_visibility_public";
+})(TemplateActions || (TemplateActions = {}));
+var SortOptions;
+(function (SortOptions) {
+    SortOptions["CREATED_AT"] = "created_at";
+    SortOptions["UPDATED_AT"] = "updated_at";
+    SortOptions["NAME"] = "name";
+    SortOptions["LAST_USED_AT"] = "last_used_at";
+    SortOptions["COUNTER"] = "counter";
+    SortOptions["STAR_COUNTER"] = "star_counter";
+})(SortOptions || (SortOptions = {}));
+
 function bind(fn, thisArg) {
   return function wrap() {
     return fn.apply(thisArg, arguments);
@@ -3529,4 +3571,4 @@ var VerdocsEndpoint = /** @class */ (function () {
     return VerdocsEndpoint;
 }());
 
-export { VerdocsEndpoint as V };
+export { TemplateSenderTypes as T, VerdocsEndpoint as V };

package/dist/components/index.d.ts

@@ -39,14 +39,17 @@ export { VerdocsSend as VerdocsSend } from '../types/components/embeds/verdocs-s
 export { VerdocsSign as VerdocsSign } from '../types/components/embeds/verdocs-sign/verdocs-sign';
 export { VerdocsSignatureDialog as VerdocsSignatureDialog } from '../types/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog';
 export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/components/controls/verdocs-status-indicator/verdocs-status-indicator';
+export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/controls/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
+export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
 export { VerdocsTemplateFields as VerdocsTemplateFields } from '../types/components/templates/verdocs-template-fields/verdocs-template-fields';
 export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/templates/verdocs-template-name/verdocs-template-name';
 export { VerdocsTemplateProperties as VerdocsTemplateProperties } from '../types/components/templates/verdocs-template-properties/verdocs-template-properties';
 export { VerdocsTemplateRecipients as VerdocsTemplateRecipients } from '../types/components/templates/verdocs-template-recipients/verdocs-template-recipients';
 export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/components/templates/verdocs-template-reminders/verdocs-template-reminders';
-export { VerdocsTemplateSenderDialog as VerdocsTemplateSenderDialog } from '../types/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog';
+export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
+export { VerdocsTemplateSender as VerdocsTemplateSender } from '../types/components/templates/verdocs-template-sender/verdocs-template-sender';
 export { VerdocsTemplateTags as VerdocsTemplateTags } from '../types/components/controls/verdocs-template-tags/verdocs-template-tags';
 export { VerdocsTemplateVisibility as VerdocsTemplateVisibility } from '../types/components/templates/verdocs-template-visibillity/verdocs-template-visibility';
 export { VerdocsTextInput as VerdocsTextInput } from '../types/components/controls/verdocs-text-input/verdocs-text-input';

package/dist/components/index.js

@@ -39,14 +39,17 @@ export { VerdocsSend, defineCustomElement as defineCustomElementVerdocsSend } fr
 export { VerdocsSign, defineCustomElement as defineCustomElementVerdocsSign } from './verdocs-sign.js';
 export { VerdocsSignatureDialog, defineCustomElement as defineCustomElementVerdocsSignatureDialog } from './verdocs-signature-dialog.js';
 export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdocsStatusIndicator } from './verdocs-status-indicator.js';
+export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
 export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';
+export { VerdocsTemplateFieldProperties, defineCustomElement as defineCustomElementVerdocsTemplateFieldProperties } from './verdocs-template-field-properties.js';
 export { VerdocsTemplateFields, defineCustomElement as defineCustomElementVerdocsTemplateFields } from './verdocs-template-fields.js';
 export { VerdocsTemplateName, defineCustomElement as defineCustomElementVerdocsTemplateName } from './verdocs-template-name.js';
 export { VerdocsTemplateProperties, defineCustomElement as defineCustomElementVerdocsTemplateProperties } from './verdocs-template-properties.js';
 export { VerdocsTemplateRecipients, defineCustomElement as defineCustomElementVerdocsTemplateRecipients } from './verdocs-template-recipients.js';
 export { VerdocsTemplateReminders, defineCustomElement as defineCustomElementVerdocsTemplateReminders } from './verdocs-template-reminders.js';
-export { VerdocsTemplateSenderDialog, defineCustomElement as defineCustomElementVerdocsTemplateSenderDialog } from './verdocs-template-sender-dialog.js';
+export { VerdocsTemplateRoleProperties, defineCustomElement as defineCustomElementVerdocsTemplateRoleProperties } from './verdocs-template-role-properties.js';
+export { VerdocsTemplateSender, defineCustomElement as defineCustomElementVerdocsTemplateSender } from './verdocs-template-sender.js';
 export { VerdocsTemplateTags, defineCustomElement as defineCustomElementVerdocsTemplateTags } from './verdocs-template-tags.js';
 export { VerdocsTemplateVisibility, defineCustomElement as defineCustomElementVerdocsTemplateVisibility } from './verdocs-template-visibility.js';
 export { VerdocsTextInput, defineCustomElement as defineCustomElementVerdocsTextInput } from './verdocs-text-input.js';

package/dist/components/templateStore.js

@@ -7,6 +7,9 @@ const { state, onChange } = createStore({
   template: null,
   loadProgress: 0,
   loading: false,
+  // This can be used as a data field on components that need to force re-rendering when the underlying data has changed. Stencil stores
+  // are handy but not very sophisticated. They don't re-render on "deep" changes.
+  updateCount: 1,
   pageNumbers: [],
   pageUris: {},
   roleNames: [],
@@ -33,6 +36,7 @@ onChange('template', async (newTemplate) => {
   });
   console.log('[TEMPLATESTORE] Loaded fields', state.fields);
   state.pageNumbers = integerSequence(1, newTemplate.pages.length);
+  state.updateCount++;
 });
 onChange('fields', newField => {
   console.log('[TEMPLATESTORE] Field changed', newField);

package/dist/components/utils.js

@@ -5,8 +5,9 @@ function rescale(r, n) {
     return r * n;
 }
 
-const defaultWidth = (field) => {
-  switch (field.type) {
+const defaultWidth = (type) => {
+  // checkbox was a legacy field type
+  switch (type) {
     case 'textbox':
       return 150;
     case 'timestamp':
@@ -30,8 +31,8 @@ const defaultWidth = (field) => {
   }
   return 150;
 };
-const defaultHeight = (field) => {
-  switch (field.type) {
+const defaultHeight = (type) => {
+  switch (type) {
     case 'textbox':
       return 15;
     case 'timestamp':
@@ -58,7 +59,7 @@ const defaultHeight = (field) => {
 const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
-  let { x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field) } = settings;
+  let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
   const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -156,6 +157,12 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         if (done) {
           cbEl.setAttribute('done', true);
         }
+        if (editable) {
+          cbEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          cbEl.setAttribute('draggable', true);
+        }
         setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, checkboxIndex);
         controlsDiv.appendChild(cbEl);
         return cbEl;
@@ -179,6 +186,12 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         if (done) {
           radioEl.setAttribute('done', true);
         }
+        if (editable) {
+          radioEl.setAttribute('editable', true);
+        }
+        if (draggable) {
+          radioEl.setAttribute('draggable', true);
+        }
         setControlStyles(radioEl, field, docPage.xScale, docPage.yScale, buttonIndex);
         controlsDiv.appendChild(radioEl);
         return radioEl;

package/dist/components/verdocs-auth.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$4 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
@@ -117,7 +117,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-auth", "verdocs-button", "verdocs-ok-dialog", "verdocs-text-input"];
+  const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-ok-dialog", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-auth":
       if (!customElements.get(tagName)) {
@@ -125,6 +125,11 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/verdocs-build.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';

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

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createPopper } from './popper.js';
 
-const verdocsButtonPanelCss = "verdocs-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer}verdocs-button-panel .icon svg{fill:#cccccc}verdocs-button-panel .icon:hover svg{fill:#ffffff}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:280px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{color:#092c4c;font-size:16px;font-weight:bold;margin:0 0 8px 0}.verdocs-button-panel-content form{margin:0;padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.verdocs-button-panel-content label{display:block;font-size:14px;font-weight:bold;margin:0 0 3px 0;color:#33364b}.verdocs-button-panel-content input{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:14px;margin:0 0 10px 0}";
+const verdocsButtonPanelCss = "verdocs-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{color:#092c4c;font-size:16px;font-weight:bold;margin:0 0 8px 0}";
 
 const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    // Not marked as @State because it's not the thing that controls our rendering
     this.showing = false;
     this.icon = '';
   }
@@ -29,9 +30,18 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       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();
@@ -48,16 +58,25 @@ const VerdocsButtonPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       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 style() { return verdocsButtonPanelCss; }
 }, [4, "verdocs-button-panel", {
-    "icon": [1]
+    "icon": [1],
+    "showPanel": [64],
+    "hidePanel": [64],
+    "toggle": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const verdocsButtonCss = "verdocs-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button:disabled{cursor:none}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999;cursor:none}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;cursor:none;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
+const verdocsButtonCss = "verdocs-button button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;text-transform:uppercase;-ms-flex-pack:center;justify-content:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-weight:700;cursor:pointer;margin:0}verdocs-button button .icon{margin:0 12px}verdocs-button button .icon svg{fill:#ffffff;display:block}verdocs-button button .label{padding:0 12px}verdocs-button button.small{height:34px;font-size:13px}verdocs-button button.small .icon{margin:0 4px}verdocs-button button.small .icon svg{margin:2px 0 0 0;height:20px}verdocs-button button.small .label{padding:0 4px}verdocs-button button.normal{height:44px;font-size:14px}verdocs-button button.normal .icon.start{margin:0 4px 0 8px}verdocs-button button.normal .icon.end{margin:0 8px 0 4px}verdocs-button button.normal .icon svg{margin:2px 0 0 0;height:22px}verdocs-button button.normal .label{padding:0 10px}verdocs-button button.medium{height:52px;font-size:16px}verdocs-button button.medium .icon.start{margin:0 0 0 18px}verdocs-button button.medium .icon.end{margin:0 18px 0 0}verdocs-button button.medium .icon svg{margin:2px 0 0 0;height:26px}verdocs-button button.medium .label{padding:0 20px}verdocs-button button.large{height:60px;font-size:20px}verdocs-button button.large .icon.start{margin:0 0 0 24px}verdocs-button button.large .icon.end{margin:0 24px 0 0}verdocs-button button.large .icon svg{margin:2px 0 0 0;height:32px}verdocs-button button.large .label{padding:0 34px}verdocs-button button.standard{background:#55bc81;border-radius:4px;outline:none;border:none;color:white}verdocs-button button.standard:disabled{background-color:#999999;cursor:default}verdocs-button button.standard:active:not([disabled]){-webkit-filter:brightness(110%);filter:brightness(110%)}verdocs-button button.text{color:#4c56cb;background:transparent;font-weight:500;padding:0 4px;outline:none;border:none}verdocs-button button.text:disabled{color:#999999}verdocs-button button.text:active:not([disabled]){-webkit-filter:brightness(130%);filter:brightness(130%)}verdocs-button button.text .icon svg{fill:#4c56cb}verdocs-button button.outline{border:1px solid #4c56cb;color:#4c56cb;outline:none;background:transparent;border-radius:4px;padding:0 20px}verdocs-button button.outline:disabled{color:#999999;border:1px solid #999999}verdocs-button button.outline:active{background:#4c56cb;color:white}verdocs-button button.outline .icon svg{fill:#4c56cb}";
 
 const VerdocsButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/verdocs-contact-picker2.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as defineCustomElement$2 } from './verdocs-button2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';

package/dist/components/verdocs-envelope-sidebar.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getEnvelopeById, s as state } from './Envelopes.js';
 import { S as SDKError } from './errors.js';

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

@@ -1,5 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { s as state } from './templateStore.js';
 import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-upload-dialog2.js';
 
@@ -10,6 +11,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
   constructor() {
     super();
     this.__registerHost();
+    this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.field = null;
     this.disabled = false;
     this.roleIndex = 0;
@@ -24,6 +26,19 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     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();
+    }
+    state.updateCount++;
+  }
   render() {
     var _a, _b, _c, _d;
     let settings = { x: 0, y: 0 };
@@ -42,7 +57,9 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "field": [16],
     "disabled": [4],
     "roleIndex": [2, "role-index"],
-    "focusField": [64]
+    "focusField": [64],
+    "showSettingsPanel": [64],
+    "hideSettingsPanel": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1,18 +1,44 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
+import { s as state } from './templateStore.js';
+import { d as defineCustomElement$9 } from './verdocs-button2.js';
+import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
+import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$6 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$5 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:14px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:14px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
+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>';
 const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.field = null;
     this.option = 0;
     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();
+    }
+    state.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -23,7 +49,11 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     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: state.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 style() { return verdocsFieldCheckboxCss; }
 }, [0, "verdocs-field-checkbox", {
@@ -31,19 +61,63 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "option": [2],
     "disabled": [4],
     "done": [4],
-    "roleindex": [2]
+    "roleindex": [2],
+    "editable": [4],
+    "moveable": [4],
+    "showSettingsPanel": [64],
+    "hideSettingsPanel": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-field-checkbox"];
+  const components = ["verdocs-field-checkbox", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-field-checkbox":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, VerdocsFieldCheckbox$1);
       }
       break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "verdocs-button-panel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-template-field-properties":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 defineCustomElement$1();