@verdocs/web-sdk 2.2.21 → 2.2.23

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

@@ -0,0 +1,219 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { getTemplateStore } from '../../../utils/TemplateStore';
+import { SDKError } from '../../../utils/errors';
+const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
+/**
+ * Display a set of tabs for the template builder.
+ */
+export class VerdocsTemplateBuildTabs {
+  constructor() {
+    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 is() { return "verdocs-template-build-tabs"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-template-build-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-template-build-tabs.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 use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "templateId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | null",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\nIf the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\nIf it is not specified, `step` will be ignored and the create step will be shown."
+        },
+        "attribute": "template-id",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "step": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "TVerdocsBuildStep",
+          "resolved": "\"attachments\" | \"fields\" | \"preview\" | \"roles\" | \"settings\"",
+          "references": {
+            "TVerdocsBuildStep": {
+              "location": "local"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The step in the creation process to display."
+        },
+        "attribute": "step",
+        "reflect": true,
+        "defaultValue": "'preview'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "store": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }, {
+        "method": "stepChanged",
+        "name": "stepChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user selects a different step."
+        },
+        "complexType": {
+          "original": "TVerdocsBuildStep",
+          "resolved": "\"attachments\" | \"fields\" | \"preview\" | \"roles\" | \"settings\"",
+          "references": {
+            "TVerdocsBuildStep": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "step",
+        "methodName": "onStepChanged"
+      }];
+  }
+}

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

@@ -0,0 +1,16 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Templates/Build Tabs',
+  component: 'verdocs-template-build-tabs',
+  args: {
+    templateId: '',
+    step: 'preview',
+  },
+  argTypes: {
+    onStepChanged: { action: 'stepChanged' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const BuildTabs = ({ templateId, step, onStepChanged }) => html `<verdocs-template-build-tabs .step=${step} .templateId=${templateId} @stepChanged=${onStepChanged} />`;

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

@@ -47,15 +47,18 @@ export class VerdocsTemplateRoles {
         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({
@@ -120,6 +123,7 @@ export class VerdocsTemplateRoles {
             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));
         }
@@ -214,6 +218,7 @@ export class VerdocsTemplateRoles {
       // 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);
@@ -260,6 +265,7 @@ export class VerdocsTemplateRoles {
         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) })));
   }
   static get is() { return "verdocs-template-roles"; }

package/dist/components/VerdocsEndpoint.js

@@ -4002,4 +4002,4 @@ var VerdocsEndpoint = /** @class */ (function () {
     return VerdocsEndpoint;
 }());
 
-export { Permissions as P, TemplateActions as T, VerdocsEndpoint as V, TemplateSenderTypes as a };
+export { TemplateActions as T, VerdocsEndpoint as V, TemplateSenderTypes as a };

package/dist/components/index.d.ts

@@ -58,6 +58,7 @@ export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/compo
 export { VerdocsTable as VerdocsTable } from '../types/components/controls/verdocs-table/verdocs-table';
 export { VerdocsTabs as VerdocsTabs } from '../types/components/controls/verdocs-tabs/verdocs-tabs';
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
+export { VerdocsTemplateBuildTabs as VerdocsTemplateBuildTabs } from '../types/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/templates/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
 export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../types/components/templates/verdocs-template-document-page/verdocs-template-document-page';

package/dist/components/index.js

@@ -58,6 +58,7 @@ export { VerdocsStatusIndicator, defineCustomElement as defineCustomElementVerdo
 export { VerdocsTable, defineCustomElement as defineCustomElementVerdocsTable } from './verdocs-table.js';
 export { VerdocsTabs, defineCustomElement as defineCustomElementVerdocsTabs } from './verdocs-tabs.js';
 export { VerdocsTemplateAttachments, defineCustomElement as defineCustomElementVerdocsTemplateAttachments } from './verdocs-template-attachments.js';
+export { VerdocsTemplateBuildTabs, defineCustomElement as defineCustomElementVerdocsTemplateBuildTabs } from './verdocs-template-build-tabs.js';
 export { VerdocsTemplateCard, defineCustomElement as defineCustomElementVerdocsTemplateCard } from './verdocs-template-card.js';
 export { VerdocsTemplateCreate, defineCustomElement as defineCustomElementVerdocsTemplateCreate } from './verdocs-template-create.js';
 export { VerdocsTemplateDocumentPage, defineCustomElement as defineCustomElementVerdocsTemplateDocumentPage } from './verdocs-template-document-page.js';

package/dist/components/verdocs-build.js

@@ -1,23 +1,24 @@
-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$s } from './verdocs-button2.js';
-import { d as defineCustomElement$r } from './verdocs-checkbox2.js';
-import { d as defineCustomElement$q } from './verdocs-component-error2.js';
-import { d as defineCustomElement$p } from './verdocs-contact-picker2.js';
-import { d as defineCustomElement$o } from './verdocs-file-chooser2.js';
-import { d as defineCustomElement$n } from './verdocs-help-icon2.js';
-import { d as defineCustomElement$m } from './verdocs-loader2.js';
-import { d as defineCustomElement$l } from './verdocs-ok-dialog2.js';
-import { d as defineCustomElement$k } from './verdocs-preview2.js';
-import { d as defineCustomElement$j } from './verdocs-progress-bar2.js';
-import { d as defineCustomElement$i } from './verdocs-radio-button2.js';
-import { d as defineCustomElement$h } from './verdocs-select-input2.js';
-import { d as defineCustomElement$g } from './verdocs-send2.js';
-import { d as defineCustomElement$f } from './verdocs-tabs2.js';
-import { d as defineCustomElement$e } 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';
@@ -31,46 +32,6 @@ 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 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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -86,11 +47,14 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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;
@@ -105,16 +69,18 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         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) {
@@ -123,8 +89,8 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   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');
   }
@@ -132,7 +98,6 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     var _a;
     console.log('tup');
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
-    this.tabsUpdateKey++;
   }
   handleAttachmentsNext() {
     var _a;
@@ -144,58 +109,40 @@ 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);
   }
   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 this; }
   static get watchers() { return {
-    "templateId": ["onTemplateIdChanged"]
+    "templateId": ["onTemplateIdChanged"],
+    "step": ["onStepChanged"]
   }; }
   static get style() { return verdocsBuildCss; }
 }, [0, "verdocs-build", {
     "endpoint": [16],
     "templateId": [1537, "template-id"],
     "step": [1537],
-    "store": [32],
-    "tabsUpdateKey": [32]
+    "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-tabs", "verdocs-template-attachments", "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"];
+  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)) {
@@ -204,75 +151,80 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "verdocs-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "verdocs-component-error":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "verdocs-contact-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "verdocs-file-chooser":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "verdocs-help-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "verdocs-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "verdocs-ok-dialog":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "verdocs-preview":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "verdocs-progress-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "verdocs-radio-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "verdocs-select-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "verdocs-send":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "verdocs-tabs":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        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();
       }

package/dist/components/verdocs-dropdown2.js

@@ -44,6 +44,7 @@ const VerdocsDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       const bodyWidth = document.body.scrollWidth;
       const buttonRect = (_a = this.dropdownButton) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
       const triggerHeight = ((_b = this.dropdownButton) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 28;
+      console.log('Repositioning dropdown', { bodyWidth, buttonRect, triggerHeight }, menu);
       menu.style.top = `${((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.top) || 0) + triggerHeight}px`;
       menu.style.right = `${Math.max(0, bodyWidth - ((buttonRect === null || buttonRect === void 0 ? void 0 : buttonRect.right) || 0))}px`;
     }