@verdocs/web-sdk 2.2.20 → 2.2.22

package/dist/collection/collection-manifest.json

@@ -9,6 +9,7 @@
     "./components/elements/verdocs-search-box/verdocs-search-box.js",
     "./components/controls/verdocs-table/verdocs-table.js",
     "./components/controls/verdocs-tabs/verdocs-tabs.js",
+    "./components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.js",
     "./components/templates/verdocs-templates-list/verdocs-templates-list.js",
     "./components/controls/verdocs-toggle/verdocs-toggle.js",
     "./components/controls/verdocs-button/verdocs-button.js",

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.css

@@ -1,33 +1,32 @@
 verdocs-tabs {
-  width: 100%;
-  height: 50px;
+  gap: 10px;
   display: flex;
-  color: #72757d;
   flex-wrap: wrap;
-  margin: 0 0 10px 0;
   flex-direction: row;
-  align-items: flex-end;
-  box-sizing: border-box;
-  background-color: #e5e5e5;
   font-family: "Inter", "Barlow", sans-serif;
-  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: flex;
+  color: #111111;
   cursor: pointer;
-  padding: 0 40px;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 5px 10px;
   align-items: center;
+  text-transform: none;
   justify-content: center;
-  background-color: #e4e4e7;
+  border-bottom: 4px solid transparent;
+}
+verdocs-tabs .tab:focus {
+  border: none;
+  outline: none;
 }
 verdocs-tabs .tab.active {
-  color: #707ae5;
-  background-color: #ffffff;
+  color: #000000;
+  font-weight: 500;
+  border-bottom: 4px solid #654dcb;
 }
 verdocs-tabs .tab.disabled {
-  color: #d4d4d8;
+  color: #666666;
   cursor: default;
 }

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.js

@@ -1,19 +1,15 @@
 import { Host, h } from '@stencil/core';
 /**
- * Display a simple row of selectable tabs.
+ * Display a simple row of selectable tabs. This is a controlled element.
+ * The parent must adjust selectedTab as selection events are fired.
  */
 export class VerdocsTabs {
   constructor() {
     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() {
@@ -52,7 +48,7 @@ export class VerdocsTabs {
         },
         "defaultValue": "[]"
       },
-      "defaultTab": {
+      "selectedTab": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -64,19 +60,14 @@ export class VerdocsTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The index of the initial tab to select."
+          "text": "The index of the tab to show selected."
         },
-        "attribute": "default-tab",
+        "attribute": "selected-tab",
         "reflect": false,
         "defaultValue": "0"
       }
     };
   }
-  static get states() {
-    return {
-      "selectedTab": {}
-    };
-  }
   static get events() {
     return [{
         "method": "selectTab",

package/dist/collection/components/controls/verdocs-tabs/verdocs-tabs.stories.js

@@ -4,22 +4,13 @@ export default {
   component: 'verdocs-tabs',
   args: {
     tabs: [
-      { id: 'id', header: 'ID' },
-      { id: 'name', header: 'Name' },
-      {
-        id: 'date',
-        header: 'Date',
-        renderHeader: () => 'Past Due Since',
-        renderCell: (_, row) => `<span style="color: red">${new Date(row.date).toLocaleDateString()}</a>`,
-      },
-    ],
-    data: [
-      { id: '123', name: 'Test 1', date: new Date() },
-      { id: '456', name: 'Test 2', date: new Date() },
+      { id: 'tab1', label: 'Tab 1' },
+      { id: 'tab2', label: 'Tab 2', disabled: true },
+      { id: 'tab3', label: 'Tab 3' },
     ],
   },
   parameters: {
     layout: 'fullscreen',
   },
 };
-export const Table = ({ columns, data }) => html `<verdocs-table .columns=${columns} .data=${data} />`;
+export const Tabs = ({ tabs }) => html `<verdocs-tabs .tabs=${tabs} />`;

package/dist/collection/components/embeds/verdocs-build/verdocs-build.css

@@ -3,45 +3,12 @@ verdocs-build {
   flex-direction: column;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
-verdocs-build .steps {
-  flex: 0;
-  gap: 10px;
-  display: flex;
-  align-items: center;
-  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: flex;
-  color: #ffffff;
-  cursor: pointer;
-  padding: 0 20px;
-  font-size: 13px;
-  font-weight: 600;
-  align-items: 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 {
   flex: 1;
+  gap: 20px;
   display: flex;
   align-items: center;
   flex-direction: column;
-  box-shadow: 0 0 7px -3px #000000cc;
 }
 verdocs-build verdocs-template-attachments,
 verdocs-build verdocs-template-roles {

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

@@ -1,6 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { h, Host } from '@stencil/core';
-import { userCanBuildTemplate, userCanPreviewTemplate, userCanUpdateTemplate } from '@verdocs/js-sdk/Templates/Permissions';
+import { h, forceUpdate, Host } from '@stencil/core';
 import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 /**
@@ -8,35 +7,62 @@ import { SDKError } from '../../../utils/errors';
  */
 export class VerdocsBuild {
   constructor() {
-    this.store = null;
     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';
@@ -47,10 +73,9 @@ export class VerdocsBuild {
     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);
   }
@@ -58,10 +83,12 @@ export class VerdocsBuild {
     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' } })))))));
   }
   static get is() { return "verdocs-build"; }
   static get originalStyleUrls() {
@@ -99,7 +126,7 @@ export class VerdocsBuild {
       },
       "templateId": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string | null",
           "resolved": "string",
@@ -112,7 +139,7 @@ export class VerdocsBuild {
           "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": false,
+        "reflect": true,
         "defaultValue": "null"
       },
       "step": {
@@ -135,10 +162,15 @@ export class VerdocsBuild {
         },
         "attribute": "step",
         "reflect": true,
-        "defaultValue": "null"
+        "defaultValue": "'preview'"
       }
     };
   }
+  static get states() {
+    return {
+      "store": {}
+    };
+  }
   static get events() {
     return [{
         "method": "sdkError",
@@ -199,6 +231,64 @@ export class VerdocsBuild {
             }
           }
         }
+      }, {
+        "method": "templateUpdated",
+        "name": "templateUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate; event: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; event: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        }
+      }, {
+        "method": "templateCreated",
+        "name": "templateCreated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the template is created by the upload step."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate; event: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; event: string; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "ITemplate": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "templateId",
+        "methodName": "onTemplateIdChanged"
+      }, {
+        "propName": "step",
+        "methodName": "onStepChanged"
       }];
   }
 }

package/dist/collection/components/embeds/verdocs-build/verdocs-build.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Embeds/Build',
   component: 'verdocs-build',
   args: {
-    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+    templateId: '',
     step: 'preview',
   },
   parameters: {

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

@@ -52,7 +52,7 @@ export class VerdocsTemplateAttachments {
     }
   }
   async handleUpload(e) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     e.stopPropagation();
     const file = e.detail.file;
     if (!file) {
@@ -65,14 +65,15 @@ export class VerdocsTemplateAttachments {
       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;
     }
   }
@@ -231,19 +232,23 @@ export class VerdocsTemplateAttachments {
           }
         }
       }, {
-        "method": "templateUpdate",
-        "name": "templateUpdate",
+        "method": "templateUpdated",
+        "name": "templateUpdated",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event fired when the user clicks the next button."
+          "text": "Event fired when the user updates the template."
         },
         "complexType": {
-          "original": "{template: ITemplate}",
-          "resolved": "{ template: ITemplate; }",
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate; event: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; event: string; }",
           "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
             "ITemplate": {
               "location": "import",
               "path": "@verdocs/js-sdk/Templates/Types"

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

@@ -0,0 +1,25 @@
+verdocs-template-build-tabs {
+  flex: 1;
+  gap: 20px;
+  display: flex;
+  align-items: center;
+  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 {
+  flex: 1;
+}