@verdocs/web-sdk 2.2.21 → 2.2.22

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

@@ -1,51 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { P as Permissions, V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
-import { g as getTemplateStore } from './TemplateStore-3c138524.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
+import { g as getTemplateStore } from './TemplateStore-e8cf5a15.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './index-4439b0d1.js';
 import './Templates-f90883f7.js';
 
-/**
- * Confirm whether the user has all of the specified permissions.
- */
-var userHasPermissions = function (session, permissions) {
-    return permissions.every(function (perm) { return ((session === null || session === void 0 ? void 0 : session.permissions) || []).includes(perm); });
-};
-
-/**
- * Various helpers to identify available operations for a template by a user.
- *
- * @module
- */
-/**
- * Check to see if the user created the template.
- */
-var userIsTemplateCreator = function (session, template) {
-    return session && template && session.profile_id === template.profile_id;
-};
-/**
- * Check to see if a template is "shared" with the user.
- */
-var userHasSharedTemplate = function (session, template) {
-    return session && template && !template.is_personal && session.organization_id === template.organization_id;
-};
-/**
- * Check to see if the user can update a tempate.
- */
-var userCanUpdateTemplate = function (session, template) {
-    return userIsTemplateCreator(session, template) ||
-        (userHasSharedTemplate(session, template) &&
-            userHasPermissions(session, [Permissions.TEMPLATE_MEMBER_READ, Permissions.TEMPLATE_MEMBER_WRITE]));
-};
-/**
- * Check to see if the user can "build" the template (use the field builder). The user must have write access to the
- * template, and the template must have at least one signer role.
- */
-var userCanBuildTemplate = function (session, template) {
-    return userCanUpdateTemplate(session, template) && (template.roles || []).filter(function (role) { return role.type === 'signer'; }).length > 0;
-};
-
 const verdocsBuildCss = "verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}";
 
 const VerdocsBuild = class {
@@ -60,11 +20,14 @@ const VerdocsBuild = class {
     this.templateId = null;
     this.step = 'preview';
     this.store = null;
-    this.tabsUpdateKey = 1;
   }
-  onTemplateIdChanged() {
-    console.log('Template ID changed', this.templateId);
-    this.loadTemplate().catch((e) => console.log('Unknown Error', e));
+  onTemplateIdChanged(newTemplateId) {
+    console.log('Template ID changed', newTemplateId);
+    this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+  }
+  onStepChanged(newStep) {
+    console.log('Step changed', newStep);
+    this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
   }
   async componentWillLoad() {
     var _a, _b, _c;
@@ -79,16 +42,18 @@ const VerdocsBuild = class {
         console.log('[BUILD] Unable to start builder session, must be authenticated');
         return;
       }
-      this.loadTemplate().catch(e => console.log('[BUILD] Unable to load template', e));
+      this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
     }
     catch (e) {
       console.log('[BUILD] Error loading template', e);
       (_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 loadTemplate() {
-    if (this.templateId) {
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+  async loadTemplate(templateId) {
+    if (templateId) {
+      console.log('Loading store', templateId);
+      this.store = await getTemplateStore(this.endpoint, templateId, true);
+      forceUpdate(this.el);
     }
   }
   handleCancel(e) {
@@ -97,8 +62,8 @@ const VerdocsBuild = class {
   }
   async handleTemplateCreated(templateId) {
     var _a;
+    await this.loadTemplate(templateId);
     this.templateId = templateId;
-    await this.loadTemplate();
     this.step = 'roles';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
   }
@@ -106,7 +71,6 @@ const VerdocsBuild = class {
     var _a;
     console.log('tup');
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-    this.tabsUpdateKey++;
   }
   handleAttachmentsNext() {
     var _a;
@@ -118,44 +82,27 @@ const VerdocsBuild = class {
     this.step = 'fields';
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('fields');
   }
-  setStep(e, step) {
+  handleStepChanged(step) {
     var _a;
-    e.stopPropagation();
-    e.preventDefault();
+    console.log('osc', step);
     this.step = step;
     (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(step);
   }
   render() {
-    var _a, _b, _c;
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    if (!this.templateId || !this.store) {
+    if (!this.store) {
       console.log('[BUILD] No template ID, rendering created view');
-      return (h(Host, null, h("div", { class: "content" }, h("verdocs-tabs", { key: this.tabsUpdateKey, onSelectTab: () => { }, tabs: [
-          { id: 'attachments', disabled: false, label: 'Upload Attachment(s)' },
-          { id: 'roles', disabled: true, label: 'Roles' },
-          { id: 'settings', disabled: true, label: 'Settings' },
-          { id: 'fields', disabled: true, label: 'Fields' },
-          { id: 'preview', disabled: true, label: 'Preview/Send' },
-        ] }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
+      return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: "attachments", onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), h("verdocs-template-create", { endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateCreated: e => this.handleTemplateCreated(e.detail.templateId) }))));
     }
     console.log('[BUILD] Rendering build view', this.step, ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step));
-    // const canPreview = this.store && userCanPreviewTemplate(this.endpoint.session, this.store?.state);
-    // TODO: Had to disable this for now to research why reactivity isn't re-rendering the tabs
-    const canPreview = this.store && userCanBuildTemplate(this.endpoint.session, (_a = this.store) === null || _a === void 0 ? void 0 : _a.state);
-    const canEditFields = this.store && userCanBuildTemplate(this.endpoint.session, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state);
-    const canEditRoles = this.store && userCanUpdateTemplate(this.endpoint.session, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state);
-    return (h(Host, null, h("div", { class: "content" }, h("verdocs-tabs", { key: this.tabsUpdateKey, onSelectTab: e => this.setStep(e, e.detail.tab.id), defaultTab: ['attachments', 'roles', 'settings', 'fields', 'preview'].indexOf(this.step), tabs: [
-        { id: 'attachments', disabled: false, label: 'Attachment(s)' },
-        { id: 'roles', disabled: !canEditRoles, label: 'Roles' },
-        { id: 'settings', disabled: !canEditFields, label: 'Settings' },
-        { id: 'fields', disabled: !canEditFields, label: 'Fields' },
-        { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
-      ] }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { style: { flexDirection: 'row', display: 'flex', width: '100%', backgroundColor: '#eeeeee', maxHeight: '100%' } }, h("div", { style: { display: 'flex', flex: '0 0 300px', backgroundColor: '#ffffff', boxShadow: '1px 1px 6px -2px #0000007f' } }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { style: { display: 'flex', flex: '1', justifyContent: 'center', overflowY: 'scroll' } }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+    return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'settings' && (h("div", { style: { flexDirection: 'column', gap: '20px', display: 'flex', maxWidth: '400px', margin: '20px' } }, h("verdocs-template-name", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' }, onTemplateUpdated: e => this.handleTemplateUpdated(e) }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint, onTemplateUpdated: e => this.handleTemplateUpdated(e) }), this.step === 'preview' && (h("div", { style: { flexDirection: 'row', display: 'flex', width: '100%', backgroundColor: '#eeeeee', maxHeight: '100%' } }, h("div", { style: { display: 'flex', flex: '0 0 300px', backgroundColor: '#ffffff', boxShadow: '1px 1px 6px -2px #0000007f' } }, h("verdocs-send", { templateId: this.templateId, endpoint: this.endpoint, onSend: e => { var _a; return (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, style: { width: '100%' } })), h("div", { style: { display: 'flex', flex: '1', justifyContent: 'center', overflowY: 'scroll' } }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
   }
+  get el() { return getElement(this); }
   static get watchers() { return {
-    "templateId": ["onTemplateIdChanged"]
+    "templateId": ["onTemplateIdChanged"],
+    "step": ["onStepChanged"]
   }; }
 };
 VerdocsBuild.style = verdocsBuildCss;

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

@@ -2,9 +2,9 @@ import { r as registerInstance, h, H as Host, c as createEvent, a as getElement
 import { c as createPopper } from './popper-15e448b4.js';
 import { a as commonjsGlobal } from './_commonjsHelpers-5ec8f9b7.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { u as updateField, d as deleteField } from './Fields-c82e6df3.js';
-import { g as getTemplateStore } from './TemplateStore-3c138524.js';
+import { g as getTemplateStore } from './TemplateStore-e8cf5a15.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './index-4439b0d1.js';
 import './Templates-f90883f7.js';

package/dist/esm/verdocs-contact-picker_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { d as convertToE164 } from './utils-c0cd0b91.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-5e32159f.js';

package/dist/esm/verdocs-envelope-document-page.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-172625c5.js';
 import { j as getEnvelopeDocumentPageDisplayUri } from './Envelopes-5e32159f.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { t as throttle } from './utils-c0cd0b91.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Files-70a192df.js';

package/dist/esm/verdocs-envelope-recipient-link_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
 import { g as getInPersonLink } from './Recipients-4ec2138c.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { g as getEnvelopeStore } from './EnvelopeStore-7f484014.js';
 import { V as VerdocsToast } from './Toast-f3b8fd46.js';
 import { S as SDKError } from './errors-9b5498c8.js';

package/dist/esm/verdocs-envelope-sidebar.entry.js

@@ -3,7 +3,7 @@ import { c as cancelEnvelope } from './Envelopes-5e32159f.js';
 import { u as userIsEnvelopeOwner } from './Permissions-f2eb0421.js';
 import { r as resendInvitation } from './Recipients-4ec2138c.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { g as getEnvelopeStore } from './EnvelopeStore-7f484014.js';
 import { F as FORMAT_TIMESTAMP } from './Types-de18e225.js';
 import { V as VerdocsToast } from './Toast-f3b8fd46.js';

package/dist/esm/verdocs-envelopes-list.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-1
 import { l as listEnvelopes, c as cancelEnvelope } from './Envelopes-5e32159f.js';
 import { g as getRecipientsWithActions, a as userCanAct, b as userCanCancelEnvelope } from './Permissions-f2eb0421.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { i as integerSequence } from './Primitives-8fe93caf.js';
 import { s as saveEnvelopesAsZip } from './utils-c0cd0b91.js';
 import { V as VerdocsToast } from './Toast-f3b8fd46.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-172625c5.js';
 import { i as interact } from './interact.min-cf83fa88.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { u as updateField } from './Fields-c82e6df3.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-c0cd0b91.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-172625c5.js';
 import { i as interact } from './interact.min-cf83fa88.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { u as updateField } from './Fields-c82e6df3.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-c0cd0b91.js';

package/dist/esm/verdocs-file-chooser_2.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { u as unicodeNBSP } from './Icons-c29eb0fa.js';
 
 const verdocsFileChooserCss = "verdocs-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";

package/dist/esm/{verdocs-preview_7.entry.js → verdocs-preview_8.entry.js}

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { r as renderDocumentField, b as getRoleIndex } from './utils-c0cd0b91.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-3c138524.js';
+import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-e8cf5a15.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import { a as isValidEmail, i as isValidPhone } from './Validators-16a2a43b.js';
 import { g as getRGBA } from './Colors-1b298092.js';
@@ -345,6 +345,99 @@ const VerdocsTemplateAttachments = class {
 };
 VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
 
+const verdocsTemplateBuildTabsCss = "verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}";
+
+const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
+const VerdocsTemplateBuildTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.stepChanged = createEvent(this, "stepChanged", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = null;
+    this.step = 'preview';
+    this.store = null;
+  }
+  onStepChanged() {
+    console.log('Step changed', this.step, this.templateId);
+    this.loadTemplate().catch((e) => console.log('Unknown Error', e));
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');
+        return;
+      }
+      if (!this.templateId) {
+        this.step = 'preview';
+        return;
+      }
+      this.loadTemplate().catch(e => console.log('[BUILD_TABS] Unable to load template', e));
+    }
+    catch (e) {
+      console.log('[BUILD_TABS] Error loading template', e);
+      (_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 loadTemplate() {
+    if (this.templateId) {
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+    }
+  }
+  setStep(e) {
+    var _a;
+    console.log('Selected step', e.detail.tab.id);
+    e.stopPropagation();
+    e.preventDefault();
+    this.step = e.detail.tab.id;
+    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail.tab.id);
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    let canPreview = false;
+    let canEditFields = false;
+    let canEditRoles = false;
+    if (this.templateId && this.store) {
+      console.log('lengths', (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.template_documents.length, (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.length, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.fields.length);
+      canEditRoles = ((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.template_documents.length) > 0;
+      canEditFields = canEditRoles && ((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.roles.length) > 0;
+      canPreview = canEditFields && ((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.fields.length) > 0;
+      // TODO
+      // canPreview = this.store && userCanPreviewTemplate(this.endpoint.session, this.store?.state);
+      // canEditFields = this.store && userCanBuildTemplate(this.endpoint.session, this.store?.state);
+      // canEditRoles = this.store && userCanUpdateTemplate(this.endpoint.session, this.store?.state);
+    }
+    let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);
+    if (!canPreview && selectedStepIndex >= 4) {
+      selectedStepIndex = 3;
+    }
+    if (!canEditFields && selectedStepIndex >= 3) {
+      selectedStepIndex = 1;
+    }
+    if (!canEditRoles && selectedStepIndex >= 1) {
+      selectedStepIndex = 0;
+    }
+    console.log({ selectedStepIndex, canPreview, canEditFields, canEditRoles });
+    console.log('[BUILD_TABS] Rendering', this.step, selectedStepIndex);
+    return (h(Host, null, h("verdocs-tabs", { onSelectTab: e => this.setStep(e), selectedTab: selectedStepIndex, tabs: [
+        { id: 'attachments', disabled: false, label: this.templateId && this.store ? 'Attachment(s)' : 'Upload Attachment(s)' },
+        { id: 'roles', disabled: !canEditRoles, label: 'Roles' },
+        { id: 'settings', disabled: !canEditFields, label: 'Settings' },
+        { id: 'fields', disabled: !canEditFields, label: 'Fields' },
+        { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
+      ] })));
+  }
+  static get watchers() { return {
+    "step": ["onStepChanged"]
+  }; }
+};
+VerdocsTemplateBuildTabs.style = verdocsTemplateBuildTabsCss;
+
 const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const unicodeNBSP = ' ';
@@ -688,4 +781,4 @@ const VerdocsTemplateVisibility = class {
 };
 VerdocsTemplateVisibility.style = verdocsTemplateVisibilityCss;
 
-export { VerdocsPreview as verdocs_preview, VerdocsSend as verdocs_send, VerdocsTemplateAttachments as verdocs_template_attachments, VerdocsTemplateCreate as verdocs_template_create, VerdocsTemplateName as verdocs_template_name, VerdocsTemplateReminders as verdocs_template_reminders, VerdocsTemplateVisibility as verdocs_template_visibility };
+export { VerdocsPreview as verdocs_preview, VerdocsSend as verdocs_send, VerdocsTemplateAttachments as verdocs_template_attachments, VerdocsTemplateBuildTabs as verdocs_template_build_tabs, VerdocsTemplateCreate as verdocs_template_create, VerdocsTemplateName as verdocs_template_name, VerdocsTemplateReminders as verdocs_template_reminders, VerdocsTemplateVisibility as verdocs_template_visibility };

package/dist/esm/verdocs-quick-functions_3.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { a as getTemplates } from './Templates-f90883f7.js';
 
 /**

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 
 const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";
 

package/dist/esm/verdocs-settings-api-keys_4.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { a as formatFullName, c as capitalize, b as formatInitials } from './Primitives-8fe93caf.js';
 import { V as VerdocsToast } from './Toast-f3b8fd46.js';
 import { S as SDKError } from './errors-9b5498c8.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 
 const verdocsSettingsCss = "verdocs-settings{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-settings .tabs{gap:4px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid #654dcb}verdocs-settings .tabs .tab{cursor:pointer;padding:5px 10px;color:#ffffff;background-color:#777777}verdocs-settings .tabs .tab.active{color:#ffffff;background-color:#654dcb}";

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment }
 import { e as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeField, f as updateEnvelopeFieldSignature, h as updateEnvelopeFieldInitials, i as uploadEnvelopeFieldAttachment } from './Envelopes-5e32159f.js';
 import { R as RecipientStates } from './Types-5f31149e.js';
 import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, b as envelopeRecipientSubmit } from './Recipients-4ec2138c.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { i as isValidPhone, a as isValidEmail } from './Validators-16a2a43b.js';
 import { f as fullNameToInitials, i as integerSequence } from './Primitives-8fe93caf.js';
 import { a as saveAttachment, u as updateDocumentFieldValue, b as getRoleIndex, r as renderDocumentField, c as getFieldId } from './utils-c0cd0b91.js';

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

@@ -7,18 +7,10 @@ const VerdocsTabs = class {
     registerInstance(this, hostRef);
     this.selectTab = createEvent(this, "selectTab", 7);
     this.tabs = [];
-    this.defaultTab = 0;
     this.selectedTab = 0;
   }
-  componentDidLoad() {
-    this.selectedTab = this.defaultTab || 0;
-  }
-  componentDidUpdate() {
-    this.selectedTab = this.defaultTab || 0;
-  }
   handleSelectTab(index) {
     var _a;
-    this.selectedTab = index;
     (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
   }
   render() {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { g as getTemplateDocumentPageDisplayUri } from './TemplateDocuments-6fd2f4e2.js';
 import { t as throttle } from './utils-c0cd0b91.js';
 import { c as createPopper } from './popper-15e448b4.js';

package/dist/esm/verdocs-template-fields_4.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, a as getElement } from './index-172625c5.js';
 import { i as interact } from './interact.min-cf83fa88.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint, T as TemplateSenderTypes } from './VerdocsEndpoint-d58d5544.js';
 import { u as updateField, c as createField } from './Fields-c82e6df3.js';
 import { i as integerSequence } from './Primitives-8fe93caf.js';
 import { b as getRoleIndex, r as renderDocumentField, h as updateCssTransform, i as defaultWidth, j as defaultHeight } from './utils-c0cd0b91.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-3c138524.js';
+import { g as getTemplateStore, a as getRoleNames } from './TemplateStore-e8cf5a15.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { u as updateTemplate } from './Templates-f90883f7.js';
@@ -604,15 +604,18 @@ const VerdocsTemplateRoles = class {
         console.log('[ROLES] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      this.sortTemplateRoles();
-      this.renumberTemplateRoles();
+      await this.reloadStore();
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
       (_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 reloadStore() {
+    this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+    this.sortTemplateRoles();
+    this.renumberTemplateRoles();
+  }
   componentDidRender() {
     interact.dynamicDrop(true);
     interact('.recipient').draggable({
@@ -677,6 +680,7 @@ const VerdocsTemplateRoles = class {
             var _a, _b;
             console.log('[ROLES] Updated roles');
             (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated-role', endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state });
+            this.reloadStore().catch(e => console.log('Unknown error', e));
           })
             .catch(e => console.log('[ROLES] Role updates failed', e));
         }
@@ -771,6 +775,7 @@ const VerdocsTemplateRoles = class {
       // this.store.state.roles = [...this.store?.state.roles, r];
       // this.renumberTemplateRoles();
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'created-role', endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state });
+      this.reloadStore().catch(e => console.log('Unknown error', e));
     })
       .catch(e => {
       console.log('[ROLES] Error creating role', e);
@@ -817,6 +822,7 @@ const VerdocsTemplateRoles = class {
         this.showingRoleDialog = null;
         // this.forceRerender++;
         (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'deleted-role', endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state });
+        this.reloadStore().catch(e => console.log('Unknown error', e));
       } })), this.showingSenderDialog && h("verdocs-template-sender", { endpoint: this.endpoint, templateId: this.templateId, onClose: () => (this.showingSenderDialog = false) })));
   }
   get el() { return getElement(this); }

package/dist/esm/verdocs-template-star.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import './Types-5f31149e.js';
 
 /**

package/dist/esm/verdocs-templates-list.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint, a as TemplateActions } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint, a as TemplateActions } from './VerdocsEndpoint-d58d5544.js';
 import { l as listTemplates, d as deleteTemplate } from './Templates-f90883f7.js';
 import { i as integerSequence } from './Primitives-8fe93caf.js';
 import { S as SDKError } from './errors-9b5498c8.js';

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, a
 import { t as throttledGetEnvelope, c as cancelEnvelope } from './Envelopes-5e32159f.js';
 import { b as userCanCancelEnvelope } from './Permissions-f2eb0421.js';
 import './Types-5f31149e.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-6fe4258b.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-d58d5544.js';
 import { i as integerSequence } from './Primitives-8fe93caf.js';
 import { s as saveEnvelopesAsZip, e as saveCertificate, a as saveAttachment } from './utils-c0cd0b91.js';
 import { S as SDKError } from './errors-9b5498c8.js';