@verdocs/web-sdk 6.8.6 → 6.8.7

package/dist/components/verdocs-button-panel.js

@@ -1,4 +1,101 @@
-import { V as VerdocsButtonPanel$1, d as defineCustomElement$1 } from './p-rboJNAPD.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-CUAGH_8P.js';
+import { c as createPopper } from './p-BfP9ezJQ.js';
+
+const verdocsButtonPanelCss = "verdocs-button-panel{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
+
+const VerdocsButtonPanel$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsButtonPanel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * SVG icon to display
+         */
+        this.icon = '';
+        // Not marked as @State because it's not the thing that controls our rendering
+        this.showing = false;
+    }
+    componentDidRender() {
+        document.body.appendChild(this.panelEl);
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+        }
+        this.popperInstance = createPopper(this.iconEl, this.panelEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+        if (this.panelEl) {
+            this.panelEl.remove();
+        }
+    }
+    async showPanel() {
+        var _a, _b;
+        (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+        this.showing = true;
+        this.hiderEl = document.createElement('div');
+        this.hiderEl.id = 'verdocs-button-panel-hider';
+        this.hiderEl.style.zIndex = '100';
+        this.hiderEl.style.position = 'absolute';
+        this.hiderEl.style.top = '0px';
+        this.hiderEl.style.left = '0px';
+        this.hiderEl.style.right = '0px';
+        this.hiderEl.style.bottom = '0px';
+        this.hiderEl.onclick = (e) => {
+            e.stopPropagation();
+            this.toggle();
+        };
+        document.body.appendChild(this.hiderEl);
+    }
+    async hidePanel() {
+        var _a;
+        Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
+            el.removeAttribute('data-show');
+        });
+        (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
+        this.showing = false;
+    }
+    async toggle() {
+        if (this.showing) {
+            await this.hidePanel();
+        }
+        else {
+            await this.showPanel();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a72a2e112a525fa9bde58d0c4a10f2b807b024b6' }, h("div", { key: '0bd3a5d35339a4c5d2023b8f237a0a84565d9e2a', class: "icon", innerHTML: this.icon, onClick: (e) => {
+                e.stopPropagation();
+                return this.toggle();
+            }, ref: el => (this.iconEl = el) }), h("div", { key: 'd5b96ef39face8c26f02750cdd82782a5307d39d', role: "tooltip", class: "verdocs-button-panel-content", "data-popper-placement": "bottom", ref: el => (this.panelEl = el) }, h("div", { key: '76954b398a6f8294bd042aceff4cba6fdc912d1f', "data-popper-arrow": "true", class: "arrow" }), h("slot", { key: 'dc4b6331c986e6779c2343d89c1ae3b2fb44c968' }))));
+    }
+    static get style() { return verdocsButtonPanelCss; }
+}, [260, "verdocs-button-panel", {
+        "icon": [1],
+        "showPanel": [64],
+        "hidePanel": [64],
+        "toggle": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-button-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-button-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsButtonPanel$1);
+            }
+            break;
+    } });
+}
 
 const VerdocsButtonPanel = VerdocsButtonPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-button-panel.js.map

@@ -1 +1 @@
-{"file":"verdocs-button-panel.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"verdocs-button-panel.js","mappings":"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","names":["VerdocsButtonPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.6;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 320px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 16px 0;\n    color: $verdocs-grey-0;\n    border-bottom: 1px solid #cccccc;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Method, Prop} from '@stencil/core';\n\n/**\n * Display an icon button that triggers a drop-down panel that can display\n * arbitrary child content, such as metadata, forms, or other controls.\n *\n * ```ts\n *   <verdocs-button-panel .icon=${icon}>\n *     <h6>Field Settings</h6>\n *     <form>\n *     <p>\n *       <label>Field Name</label>\n *       <input type=\"text\" placeholder=\"Field Name...\" />\n *     </p>\n *     </form>\n *   </verdocs-button-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  // Not marked as @State because it's not the thing that controls our rendering\n  showing = false;\n\n  @Method()\n  async showPanel() {\n    this.panelEl?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n    this.showing = true;\n\n    this.hiderEl = document.createElement('div');\n    this.hiderEl.id = 'verdocs-button-panel-hider';\n    this.hiderEl.style.zIndex = '100';\n    this.hiderEl.style.position = 'absolute';\n    this.hiderEl.style.top = '0px';\n    this.hiderEl.style.left = '0px';\n    this.hiderEl.style.right = '0px';\n    this.hiderEl.style.bottom = '0px';\n    this.hiderEl.onclick = (e: any) => {\n      e.stopPropagation();\n      this.toggle();\n    };\n    document.body.appendChild(this.hiderEl);\n  }\n\n  @Method()\n  async hidePanel() {\n    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {\n      el.removeAttribute('data-show');\n    });\n    document.getElementById('verdocs-button-panel-hider')?.remove();\n    this.showing = false;\n  }\n\n  @Method()\n  async toggle() {\n    if (this.showing) {\n      await this.hidePanel();\n    } else {\n      await this.showPanel();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"icon\"\n          innerHTML={this.icon}\n          onClick={(e: any) => {\n            e.stopPropagation();\n            return this.toggle();\n          }}\n          ref={el => (this.iconEl = el)}\n        />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/verdocs-tabs.js

@@ -1,4 +1,48 @@
-import { V as VerdocsTabs$1, d as defineCustomElement$1 } from './p-e7e4Os6T.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
+
+const verdocsTabsCss = "verdocs-tabs{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-tabs .tab{display:-ms-flexbox;display:flex;color:#111111;cursor:pointer;font-size:14px;font-weight:400;padding:5px 10px;-ms-flex-align:center;align-items:center;text-transform:none;-ms-flex-pack:center;justify-content:center;border-bottom:4px solid transparent}verdocs-tabs .tab:focus{border:none;outline:none}verdocs-tabs .tab.active{color:#000000;font-weight:500;border-bottom:4px solid #654dcb}verdocs-tabs .tab.disabled{color:#aaaaaa;cursor:default}";
+
+const VerdocsTabs$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTabs extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.selectTab = createEvent(this, "selectTab");
+        /**
+         * The tabs to display
+         */
+        this.tabs = [];
+        /**
+         * The index of the tab to show selected.
+         */
+        this.selectedTab = 0;
+    }
+    handleSelectTab(index) {
+        var _a;
+        (_a = this.selectTab) === null || _a === void 0 ? void 0 : _a.emit({ tab: this.tabs[index], index });
+    }
+    render() {
+        return (h(Host, { key: 'b78818a23892499517726f89f5cce6af6b7f42e1' }, this.tabs.map((tab, index) => (h("div", { class: `tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index) }, tab.label))), h("div", { key: '2105eefb878bc7237bd9c46d8533085d580b94f8', class: "flex flex-1" }), h("slot", { key: 'c477b2f6880442e15bc3bc95f67dec12f1134074' }, h("div", { key: 'c6481423137eb98ee64cc9afedea6d43eca89b75' }))));
+    }
+    static get style() { return verdocsTabsCss; }
+}, [260, "verdocs-tabs", {
+        "tabs": [16],
+        "selectedTab": [2, "selected-tab"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsTabs$1);
+            }
+            break;
+    } });
+}
 
 const VerdocsTabs = VerdocsTabs$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-tabs.js.map

@@ -1 +1 @@
-{"file":"verdocs-tabs.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"verdocs-tabs.js","mappings":";;AAAA,MAAM,cAAc,GAAG,goBAAgoB;;MCqB1oBA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AAJxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAKE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAEzB;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;AA6BhC;AArBC,IAAA,eAAe,CAAC,KAAa,EAAA;;AAC3B,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,CAAC;;IAGtD,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACxB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,IAAA,EAAO,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,EAAE,CAAI,CAAA,EAAA,GAAG,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAE,OAAO,EAAE,GAAG,CAAC,QAAQ,GAAG,MAAK,GAAG,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IACpK,GAAG,CAAC,KAAK,CACN,CACP,CAAC,EAEF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAE3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAO,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["VerdocsTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-tabs/verdocs-tabs.scss?tag=verdocs-tabs","src/components/controls/verdocs-tabs/verdocs-tabs.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-tabs {\n  gap: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .tab {\n    display: flex;\n    color: #111111;\n    cursor: pointer;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 5px 10px;\n    align-items: center;\n    text-transform: none;\n    justify-content: center;\n    border-bottom: 4px solid transparent;\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n\n    &.active {\n      color: #000000;\n      font-weight: 500;\n      border-bottom: 4px solid #654dcb;\n    }\n\n    &.disabled {\n      color: #aaaaaa;\n      cursor: default;\n    }\n  }\n}\n","import {Component, Prop, Host, h, Event, EventEmitter} from '@stencil/core';\n\nexport interface ITab {\n  id?: string;\n  label: string;\n  disabled?: boolean;\n  // TODO: Tooltips?\n}\n\n/**\n * Display a simple row of selectable tabs. This is a controlled element.\n * The parent must adjust selectedTab as selection events are fired.\n *\n * ```ts\n * <verdocs-tabs tabs={[...tabs]} />\n * ```\n */\n@Component({\n  tag: 'verdocs-tabs',\n  styleUrl: 'verdocs-tabs.scss',\n})\nexport class VerdocsTabs {\n  /**\n   * The tabs to display\n   */\n  @Prop() tabs: ITab[] = [];\n\n  /**\n   * The index of the tab to show selected.\n   */\n  @Prop() selectedTab: number = 0;\n\n  /**\n   * Event fired when the user clicks a template to view it. Typically the host application will use this to navigate\n   * to the template preview. This is also fired when the user selects \"Preview/Send\" fropm the dropdown menu.\n   */\n  @Event({composed: true}) selectTab: EventEmitter<{tab: ITab; index: number}>;\n\n  handleSelectTab(index: number) {\n    this.selectTab?.emit({tab: this.tabs[index], index});\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab, index) => (\n          <div class={`tab ${index === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`} onClick={tab.disabled ? () => {} : () => this.handleSelectTab(index)}>\n            {tab.label}\n          </div>\n        ))}\n\n        <div class=\"flex flex-1\" />\n\n        <slot>\n          <div />\n        </slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { V as VerdocsTemplateBuildTabs$1, d as defineCustomElement$1 } from './p-hDK3S4nn.js';
+import { V as VerdocsTemplateBuildTabs$1, d as defineCustomElement$1 } from './p-eZKhg-2i.js';
 
 const VerdocsTemplateBuildTabs = VerdocsTemplateBuildTabs$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-template-fields.js

@@ -1,4 +1,4 @@
-import { V as VerdocsTemplateFields$1, d as defineCustomElement$1 } from './p-BYDdRCru.js';
+import { V as VerdocsTemplateFields$1, d as defineCustomElement$1 } from './p-_cxVjdiK.js';
 
 const VerdocsTemplateFields = VerdocsTemplateFields$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-template-settings.js

@@ -1,4 +1,218 @@
-import { V as VerdocsTemplateSettings$1, d as defineCustomElement$1 } from './p-Cp7g7TMK.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CUAGH_8P.js';
+import { VerdocsEndpoint, getTemplate, updateTemplate } from '@verdocs/js-sdk';
+import { V as VerdocsToast } from './p-D97GxsI-.js';
+import { S as SDKError } from './p-C1sRVZWv.js';
+import { S as Store } from './p-bS8INhRF.js';
+import { d as defineCustomElement$8 } from './p-C_yyK5xE.js';
+import { d as defineCustomElement$7 } from './p-CdmWI0-q.js';
+import { d as defineCustomElement$6 } from './p-CnPaJH5T.js';
+import { d as defineCustomElement$5 } from './p-CNKACBaL.js';
+import { d as defineCustomElement$4 } from './p-C1AtapGD.js';
+import { d as defineCustomElement$3 } from './p-j7Gj43ri.js';
+import { d as defineCustomElement$2 } from './p--qy4LrSt.js';
+
+const verdocsTemplateSettingsCss = "verdocs-template-settings{display:block;max-width:600px;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", 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 MS_PER_DAY = 24 * 60 * 60 * 1000;
+const VerdocsTemplateSettings$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateSettings extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.next = createEvent(this, "next");
+        this.exit = createEvent(this, "exit");
+        this.sdkError = createEvent(this, "sdkError");
+        this.templateUpdated = createEvent(this, "templateUpdated");
+        this.templateListenerId = null;
+        /**
+         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
+         */
+        this.endpoint = VerdocsEndpoint.getDefault();
+        /**
+         * The template ID to edit.
+         */
+        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 verdocsTemplateSettingsCss; }
+}, [256, "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$1() {
+    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$1);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const VerdocsTemplateSettings = VerdocsTemplateSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/verdocs-template-settings.js.map

@@ -1 +1 @@
-{"file":"verdocs-template-settings.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"verdocs-template-settings.js","mappings":"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","names":["VerdocsTemplateSettings","__stencil_proxyCustomElement","HTMLElement"],"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/custom-elements.json

@@ -78,9 +78,6 @@
             },
             {
               "name": "roles"
-            },
-            {
-              "name": "settings"
             }
           ]
         },
@@ -2038,9 +2035,6 @@
             },
             {
               "name": "roles"
-            },
-            {
-              "name": "settings"
             }
           ]
         },

package/dist/esm/index-BIRwgFLv.js

@@ -115,6 +115,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './verdocs-build.entry.js').then(processMod, consoleError);
+                case 'verdocs-button-panel':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './verdocs-button-panel.entry.js').then(processMod, consoleError);
                 case 'verdocs-date-input':
                     return import(
                       /* webpackMode: "lazy" */
@@ -171,6 +175,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './verdocs-table.entry.js').then(processMod, consoleError);
+                case 'verdocs-tabs':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './verdocs-tabs.entry.js').then(processMod, consoleError);
                 case 'verdocs-template-card':
                     return import(
                       /* webpackMode: "lazy" */
@@ -179,6 +187,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './verdocs-template-create.entry.js').then(processMod, consoleError);
+                case 'verdocs-template-settings':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './verdocs-template-settings.entry.js').then(processMod, consoleError);
                 case 'verdocs-template-tags':
                     return import(
                       /* webpackMode: "lazy" */
@@ -235,10 +247,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './verdocs-envelope-recipient-link_2.entry.js').then(processMod, consoleError);
-                case 'verdocs-button-panel_2':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './verdocs-button-panel_2.entry.js').then(processMod, consoleError);
                 case 'verdocs-file-chooser_2':
                     return import(
                       /* webpackMode: "lazy" */
@@ -271,10 +279,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './verdocs-checkbox_5.entry.js').then(processMod, consoleError);
-                case 'verdocs-preview_7':
+                case 'verdocs-preview_6':
                     return import(
                       /* webpackMode: "lazy" */
-                      './verdocs-preview_7.entry.js').then(processMod, consoleError);
+                      './verdocs-preview_6.entry.js').then(processMod, consoleError);
                 case 'verdocs-field-attachment_11':
                     return import(
                       /* webpackMode: "lazy" */