@verdocs/web-sdk 6.8.6 → 6.8.8

package/dist/cjs/{verdocs-preview_7.cjs.entry.js → verdocs-preview_6.cjs.entry.js}

@@ -1,17 +1,17 @@
 'use strict';
 
 var index$1 = require('./index-CQ5bTnED.js');
+var interact_min = require('./interact.min-BAnZvLwr.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
+var utils = require('./utils-kkGeJs-8.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 var Environment = require('./Environment-3vWt0C1Q.js');
 var Toast = require('./Toast-BgG-6jAg.js');
 var Icons = require('./Icons-TVvtZ5iL.js');
-var index$2 = require('./index-CeUF44L9.js');
-var interact_min = require('./interact.min-BAnZvLwr.js');
-require('./Types-YJQtg77a.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
+require('./index-CeUF44L9.js');
+require('./Types-YJQtg77a.js');
 
 const verdocsPreviewCss = "verdocs-preview{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", 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}";
 
@@ -71,6 +71,15 @@ const VerdocsPreview = class {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
         }
     }
+    componentDidRender() {
+        // Defensive hack: fields rendered in other tabs (e.g. the builder's Fields tab) may share DOM
+        // IDs with fields shown here, and interact.js — being vanilla JS — is unaware of Stencil's
+        // re-renders. Unbind any drag/resize handlers on every .verdocs-field after each render so
+        // fields stay non-interactive in preview mode regardless of where they came from.
+        document.querySelectorAll('.verdocs-field').forEach(el => {
+            interact_min.interact(el).unset();
+        });
+    }
     handlePageRendered(e) {
         var _a;
         const pageInfo = e.detail;
@@ -523,11 +532,8 @@ const VerdocsTemplateAttachments = class {
 };
 VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
 
-const verdocsTemplateBuildTabsCss = "verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:15px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-template-build-tabs verdocs-button-panel svg{-webkit-transform:scale(0.8);transform:scale(0.8)}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}.template-details-panel .row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px;margin:10px 0}.template-details-panel label{-ms-flex:0 0 70px;flex:0 0 70px}.template-details-panel .value{-ms-flex:1;flex:1;font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.template-details-panel .icon-button{cursor:pointer;opacity:0.8;-ms-flex:0;flex:0;width:18px;height:18px}.template-details-panel .icon-button svg{stroke:#000000;width:18px;height:18px}.template-details-panel .icon-button:hover{opacity:1}";
+const verdocsTemplateBuildTabsCss = "verdocs-template-build-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;-ms-flex:0 0 50px;flex:0 0 50px;width:100%;background:#ffffff;color:#72757d;border-bottom:1px solid #dddddd;-webkit-filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-template-build-tabs .tab{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:50px;padding:0 4px;background:#e7e7e7;font-weight:700;font-size:12px;cursor:pointer}@media (min-width: 768px){verdocs-template-build-tabs .tab{padding:0 8px 0 24px;font-size:14px}}verdocs-template-build-tabs .tab svg{position:absolute;top:0;right:-19px;z-index:10;pointer-events:none;display:none}@media (min-width: 768px){verdocs-template-build-tabs .tab svg{display:block}}verdocs-template-build-tabs .tab.active{background:#ffffff;color:#707ae5}verdocs-template-build-tabs .tab.disabled{cursor:default;color:#d1d5db}";
 
-const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
-const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>`;
-const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
 const VerdocsTemplateBuildTabs = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
@@ -594,28 +600,16 @@ const VerdocsTemplateBuildTabs = class {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.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));
         }
     }
-    setStep(e) {
+    handleSelect(tab) {
         var _a;
-        console.log('[BUILD_TABS] 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);
-    }
-    copyTemplateId() {
-        navigator.clipboard
-            .writeText(this.templateId)
-            .then(() => {
-            Toast.VerdocsToast('Template ID copied', { style: 'success', duration: 3000 });
-        })
-            .catch(e => {
-            var _a;
-            console.warn('[BUILD_TABS] Error copying to clipboard', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e);
-        });
+        if (tab.disabled || tab.id === this.step) {
+            return;
+        }
+        this.step = tab.id;
+        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(tab.id);
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c;
         if (this.loading) {
             return (index$1.h(index$1.Host, null, index$1.h("verdocs-loader", null)));
         }
@@ -623,26 +617,23 @@ const VerdocsTemplateBuildTabs = class {
             return (index$1.h(index$1.Host, null, index$1.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         const canEditRoles = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).length > 0;
-        let canEditFields = canEditRoles && (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).length > 0;
+        const canEditFields = canEditRoles && (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).length > 0;
         const canPreview = canEditFields && (((_c = this.template) === null || _c === void 0 ? void 0 : _c.fields) || []).length > 0;
-        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;
-        }
-        return (index$1.h(index$1.Host, null, index$1.h("verdocs-tabs", { onSelectTab: e => this.setStep(e), selectedTab: selectedStepIndex, tabs: [
-                { id: 'attachments', disabled: false, label: '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' },
-            ] }), this.templateId && (index$1.h("div", { class: "info" }, index$1.h("verdocs-button-panel", { icon: HelpIcon }, index$1.h("div", { class: "template-details-panel" }, index$1.h("h6", null, "Template Details"), index$1.h("div", { class: "row" }, index$1.h("label", null, "ID:"), index$1.h("div", { class: "value" }, this.templateId), index$1.h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), index$1.h("div", { class: "row" }, index$1.h("label", null, "Name:"), index$1.h("div", { class: "value" }, (_d = this.template) === null || _d === void 0 ? void 0 : _d.name)), index$1.h("div", { class: "row" }, index$1.h("label", null, "Visibility:"), index$1.h("div", { class: "value" }, ((_e = this.template) === null || _e === void 0 ? void 0 : _e.is_public) ? 'Public' : ((_f = this.template) === null || _f === void 0 ? void 0 : _f.is_personal) ? 'Private' : 'Shared')), index$1.h("div", { class: "row" }, index$1.h("label", null, "Created:"), index$1.h("div", { class: "value" }, ((_g = this.template) === null || _g === void 0 ? void 0 : _g.counter) ? index$2.dateFnsExports.format(new Date((_h = this.template) === null || _h === void 0 ? void 0 : _h.created_at), 'P p') : '')), index$1.h("div", { class: "row" }, index$1.h("label", null, "Used:"), index$1.h("div", { class: "value" }, (_j = this.template) === null || _j === void 0 ? void 0 :
-            _j.counter, " time(s)"))))))));
+        const tabs = [
+            { id: 'attachments', label: 'Attachments', disabled: false },
+            { id: 'roles', label: 'Workflow', disabled: !canEditRoles },
+            { id: 'fields', label: 'Fields', disabled: !canEditFields },
+            { id: 'preview', label: 'Preview & Send', disabled: !canPreview },
+        ];
+        return (index$1.h(index$1.Host, null, tabs.map(tab => {
+            const isActive = tab.id === this.step;
+            const classes = ['tab'];
+            if (isActive)
+                classes.push('active');
+            if (tab.disabled)
+                classes.push('disabled');
+            return (index$1.h("div", { class: classes.join(' '), onClick: () => this.handleSelect(tab) }, index$1.h("span", null, tab.label), index$1.h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "19", height: "50", viewBox: "0 0 19 50" }, index$1.h("polygon", { points: "0,0 19,25 0,50", fill: isActive ? '#ffffff' : '#e7e7e7' }))));
+        })));
     }
     static get watchers() { return {
         "templateId": ["onTemplateIdChanged"],
@@ -662,7 +653,7 @@ const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="
 // const iconTimestamp =
 //   '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z"></path></svg>';
 const iconDropdown = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';
-const iconAttachment = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';
+const iconAttachment = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';
 const separator = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';
 const menuOptions = [
     { id: 'signature', tooltip: 'Signature', icon: iconSignature, class: 'signature' },
@@ -684,7 +675,6 @@ const VerdocsTemplateFields = class {
         index$1.registerInstance(this, hostRef);
         this.sdkError = index$1.createEvent(this, "sdkError");
         this.templateUpdated = index$1.createEvent(this, "templateUpdated");
-        this.fieldsUpdated = index$1.createEvent(this, "fieldsUpdated");
         this.templateListenerId = null;
         /**
          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
@@ -721,6 +711,14 @@ const VerdocsTemplateFields = class {
             this.placing = null;
         }
     }
+    handleFieldSettingsChanged() {
+        var _a;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
+    }
+    handleFieldDeleted() {
+        var _a;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
+    }
     async componentWillLoad() {
         var _a, _b, _c;
         try {
@@ -765,6 +763,7 @@ const VerdocsTemplateFields = class {
         this.unlistenToTemplate();
         Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
             var _a;
+            console.log('Template updated');
             this.template = template;
             this.loading = false;
             if (!this.selectedRoleName) {
@@ -779,25 +778,6 @@ const VerdocsTemplateFields = class {
             this.templateListenerId = null;
         }
     }
-    attachFieldAttributes(pageInfo, field, el) {
-        // el.addEventListener('input', e => this.handleFieldChange(field, e));
-        el.addEventListener('settingsChanged', () => {
-            var _a;
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'added-field' });
-        });
-        el.addEventListener('deleted', () => {
-            var _a;
-            el.remove();
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
-        });
-        el.setAttribute('templateid', this.templateId);
-        el.setAttribute('fieldname', field.name);
-        el.setAttribute('documentid', String(pageInfo.documentId));
-        el.setAttribute('pageNumber', String(pageInfo.pageNumber));
-        el.setAttribute('xScale', String(pageInfo.xScale));
-        el.setAttribute('yScale', String(pageInfo.yScale));
-        el.setAttribute('name', field.name);
-    }
     handlePageRendered(e) {
         var _a, _b;
         var _c, _d;
@@ -812,9 +792,12 @@ const VerdocsTemplateFields = class {
             const id = utils.getFieldId(field);
             const el = document.getElementById(id);
             if (el) {
+                el.setAttribute('templateid', this.templateId);
                 el.setAttribute('fieldname', field.name);
-                el.setAttribute('pagenumber', String(field.page));
                 el.setAttribute('documentid', String(field.document_id));
+                el.setAttribute('pagenumber', String(field.page));
+                el.setAttribute('xScale', String(pageInfo.xScale));
+                el.setAttribute('yScale', String(pageInfo.yScale));
                 this.makeDraggable(el);
             }
         });
@@ -918,7 +901,7 @@ const VerdocsTemplateFields = class {
     async handleClickPage(e, documentId, pageNumber) {
         var _a;
         if (this.placing) {
-            console.log('Placing field', { documentId, pageNumber });
+            // console.log('Placing field', {documentId, pageNumber});
             const clickedX = e.offsetX;
             const clickedY = e.offsetY;
             const width = utils.defaultWidth(this.placing);
@@ -950,9 +933,8 @@ const VerdocsTemplateFields = class {
                 readonly: false,
                 options: this.placing === 'radio' ? [{ id: 'option-1', label: 'Option 1' }] : [],
             };
-            console.log('[FIELDS] Will save new field', field);
             const newField = await jsSdk.createField(this.endpoint, this.templateId, field);
-            console.log('[FIELDS] Saved field', newField);
+            console.log('[FIELDS] Created field', newField);
             const newTemplate = JSON.parse(JSON.stringify(this.template));
             newTemplate.fields.push(newField);
             Datastore.Store.updateTemplate(this.templateId, newTemplate);
@@ -962,6 +944,7 @@ const VerdocsTemplateFields = class {
     }
     render() {
         var _a, _b, _c;
+        console.log('Rendering');
         if (this.loading) {
             return (index$1.h(index$1.Host, null, index$1.h("verdocs-loader", null)));
         }
@@ -3956,151 +3939,10 @@ const VerdocsTemplateRoles = class {
 };
 VerdocsTemplateRoles.style = verdocsTemplateRolesCss;
 
-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 = class {
-    constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.next = index$1.createEvent(this, "next");
-        this.exit = index$1.createEvent(this, "exit");
-        this.sdkError = index$1.createEvent(this, "sdkError");
-        this.templateUpdated = index$1.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 = jsSdk.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();
-        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.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) {
-            Datastore.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 errors.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() {
-        jsSdk.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 errors.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));
-            Toast.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 (index$1.h(index$1.Host, null, index$1.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-        }
-        if (this.loading || !this.template) {
-            return (index$1.h(index$1.Host, { class: "loading" }, index$1.h("verdocs-loader", null)));
-        }
-        return (index$1.h(index$1.Host, null, index$1.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index$1.h("h5", null, "Settings"), index$1.h("div", { class: "row" }, index$1.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;
-            } })), index$1.h("div", { class: "row" }, index$1.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' },
-            ] })), index$1.h("div", { class: "row" }, index$1.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' },
-            ] })), index$1.h("div", { class: "row" }, index$1.h("label", null, "Send Reminders"), index$1.h("verdocs-switch", { checked: this.sendReminders, onCheckedChange: e => (this.sendReminders = e.detail) })), this.sendReminders && (index$1.h("div", { class: "row" }, index$1.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 && (index$1.h("div", { class: "row" }, index$1.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;
-            } }))), index$1.h("div", { class: "buttons" }, index$1.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index$1.h("verdocs-button", { label: "Save", size: "small", onClick: () => this.handleSubmit(), disabled: !this.dirty })))));
-    }
-    get el() { return index$1.getElement(this); }
-};
-VerdocsTemplateSettings.style = verdocsTemplateSettingsCss;
-
 exports.verdocs_preview = VerdocsPreview;
 exports.verdocs_send = VerdocsSend;
 exports.verdocs_template_attachments = VerdocsTemplateAttachments;
 exports.verdocs_template_build_tabs = VerdocsTemplateBuildTabs;
 exports.verdocs_template_fields = VerdocsTemplateFields;
 exports.verdocs_template_roles = VerdocsTemplateRoles;
-exports.verdocs_template_settings = VerdocsTemplateSettings;
-//# sourceMappingURL=verdocs-preview.verdocs-send.verdocs-template-attachments.verdocs-template-build-tabs.verdocs-template-fields.verdocs-template-roles.verdocs-template-settings.entry.cjs.js.map
+//# sourceMappingURL=verdocs-preview.verdocs-send.verdocs-template-attachments.verdocs-template-build-tabs.verdocs-template-fields.verdocs-template-roles.entry.cjs.js.map

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -2,11 +2,11 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
+var utils = require('./utils-kkGeJs-8.js');
 var Icons = require('./Icons-TVvtZ5iL.js');
 var Toast = require('./Toast-BgG-6jAg.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');
 

package/dist/cjs/verdocs-signing-progress.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
+var utils = require('./utils-kkGeJs-8.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');
 

package/dist/cjs/verdocs-tabs.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-CQ5bTnED.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selectTab = index.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 (index.h(index.Host, { key: 'b78818a23892499517726f89f5cce6af6b7f42e1' }, this.tabs.map((tab, index$1) => (index.h("div", { class: `tab ${index$1 === this.selectedTab ? 'active' : ''} ${tab.disabled ? 'disabled' : ''}`, onClick: tab.disabled ? () => { } : () => this.handleSelectTab(index$1) }, tab.label))), index.h("div", { key: '2105eefb878bc7237bd9c46d8533085d580b94f8', class: "flex flex-1" }), index.h("slot", { key: 'c477b2f6880442e15bc3bc95f67dec12f1134074' }, index.h("div", { key: 'c6481423137eb98ee64cc9afedea6d43eca89b75' }))));
+    }
+};
+VerdocsTabs.style = verdocsTabsCss;
+
+exports.verdocs_tabs = VerdocsTabs;
+//# sourceMappingURL=verdocs-tabs.entry.cjs.js.map

package/dist/cjs/verdocs-tabs.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-tabs.entry.cjs.js","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"],"names":["h","Host","index"],"mappings":";;;;AAAA,MAAM,cAAc,GAAG,goBAAgoB;;MCqB1oB,WAAW,GAAA,MAAA;AAJxB,IAAA,WAAA,CAAA,OAAA,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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEC,OAAK,MACxBF,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,IAAA,EAAOE,OAAK,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,CAACA,OAAK,CAAC,IACpK,GAAG,CAAC,KAAK,CACN,CACP,CAAC,EAEFF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAG,CAAA,EAE3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAO,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACF;;;;;;;"}

package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js

@@ -2,8 +2,8 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var utils = require('./utils-kkGeJs-8.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 var popper = require('./popper-Dmp8OTYh.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');

package/dist/cjs/verdocs-template-settings.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var index = require('./index-CQ5bTnED.js');
+var jsSdk = require('@verdocs/js-sdk');
+var Toast = require('./Toast-BgG-6jAg.js');
+var errors = require('./errors-D1XRvnet.js');
+var Datastore = require('./Datastore-C-Pojt3E.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.next = index.createEvent(this, "next");
+        this.exit = index.createEvent(this, "exit");
+        this.sdkError = index.createEvent(this, "sdkError");
+        this.templateUpdated = index.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 = jsSdk.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();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.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) {
+            Datastore.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 errors.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() {
+        jsSdk.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 errors.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));
+            Toast.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 (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if (this.loading || !this.template) {
+            return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
+        }
+        return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("h5", null, "Settings"), index.h("div", { class: "row" }, index.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;
+            } })), index.h("div", { class: "row" }, index.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' },
+            ] })), index.h("div", { class: "row" }, index.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' },
+            ] })), index.h("div", { class: "row" }, index.h("label", null, "Send Reminders"), index.h("verdocs-switch", { checked: this.sendReminders, onCheckedChange: e => (this.sendReminders = e.detail) })), this.sendReminders && (index.h("div", { class: "row" }, index.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 && (index.h("div", { class: "row" }, index.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;
+            } }))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "Save", size: "small", onClick: () => this.handleSubmit(), disabled: !this.dirty })))));
+    }
+    get el() { return index.getElement(this); }
+};
+VerdocsTemplateSettings.style = verdocsTemplateSettingsCss;
+
+exports.verdocs_template_settings = VerdocsTemplateSettings;
+//# sourceMappingURL=verdocs-template-settings.entry.cjs.js.map