@verdocs/web-sdk 2.3.88 → 4.0.6

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

@@ -1,842 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
-import './Types-5f31149e.js';
-import { V as VerdocsEndpoint, b as createTemplatev2, u as updateTemplate } from './VerdocsEndpoint-8196ff47.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-6e67e86b.js';
-import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './TemplateRoleStore-33229997.js';
-import { g as getTemplateStore } from './TemplateStore-940da116.js';
-import { r as renderDocumentField } from './utils-f35325fe.js';
-import { S as SDKError } from './errors-9b5498c8.js';
-import { j as createEnvelope } from './Envelopes-627c5239.js';
-import { a as isValidEmail, i as isValidPhone } from './Validators-16a2a43b.js';
-import { g as getRGBA } from './Colors-1b298092.js';
-import { c as createTemplateDocument, d as deleteTemplateDocument } from './TemplateDocuments-6fd2f4e2.js';
-import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon$1, b as PageCountIcon, T as TrashIcon } from './Icons-ddea87bf.js';
-import { V as VerdocsToast } from './Toast-f3b8fd46.js';
-import './index-4439b0d1.js';
-import './_commonjsHelpers-5ec8f9b7.js';
-import './Types-086facf7.js';
-import './index-914ed6f7.js';
-
-/**
- * Enable automatic reminders. setup_time is the number of days after the envelope is sent that the first reminder
- * should be sent. interval_time is the number of days between reminders.
- */
-var createReminder = function (endpoint, templateId, params) {
-    return endpoint.api //
-        .post("/templates/".concat(templateId, "/reminder/"), params)
-        .then(function (r) { return r.data; });
-};
-/**
- * Update the reminder configuration for a template.
- */
-var updateReminder = function (endpoint, templateId, reminderId, params) {
-    return endpoint.api //
-        .put("/templates/".concat(templateId, "/reminder/").concat(reminderId), params)
-        .then(function (r) { return r.data; });
-};
-/**
- * Delete the reminder configuration for a template.
- */
-var deleteReminder = function (endpoint, templateId, reminderId) {
-    return endpoint.api //
-        .delete("/templates/".concat(templateId, "/reminder/").concat(reminderId))
-        .then(function (r) { return r.data; });
-};
-
-const verdocsPreviewCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
-
-const VerdocsPreview = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.templateStore = null;
-    this.fieldStore = null;
-    this.roleStore = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-    this.loading = true;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[PREVIEW] Unable to start builder session, must be authenticated');
-        return;
-      }
-      getTemplateStore(this.endpoint, this.templateId, true)
-        .then(ts => {
-        this.templateStore = ts;
-        console.log('[PREVIEW] Loaded Template Store', ts.state);
-        this.fieldStore = getTemplateFieldStore(this.templateId);
-        this.roleStore = getTemplateRoleStore(this.templateId);
-        console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
-        this.loading = false;
-      })
-        .catch(e => {
-        console.log(e);
-      });
-    }
-    catch (e) {
-      console.log('[PREVIEW] 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));
-    }
-  }
-  handlePageRendered(e) {
-    var _a, _b;
-    const pageInfo = e.detail;
-    const fields = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
-    console.log('[PREVIEW] Page rendered', pageInfo, fields);
-    fields.forEach(field => renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false }));
-  }
-  render() {
-    var _a, _b;
-    if (this.loading) {
-      return (h(Host, null, h("verdocs-loader", null)));
-    }
-    const pages = [...(_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.pages];
-    pages.sort((a, b) => a.sequence - b.sequence);
-    return (h(Host, null, pages.map(page => {
-      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, disabled: true, editable: true, done: false, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
-          { name: 'page', type: 'canvas' },
-          { name: 'controls', type: 'div' },
-        ] }));
-    })));
-  }
-};
-VerdocsPreview.style = verdocsPreviewCss;
-
-const verdocsSendCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:none}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
-
-const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
-const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
-const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
-const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
-const VerdocsSend = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sendingEnvelope = createEvent(this, "sendingEnvelope", 7);
-    this.send = createEvent(this, "send", 7);
-    this.exit = createEvent(this, "exit", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.searchContacts = createEvent(this, "searchContacts", 7);
-    this.levels = [];
-    this.templateStore = null;
-    this.roleStore = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-    this.environment = 'web';
-    this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
-    this.rolesAtLevel = {};
-    this.showPickerForId = '';
-    this.sessionContacts = [];
-    this.sending = false;
-    this.rolesCompleted = {};
-  }
-  async reset() {
-    this.rolesCompleted = {};
-  }
-  async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f;
-    try {
-      const loadSessionResult = this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[SEND] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[SEND] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.roleStore = getTemplateRoleStore(this.templateId);
-      if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
-        console.warn(`[SEND] Template is not sendable`, this.templateId);
-      }
-      if (this.roleStore.get('roles')) {
-        const rolesAtLevel = {};
-        this.rolesCompleted = {};
-        this.roleStore.get('roles').forEach(role => {
-          const level = role.sequence - 1;
-          rolesAtLevel[level] || (rolesAtLevel[level] = []);
-          const id = `r-${level}-${rolesAtLevel[level].length}`;
-          rolesAtLevel[level].push({ ...role, id });
-          if (role.full_name && (role.email || role.phone)) {
-            this.rolesCompleted[id] = { ...role, id };
-          }
-        });
-        this.rolesAtLevel = rolesAtLevel;
-        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-        this.levels.sort((a, b) => a - b);
-      }
-      if ((_c = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _c === void 0 ? void 0 : _c.profile) {
-        this.sessionContacts.push({
-          id: loadSessionResult.session.profile.id,
-          name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
-          email: loadSessionResult.session.profile.email,
-          phone: loadSessionResult.session.profile.phone,
-        });
-      }
-    }
-    catch (e) {
-      console.log('[SEND] Error with preview session', e);
-      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
-    }
-  }
-  getLevelIcon(level) {
-    if (level < 0) {
-      return h("div", { class: "level-icon", innerHTML: startIcon });
-    }
-    else if (level >= this.levels.length) {
-      return h("div", { class: "level-icon", innerHTML: doneIcon });
-    }
-    else {
-      return h("div", { class: "level-icon", innerHTML: stepIcon });
-    }
-  }
-  handleSelectContact(e, role) {
-    e.preventDefault();
-    this.rolesCompleted[role.id] = { ...role, ...e.detail };
-    this.showPickerForId = '';
-  }
-  handleClickRole(e, role) {
-    e.stopPropagation();
-    this.showPickerForId = role.id;
-  }
-  handleSend(e) {
-    var _a, _b, _c;
-    if (this.sending) {
-      console.log('Skipping duplicate send', e);
-      return;
-    }
-    console.log('Sending', e);
-    e.preventDefault();
-    e.stopPropagation();
-    this.sending = true;
-    (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
-    const details = {
-      template_id: this.templateId,
-      name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
-      environment: this.environment,
-      roles: Object.values(this.rolesCompleted),
-      // TODO
-      prepared_fields: [],
-    };
-    console.log('[SEND] Creating envelope', details);
-    createEnvelope(this.endpoint, details)
-      .then(r => {
-      var _a, _b;
-      console.log('[SEND] Send envelope', r);
-      this.reset().catch((e) => console.log('Unknown Error', e));
-      this.sending = false;
-      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-      (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
-    })
-      .catch(e => {
-      var _a;
-      console.log('Send error', e);
-      // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
-      this.sending = false;
-      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
-    });
-  }
-  handleCancel(e) {
-    var _a;
-    e.stopPropagation();
-    (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
-  }
-  render() {
-    var _a, _b;
-    const roleNames = getRoleNames(this.roleStore);
-    const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
-    const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (h(Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
-      var _a, _b, _c, _d, _e, _f;
-      const unknown = !role.email;
-      const elId = `verdocs-send-recipient-${role.name}`;
-      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
-    })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
-  }
-};
-VerdocsSend.style = verdocsSendCss;
-
-const verdocsTemplateAttachmentsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
-
-const VerdocsTemplateAttachments = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.exit = createEvent(this, "exit", 7);
-    this.next = createEvent(this, "next", 7);
-    this.templateUpdated = createEvent(this, "templateUpdated", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.uploading = false;
-    this.progressLabel = 'Uploading...';
-    this.progressPercent = 0;
-    this.showDeleteError = false;
-    this.confirmDeleteDocument = null;
-    this.store = null;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[ROLES] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-    }
-    catch (e) {
-      console.log('[TEMPLATE ATTACHMENTS] 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));
-    }
-  }
-  handleCancel(e) {
-    e.stopPropagation();
-    this.exit.emit();
-  }
-  handleUploadProgress(percent) {
-    if (percent >= 99) {
-      this.progressPercent = 100;
-      this.progressLabel = 'Processing...';
-    }
-    else {
-      this.progressPercent = percent;
-    }
-  }
-  async handleUpload(e) {
-    var _a, _b, _c, _d;
-    e.stopPropagation();
-    const file = e.detail.file;
-    if (!file) {
-      return;
-    }
-    console.log('[ATTACHMENTS] Uploading...', file);
-    this.uploading = true;
-    this.progressLabel = 'Uploading...';
-    try {
-      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, false);
-      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);
-      (_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;
-    }
-  }
-  handleNext(e) {
-    var _a;
-    e.stopPropagation();
-    this.uploading = false;
-    this.progressLabel = '';
-    this.progressPercent = 0;
-    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
-  }
-  async confirmDelete() {
-    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
-    this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-    console.log('[ATTACHMENTS] New template', this.store.state);
-    this.confirmDeleteDocument = null;
-  }
-  async handleDelete(document) {
-    var _a;
-    if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.template_documents.length) > 1) {
-      this.confirmDeleteDocument = document;
-    }
-    else {
-      this.showDeleteError = true;
-    }
-  }
-  getFileIcon(document) {
-    switch (document.mime) {
-      case 'application/pdf':
-        return PdfIcon;
-      case 'image/jpeg':
-        return JpgIcon;
-      case 'image/png':
-        return PngIcon;
-      case 'application/msword':
-      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-        return DocIcon;
-    }
-    return FileIcon$1;
-  }
-  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." })));
-    }
-    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
-    if (!templateState.isLoaded) {
-      return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
-    }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !templateState.profile_id) {
-      return h(Host, { class: "empty" });
-    }
-    return (h(Host, null, h("h5", null, "Existing Attachments"), h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.template_documents.map(document => (h("div", { class: "attachment" }, h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), h("div", { class: "filename", title: document.name }, document.name), h("div", { class: "pages" }, h("div", { class: "count" }, document.page_numbers), h("div", { class: "pages-icon", innerHTML: PageCountIcon })), h("div", { class: "trash-icon", innerHTML: TrashIcon, onClick: () => this.handleDelete(document) }))))), h("h5", null, "Attach a New Document"), this.uploading ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.template_documents.length) || this.uploading })), this.showDeleteError && (h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
-        this.confirmDeleteDocument = null;
-      } }))));
-  }
-};
-VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
-
-const verdocsTemplateBuildTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}";
-
-const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
-const VerdocsTemplateBuildTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.stepChanged = createEvent(this, "stepChanged", 7);
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = null;
-    this.step = 'preview';
-    this.store = null;
-  }
-  onStepChanged() {
-    console.log('Step changed', this.step, this.templateId);
-    this.loadTemplate().catch((e) => console.log('Unknown Error', e));
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.endpoint.session) {
-        console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');
-        return;
-      }
-      if (!this.templateId) {
-        this.step = 'preview';
-        return;
-      }
-      this.loadTemplate().catch(e => console.log('[BUILD_TABS] Unable to load template', e));
-    }
-    catch (e) {
-      console.log('[BUILD_TABS] Error loading template', e);
-      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
-    }
-  }
-  async loadTemplate() {
-    if (this.templateId) {
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-    }
-  }
-  setStep(e) {
-    var _a;
-    console.log('Selected step', e.detail.tab.id);
-    e.stopPropagation();
-    e.preventDefault();
-    this.step = e.detail.tab.id;
-    (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail.tab.id);
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    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;
-    console.log('[BUILD_TABS] Rendering tabs', this.templateId, this.step);
-    if (this.templateId && this.store && this.store.state) {
-      canEditRoles = ((_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.template_documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
-      canEditFields = canEditRoles && ((_f = (_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
-      canPreview = canEditFields && ((_j = (_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.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 });
-    return (h(Host, null, h("verdocs-tabs", { onSelectTab: e => this.setStep(e), selectedTab: selectedStepIndex, tabs: [
-        { id: 'attachments', disabled: false, label: this.templateId && this.store ? 'Attachment(s)' : 'Upload Attachment(s)' },
-        { id: 'roles', disabled: !canEditRoles, label: 'Roles' },
-        { id: 'settings', disabled: !canEditFields, label: 'Settings' },
-        { id: 'fields', disabled: !canEditFields, label: 'Fields' },
-        { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
-      ] })));
-  }
-  static get watchers() { return {
-    "step": ["onStepChanged"]
-  }; }
-};
-VerdocsTemplateBuildTabs.style = verdocsTemplateBuildTabsCss;
-
-const verdocsTemplateCreateCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
-
-const unicodeNBSP = ' ';
-const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
-const VerdocsTemplateCreate = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.exit = createEvent(this, "exit", 7);
-    this.next = createEvent(this, "next", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.templateCreated = createEvent(this, "templateCreated", 7);
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.file = undefined;
-    this.creating = false;
-    this.progressLabel = 'Uploading...';
-    this.progressPercent = 0;
-  }
-  componentWillLoad() {
-    this.endpoint.setTimeout(30000);
-    this.endpoint.loadSession();
-  }
-  handleFileChanged(e) {
-    var _a;
-    this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
-    console.log('[CREATE] Selected file', this.file);
-    // this.filePath = e.target.files?.[0]?.name;
-  }
-  handleUpload(e) {
-    e.stopPropagation();
-    const fileElem = document.getElementById('verdocs-template-create-file');
-    fileElem.click();
-  }
-  handleCancel(e) {
-    e.stopPropagation();
-    this.exit.emit();
-  }
-  async handleSubmit(e) {
-    var _a, _b, _c;
-    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.
-    if (!this.file) {
-      return;
-    }
-    this.creating = true;
-    this.progressLabel = 'Uploading...';
-    try {
-      const template = await createTemplatev2(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
-        if (percent >= 99) {
-          this.progressLabel = 'Processing...';
-          this.progressPercent = 100;
-        }
-        else {
-          this.progressPercent = percent;
-        }
-      });
-      console.log('[CREATE] Created template', template);
-      getTemplateStore(this.endpoint, template.id, true)
-        .then(() => {
-        var _a, _b;
-        (_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(e);
-      });
-    }
-    catch (e) {
-      console.log('[CREATE] 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));
-      this.creating = false;
-    }
-  }
-  render() {
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-    }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box", onDrop: (e) => {
-        e.preventDefault();
-        e.target.classList.remove('drag-over');
-        this.file = e.dataTransfer.files[0];
-      }, onDragOver: (e) => {
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'copy';
-      }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
-        marginTop: '20px',
-        marginBottom: '20px',
-        fontSize: '16px',
-        height: '20px',
-      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating })))));
-  }
-};
-VerdocsTemplateCreate.style = verdocsTemplateCreateCss;
-
-const verdocsTemplateNameCss = "";
-
-const VerdocsTemplateName = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.templateUpdated = createEvent(this, "templateUpdated", 7);
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.name = '';
-    this.dirty = false;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c, _d, _e;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[ROLES] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
-      this.dirty = false;
-    }
-    catch (e) {
-      console.log('[TEMPLATE NAME] Error loading template', e);
-      (_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));
-    }
-  }
-  handleCancel(e) {
-    var _a, _b, _c;
-    e.stopPropagation();
-    this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
-    this.dirty = false;
-    console.log('Closing');
-    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
-  }
-  async handleSave(e) {
-    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;
-    (_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;
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-    }
-    if ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoading) {
-      return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
-    }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), h("verdocs-text-input", { id: "verdocs-template-name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
-        var _a, _b;
-        this.name = e.target.value;
-        this.dirty = this.name !== ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name);
-      } }), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
-  }
-};
-VerdocsTemplateName.style = verdocsTemplateNameCss;
-
-const verdocsTemplateRemindersCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-reminders{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-reminders.loading{min-height:300px;position:relative;display:block}verdocs-template-reminders.empty{display:none}verdocs-template-reminders form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-reminders form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 20px 0}verdocs-template-reminders form label{font-size:16px;font-weight:500;margin:0 0 6px 0;color:#33364b}verdocs-template-reminders form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-reminders form input:focus{outline:none}verdocs-template-reminders form .input-row{display:-ms-flexbox;display:flex;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-reminders form .input-row label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-reminders form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px}verdocs-template-reminders form .input-row verdocs-text-input input{text-align:center}verdocs-template-reminders form .input-row verdocs-checkbox{display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px;-ms-flex-pack:center;justify-content:center}verdocs-template-reminders .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-reminders ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-reminders ::-moz-placeholder{color:#aaaaaa}verdocs-template-reminders :-ms-input-placeholder{color:#aaaaaa}verdocs-template-reminders ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-reminders ::placeholder{color:#aaaaaa}";
-
-const VerdocsTemplateReminders = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.templateUpdated = createEvent(this, "templateUpdated", 7);
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.showPlanBlocker = false;
-    this.sendReminders = false;
-    this.firstReminderDays = '1';
-    this.reminderDays = '1';
-    this.dirty = false;
-  }
-  // POST https://api.verdocs.com/templates/8337af06-3b5a-4e1b-98be-67d82bc7ecd1/reminder
-  // interval_time: 1,
-  // setup_time:1,
-  async componentWillLoad() {
-    var _a, _b, _c, _d, _e;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[ROLES] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.sendReminders = !!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id);
-      this.dirty = false;
-    }
-    catch (e) {
-      console.log('[TEMPLATE REMINDERS] Error loading template', e);
-      (_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));
-    }
-  }
-  handleCancel(e) {
-    var _a, _b, _c;
-    e.stopPropagation();
-    this.sendReminders = !!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id);
-    this.dirty = false;
-    (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
-  }
-  async handleSave(e) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    e.stopPropagation();
-    try {
-      if (this.sendReminders) {
-        const params = {
-          setup_time: +this.firstReminderDays,
-          interval_time: +this.reminderDays,
-        };
-        if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
-          await createReminder(this.endpoint, this.templateId, params);
-          this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-        }
-        else {
-          await updateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
-          this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-        }
-      }
-      else {
-        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, false);
-      }
-      (_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);
-      (_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;
-    (_j = this.close) === null || _j === void 0 ? void 0 : _j.emit();
-  }
-  render() {
-    var _a, _b;
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-    }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
-      return h(Host, { class: "empty" });
-    }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Reminders"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-send-reminders" }, "Send Automatic Reminders"), h("verdocs-checkbox", { id: "verdocs-send-reminders", name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => {
-        // this.showPlanBlocker = true;
-        // e.target.checked = false;
-        this.sendReminders = e.target.checked;
-        this.dirty = true;
-      } })), h("p", null, h("strong", null, "NOTE:"), " Reminders will only be sent for up to 14 days."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-first-reminder-days" }, "Days Before First Reminder"), h("verdocs-text-input", { id: "verdocs-first-reminder-days", type: "number", value: this.firstReminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-        this.dirty = true;
-      }, disabled: !this.sendReminders })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-days-between-reminders" }, "Days Between Reminders"), h("verdocs-text-input", { id: "verdocs-days-between-reminders", type: "number", value: this.reminderDays, onInput: (e) => {
-        this.reminderDays = e.target.value;
-        this.dirty = true;
-      }, disabled: !this.sendReminders })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) }))), this.showPlanBlocker && (h("verdocs-ok-dialog", { heading: "Upgrade to access this feature", message: "Please upgrade your plan to access this feature.", onNext: () => (this.showPlanBlocker = false) }))));
-  }
-};
-VerdocsTemplateReminders.style = verdocsTemplateRemindersCss;
-
-const verdocsTemplateVisibilityCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-visibility{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-visibility.loading{min-height:300px;position:relative;display:block}verdocs-template-visibility.empty{display:none}verdocs-template-visibility form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-visibility form .description{font-size:14px;text-align:justify;color:#5c6575}verdocs-template-visibility form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0}verdocs-template-visibility form label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;margin:0 0 4px 0;color:#33364b}verdocs-template-visibility form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-visibility form input:focus{outline:none}verdocs-template-visibility form .input-row{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px}verdocs-template-visibility form .input-row verdocs-text-input input{text-align:center}verdocs-template-visibility form .input-row verdocs-checkbox{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}verdocs-template-visibility form .input-row verdocs-checkbox label>input[type=checkbox]+*::before{margin-right:0}verdocs-template-visibility .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:25px;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-moz-placeholder{color:#aaaaaa}verdocs-template-visibility :-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::placeholder{color:#aaaaaa}";
-
-const VerdocsTemplateVisibility = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.templateUpdated = createEvent(this, "templateUpdated", 7);
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-    this.dirty = false;
-    this.personal = false;
-    this.public = false;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[VISIBILITY] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[VISIBILITY] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.personal = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_personal) || true;
-      this.public = ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_public) || false;
-      this.dirty = false;
-    }
-    catch (e) {
-      console.log('[TEMPLATE VISIBILITY] Error loading template', e);
-      (_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));
-    }
-  }
-  handleCancel(e) {
-    var _a, _b, _c, _d, _e;
-    e.stopPropagation();
-    this.personal = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_personal;
-    this.public = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_public;
-    this.dirty = false;
-    (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
-  }
-  async handleSave(e) {
-    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) {
-      this.store.state.is_personal = this.personal;
-      this.store.state.is_public = this.public;
-    }
-    this.dirty = false;
-    (_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;
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-    }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
-      return h(Host, { class: "empty" });
-    }
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Visibility"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-shared" }, "Shared"), h("verdocs-checkbox", { id: "verdocs-is-shared", name: "is-shared", checked: !this.personal, value: "on", onInput: (e) => {
-        this.personal = !e.target.checked;
-        this.dirty = true;
-      } })), h("div", { class: "description" }, "Shared templates are visible to other members of your Organization (if any)."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-public" }, "Public"), h("verdocs-checkbox", { id: "verdocs-is-public", name: "is-public", checked: this.public, value: "on", onInput: (e) => {
-        this.public = e.target.checked;
-        this.dirty = true;
-      } })), h("div", { class: "description" }, "Public templates may appear in results when any other user searches for templates. Note that a template may be both Personal and Public, which may be useful if you want your template to be found via search but not otherwise displayed to other members of your Organization (if any)."), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
-  }
-};
-VerdocsTemplateVisibility.style = verdocsTemplateVisibilityCss;
-
-export { VerdocsPreview as verdocs_preview, VerdocsSend as verdocs_send, VerdocsTemplateAttachments as verdocs_template_attachments, VerdocsTemplateBuildTabs as verdocs_template_build_tabs, VerdocsTemplateCreate as verdocs_template_create, VerdocsTemplateName as verdocs_template_name, VerdocsTemplateReminders as verdocs_template_reminders, VerdocsTemplateVisibility as verdocs_template_visibility };