@verdocs/web-sdk 1.10.3 → 1.10.4

package/dist/esm/Fields-c82e6df3.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/esm/{Templates-03c50708.js → Templates-2522e194.js}

@@ -1,5 +1,5 @@
 import { g as getTemplate } from './Templates-8e4ab976.js';
-import { s as state } from './templateStore-62eb71e2.js';
+import { s as state } from './templateStore-da902ad4.js';
 
 const pendingNotifications = [];
 const loadTemplate = async (endpoint, templateId) => {

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["verdocs-build",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-template-recipients",[[0,"verdocs-template-recipients",{"endpoint":[16],"templateId":[1,"template-id"],"showingRoleDialog":[32],"showingSenderDialog":[32],"sender":[32],"forceRerender":[32]}]]],["verdocs-sign",[[0,"verdocs-sign",{"envelopeId":[1,"envelope-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"hasSignature":[32],"nextButtonLabel":[32],"nextSubmits":[32],"errorMessage":[32],"focusedField":[32],"isDone":[32],"showDone":[32],"finishLater":[32],"showFinishLater":[32],"agreed":[32],"documentsSingularPlural":[32]}]]],["verdocs-field-initial",[[0,"verdocs-field-initial",{"field":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64]}]]],["verdocs-field-signature",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64]}]]],["verdocs-template-properties",[[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"visibility":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}]]],["verdocs-template-reminders",[[0,"verdocs-template-reminders",{"endpoint":[16],"templateId":[1,"template-id"],"showPlanBlocker":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32],"dirty":[32],"loading":[32]}]]],["verdocs-auth",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-field-date",[[0,"verdocs-field-date",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"containerId":[32],"focusField":[64]}]]],["verdocs-field-textarea",[[0,"verdocs-field-textarea",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64]}]]],["verdocs-field-textbox",[[0,"verdocs-field-textbox",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64]}]]],["verdocs-field-timestamp",[[0,"verdocs-field-timestamp",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64]}]]],["verdocs-template-name",[[0,"verdocs-template-name",{"endpoint":[16],"templateId":[1,"template-id"],"name":[32],"dirty":[32],"loading":[32]}]]],["verdocs-search",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-send",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"pdfUrl":[32],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"recipientsAssigned":[32]}]]],["verdocs-template-visibility",[[0,"verdocs-template-visibility",{"endpoint":[16],"templateId":[1,"template-id"],"dirty":[32],"loading":[32],"personal":[32],"public":[32]}]]],["verdocs-field-attachment",[[0,"verdocs-field-attachment",{"field":[16],"disabled":[4],"roleIndex":[2,"role-index"],"focusField":[64]}]]],["verdocs-preview",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-envelope-sidebar",[[0,"verdocs-envelope-sidebar",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"activeTab":[32],"panelOpen":[32]}]]],["verdocs-kba-dialog",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"response":[32]}]]],["verdocs-template-attachments",[[0,"verdocs-template-attachments",{"endpoint":[16],"templateId":[1,"template-id"],"loading":[32]}]]],["verdocs-field-checkbox",[[0,"verdocs-field-checkbox",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2]}]]],["verdocs-field-dropdown",[[0,"verdocs-field-dropdown",{"field":[16],"disabled":[4],"roleindex":[2],"focusField":[64]}]]],["verdocs-field-payment",[[0,"verdocs-field-payment",{"field":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"roleindex":[2],"preparedMessage":[32],"signatureUrl":[32]}]]],["verdocs-field-radio-button",[[0,"verdocs-field-radio-button",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2]}]]],["verdocs-organization-card",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-button",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-initial-dialog",[[0,"verdocs-initial-dialog",{"initials":[1],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog",[[0,"verdocs-signature-dialog",{"name":[1],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-document-page_2",[[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[1026,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"naturalWidth":[32],"naturalHeight":[32],"aspectRatio":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-view",[[0,"verdocs-view",{"endpoint":[16],"envelopeId":[1,"envelope-id"]}]]],["verdocs-contact-picker",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-upload-dialog",[[0,"verdocs-upload-dialog",{"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-template-role-properties_2",[[0,"verdocs-template-role-properties",{"endpoint":[16],"templateId":[1,"template-id"],"roleName":[1,"role-name"],"sender":[1],"dirty":[32],"saving":[32],"name":[32],"type":[32],"fullName":[32],"email":[32],"phone":[32],"allowDelegation":[32]}],[0,"verdocs-template-sender",{"endpoint":[16],"templateId":[1,"template-id"],"sender":[1],"saving":[32]}]]],["verdocs-ok-dialog",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"showCancel":[4,"show-cancel"]}]]],["verdocs-radio-button",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-floating-menu_2",[[0,"verdocs-floating-menu",{"options":[16]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"placement":[1],"containerId":[32]}]]],["verdocs-component-error",[[0,"verdocs-component-error",{"message":[1]}]]],["verdocs-template-create_2",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"placing":[32],"selectedRoleName":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32]}]]],["verdocs-toggle-button",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-quick-functions_3",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-dropdown",[[0,"verdocs-dropdown",{"options":[16],"open":[32]}]]],["verdocs-checkbox",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"label":[1],"value":[1],"theme":[1],"disabled":[4]}]]],["verdocs-button-panel_2",[[4,"verdocs-button-panel",{"icon":[1]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4]}]]],["verdocs-help-icon_2",[[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"helpText":[1,"help-text"],"type":[1],"disabled":[4]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]]], options);
+  return bootstrapLazy([["verdocs-field-initial",[[0,"verdocs-field-initial",{"field":[16],"disabled":[4],"initials":[1],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempInitials":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-signature",[[0,"verdocs-field-signature",{"field":[16],"name":[1],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"tempSignature":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-build",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-field-checkbox",[[0,"verdocs-field-checkbox",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-date",[[0,"verdocs-field-date",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"containerId":[32],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-radio-button",[[0,"verdocs-field-radio-button",{"field":[16],"option":[2],"disabled":[4],"done":[4],"roleindex":[2],"editable":[4],"moveable":[4],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textarea",[[0,"verdocs-field-textarea",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-textbox",[[0,"verdocs-field-textbox",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-timestamp",[[0,"verdocs-field-timestamp",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-template-recipients",[[0,"verdocs-template-recipients",{"endpoint":[16],"templateId":[1,"template-id"],"showingRoleDialog":[32],"showingSenderDialog":[32],"sender":[32],"forceRerender":[32]}]]],["verdocs-sign",[[0,"verdocs-sign",{"envelopeId":[1,"envelope-id"],"roleId":[1,"role-id"],"inviteCode":[1,"invite-code"],"recipient":[32],"signerToken":[32],"hasSignature":[32],"nextButtonLabel":[32],"nextSubmits":[32],"errorMessage":[32],"focusedField":[32],"isDone":[32],"showDone":[32],"finishLater":[32],"showFinishLater":[32],"agreed":[32],"documentsSingularPlural":[32]}]]],["verdocs-template-properties",[[0,"verdocs-template-properties",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"name":[32],"visibility":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32]}]]],["verdocs-template-reminders",[[0,"verdocs-template-reminders",{"endpoint":[16],"templateId":[1,"template-id"],"showPlanBlocker":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32],"dirty":[32],"loading":[32]}]]],["verdocs-auth",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-template-name",[[0,"verdocs-template-name",{"endpoint":[16],"templateId":[1,"template-id"],"name":[32],"dirty":[32],"loading":[32]}]]],["verdocs-search",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-send",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"template":[32],"pdfUrl":[32],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"recipientsAssigned":[32]}]]],["verdocs-template-visibility",[[0,"verdocs-template-visibility",{"endpoint":[16],"templateId":[1,"template-id"],"dirty":[32],"loading":[32],"personal":[32],"public":[32]}]]],["verdocs-upload-dialog",[[0,"verdocs-upload-dialog",{"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-field-attachment",[[0,"verdocs-field-attachment",{"field":[16],"disabled":[4],"roleIndex":[2,"role-index"],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-preview",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-envelope-sidebar",[[0,"verdocs-envelope-sidebar",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"activeTab":[32],"panelOpen":[32]}]]],["verdocs-kba-dialog",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"response":[32]}]]],["verdocs-template-attachments",[[0,"verdocs-template-attachments",{"endpoint":[16],"templateId":[1,"template-id"],"loading":[32]}]]],["verdocs-field-dropdown",[[0,"verdocs-field-dropdown",{"field":[16],"disabled":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-payment",[[0,"verdocs-field-payment",{"field":[16],"disabled":[4],"fields":[16],"pageNum":[2,"page-num"],"roleName":[1,"role-name"],"fieldId":[1,"field-id"],"recipients":[8],"selectedRoleName":[1,"selected-role-name"],"pdfPages":[16],"currentSignature":[1,"current-signature"],"currentSignatureId":[1,"current-signature-id"],"currentInitial":[1,"current-initial"],"currentInitialId":[1,"current-initial-id"],"focused":[4],"signed":[4],"roleindex":[2],"preparedMessage":[32],"signatureUrl":[32],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-organization-card",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog",[[0,"verdocs-initial-dialog",{"initials":[1],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog",[[0,"verdocs-signature-dialog",{"name":[1],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-view",[[0,"verdocs-view",{"endpoint":[16],"envelopeId":[1,"envelope-id"]}]]],["verdocs-toggle-button",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-contact-picker",[[0,"verdocs-contact-picker",{"endpoint":[16],"templateRole":[16],"contactSuggestions":[16],"name":[32],"email":[32],"phone":[32],"message":[32],"showSuggestions":[32],"showMessage":[32],"delegator":[32]}]]],["verdocs-radio-button",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-button",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-template-role-properties_2",[[0,"verdocs-template-role-properties",{"endpoint":[16],"templateId":[1,"template-id"],"roleName":[1,"role-name"],"sender":[1],"dirty":[32],"saving":[32],"name":[32],"type":[32],"fullName":[32],"email":[32],"phone":[32],"allowDelegation":[32]}],[0,"verdocs-template-sender",{"endpoint":[16],"templateId":[1,"template-id"],"sender":[1],"saving":[32]}]]],["verdocs-floating-menu_2",[[0,"verdocs-floating-menu",{"options":[16]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"placement":[1],"containerId":[32]}]]],["verdocs-template-create_2",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"placing":[32],"selectedRoleName":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32]}]]],["verdocs-ok-dialog",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"showCancel":[4,"show-cancel"]}]]],["verdocs-quick-functions_3",[[0,"verdocs-quick-functions",{"endpoint":[16]}],[0,"verdocs-search-activity",{"endpoint":[16],"type":[1],"options":[8],"emptyMessage":[32],"authFailure":[32],"title":[32],"recent":[32],"saved":[32],"starred":[32]}],[0,"verdocs-search-box",{"endpoint":[16],"placeholder":[1],"type":[1],"query":[1],"grabsFocus":[4,"grabs-focus"],"focusField":[64]}]]],["verdocs-dropdown",[[0,"verdocs-dropdown",{"options":[16],"open":[32]}]]],["verdocs-document-page_2",[[0,"verdocs-document-page",{"pageImageUri":[1,"page-image-uri"],"pageNumber":[2,"page-number"],"virtualWidth":[2,"virtual-width"],"virtualHeight":[1026,"virtual-height"],"layers":[16],"containerId":[32],"renderedWidth":[32],"renderedHeight":[32],"naturalWidth":[32],"naturalHeight":[32],"aspectRatio":[32],"skipFirstNotification":[32]}],[0,"verdocs-loader"]]],["verdocs-checkbox_4",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"label":[1],"value":[1],"theme":[1],"disabled":[4]}],[0,"verdocs-component-error",{"message":[1]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"helpText":[1,"help-text"],"type":[1],"disabled":[4]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-button-panel_3",[[0,"verdocs-template-field-properties",{"endpoint":[16],"templateId":[1,"template-id"],"fieldName":[1,"field-name"],"dirty":[32],"loading":[32],"type":[32],"name":[32],"roleName":[32],"required":[32],"placeholder":[32],"defaultValue":[32]}],[4,"verdocs-button-panel",{"icon":[1],"showPanel":[64],"hidePanel":[64],"toggle":[64]}],[0,"verdocs-select-input",{"value":[1],"label":[1],"options":[16],"disabled":[4]}]]]], options);
   });
 };
 

package/dist/esm/{templateStore-62eb71e2.js → templateStore-da902ad4.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/esm/{utils-3d95c588.js → utils-274e2e93.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/esm/verdocs-build.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-7f17b088.js';
-import { l as loadTemplate } from './Templates-03c50708.js';
+import { l as loadTemplate } from './Templates-2522e194.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './Token-54690789.js';
 import './Templates-8e4ab976.js';
-import './templateStore-62eb71e2.js';
+import './templateStore-da902ad4.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 

package/dist/esm/verdocs-button-panel_3.entry.js

@@ -0,0 +1,242 @@
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-f78d163d.js';
+import { c as createPopper } from './popper-f860750c.js';
+import { u as updateField, d as deleteField } from './Fields-c82e6df3.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-7f17b088.js';
+import { s as state } from './templateStore-da902ad4.js';
+import { l as loadTemplate } from './Templates-2522e194.js';
+import { S as SDKError } from './errors-9b5498c8.js';
+import './Token-54690789.js';
+import './index-fd7b8a34.js';
+import './Primitives-054bc6e5.js';
+import './Templates-8e4ab976.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;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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // Not marked as @State because it's not the thing that controls our rendering
+    this.showing = false;
+    this.icon = '';
+  }
+  componentDidRender() {
+    document.body.appendChild(this.panelEl);
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+    }
+    this.popperInstance = createPopper(this.iconEl, this.panelEl, {
+    // placement: 'top-end',
+    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+    });
+  }
+  disconnectedCallback() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+    if (this.panelEl) {
+      this.panelEl.remove();
+    }
+  }
+  async showPanel() {
+    if (!this.showing) {
+      await this.toggle();
+    }
+  }
+  async hidePanel() {
+    if (this.showing) {
+      await this.toggle();
+    }
+  }
+  async toggle() {
+    var _a, _b, _c, _d;
+    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();
+      this.showing = false;
+    }
+    else {
+      (_c = this.panelEl) === null || _c === void 0 ? void 0 : _c.setAttribute('data-show', '');
+      (_d = this.popperInstance) === null || _d === void 0 ? void 0 : _d.update().catch(() => { });
+      this.showing = true;
+      this.hiderEl = document.createElement('div');
+      this.hiderEl.style.zIndex = '100';
+      this.hiderEl.style.position = 'absolute';
+      this.hiderEl.style.top = '0px';
+      this.hiderEl.style.left = '0px';
+      this.hiderEl.style.right = '0px';
+      this.hiderEl.style.bottom = '0px';
+      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) => {
+        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))));
+  }
+};
+VerdocsButtonPanel.style = verdocsButtonPanelCss;
+
+const verdocsSelectInputCss = "verdocs-select-input{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-select-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 8px}verdocs-select-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:focus{border:1px solid #7d88ff}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}";
+
+const VerdocsSelectInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.value = '';
+    this.label = '';
+    this.options = undefined;
+    this.disabled = false;
+  }
+  render() {
+    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
+  }
+};
+VerdocsSelectInput.style = verdocsSelectInputCss;
+
+const verdocsTemplateFieldPropertiesCss = "verdocs-template-field-properties{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-field-properties .buttons{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-field-properties .buttons verdocs-button{margin-left:16px}verdocs-template-field-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-field-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-field-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-field-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-field-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-field-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-field-properties .delete-button:active{background:#f3f3f3}verdocs-template-field-properties .delete-button svg{width:24px;height:24px}";
+
+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 VerdocsTemplateFieldProperties = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.close = createEvent(this, "close", 7);
+    this.delete = createEvent(this, "delete", 7);
+    this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.fieldName = '';
+    this.dirty = false;
+    this.loading = true;
+    this.type = 'signature';
+    this.name = '';
+    this.roleName = '';
+    this.required = false;
+    this.placeholder = '';
+    this.defaultValue = '';
+  }
+  async componentWillLoad() {
+    var _a, _b, _c, _d;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.error(`[FIELD PROPERTIES] Missing required template ID`);
+        return;
+      }
+      if (!this.fieldName) {
+        console.error(`[FIELD PROPERTIES] Missing required field name`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.error('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      await loadTemplate(this.endpoint, this.templateId);
+      const field = state.fields.find(field => field.name === this.fieldName);
+      if (!field) {
+        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
+      }
+      this.type = field.type;
+      this.name = field.name;
+      this.roleName = field.role_name;
+      this.required = field.required;
+      this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
+      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+      this.dirty = false;
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[FIELD PROPERTIES] Error loading template', e);
+      this.loading = false;
+      (_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));
+    }
+  }
+  handleCancel(e) {
+    var _a, _b;
+    e.stopPropagation();
+    const field = state.fields.find(field => field.name === this.fieldName);
+    if (field) {
+      this.name = field.name;
+      this.roleName = field.role_name;
+      this.required = field.required;
+      this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
+      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+    }
+    this.dirty = false;
+    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+  }
+  handleSave(e) {
+    e.stopPropagation();
+    updateField(this.endpoint, this.templateId, this.fieldName, {
+      name: this.name,
+      required: this.required,
+      role_name: this.roleName,
+      // TODO: Default value in setting?
+    })
+      .then(() => {
+      var _a, _b;
+      this.dirty = false;
+      state.fields.forEach(field => {
+        field.name = this.name;
+        field.role_name = this.roleName;
+        field.required = this.required;
+        field.label = this.placeholder;
+        field.setting.result = this.defaultValue;
+      });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    })
+      .catch(() => {
+      console.log('Field 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(r => {
+        var _a;
+        console.log('Field deleted', r);
+        state.fields = [...state.fields.filter(field => field.name !== this.fieldName)];
+        state.template.roles.forEach(role => {
+          role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
+        });
+        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+      })
+        .catch(e => {
+        console.log('Deletion error', e);
+      });
+    }
+  }
+  render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+    if (!this.endpoint.session || !state.template) {
+      return h(Host, { class: "empty" });
+    }
+    return (h(Host, null, 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) => {
+        this.name = e.target.value;
+        this.dirty = true;
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: state.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+        this.roleName = e.target.value;
+        this.dirty = true;
+      } }), h("verdocs-help-icon", { text: "The participant who will complete this field." })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off", helpText: "Placeholder to display if the field is empty.", placeholder: "Placeholder...", onInput: (e) => {
+        this.placeholder = e.target.value;
+        this.dirty = true;
+      } })), ['signature', 'initial'].includes(this.type) && (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;
+      } }))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+  }
+  get el() { return getElement(this); }
+};
+VerdocsTemplateFieldProperties.style = verdocsTemplateFieldPropertiesCss;
+
+export { VerdocsButtonPanel as verdocs_button_panel, VerdocsSelectInput as verdocs_select_input, VerdocsTemplateFieldProperties as verdocs_template_field_properties };

package/dist/esm/verdocs-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-f78d163d.js';
 
-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 = class {
   constructor(hostRef) {

package/dist/esm/{verdocs-help-icon_2.entry.js → verdocs-checkbox_4.entry.js}

@@ -1,7 +1,38 @@
 import { r as registerInstance, h, H as Host } from './index-f78d163d.js';
 import { c as createPopper } from './popper-f860750c.js';
 
-const verdocsHelpIconCss = "verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3}verdocs-help-icon:hover{opacity:1;cursor:none}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .icon svg{fill:#5c6575}verdocs-help-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;position:relative;padding:5px 10px;font-size:13px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
+const verdocsCheckboxCss = "@charset \"UTF-8\";verdocs-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;line-height:18px}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:\"\";width:1rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;line-height:18px;border-radius:2px;border-style:solid;margin-right:0.5rem;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:#55bc81;border-color:#55bc81}";
+
+const VerdocsCheckbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checked = false;
+    this.name = '';
+    this.label = '';
+    this.value = '';
+    this.theme = 'light';
+    this.disabled = false;
+  }
+  render() {
+    return (h(Host, { class: { disabled: this.disabled, [this.theme]: true } }, h("label", null, h("input", { type: "checkbox", value: this.value, name: this.name, checked: this.checked, disabled: this.disabled }), h("span", null, this.label))));
+  }
+};
+VerdocsCheckbox.style = verdocsCheckboxCss;
+
+const verdocsComponentErrorCss = "verdocs-component-error{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-component-error .inner{-ms-flex:1;flex:1;height:300px;display:-ms-flexbox;display:flex;font-size:18px;background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
+
+const VerdocsComponentError = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.message = '';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "inner" }, this.message)));
+  }
+};
+VerdocsComponentError.style = verdocsComponentErrorCss;
+
+const verdocsHelpIconCss = "verdocs-help-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block;opacity:0.3}verdocs-help-icon:hover{opacity:1}verdocs-help-icon .icon{display:inline-block}verdocs-help-icon .icon svg{fill:#5c6575}verdocs-help-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;position:relative;padding:5px 10px;font-size:13px;border-radius:4px;z-index:10000}verdocs-help-icon .tooltip .arrow,verdocs-help-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-help-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-help-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-help-icon .tooltip[data-show]{display:block}verdocs-help-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-help-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-help-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-help-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}";
 
 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>';
 const VerdocsHelpIcon = class {
@@ -56,4 +87,4 @@ const VerdocsTextInput = class {
 };
 VerdocsTextInput.style = verdocsTextInputCss;
 
-export { VerdocsHelpIcon as verdocs_help_icon, VerdocsTextInput as verdocs_text_input };
+export { VerdocsCheckbox as verdocs_checkbox, VerdocsComponentError as verdocs_component_error, VerdocsHelpIcon as verdocs_help_icon, VerdocsTextInput as verdocs_text_input };

package/dist/esm/verdocs-document-page_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-f78d163d.js';
-import { t as throttle } from './utils-3d95c588.js';
+import { t as throttle } from './utils-274e2e93.js';
 import './Envelopes-130fd6ea.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';

package/dist/esm/verdocs-field-attachment.entry.js

@@ -1,5 +1,8 @@
-import { r as registerInstance, h, H as Host } from './index-f78d163d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
+import { s as state } from './templateStore-da902ad4.js';
+import './index-fd7b8a34.js';
+import './Primitives-054bc6e5.js';
 
 const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -7,6 +10,7 @@ const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
 const VerdocsFieldAttachment = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.field = null;
     this.disabled = false;
     this.roleIndex = 0;
@@ -21,6 +25,19 @@ const VerdocsFieldAttachment = class {
     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 };