@verdocs/web-sdk 5.0.31 → 5.0.33

package/dist/components/p-7ad22da6.js

@@ -0,0 +1,212 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
+import { VerdocsEndpoint, getTemplate, updateTemplate } from '@verdocs/js-sdk';
+import { V as VerdocsToast } from './p-04c07b7b.js';
+import { S as SDKError } from './p-fd97809c.js';
+import { S as Store } from './p-d4be87ef.js';
+import { d as defineCustomElement$7 } from './p-0e332769.js';
+import { d as defineCustomElement$6 } from './p-84ae0283.js';
+import { d as defineCustomElement$5 } from './p-7f32e087.js';
+import { d as defineCustomElement$4 } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$3 } from './p-62743fd3.js';
+import { d as defineCustomElement$2 } from './p-38e1fed8.js';
+import { d as defineCustomElement$1 } from './p-325b3828.js';
+
+const verdocsTemplateSettingsCss = "@-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-settings{display:block;max-width:600px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-settings>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-settings>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-settings>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-settings>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-settings>form input:focus{outline:none}verdocs-template-settings>form .row{margin:20px 0 0 0}verdocs-template-settings .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-settings ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-moz-placeholder{color:#aaaaaa}verdocs-template-settings :-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateSettingsStyle0 = verdocsTemplateSettingsCss;
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const VerdocsTemplateSettings = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateSettings extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.next = createEvent(this, "next", 7);
+        this.exit = createEvent(this, "exit", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.templateListenerId = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.name = null;
+        this.visibility = 'private';
+        this.sender = 'envelope_creator';
+        this.sendReminders = false;
+        this.initialReminder = 0;
+        this.followupReminders = 0;
+        this.dirty = false;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[SETTINGS] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            console.log('[SETTINGS] Template Updated', template);
+            this.template = template;
+            this.name = template.name;
+            this.visibility = template.visibility;
+            this.sender = template.sender;
+            this.sendReminders = template.initial_reminder !== null;
+            this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;
+            this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;
+            this.dirty = false;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[SETTINGS] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[SETTINGS] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.listenToTemplate();
+        }
+        catch (e) {
+            console.log('[SETTINGS] 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));
+        }
+    }
+    handleCancel() {
+        var _a;
+        (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    handleSubmit() {
+        updateTemplate(this.endpoint, this.templateId, {
+            name: this.name,
+            visibility: this.visibility,
+            sender: this.sender,
+            initial_reminder: this.sendReminders ? this.initialReminder * MS_PER_DAY : null,
+            followup_reminders: this.sendReminders ? this.followupReminders * MS_PER_DAY : null,
+        })
+            .then(template => {
+            var _a, _b;
+            console.log('[SETTINGS] Template Updated', template);
+            this.dirty = false;
+            this.name = template.name;
+            this.visibility = template.visibility;
+            this.sender = template.sender;
+            this.sendReminders = template.initial_reminder !== null;
+            this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;
+            this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, event: 'update' });
+            (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit();
+        })
+            .catch(e => {
+            var _a, _b, _c, _d, _e;
+            console.log('[SETTINGS] Error updating 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));
+            VerdocsToast(((_e = (_d = e.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error) || 'Error updating template, please try again later.');
+        });
+    }
+    render() {
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if (this.loading || !this.template) {
+            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("h5", null, "Settings"), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Template Name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
+                this.name = e.target.value;
+                this.dirty = true;
+            } })), h("div", { class: "row" }, h("verdocs-select-input", { label: "Visibility", value: this.visibility, onInput: (e) => {
+                this.visibility = e.target.value;
+                this.dirty = true;
+            }, options: [
+                { value: 'private', label: 'Private' },
+                { value: 'shared', label: 'Shared' },
+                { value: 'public', label: 'Public' },
+            ] })), h("div", { class: "row" }, h("verdocs-select-input", { label: "Owner for envelopes created from this template", value: this.sender, onInput: (e) => {
+                this.sender = e.target.value;
+                this.dirty = true;
+            }, options: [
+                { value: 'envelope_creator', label: 'Envelope Creator' },
+                { value: 'template_owner', label: 'Template Owner' },
+            ] })), h("div", { class: "row" }, h("label", null, "Send Reminders"), h("verdocs-switch", { checked: this.sendReminders, onCheckedChange: e => (this.sendReminders = e.detail) })), this.sendReminders && (h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "First Reminder (days)", value: String(this.initialReminder || 0), autocomplete: "off", placeholder: "Delay in days...", onInput: (e) => {
+                this.initialReminder = +e.target.value;
+                this.dirty = true;
+            } }))), this.sendReminders && (h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Follow-up Reminders (days)", value: String(this.followupReminders || 0), autocomplete: "off", placeholder: "Delay in days...", onInput: (e) => {
+                this.followupReminders = +e.target.value;
+                this.dirty = true;
+            } }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Save", size: "small", onClick: () => this.handleSubmit(), disabled: !this.dirty })))));
+    }
+    get el() { return this; }
+    static get style() { return VerdocsTemplateSettingsStyle0; }
+}, [0, "verdocs-template-settings", {
+        "endpoint": [16],
+        "templateId": [1, "template-id"],
+        "name": [32],
+        "visibility": [32],
+        "sender": [32],
+        "sendReminders": [32],
+        "initialReminder": [32],
+        "followupReminders": [32],
+        "dirty": [32],
+        "loading": [32],
+        "template": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-template-settings", "verdocs-button", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-switch", "verdocs-text-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-template-settings":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsTemplateSettings);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { VerdocsTemplateSettings as V, defineCustomElement as d };
+
+//# sourceMappingURL=p-7ad22da6.js.map

package/dist/components/p-7ad22da6.js.map

@@ -0,0 +1 @@
+{"file":"p-7ad22da6.js","mappings":"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","names":[],"sources":["src/components/templates/verdocs-template-settings/verdocs-template-settings.scss?tag=verdocs-template-settings","src/components/templates/verdocs-template-settings/verdocs-template-settings.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-settings {\n  display: block;\n  max-width: 600px;\n  font-family: $verdocs-primary-font;\n\n  > form {\n    display: flex;\n    flex-direction: column;\n    background-color: $verdocs-grey-4;\n\n    // The extra right padding helps ensure when dragged elements move to absolute positioning\n    padding: 12px;\n\n    h5 {\n      font-size: 16px;\n      font-weight: bold;\n      color: $verdocs-grey-blue;\n      margin: 0 0 10px 0;\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .row {\n      margin: 20px 0 0 0;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n}\n","import {Component, h, Element, Event, EventEmitter, Host, Prop, State} from '@stencil/core';\nimport {getTemplate, ITemplate, TTemplateSender, TTemplateVisibility, updateTemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst MS_PER_DAY = 24 * 60 * 60 * 1000;\n\n/**\n * Display an edit form that allows the user to adjust a template's roles and workflow.\n */\n@Component({\n  tag: 'verdocs-template-settings',\n  styleUrl: 'verdocs-template-settings.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateSettings {\n  private templateListenerId = null;\n\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The template ID to edit.\n   */\n  @Prop() templateId: string = '';\n\n  /**\n   * Event fired when the user clicks to proceed.\n   */\n  @Event({composed: true}) next: EventEmitter;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  /**\n   * Event fired when the template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: string}>;\n\n  @State() name: string | null = null;\n  @State() visibility: TTemplateVisibility = 'private';\n  @State() sender: TTemplateSender = 'envelope_creator';\n  @State() sendReminders = false;\n  @State() initialReminder = 0;\n  @State() followupReminders = 0;\n  @State() dirty = false;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    console.log('[SETTINGS] Loading template', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('[SETTINGS] Template Updated', template);\n        this.template = template;\n        this.name = template.name;\n        this.visibility = template.visibility;\n        this.sender = template.sender;\n        this.sendReminders = template.initial_reminder !== null;\n        this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;\n        this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;\n        this.dirty = false;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[SETTINGS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[SETTINGS] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[SETTINGS] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleCancel() {\n    this.exit?.emit();\n  }\n\n  handleSubmit() {\n    updateTemplate(this.endpoint, this.templateId, {\n      name: this.name,\n      visibility: this.visibility,\n      sender: this.sender,\n      initial_reminder: this.sendReminders ? this.initialReminder * MS_PER_DAY : null,\n      followup_reminders: this.sendReminders ? this.followupReminders * MS_PER_DAY : null,\n    })\n      .then(template => {\n        console.log('[SETTINGS] Template Updated', template);\n        this.dirty = false;\n        this.name = template.name;\n        this.visibility = template.visibility;\n        this.sender = template.sender;\n        this.sendReminders = template.initial_reminder !== null;\n        this.initialReminder = template.initial_reminder ? Math.floor(template.initial_reminder / MS_PER_DAY) : null;\n        this.followupReminders = template.followup_reminders ? Math.floor(template.followup_reminders / MS_PER_DAY) : null;\n        this.templateUpdated?.emit({endpoint: this.endpoint, template, event: 'update'});\n        this.next?.emit();\n      })\n      .catch(e => {\n        console.log('[SETTINGS] Error updating template', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n        VerdocsToast(e.response?.data?.error || 'Error updating template, please try again later.');\n      });\n  }\n\n  render() {\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    if (this.loading || !this.template) {\n      return (\n        <Host class=\"loading\">\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n          <h5>Settings</h5>\n\n          <div class=\"row\">\n            <verdocs-text-input\n              id=\"verdocs-field-name\"\n              label=\"Template Name\"\n              value={this.name}\n              autocomplete=\"off\"\n              placeholder=\"Template Name...\"\n              onInput={(e: any) => {\n                this.name = e.target.value;\n                this.dirty = true;\n              }}\n            />\n          </div>\n\n          <div class=\"row\">\n            <verdocs-select-input\n              label=\"Visibility\"\n              value={this.visibility}\n              onInput={(e: any) => {\n                this.visibility = e.target.value;\n                this.dirty = true;\n              }}\n              options={[\n                {value: 'private', label: 'Private'},\n                {value: 'shared', label: 'Shared'},\n                {value: 'public', label: 'Public'},\n              ]}\n            />\n          </div>\n\n          <div class=\"row\">\n            <verdocs-select-input\n              label=\"Owner for envelopes created from this template\"\n              value={this.sender}\n              onInput={(e: any) => {\n                this.sender = e.target.value;\n                this.dirty = true;\n              }}\n              options={[\n                {value: 'envelope_creator', label: 'Envelope Creator'},\n                {value: 'template_owner', label: 'Template Owner'},\n              ]}\n            />\n          </div>\n\n          <div class=\"row\">\n            <label>Send Reminders</label>\n            <verdocs-switch checked={this.sendReminders} onCheckedChange={e => (this.sendReminders = e.detail)} />\n          </div>\n\n          {this.sendReminders && (\n            <div class=\"row\">\n              <verdocs-text-input\n                id=\"verdocs-field-name\"\n                label=\"First Reminder (days)\"\n                value={String(this.initialReminder || 0)}\n                autocomplete=\"off\"\n                placeholder=\"Delay in days...\"\n                onInput={(e: any) => {\n                  this.initialReminder = +e.target.value;\n                  this.dirty = true;\n                }}\n              />\n            </div>\n          )}\n\n          {this.sendReminders && (\n            <div class=\"row\">\n              <verdocs-text-input\n                id=\"verdocs-field-name\"\n                label=\"Follow-up Reminders (days)\"\n                value={String(this.followupReminders || 0)}\n                autocomplete=\"off\"\n                placeholder=\"Delay in days...\"\n                onInput={(e: any) => {\n                  this.followupReminders = +e.target.value;\n                  this.dirty = true;\n                }}\n              />\n            </div>\n          )}\n\n          <div class=\"buttons\">\n            <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={() => this.handleCancel()} />\n            <verdocs-button label=\"Save\" size=\"small\" onClick={() => this.handleSubmit()} disabled={!this.dirty} />\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-build.js

@@ -2,42 +2,44 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { VerdocsEndpoint, getTemplate } from '@verdocs/js-sdk';
 import { S as SDKError } from './p-fd97809c.js';
 import { S as Store } from './p-d4be87ef.js';
-import { d as defineCustomElement$F } from './p-0e332769.js';
-import { d as defineCustomElement$E } from './p-070bebd7.js';
-import { d as defineCustomElement$D } from './p-3201d529.js';
-import { d as defineCustomElement$C } from './p-84ae0283.js';
-import { d as defineCustomElement$B } from './p-27548ebd.js';
-import { d as defineCustomElement$A } from './p-7bd7baa6.js';
-import { d as defineCustomElement$z } from './p-c5045788.js';
-import { d as defineCustomElement$y } from './p-1d4829fb.js';
-import { d as defineCustomElement$x } from './p-8c965486.js';
-import { d as defineCustomElement$w } from './p-c422d9a0.js';
-import { d as defineCustomElement$v } from './p-143a763f.js';
-import { d as defineCustomElement$u } from './p-99128b47.js';
-import { d as defineCustomElement$t } from './p-813ed998.js';
-import { d as defineCustomElement$s } from './p-b5e479db.js';
-import { d as defineCustomElement$r } from './p-c4310332.js';
-import { d as defineCustomElement$q } from './p-22da6d14.js';
-import { d as defineCustomElement$p } from './p-7f32e087.js';
-import { d as defineCustomElement$o } from './p-9c0b30f8.js';
-import { d as defineCustomElement$n } from './p-1ae5d7e0.js';
-import { d as defineCustomElement$m } from './p-be261487.js';
-import { d as defineCustomElement$l } from './p-b7d080eb.js';
-import { d as defineCustomElement$k } from './p-6719b0d7.js';
-import { d as defineCustomElement$j } from './p-d54466ed.js';
-import { d as defineCustomElement$i } from './p-a2f6d2c6.js';
-import { d as defineCustomElement$h } from './p-62743fd3.js';
-import { d as defineCustomElement$g } from './p-87d3651e.js';
-import { d as defineCustomElement$f } from './p-cce871bf.js';
-import { d as defineCustomElement$e } from './p-9cfd8022.js';
-import { d as defineCustomElement$d } from './p-4dd750e9.js';
-import { d as defineCustomElement$c } from './p-16b073b8.js';
-import { d as defineCustomElement$b } from './p-e39c327c.js';
-import { d as defineCustomElement$a } from './p-550377ba.js';
-import { d as defineCustomElement$9 } from './p-f238b25b.js';
-import { d as defineCustomElement$8 } from './p-631808d5.js';
-import { d as defineCustomElement$7 } from './p-ac7694c0.js';
-import { d as defineCustomElement$6 } from './p-cecfbe2f.js';
+import { d as defineCustomElement$H } from './p-0e332769.js';
+import { d as defineCustomElement$G } from './p-070bebd7.js';
+import { d as defineCustomElement$F } from './p-3201d529.js';
+import { d as defineCustomElement$E } from './p-84ae0283.js';
+import { d as defineCustomElement$D } from './p-27548ebd.js';
+import { d as defineCustomElement$C } from './p-7bd7baa6.js';
+import { d as defineCustomElement$B } from './p-c5045788.js';
+import { d as defineCustomElement$A } from './p-1d4829fb.js';
+import { d as defineCustomElement$z } from './p-8c965486.js';
+import { d as defineCustomElement$y } from './p-c422d9a0.js';
+import { d as defineCustomElement$x } from './p-143a763f.js';
+import { d as defineCustomElement$w } from './p-99128b47.js';
+import { d as defineCustomElement$v } from './p-813ed998.js';
+import { d as defineCustomElement$u } from './p-b5e479db.js';
+import { d as defineCustomElement$t } from './p-c4310332.js';
+import { d as defineCustomElement$s } from './p-22da6d14.js';
+import { d as defineCustomElement$r } from './p-7f32e087.js';
+import { d as defineCustomElement$q } from './p-9c0b30f8.js';
+import { d as defineCustomElement$p } from './p-1ae5d7e0.js';
+import { d as defineCustomElement$o } from './p-be261487.js';
+import { d as defineCustomElement$n } from './p-b7d080eb.js';
+import { d as defineCustomElement$m } from './p-6719b0d7.js';
+import { d as defineCustomElement$l } from './p-d54466ed.js';
+import { d as defineCustomElement$k } from './p-a2f6d2c6.js';
+import { d as defineCustomElement$j } from './p-62743fd3.js';
+import { d as defineCustomElement$i } from './p-4c5164d0.js';
+import { d as defineCustomElement$h } from './p-cce871bf.js';
+import { d as defineCustomElement$g } from './p-9cfd8022.js';
+import { d as defineCustomElement$f } from './p-38e1fed8.js';
+import { d as defineCustomElement$e } from './p-4dd750e9.js';
+import { d as defineCustomElement$d } from './p-16b073b8.js';
+import { d as defineCustomElement$c } from './p-e39c327c.js';
+import { d as defineCustomElement$b } from './p-550377ba.js';
+import { d as defineCustomElement$a } from './p-f238b25b.js';
+import { d as defineCustomElement$9 } from './p-631808d5.js';
+import { d as defineCustomElement$8 } from './p-ac7694c0.js';
+import { d as defineCustomElement$7 } from './p-cecfbe2f.js';
+import { d as defineCustomElement$6 } from './p-7ad22da6.js';
 import { d as defineCustomElement$5 } from './p-325b3828.js';
 import { d as defineCustomElement$4 } from './p-c00770e6.js';
 import { d as defineCustomElement$3 } from './p-4d3b9ee9.js';
@@ -158,7 +160,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsBuild exten
         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("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: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(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", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, 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", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
+        return (h(Host, null, h("div", { class: "content" }, h("verdocs-template-build-tabs", { endpoint: this.endpoint, templateId: this.templateId, step: this.step, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); }, onStepChanged: e => this.handleStepChanged(e.detail) }), this.step === 'attachments' && (h("verdocs-template-attachments", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleAttachmentsNext(), onTemplateUpdated: e => this.handleTemplateUpdated(e) })), this.step === 'roles' && (h("verdocs-template-roles", { templateId: this.templateId, endpoint: this.endpoint, onExit: () => this.handleCancel(), onNext: () => this.handleRolesNext(), onRolesUpdated: e => this.handleRolesUpdated(e) })), this.step === 'settings' && h("verdocs-template-settings", { templateId: this.templateId, endpoint: this.endpoint, 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", { class: "preview-container" }, h("div", { class: "preview-send-wrapper" }, 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", { class: "preview-preview-wrapper" }, h("verdocs-preview", { templateId: this.templateId, endpoint: this.endpoint, style: { display: 'flex', flex: '1', maxWidth: '1000px' } })))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -180,7 +182,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-menu-panel", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
+    const components = ["verdocs-build", "verdocs-button", "verdocs-button-panel", "verdocs-checkbox", "verdocs-component-error", "verdocs-contact-picker", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-radio", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-field-timestamp", "verdocs-file-chooser", "verdocs-help-icon", "verdocs-initial-dialog", "verdocs-loader", "verdocs-menu-panel", "verdocs-ok-dialog", "verdocs-portal", "verdocs-preview", "verdocs-progress-bar", "verdocs-select-input", "verdocs-send", "verdocs-signature-dialog", "verdocs-spinner", "verdocs-switch", "verdocs-tabs", "verdocs-template-attachments", "verdocs-template-build-tabs", "verdocs-template-document-page", "verdocs-template-field-properties", "verdocs-template-fields", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-settings", "verdocs-text-input", "verdocs-toggle-button", "verdocs-toolbar-icon", "verdocs-upload-dialog"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-build":
             if (!customElements.get(tagName)) {
@@ -189,180 +191,190 @@ function defineCustomElement$1() {
             break;
         case "verdocs-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$F();
+                defineCustomElement$H();
             }
             break;
         case "verdocs-button-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$G();
             }
             break;
         case "verdocs-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$F();
             }
             break;
         case "verdocs-component-error":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$E();
             }
             break;
         case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$D();
             }
             break;
         case "verdocs-field-attachment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$C();
             }
             break;
         case "verdocs-field-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$B();
             }
             break;
         case "verdocs-field-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$A();
             }
             break;
         case "verdocs-field-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$z();
             }
             break;
         case "verdocs-field-initial":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$y();
             }
             break;
         case "verdocs-field-radio":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$x();
             }
             break;
         case "verdocs-field-signature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$w();
             }
             break;
         case "verdocs-field-textarea":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$v();
             }
             break;
         case "verdocs-field-textbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$u();
             }
             break;
         case "verdocs-field-timestamp":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$t();
             }
             break;
         case "verdocs-file-chooser":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$s();
             }
             break;
         case "verdocs-help-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$r();
             }
             break;
         case "verdocs-initial-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$q();
             }
             break;
         case "verdocs-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$p();
             }
             break;
         case "verdocs-menu-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$o();
             }
             break;
         case "verdocs-ok-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$n();
             }
             break;
         case "verdocs-portal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$m();
             }
             break;
         case "verdocs-preview":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$l();
             }
             break;
         case "verdocs-progress-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$k();
             }
             break;
         case "verdocs-select-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
             }
             break;
         case "verdocs-send":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
             }
             break;
         case "verdocs-signature-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "verdocs-spinner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
+            }
+            break;
+        case "verdocs-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
             }
             break;
         case "verdocs-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "verdocs-template-attachments":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "verdocs-template-build-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "verdocs-template-document-page":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "verdocs-template-field-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "verdocs-template-fields":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "verdocs-template-role-properties":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "verdocs-template-roles":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-template-settings":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }