@verdocs/web-sdk 6.8.5 → 6.8.7

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

@@ -8,8 +8,8 @@ var Datastore = require('./Datastore-B-sxWSPD.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('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 
@@ -523,11 +523,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 +591,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 +608,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 +644,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 +666,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.
@@ -780,23 +761,27 @@ const VerdocsTemplateFields = class {
         }
     }
     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' });
+            console.log('[FIELDS] Field settings changed, updating template...');
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-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' });
+            console.log('[FIELDS] Field deleted, updating template...');
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
         });
         el.setAttribute('templateid', this.templateId);
         el.setAttribute('fieldname', field.name);
         el.setAttribute('documentid', String(pageInfo.documentId));
+        // TODO: Merge these
         el.setAttribute('pageNumber', String(pageInfo.pageNumber));
+        el.setAttribute('pagenumber', String(field.page));
         el.setAttribute('xScale', String(pageInfo.xScale));
         el.setAttribute('yScale', String(pageInfo.yScale));
         el.setAttribute('name', field.name);
+        this.makeDraggable(el);
     }
     handlePageRendered(e) {
         var _a, _b;
@@ -812,10 +797,7 @@ const VerdocsTemplateFields = class {
             const id = utils.getFieldId(field);
             const el = document.getElementById(id);
             if (el) {
-                el.setAttribute('fieldname', field.name);
-                el.setAttribute('pagenumber', String(field.page));
-                el.setAttribute('documentid', String(field.document_id));
-                this.makeDraggable(el);
+                this.attachFieldAttributes(pageInfo, field, el);
             }
         });
     }
@@ -3956,151 +3938,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-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-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-B-sxWSPD.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

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

@@ -0,0 +1 @@
+{"version":3,"file":"verdocs-template-settings.entry.cjs.js","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"],"names":["VerdocsEndpoint","Store","getTemplate","SDKError","updateTemplate","VerdocsToast","h","Host"],"mappings":"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"}