@verdocs/web-sdk 2.2.20 → 2.2.22

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-create/verdocs-template-create.js

@@ -36,7 +36,7 @@ export class VerdocsTemplateCreate {
     this.exit.emit();
   }
   async handleSubmit(e) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     e.stopPropagation();
     console.log('Submitting');
     // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
@@ -56,14 +56,15 @@ export class VerdocsTemplateCreate {
         }
       });
       console.log('[CREATE] Created template', template);
-      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(template);
+      (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, templateId: template.id });
+      (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit(template);
       this.creating = false;
       this.progressLabel = '';
       this.progressPercent = 0;
     }
     catch (e) {
       console.log('[CREATE] Error creating template', e);
-      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
       this.creating = false;
     }
   }
@@ -185,6 +186,30 @@ export class VerdocsTemplateCreate {
             }
           }
         }
+      }, {
+        "method": "templateCreated",
+        "name": "templateCreated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user updates the template."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; template: ITemplate; templateId: string}",
+          "resolved": "{ endpoint: VerdocsEndpoint; template: ITemplate; templateId: 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-name/verdocs-template-name.js

@@ -44,15 +44,15 @@ export class VerdocsTemplateName {
     (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
-    var _a, _b;
+    var _a, _b, _c;
     e.stopPropagation();
     await updateTemplate(this.endpoint, this.templateId, { name: this.name });
     if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
       this.store.state.name = this.name;
     }
     this.dirty = false;
-    console.log('Closing');
-    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.store.state, event: 'name' });
+    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   render() {
     var _a, _b;
@@ -164,6 +164,30 @@ export class VerdocsTemplateName {
             }
           }
         }
+      }, {
+        "method": "templateUpdated",
+        "name": "templateUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user updates the template."
+        },
+        "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"
+            }
+          }
+        }
       }];
   }
 }

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

@@ -50,7 +50,7 @@ export class VerdocsTemplateReminders {
     (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   async handleSave(e) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     e.stopPropagation();
     try {
       if (this.sendReminders) {
@@ -71,14 +71,15 @@ export class VerdocsTemplateReminders {
         await deleteReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
         this.store = await getTemplateStore(this.endpoint, this.templateId, true);
       }
+      (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: this.store.state, event: 'attachments' });
     }
     catch (e) {
       console.log('[TEMPLATE REMINDERS] Unable to update reminders', e);
       VerdocsToast(e.message);
-      (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+      (_f = this.sdkError) === null || _f === void 0 ? void 0 : _f.emit(new SDKError(e.message, (_g = e.response) === null || _g === void 0 ? void 0 : _g.status, (_h = e.response) === null || _h === void 0 ? void 0 : _h.data));
     }
     this.dirty = false;
-    (_h = this.close) === null || _h === void 0 ? void 0 : _h.emit();
+    (_j = this.close) === null || _j === void 0 ? void 0 : _j.emit();
   }
   render() {
     var _a, _b;
@@ -201,6 +202,30 @@ export class VerdocsTemplateReminders {
             }
           }
         }
+      }, {
+        "method": "templateUpdated",
+        "name": "templateUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user updates the template."
+        },
+        "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"
+            }
+          }
+        }
       }];
   }
 }

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/collection/components/templates/verdocs-template-visibillity/verdocs-template-visibility.js

@@ -46,7 +46,7 @@ export class VerdocsTemplateVisibility {
     (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
   }
   async handleSave(e) {
-    var _a, _b;
+    var _a, _b, _c;
     e.stopPropagation();
     await updateTemplate(this.endpoint, this.templateId, { is_personal: this.personal, is_public: this.public });
     if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
@@ -54,7 +54,8 @@ export class VerdocsTemplateVisibility {
       this.store.state.is_public = this.public;
     }
     this.dirty = false;
-    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.store.state, event: 'visibility' });
+    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
   }
   render() {
     var _a, _b;
@@ -170,6 +171,30 @@ export class VerdocsTemplateVisibility {
             }
           }
         }
+      }, {
+        "method": "templateUpdated",
+        "name": "templateUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user updates the template."
+        },
+        "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"
+            }
+          }
+        }
       }];
   }
 }

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';