@verdocs/web-sdk 1.11.1 → 1.11.3

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["verdocs-button.cjs",[[0,"verdocs-button",{"label":[1],"startIcon":[1,"start-icon"],"endIcon":[1,"end-icon"],"size":[1],"type":[1],"variant":[1],"disabled":[4]}]]],["verdocs-field-initial.cjs",[[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.cjs",[[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-template-recipients.cjs",[[0,"verdocs-template-recipients",{"endpoint":[16],"templateId":[1,"template-id"],"showingRoleDialog":[32],"showingSenderDialog":[32],"sender":[32],"forceRerender":[32]}]]],["verdocs-build.cjs",[[0,"verdocs-build",{"endpoint":[16],"templateId":[1,"template-id"],"step":[32],"pdfUrl":[32],"template":[32]}]]],["verdocs-field-checkbox.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[0,"verdocs-field-timestamp",{"field":[16],"disabled":[4],"editable":[4],"moveable":[4],"done":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-sign.cjs",[[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.cjs",[[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.cjs",[[0,"verdocs-template-reminders",{"endpoint":[16],"templateId":[1,"template-id"],"showPlanBlocker":[32],"sendReminders":[32],"firstReminderDays":[32],"reminderDays":[32],"dirty":[32],"loading":[32]}]]],["verdocs-template-name.cjs",[[0,"verdocs-template-name",{"endpoint":[16],"templateId":[1,"template-id"],"name":[32],"dirty":[32],"loading":[32]}]]],["verdocs-auth.cjs",[[0,"verdocs-auth",{"endpoint":[16],"visible":[4],"logo":[1],"isAuthenticated":[32],"displayMode":[32],"username":[32],"password":[32],"loggingIn":[32],"activeSession":[32],"loginError":[32]}]]],["verdocs-search.cjs",[[0,"verdocs-search",{"endpoint":[16]}]]],["verdocs-send.cjs",[[0,"verdocs-send",{"endpoint":[16],"templateId":[1,"template-id"],"containerId":[32],"rolesAtLevel":[32],"showPickerForId":[32],"sessionContacts":[32],"rolesCompleted":[32],"reset":[64]}]]],["verdocs-template-visibility.cjs",[[0,"verdocs-template-visibility",{"endpoint":[16],"templateId":[1,"template-id"],"dirty":[32],"loading":[32],"personal":[32],"public":[32]}]]],["verdocs-upload-dialog.cjs",[[0,"verdocs-upload-dialog",{"draggingOver":[32],"decodedFiles":[32]}]]],["verdocs-field-attachment.cjs",[[0,"verdocs-field-attachment",{"field":[16],"disabled":[4],"roleIndex":[2,"role-index"],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-preview.cjs",[[0,"verdocs-preview",{"endpoint":[16],"templateId":[1,"template-id"]}]]],["verdocs-template-attachments.cjs",[[0,"verdocs-template-attachments",{"endpoint":[16],"templateId":[1,"template-id"],"loading":[32]}]]],["verdocs-envelope-sidebar.cjs",[[0,"verdocs-envelope-sidebar",{"endpoint":[16],"envelopeId":[1,"envelope-id"],"activeTab":[32],"panelOpen":[32]}]]],["verdocs-kba-dialog.cjs",[[0,"verdocs-kba-dialog",{"step":[2],"steps":[2],"helptitle":[1],"helptext":[1],"mode":[1],"label":[1],"placeholder":[1],"choices":[16],"response":[32]}]]],["verdocs-field-dropdown.cjs",[[0,"verdocs-field-dropdown",{"field":[16],"disabled":[4],"roleindex":[2],"focusField":[64],"showSettingsPanel":[64],"hideSettingsPanel":[64]}]]],["verdocs-field-payment.cjs",[[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.cjs",[[0,"verdocs-organization-card",{"organization":[16]}]]],["verdocs-search-tabs.cjs",[[0,"verdocs-search-tabs",{"selected":[32]}]]],["verdocs-status-indicator.cjs",[[0,"verdocs-status-indicator",{"size":[1],"theme":[1],"status":[1],"envelope":[16],"isOpen":[32],"recipientStatusIcons":[32],"containerId":[32]}]]],["verdocs-template-card.cjs",[[0,"verdocs-template-card",{"template":[16]}]]],["verdocs-template-tags.cjs",[[0,"verdocs-template-tags",{"tags":[16]}]]],["verdocs-toggle.cjs",[[0,"verdocs-toggle",{"options":[16],"theme":[1],"selectedOption":[32]}]]],["verdocs-initial-dialog.cjs",[[0,"verdocs-initial-dialog",{"initials":[1],"fontLoaded":[32],"enteredInitials":[32],"mode":[32]}]]],["verdocs-signature-dialog.cjs",[[0,"verdocs-signature-dialog",{"name":[1],"fontLoaded":[32],"enteredName":[32],"mode":[32]}]]],["verdocs-view.cjs",[[0,"verdocs-view",{"endpoint":[16],"envelopeId":[1,"envelope-id"]}]]],["verdocs-toggle-button.cjs",[[0,"verdocs-toggle-button",{"active":[4],"icon":[1],"label":[1],"size":[1],"_active":[32]}]]],["verdocs-contact-picker.cjs",[[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.cjs",[[0,"verdocs-radio-button",{"checked":[4],"name":[1],"value":[1],"disabled":[4]}]]],["verdocs-template-role-properties_2.cjs",[[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.cjs",[[0,"verdocs-floating-menu",{"options":[16]}],[0,"verdocs-toolbar-icon",{"text":[1],"icon":[1],"placement":[1],"containerId":[32]}]]],["verdocs-template-create_2.cjs",[[0,"verdocs-template-fields",{"endpoint":[16],"templateId":[1,"template-id"],"placing":[32],"selectedRoleName":[32],"rerender":[32]}],[0,"verdocs-template-create",{"endpoint":[16],"file":[32],"creating":[32]}]]],["verdocs-ok-dialog.cjs",[[0,"verdocs-ok-dialog",{"heading":[1],"message":[1],"showCancel":[4,"show-cancel"]}]]],["verdocs-quick-functions_3.cjs",[[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.cjs",[[0,"verdocs-dropdown",{"options":[16],"open":[32]}]]],["verdocs-document-page_2.cjs",[[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.cjs",[[0,"verdocs-checkbox",{"checked":[4],"name":[1],"label":[1],"value":[1],"theme":[1],"disabled":[4]}],[0,"verdocs-text-input",{"value":[1],"label":[1],"placeholder":[1],"autocomplete":[1],"helpText":[1,"help-text"],"type":[1],"disabled":[4]}],[0,"verdocs-component-error",{"message":[1]}],[0,"verdocs-help-icon",{"text":[1],"containerId":[32]}]]],["verdocs-button-panel_3.cjs",[[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);
+  return index.bootstrapLazy(JSON.parse("[[\"verdocs-template-recipients.cjs\",[[0,\"verdocs-template-recipients\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"showingSenderDialog\":[32],\"sender\":[32],\"forceRerender\":[32]}]]],[\"verdocs-field-initial.cjs\",[[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.cjs\",[[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.cjs\",[[0,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"step\":[32],\"pdfUrl\":[32],\"template\":[32]}]]],[\"verdocs-field-checkbox.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[0,\"verdocs-field-timestamp\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-ok-dialog.cjs\",[[0,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"showCancel\":[4,\"show-cancel\"]}]]],[\"verdocs-sign.cjs\",[[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.cjs\",[[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.cjs\",[[0,\"verdocs-template-reminders\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showPlanBlocker\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-template-name.cjs\",[[0,\"verdocs-template-name\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-auth.cjs\",[[0,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"isAuthenticated\":[32],\"displayMode\":[32],\"username\":[32],\"password\":[32],\"loggingIn\":[32],\"activeSession\":[32],\"loginError\":[32]}]]],[\"verdocs-search.cjs\",[[0,\"verdocs-search\",{\"endpoint\":[16]}]]],[\"verdocs-send.cjs\",[[0,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"containerId\":[32],\"rolesAtLevel\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"rolesCompleted\":[32],\"reset\":[64]}]]],[\"verdocs-template-visibility.cjs\",[[0,\"verdocs-template-visibility\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"dirty\":[32],\"loading\":[32],\"personal\":[32],\"public\":[32]}]]],[\"verdocs-upload-dialog.cjs\",[[0,\"verdocs-upload-dialog\",{\"draggingOver\":[32],\"decodedFiles\":[32]}]]],[\"verdocs-field-attachment.cjs\",[[0,\"verdocs-field-attachment\",{\"field\":[16],\"disabled\":[4],\"roleIndex\":[2,\"role-index\"],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-toggle-button.cjs\",[[0,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-floating-menu_3.cjs\",[[0,\"verdocs-floating-menu\",{\"options\":[16]}],[0,\"verdocs-template-document-page\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"documentId\":[1,\"document-id\"],\"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],\"pageDisplayUri\":[32]}],[0,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}]]],[\"verdocs-preview.cjs\",[[0,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"]}]]],[\"verdocs-template-attachments.cjs\",[[0,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32]}]]],[\"verdocs-envelope-sidebar.cjs\",[[0,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"activeTab\":[32],\"panelOpen\":[32]}]]],[\"verdocs-kba-dialog.cjs\",[[0,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"choices\":[16],\"response\":[32]}]]],[\"verdocs-field-dropdown.cjs\",[[0,\"verdocs-field-dropdown\",{\"field\":[16],\"disabled\":[4],\"roleindex\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-payment.cjs\",[[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.cjs\",[[0,\"verdocs-organization-card\",{\"organization\":[16]}]]],[\"verdocs-search-tabs.cjs\",[[0,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-status-indicator.cjs\",[[0,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32]}]]],[\"verdocs-template-card.cjs\",[[0,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags.cjs\",[[0,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle.cjs\",[[0,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-button.cjs\",[[0,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-checkbox_4.cjs\",[[0,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"disabled\":[4]}],[0,\"verdocs-text-input\",{\"value\":[1],\"label\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"disabled\":[4]}],[0,\"verdocs-component-error\",{\"message\":[1]}],[0,\"verdocs-help-icon\",{\"text\":[1],\"containerId\":[32]}]]],[\"verdocs-initial-dialog.cjs\",[[0,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog.cjs\",[[0,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32]}]]],[\"verdocs-document-page_2.cjs\",[[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-dropdown\",{\"options\":[16],\"open\":[32]}]]],[\"verdocs-view.cjs\",[[0,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"]}]]],[\"verdocs-contact-picker.cjs\",[[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-loader.cjs\",[[0,\"verdocs-loader\"]]],[\"verdocs-template-create_2.cjs\",[[0,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"placing\":[32],\"selectedRoleName\":[32],\"rerender\":[32]}],[0,\"verdocs-template-create\",{\"endpoint\":[16],\"file\":[32],\"creating\":[32]}]]],[\"verdocs-radio-button.cjs\",[[0,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-button-panel_3.cjs\",[[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]}]]],[\"verdocs-template-role-properties_2.cjs\",[[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-quick-functions_3.cjs\",[[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]}]]]]"), options);
 });

package/dist/collection/collection-manifest.json

@@ -31,6 +31,7 @@
     "./components/elements/verdocs-quick-functions/verdocs-quick-functions.js",
     "./components/elements/verdocs-search-activity/verdocs-search-activity.js",
     "./components/elements/verdocs-search-tabs/verdocs-search-tabs.js",
+    "./components/elements/verdocs-template-document-page/verdocs-template-document-page.js",
     "./components/embeds/verdocs-build/verdocs-build.js",
     "./components/embeds/verdocs-preview/verdocs-preview.js",
     "./components/embeds/verdocs-search/verdocs-search.js",

package/dist/collection/components/elements/verdocs-template-document-page/verdocs-template-document-page.css

@@ -0,0 +1,15 @@
+verdocs-template-document-page {
+  width: 100%;
+  position: relative;
+}
+verdocs-template-document-page .verdocs-template-document-page-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: 0 0 10px 5px #0000000f;
+}
+verdocs-template-document-page .verdocs-template-document-page-layer.img {
+  width: 100%;
+}

package/dist/collection/components/elements/verdocs-template-document-page/verdocs-template-document-page.js

@@ -0,0 +1,275 @@
+// NOTE: This component does not have a story because it's not intended for external use.
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk/Templates/TemplateDocuments';
+import { throttle } from '../../../utils/utils';
+/**
+ * Represents one document page. This is primarily a layout container used to coordinate positions of
+ * page-related layers such as the page itself, signature fields, etc. It is not intended to be used
+ * on its own as an individual component.
+ */
+export class VerdocsTemplateDocumentPage {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.documentId = '';
+    this.pageNumber = 1;
+    this.virtualWidth = 612;
+    this.virtualHeight = 792;
+    this.layers = [{ name: 'page', type: 'canvas' }];
+    this.containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;
+    this.renderedWidth = this.virtualWidth;
+    this.renderedHeight = this.virtualHeight;
+    this.naturalWidth = this.virtualWidth;
+    this.naturalHeight = this.virtualHeight;
+    this.aspectRatio = this.virtualWidth / this.virtualHeight;
+    this.skipFirstNotification = true;
+    this.pageDisplayUri = '';
+  }
+  async componentWillLoad() {
+    const uri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
+    console.log('pd', uri);
+    this.pageDisplayUri = uri;
+  }
+  componentDidLoad() {
+    this.resizeObserver = new ResizeObserver(throttle(entries => {
+      for (const entry of entries) {
+        const renderedWidth = entry.contentRect.width;
+        this.renderedWidth = renderedWidth;
+        this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);
+      }
+      this.notifyRenderedSize();
+    }, 100));
+    this.resizeObserver.observe(this.container);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
+  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
+  // componentDidRender() {
+  //   this.notifyRenderedSize();
+  // }
+  notifyRenderedSize() {
+    // We skip one notification because by default we will always get at least two, one when rendering the initial size
+    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
+    if (this.skipFirstNotification) {
+      this.skipFirstNotification = false;
+      return;
+    }
+    this.pageRendered.emit({
+      // container: this.container,
+      containerId: this.containerId,
+      pageNumber: this.pageNumber,
+      virtualWidth: this.virtualWidth,
+      virtualHeight: this.virtualHeight,
+      renderedWidth: this.renderedWidth,
+      renderedHeight: this.renderedHeight,
+      naturalWidth: this.naturalWidth,
+      naturalHeight: this.naturalHeight,
+      aspectRatio: this.aspectRatio,
+      xScale: this.renderedWidth / this.virtualWidth,
+      yScale: this.renderedHeight / this.virtualHeight,
+    });
+  }
+  render() {
+    const height = `${this.renderedHeight}px`;
+    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, onLoad: (e) => {
+        // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
+        // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
+        // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
+        // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
+        // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
+        // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
+        // TODO: Store this in the DB with each page.
+        this.naturalWidth = e.target.naturalWidth;
+        this.naturalHeight = e.target.naturalHeight;
+        this.aspectRatio = this.naturalWidth / this.naturalHeight;
+        this.virtualHeight = this.virtualWidth / this.aspectRatio;
+      } })) : (h("div", null)))));
+  }
+  static get is() { return "verdocs-template-document-page"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-document-page.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-document-page.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to load from."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the template the document is for."
+        },
+        "attribute": "template-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "documentId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the document to display."
+        },
+        "attribute": "document-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "pageNumber": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The page number being rendered. (Reminder: page numbers are 1-based.)"
+        },
+        "attribute": "page-number",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "virtualWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\nthe aspect ratio of the final rendered element when scaling up/down."
+        },
+        "attribute": "virtual-width",
+        "reflect": false,
+        "defaultValue": "612"
+      },
+      "virtualHeight": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\nthe aspect ratio of the final rendered element when scaling up/down."
+        },
+        "attribute": "virtual-height",
+        "reflect": false,
+        "defaultValue": "792"
+      },
+      "layers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IPageLayer[]",
+          "resolved": "IPageLayer[]",
+          "references": {
+            "IPageLayer": {
+              "location": "import",
+              "path": "../../../utils/Types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\nThe parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\nif `pages` was ['page', 'fields'] the structure will be:\n\n```\n    <div id=\"verdocs-document-page-ker2fr1p9\">\n      <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n      <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n    </div>\n```"
+        },
+        "defaultValue": "[{name: 'page', type: 'canvas'}]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "containerId": {},
+      "renderedWidth": {},
+      "renderedHeight": {},
+      "naturalWidth": {},
+      "naturalHeight": {},
+      "aspectRatio": {},
+      "skipFirstNotification": {},
+      "pageDisplayUri": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pageRendered",
+        "name": "pageRendered",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a page has been rendered. This is also fired when the page is resized."
+        },
+        "complexType": {
+          "original": "IDocumentPageInfo",
+          "resolved": "IDocumentPageInfo",
+          "references": {
+            "IDocumentPageInfo": {
+              "location": "import",
+              "path": "../../../utils/Types"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "container"; }
+}

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

@@ -32,9 +32,6 @@ export class VerdocsPreview {
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
-  async handleFieldChange(field, e, optionId) {
-    console.log('[PREVIEW] handleFieldChange', field, e, optionId);
-  }
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[PREVIEW] Page rendered', pageInfo);
@@ -51,7 +48,7 @@ export class VerdocsPreview {
     pages.sort((a, b) => a.sequence - b.sequence);
     return (h(Host, null, pages.map(page => {
       console.log('rendering page', page);
-      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] }));

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

@@ -8,6 +8,7 @@ verdocs-template-create form {
   flex-direction: column;
 }
 verdocs-template-create form .upload-box {
+  box-sizing: border-box;
   max-width: 320px;
   text-align: center;
   padding: 44px 18px 66px;
@@ -18,6 +19,19 @@ verdocs-template-create form .upload-box svg {
   width: 64px;
   fill: #5c6575;
 }
+verdocs-template-create .loader-wrapper {
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  max-width: 320px;
+  height: 320px;
+  text-align: center;
+  border: 2px dashed #979797;
+  justify-content: flex-end;
+  padding: 0 0 30px 0;
+}
 verdocs-template-create .buttons {
   display: flex;
   column-gap: 8px;

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

@@ -3,8 +3,6 @@ import { h, Host } from '@stencil/core';
 import { createTemplateDocument } from '@verdocs/js-sdk/Templates/TemplateDocuments';
 import { createTemplate, getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { SDKError } from '../../../utils/errors';
-// import {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';
-// import {createPage} from '@verdocs/js-sdk/Templates/Pages';
 const unicodeNBSP = ' ';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
 /**
@@ -23,9 +21,8 @@ export class VerdocsTemplateCreate {
   }
   handleFileChanged(e) {
     var _a;
-    console.log('files', e.target.files);
     this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
-    console.log('Selected file', this.file);
+    console.log('[CREATE] Selected file', this.file);
     // this.filePath = e.target.files?.[0]?.name;
   }
   handleUpload(e) {
@@ -45,30 +42,38 @@ export class VerdocsTemplateCreate {
     if (!this.file) {
       return;
     }
+    this.creating = true;
     try {
       const template = await createTemplate(this.endpoint, { name: this.file.name });
-      console.log('created template', template);
+      console.log('[CREATE] Created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
-      console.log('created document', template_document);
+      console.log('[CREATE] Created document', template_document);
       const finalTemplate = await getTemplate(this.endpoint, template.id);
-      console.log('[CREATE] Created template', finalTemplate);
+      console.log('[CREATE] Retrieved new template', finalTemplate);
       // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
       //   console.log('Updating page', pageNumber);
       //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
       //   console.log('Created page', page);
       // }
       (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
+      this.creating = false;
     }
     catch (e) {
-      console.log('[TEMPLATE-CREATE] Error creating template', e);
+      console.log('[CREATE] Error creating template', e);
       (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+      this.creating = false;
     }
   }
   render() {
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px', height: '20px' } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file }))));
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Uploading, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+        marginTop: '20px',
+        marginBottom: '20px',
+        fontSize: '16px',
+        height: '20px',
+      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating }))));
   }
   static get is() { return "verdocs-template-create"; }
   static get originalStyleUrls() {

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

@@ -243,7 +243,7 @@ export class VerdocsTemplateFields {
         console.log('onSubmit');
       } }, h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);
-      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] }));

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

@@ -35,6 +35,7 @@ export class VerdocsTemplateName {
     e.stopPropagation();
     this.name = TemplateStore.template.name;
     this.dirty = false;
+    console.log('Closing');
     (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
   }
   async handleSave(e) {
@@ -43,6 +44,7 @@ export class VerdocsTemplateName {
     await updateTemplate(this.endpoint, this.templateId, { name: this.name });
     TemplateStore.template.name = this.name;
     this.dirty = false;
+    console.log('Closing');
     (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {

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

@@ -94,6 +94,7 @@ export class VerdocsTemplateRecipients {
     interact('.dropzone').dropzone({
       overlap: 0.05,
       ondrop: function handleDrop(event) {
+        var _a, _b;
         event.target.classList.remove('active');
         // target will be the recipient e.g. <div class="recipient" data-rolename="Buyer" />
         // relatedTarget will be the drop zone, e.g. <div class="dropzone" data-order="2" data-sequence="1" />
@@ -107,7 +108,7 @@ export class VerdocsTemplateRecipients {
         const roleName = event.relatedTarget.dataset.rolename;
         const targetSequence = +event.target.dataset.sequence;
         const targetOrder = +event.target.dataset.order;
-        const changingRole = TemplateStore.template.roles.find(role => role.name === roleName);
+        const changingRole = (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.find(role => role.name === roleName);
         if (changingRole) {
           // To handle the renumbering, we update the role being moved to the new values, which will be some half-interval e.g.
           // sequence 1.5 order 1. Then we
@@ -119,7 +120,7 @@ export class VerdocsTemplateRecipients {
           // We have to update ALL the roles to be sure each gets new proper sequence/order numbers assigned.
           // TODO: We could optimize this by tracking "dirty" states and only update the roles that have changed. But it's a LOT more
           //  code to do right, and since most workflows will typically only have 2-4 recipients max, it may not be worth it.
-          Promise.all(TemplateStore.template.roles.map(role => updateRole(this.endpoint, this.templateId, role.name, {
+          Promise.all((_b = TemplateStore.template) === null || _b === void 0 ? void 0 : _b.roles.map(role => updateRole(this.endpoint, this.templateId, role.name, {
             sequence: role.sequence,
             order: role.order,
           })))
@@ -152,13 +153,15 @@ export class VerdocsTemplateRecipients {
     (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
   }
   sortTemplateRoles() {
-    TemplateStore.template.roles.sort((a, b) => {
+    var _a;
+    (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.sort((a, b) => {
       return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
     });
   }
   extractSequenceNumbers() {
+    var _a;
     this.sequences = [];
-    TemplateStore.template.roles.forEach(role => {
+    (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.forEach(role => {
       if (!this.sequences.includes(role.sequence)) {
         this.sequences.push(role.sequence);
       }
@@ -172,9 +175,8 @@ export class VerdocsTemplateRecipients {
     // If the user dragged an entry from below a row to above it, we end up here like [1,0]. Make sure it's [0,1] for the next operation.
     this.sequences.sort((a, b) => a - b);
     this.sequences.forEach((originalSequence, newSequenceIndex) => {
-      TemplateStore.template.roles
-        .filter(role => role.sequence === originalSequence)
-        .forEach((role, newOrderIndex) => {
+      var _a;
+      (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.filter(role => role.sequence === originalSequence).forEach((role, newOrderIndex) => {
         if (!renumbered.includes(role.name)) {
           role.sequence = newSequenceIndex + 1;
           role.order = newOrderIndex + 1;
@@ -187,12 +189,13 @@ export class VerdocsTemplateRecipients {
   }
   // Look for name conflicts, because they're UGC and can be anything, regardless of order.
   getNextRecipientName() {
+    var _a, _b;
     let name = '';
-    let nextNumber = TemplateStore.template.roles.length;
+    let nextNumber = (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.length;
     do {
       nextNumber++;
       name = `Recipient ${nextNumber}`;
-    } while (!name || TemplateStore.template.roles.some(role => role.name === name));
+    } while (!name || ((_b = TemplateStore.template) === null || _b === void 0 ? void 0 : _b.roles.some(role => role.name === name)));
     return name;
   }
   handleAddRole(e, sequence) {
@@ -253,12 +256,16 @@ export class VerdocsTemplateRecipients {
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
+    if (TemplateStore.loading || !TemplateStore.template) {
+      return (h(Host, null, h("verdocs-loader", null)));
+    }
     const roleNames = (((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
+    console.log('s', this.sequences);
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-recipients" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[TemplateStore.template.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-recipients" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), TemplateStore.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
-    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step")))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": this.sequences.length + 1 }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {

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

@@ -3,8 +3,8 @@ export default {
   title: 'Templates/Recipients',
   component: 'verdocs-template-recipients',
   args: {
+    // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
     templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
-    // templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
   },
   argTypes: {
     onSave: { action: 'save' },

package/dist/collection/utils/templateStore.js

@@ -17,6 +17,7 @@ const { state, onChange } = createStore({
   dirty: false,
 });
 onChange('template', async (newTemplate) => {
+  console.log('nt', newTemplate);
   if (!newTemplate) {
     console.log('[TEMPLATESTORE] Clearing template');
     state.fields = [];