@verdocs/web-sdk 2.2.20 → 2.2.22

package/dist/components/verdocs-build.js

@@ -1,22 +1,25 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
-import { P as Permissions, V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$q } from './verdocs-button2.js';
-import { d as defineCustomElement$p } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$o } from './verdocs-component-error2.js';
-import { d as defineCustomElement$n } from './verdocs-contact-picker2.js';
-import { d as defineCustomElement$m } from './verdocs-file-chooser2.js';
-import { d as defineCustomElement$l } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$k } from './verdocs-loader2.js';
-import { d as defineCustomElement$j } from './verdocs-ok-dialog2.js';
-import { d as defineCustomElement$i } from './verdocs-preview2.js';
-import { d as defineCustomElement$h } from './verdocs-progress-bar2.js';
-import { d as defineCustomElement$g } from './verdocs-radio-button2.js';
-import { d as defineCustomElement$f } from './verdocs-select-input2.js';
-import { d as defineCustomElement$e } from './verdocs-send2.js';
-import { d as defineCustomElement$d } from './verdocs-template-attachments2.js';
+import { d as defineCustomElement$t } from './verdocs-button2.js';
+import { d as defineCustomElement$s } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$r } from './verdocs-component-error2.js';
+import { d as defineCustomElement$q } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$p } from './verdocs-file-chooser2.js';
+import { d as defineCustomElement$o } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$n } from './verdocs-loader2.js';
+import { d as defineCustomElement$m } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$l } from './verdocs-preview2.js';
+import { d as defineCustomElement$k } from './verdocs-progress-bar2.js';
+import { d as defineCustomElement$j } from './verdocs-radio-button2.js';
+import { d as defineCustomElement$i } from './verdocs-select-input2.js';
+import { d as defineCustomElement$h } from './verdocs-send2.js';
+import { d as defineCustomElement$g } from './verdocs-tabs2.js';
+import { d as defineCustomElement$f } from './verdocs-template-attachments2.js';
+import { d as defineCustomElement$e } from './verdocs-template-build-tabs2.js';
+import { d as defineCustomElement$d } from './verdocs-template-create2.js';
 import { d as defineCustomElement$c } from './verdocs-template-document-page2.js';
 import { d as defineCustomElement$b } from './verdocs-template-fields2.js';
 import { d as defineCustomElement$a } from './verdocs-template-name2.js';
@@ -29,64 +32,7 @@ import { d as defineCustomElement$4 } from './verdocs-text-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-toggle-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.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 read/view a template.
- */
-var userCanReadTemplate = function (session, template) {
-    return template.is_public ||
-        userIsTemplateCreator(session, template) ||
-        (userHasSharedTemplate(session, template) && userHasPermissions(session, [Permissions.TEMPLATE_MEMBER_READ]));
-};
-/**
- * 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;
-};
-/**
- * Check to see if the user can preview the template. The user must have read access to the template, the template must
- * have at least one signer, and every signer must have at least one field.
- */
-var userCanPreviewTemplate = function (session, template) {
-    var hasPermission = userCanReadTemplate(session, template);
-    var signers = (template.roles || []).filter(function (role) { return role.type === 'signer'; });
-    return hasPermission && signers.length > 0 && signers.every(function (signer) { return (signer.fields || []).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 .steps{-ms-flex:0;flex:0;gap:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:5px 20px 0 10px;background-color:#f2f5fa;border-bottom:1px solid #cccccc}verdocs-build .steps .step{border:none;height:40px;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;padding:0 20px;font-size:13px;font-weight:600;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;border-top-left-radius:5px;border-top-right-radius:5px;background-color:#666666}verdocs-build .steps .step:disabled{cursor:inherit;background-color:#aaaaaa}verdocs-build .steps .step.active{background-color:#707ae5}verdocs-build .content{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 0 7px -3px #000000cc;box-shadow:0 0 7px -3px #000000cc}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 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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -95,35 +41,64 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.sdkError = createEvent(this, "sdkError", 7);
     this.stepChanged = createEvent(this, "stepChanged", 7);
     this.send = createEvent(this, "send", 7);
-    this.store = null;
+    this.templateUpdated = createEvent(this, "templateUpdated", 7);
+    this.templateCreated = createEvent(this, "templateCreated", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
-    this.step = null;
+    this.step = 'preview';
+    this.store = null;
+  }
+  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;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.log(`[BUILD] Missing required template ID ${this.templateId}`);
+        console.log(`[BUILD] No template ID, activating upload mode`);
+        this.step = 'attachments';
         return;
       }
       if (!this.endpoint.session) {
         console.log('[BUILD] Unable to start builder session, must be authenticated');
         return;
       }
-      this.step = 'roles';
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      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(templateId) {
+    if (templateId) {
+      console.log('Loading store', templateId);
+      this.store = await getTemplateStore(this.endpoint, templateId, true);
+      forceUpdate(this.el);
+    }
+  }
   handleCancel(e) {
     console.log('Cancel', e.detail);
     this.step = 'preview';
   }
+  async handleTemplateCreated(templateId) {
+    var _a;
+    await this.loadTemplate(templateId);
+    this.templateId = templateId;
+    this.step = 'roles';
+    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit('roles');
+  }
+  async handleTemplateUpdated(e) {
+    var _a;
+    console.log('tup');
+    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+  }
   handleAttachmentsNext() {
     var _a;
     this.step = 'roles';
@@ -134,10 +109,9 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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);
   }
@@ -145,22 +119,30 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    const canPreview = userCanPreviewTemplate(this.endpoint.session, this.store.state);
-    const canEditFields = userCanBuildTemplate(this.endpoint.session, this.store.state);
-    const canEditRoles = userCanUpdateTemplate(this.endpoint.session, this.store.state);
-    return (h(Host, null, h("div", { class: "steps" }, h("button", { class: `step ${this.step === 'attachments' ? 'active' : ''}`, onClick: e => this.setStep(e, 'attachments') }, "Attachments"), h("button", { class: `step ${this.step === 'roles' ? 'active' : ''}`, onClick: e => this.setStep(e, 'roles'), disabled: !canEditRoles }, "Roles"), h("button", { class: `step ${this.step === 'settings' ? 'active' : ''}`, onClick: e => this.setStep(e, 'settings'), disabled: !canEditFields }, "Settings"), h("button", { class: `step ${this.step === 'fields' ? 'active' : ''}`, onClick: e => this.setStep(e, 'fields'), disabled: !canEditFields }, "Fields"), h("button", { class: `step ${this.step === 'preview' ? 'active' : ''}`, onClick: e => this.setStep(e, 'preview'), disabled: !canPreview }, "Preview/Send")), h("div", { class: "content" }, this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleAttachmentsNext() })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: e => this.handleCancel(e), onNext: () => this.handleRolesNext() })), 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' } }), h("verdocs-template-reminders", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }), h("verdocs-template-visibility", { templateId: this.templateId, endpoint: this.endpoint, style: { backgroundColor: '#ffffff', padding: '20px' } }))), this.step === 'fields' && h("verdocs-template-fields", { templateId: this.templateId, endpoint: this.endpoint }), 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' } })))))));
+    if (!this.store) {
+      console.log('[BUILD] No template ID, rendering created view');
+      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));
+    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 this; }
+  static get watchers() { return {
+    "templateId": ["onTemplateIdChanged"],
+    "step": ["onStepChanged"]
+  }; }
   static get style() { return verdocsBuildCss; }
 }, [0, "verdocs-build", {
     "endpoint": [16],
-    "templateId": [1, "template-id"],
-    "step": [1537]
+    "templateId": [1537, "template-id"],
+    "step": [1537],
+    "store": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-template-attachments", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon"];
+  const components = ["verdocs-build", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-preview", "verdocs-progress-bar", "verdocs-radio-button", "verdocs-select-input", "verdocs-send", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-create", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-template-name", "verdocs-template-reminders", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-template-visibility", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-build":
       if (!customElements.get(tagName)) {
@@ -169,70 +151,85 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$t();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$s();
       }
       break;
     case "verdocs-component-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$r();
       }
       break;
     case "verdocs-contact-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$q();
       }
       break;
     case "verdocs-file-chooser":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$p();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$o();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$n();
       }
       break;
     case "verdocs-ok-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$m();
       }
       break;
     case "verdocs-preview":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$l();
       }
       break;
     case "verdocs-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$k();
       }
       break;
     case "verdocs-radio-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$j();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$i();
       }
       break;
     case "verdocs-send":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$h();
+      }
+      break;
+    case "verdocs-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
       }
       break;
     case "verdocs-template-attachments":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "verdocs-template-build-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "verdocs-template-create":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }

package/dist/components/verdocs-tabs2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const verdocsTabsCss = "verdocs-tabs{width:100%;height:50px;display:-ms-flexbox;display:flex;color:#72757d;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 0 10px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#e5e5e5;font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06))}verdocs-tabs .tab{height:50px;display:-ms-flexbox;display:flex;cursor:pointer;padding:0 40px;font-size:16px;font-weight:600;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:#e4e4e7}verdocs-tabs .tab.active{color:#707ae5;background-color:#ffffff}verdocs-tabs .tab.disabled{color:#d4d4d8;cursor:default}";
+const verdocsTabsCss = "verdocs-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#666666;cursor:default}";
 
 const VerdocsTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -8,15 +8,10 @@ const VerdocsTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.selectTab = createEvent(this, "selectTab", 7);
     this.tabs = [];
-    this.defaultTab = 0;
     this.selectedTab = 0;
   }
-  componentWillLoad() {
-    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() {
@@ -25,8 +20,7 @@ const VerdocsTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return verdocsTabsCss; }
 }, [4, "verdocs-tabs", {
     "tabs": [16],
-    "defaultTab": [2, "default-tab"],
-    "selectedTab": [32]
+    "selectedTab": [2, "selected-tab"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-template-attachments2.js

@@ -19,7 +19,7 @@ const VerdocsTemplateAttachments = /*@__PURE__*/ proxyCustomElement(class extend
     this.__registerHost();
     this.exit = createEvent(this, "exit", 7);
     this.next = createEvent(this, "next", 7);
-    this.templateUpdate = createEvent(this, "templateUpdate", 7);
+    this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
@@ -63,7 +63,7 @@ const VerdocsTemplateAttachments = /*@__PURE__*/ proxyCustomElement(class extend
     }
   }
   async handleUpload(e) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     e.stopPropagation();
     const file = e.detail.file;
     if (!file) {
@@ -76,14 +76,15 @@ const VerdocsTemplateAttachments = /*@__PURE__*/ proxyCustomElement(class extend
       const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
       console.log('[ATTACHMENTS] Created attachment', template);
       this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      console.log('[ATTACHMENTS] New template', this.store.state);
+      console.log('[ATTACHMENTS] Updated template', this.store.state);
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.store.state, event: 'attachments' });
       this.uploading = false;
       this.progressLabel = '';
       this.progressPercent = 0;
     }
     catch (e) {
       console.log('[ATTACHMENTS] Error creating 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));
+      (_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.uploading = false;
     }
   }

package/dist/components/verdocs-template-build-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateBuildTabs extends Components.VerdocsTemplateBuildTabs, HTMLElement {}
+export const VerdocsTemplateBuildTabs: {
+  prototype: VerdocsTemplateBuildTabs;
+  new (): VerdocsTemplateBuildTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-template-build-tabs.js

@@ -0,0 +1,6 @@
+import { V as VerdocsTemplateBuildTabs$1, d as defineCustomElement$1 } from './verdocs-template-build-tabs2.js';
+
+const VerdocsTemplateBuildTabs = VerdocsTemplateBuildTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsTemplateBuildTabs, defineCustomElement };

package/dist/components/verdocs-template-build-tabs2.js

@@ -0,0 +1,132 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { g as getTemplateStore } from './TemplateStore.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$2 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$1 } from './verdocs-tabs2.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    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"]
+  }; }
+  static get style() { return verdocsTemplateBuildTabsCss; }
+}, [0, "verdocs-template-build-tabs", {
+    "endpoint": [16],
+    "templateId": [1537, "template-id"],
+    "step": [1537],
+    "store": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-build-tabs", "verdocs-component-error", "verdocs-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-build-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateBuildTabs);
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-tabs":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTemplateBuildTabs as V, defineCustomElement as d };