@verdocs/web-sdk 2.3.87 → 4.0.5

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

@@ -0,0 +1,1464 @@
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-b89cf6a4.js';
+import { VerdocsEndpoint, integerSequence, createEnvelope, isValidEmail, isValidPhone, getRGBA, createTemplateDocument, deleteTemplateDocument, createTemplatev2, updateField, createField, updateTemplate, createTemplateReminder, updateTemplateReminder, deleteTemplateReminder, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-d7516adf.js';
+import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex, u as updateStoreRole } from './TemplateRoleStore-ddc3b96f.js';
+import { g as getTemplateStore } from './TemplateStore-df5484bb.js';
+import { r as renderDocumentField, b as updateCssTransform, c as removeCssTransform, g as getFieldId, d as getFieldOptionId, e as defaultWidth, f as defaultHeight } from './utils-61c1093b.js';
+import { S as SDKError } from './errors-887f1e88.js';
+import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon$1, b as PageCountIcon, T as TrashIcon } from './Icons-faf0377f.js';
+import { i as interact } from './interact.min-b055a9b6.js';
+import { V as VerdocsToast } from './Toast-b71de686.js';
+import './index-296aabaf.js';
+import './index-7456b04f.js';
+import './Types-e4a6eba5.js';
+import './index-0329eed3.js';
+
+const verdocsPreviewCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
+const VerdocsPreviewStyle0 = verdocsPreviewCss;
+
+const VerdocsPreview = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateStore = null;
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = null;
+        this.loading = true;
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[PREVIEW] Unable to start builder session, must be authenticated');
+                return;
+            }
+            getTemplateStore(this.endpoint, this.templateId, true)
+                .then(ts => {
+                this.templateStore = ts;
+                console.log('[PREVIEW] Loaded Template Store', ts.state);
+                this.fieldStore = getTemplateFieldStore(this.templateId);
+                this.roleStore = getTemplateRoleStore(this.templateId);
+                console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
+                this.loading = false;
+            })
+                .catch(e => {
+                console.log(e);
+            });
+        }
+        catch (e) {
+            console.log('[PREVIEW] Error with preview session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    handlePageRendered(e) {
+        var _a, _b;
+        const pageInfo = e.detail;
+        const fields = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page === pageInfo.pageNumber);
+        console.log('[PREVIEW] Page rendered', pageInfo, fields);
+        fields.forEach(field => renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false }));
+    }
+    render() {
+        var _a, _b;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
+        return (h(Host, null, (((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
+            const pageNumbers = integerSequence(1, document.pages);
+            return (h(Fragment, null, pageNumbers.map(pageNumber => (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: true, done: false, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
+                    { name: 'page', type: 'canvas' },
+                    { name: 'controls', type: 'div' },
+                ] })))));
+        })));
+    }
+};
+VerdocsPreview.style = VerdocsPreviewStyle0;
+
+const verdocsSendCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-send{padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:none}verdocs-send.sendable{display:-ms-flexbox;display:flex}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid rgba(151, 151, 151, 0.2666666667)}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:rgba(0, 0, 0, 0.537254902)}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;border:2px solid #dddddd;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
+const VerdocsSendStyle0 = verdocsSendCss;
+
+const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
+const startIcon$1 = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
+const stepIcon$1 = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
+const doneIcon$1 = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
+const VerdocsSend = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sendingEnvelope = createEvent(this, "sendingEnvelope", 7);
+        this.send = createEvent(this, "send", 7);
+        this.exit = createEvent(this, "exit", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.searchContacts = createEvent(this, "searchContacts", 7);
+        this.levels = [];
+        this.templateStore = null;
+        this.roleStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = null;
+        this.environment = 'web';
+        this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
+        this.rolesAtLevel = {};
+        this.showPickerForId = '';
+        this.sessionContacts = [];
+        this.sending = false;
+        this.rolesCompleted = {};
+    }
+    async reset() {
+        this.rolesCompleted = {};
+    }
+    async componentWillLoad() {
+        var _a, _b, _c, _d, _e, _f;
+        try {
+            const loadSessionResult = this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[SEND] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[SEND] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
+            this.roleStore = getTemplateRoleStore(this.templateId);
+            if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
+                console.warn(`[SEND] Template is not sendable`, this.templateId);
+            }
+            if (this.roleStore.get('roles')) {
+                const rolesAtLevel = {};
+                this.rolesCompleted = {};
+                this.roleStore.get('roles').forEach(role => {
+                    const level = role.sequence - 1;
+                    rolesAtLevel[level] || (rolesAtLevel[level] = []);
+                    const id = `r-${level}-${rolesAtLevel[level].length}`;
+                    rolesAtLevel[level].push({ ...role, id });
+                    if (role.full_name && (role.email || role.phone)) {
+                        this.rolesCompleted[id] = { ...role, id };
+                    }
+                });
+                this.rolesAtLevel = rolesAtLevel;
+                this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
+                this.levels.sort((a, b) => a - b);
+            }
+            if ((_c = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _c === void 0 ? void 0 : _c.profile) {
+                this.sessionContacts.push({
+                    id: loadSessionResult.session.profile.id,
+                    name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
+                    email: loadSessionResult.session.profile.email,
+                    phone: loadSessionResult.session.profile.phone,
+                });
+            }
+        }
+        catch (e) {
+            console.log('[SEND] Error with preview session', e);
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+        }
+    }
+    getLevelIcon(level) {
+        if (level < 0) {
+            return h("div", { class: "level-icon", innerHTML: startIcon$1 });
+        }
+        else if (level >= this.levels.length) {
+            return h("div", { class: "level-icon", innerHTML: doneIcon$1 });
+        }
+        else {
+            return h("div", { class: "level-icon", innerHTML: stepIcon$1 });
+        }
+    }
+    handleSelectContact(e, role) {
+        e.preventDefault();
+        this.rolesCompleted[role.id] = { ...role, ...e.detail };
+        this.showPickerForId = '';
+    }
+    handleClickRole(e, role) {
+        e.stopPropagation();
+        this.showPickerForId = role.id;
+    }
+    handleSend(e) {
+        var _a, _b, _c;
+        if (this.sending) {
+            console.log('Skipping duplicate send', e);
+            return;
+        }
+        console.log('Sending', e);
+        e.preventDefault();
+        e.stopPropagation();
+        this.sending = true;
+        (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
+        const details = {
+            template_id: this.templateId,
+            name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
+            environment: this.environment,
+            roles: Object.values(this.rolesCompleted),
+            // TODO
+            prepared_fields: [],
+        };
+        console.log('[SEND] Creating envelope', details);
+        createEnvelope(this.endpoint, details)
+            .then(r => {
+            var _a, _b;
+            console.log('[SEND] Send envelope', r);
+            this.reset().catch((e) => console.log('Unknown Error', e));
+            this.sending = false;
+            (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+            (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
+        })
+            .catch(e => {
+            var _a;
+            console.log('Send error', e);
+            // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
+            this.sending = false;
+            (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+        });
+    }
+    handleCancel(e) {
+        var _a;
+        e.stopPropagation();
+        (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    render() {
+        var _a, _b;
+        const roleNames = getRoleNames(this.roleStore);
+        const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
+        const allRolesAssigned = rolesAssigned.length >= roleNames.length;
+        return (h(Host, { key: 'd0bd3f9d7ef226896f095059203280e1c1e71265', class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { key: '1d4fdeda91a23a81bb1c72a4200de76e36ba74c8', class: "recipients" }, h("div", { key: '9bb72122ba245dd95c3f2ffb0c1768764c2f2da7', class: "left-line" }), h("div", { key: 'c2056047a4bf20612fb83693fcf279a1354c98e0', class: `level level-start` }, this.getLevelIcon(-1), h("div", { key: '0220edca79c791bdd561d0ff92cfad3236dd7800', class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+            var _a, _b, _c, _d, _e, _f;
+            const unknown = !role.email;
+            const elId = `verdocs-send-recipient-${role.name}`;
+            return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
+        })))), h("div", { key: '16fba92b62896c3368d54743c9ae5c79b7558f16', class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { key: '0cae926609fc5c2a10387bee716d49c98a8ebcf6', class: "complete" }, "Signing Complete"))), h("div", { key: 'f8457f0c451cc70a096e46447395186aca90169f', class: "buttons" }, h("verdocs-button", { key: '2be6f8c3cfb4c2ec8c010c4cba79855f20e5461d', label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { key: 'b34393a6e3197acd0143161c71a43420f45302be', label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", { key: '8e26caa183719e765c771921d365e39ec4916be4' }))));
+    }
+};
+VerdocsSend.style = VerdocsSendStyle0;
+
+const verdocsTemplateAttachmentsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateAttachmentsStyle0 = verdocsTemplateAttachmentsCss;
+
+const VerdocsTemplateAttachments = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.exit = createEvent(this, "exit", 7);
+        this.next = createEvent(this, "next", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.uploading = false;
+        this.progressLabel = 'Uploading...';
+        this.progressPercent = 0;
+        this.showDeleteError = false;
+        this.confirmDeleteDocument = null;
+        this.store = null;
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[ROLES] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+        }
+        catch (e) {
+            console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    handleCancel(e) {
+        e.stopPropagation();
+        this.exit.emit();
+    }
+    handleUploadProgress(percent) {
+        if (percent >= 99) {
+            this.progressPercent = 100;
+            this.progressLabel = 'Processing...';
+        }
+        else {
+            this.progressPercent = percent;
+        }
+    }
+    async handleUpload(e) {
+        var _a, _b, _c, _d;
+        e.stopPropagation();
+        const file = e.detail.file;
+        if (!file) {
+            return;
+        }
+        console.log('[ATTACHMENTS] Uploading...', file);
+        this.uploading = true;
+        this.progressLabel = 'Uploading...';
+        try {
+            const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
+            console.log('[ATTACHMENTS] Created attachment', template);
+            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+            console.log('[ATTACHMENTS] Updated template', this.store.state);
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.store.state, event: 'attachments' });
+            this.uploading = false;
+            this.progressLabel = '';
+            this.progressPercent = 0;
+        }
+        catch (e) {
+            console.log('[ATTACHMENTS] Error creating template', e);
+            (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+            this.uploading = false;
+        }
+    }
+    handleNext(e) {
+        var _a;
+        e.stopPropagation();
+        this.uploading = false;
+        this.progressLabel = '';
+        this.progressPercent = 0;
+        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
+    }
+    async confirmDelete() {
+        await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
+        this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+        console.log('[ATTACHMENTS] New template', this.store.state);
+        this.confirmDeleteDocument = null;
+    }
+    async handleDelete(document) {
+        var _a;
+        if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.documents.length) > 1) {
+            this.confirmDeleteDocument = document;
+        }
+        else {
+            this.showDeleteError = true;
+        }
+    }
+    getFileIcon(document) {
+        switch (document.mime) {
+            case 'application/pdf':
+                return PdfIcon;
+            case 'image/jpeg':
+                return JpgIcon;
+            case 'image/png':
+                return PngIcon;
+            case 'application/msword':
+            case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+                return DocIcon;
+        }
+        return FileIcon$1;
+    }
+    render() {
+        var _a, _b, _c;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
+        if (!templateState.isLoaded) {
+            return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
+        }
+        // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+        if (!this.endpoint.session || !templateState.profile_id) {
+            return h(Host, { class: "empty" });
+        }
+        return (h(Host, null, h("h5", null, "Existing Attachments"), h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.documents.map(document => (h("div", { class: "attachment" }, h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), h("div", { class: "filename", title: document.name }, document.name), h("div", { class: "pages" }, h("div", { class: "count" }, document.pages), h("div", { class: "pages-icon", innerHTML: PageCountIcon })), h("div", { class: "trash-icon", innerHTML: TrashIcon, onClick: () => this.handleDelete(document) }))))), h("h5", null, "Attach a New Document"), this.uploading ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.documents.length) || this.uploading })), this.showDeleteError && (h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
+                this.confirmDeleteDocument = null;
+            } }))));
+    }
+};
+VerdocsTemplateAttachments.style = VerdocsTemplateAttachmentsStyle0;
+
+const verdocsTemplateBuildTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-build-tabs{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-build-tabs verdocs-template-attachments,verdocs-template-build-tabs verdocs-template-roles{margin:20px}verdocs-template-build-tabs verdocs-template-fields{border-top:1px solid #777777}verdocs-template-build-tabs verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-template-build-tabs verdocs-template-fields{width:100%}verdocs-template-build-tabs verdocs-preview{-ms-flex:1;flex:1}";
+const VerdocsTemplateBuildTabsStyle0 = verdocsTemplateBuildTabsCss;
+
+const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
+const VerdocsTemplateBuildTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.stepChanged = createEvent(this, "stepChanged", 7);
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = null;
+        this.step = 'preview';
+        this.store = null;
+    }
+    onStepChanged() {
+        console.log('Step changed', this.step, this.templateId);
+        this.loadTemplate().catch((e) => console.log('Unknown Error', e));
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.endpoint.session) {
+                console.log('[BUILD_TABS] Unable to start builder session, must be authenticated');
+                return;
+            }
+            if (!this.templateId) {
+                this.step = 'preview';
+                return;
+            }
+            this.loadTemplate().catch(e => console.log('[BUILD_TABS] Unable to load template', e));
+        }
+        catch (e) {
+            console.log('[BUILD_TABS] Error loading template', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    async loadTemplate() {
+        if (this.templateId) {
+            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+        }
+    }
+    setStep(e) {
+        var _a;
+        console.log('Selected step', e.detail.tab.id);
+        e.stopPropagation();
+        e.preventDefault();
+        this.step = e.detail.tab.id;
+        (_a = this.stepChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail.tab.id);
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        let canPreview = false;
+        let canEditFields = false;
+        let canEditRoles = false;
+        console.log('[BUILD_TABS] Rendering tabs', this.templateId, this.step);
+        if (this.templateId && this.store && this.store.state) {
+            canEditRoles = ((_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
+            canEditFields = canEditRoles && ((_f = (_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
+            canPreview = canEditFields && ((_j = (_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
+            // TODO
+            // canPreview = this.store && userCanPreviewTemplate(this.endpoint.session, this.store?.state);
+            // canEditFields = this.store && userCanBuildTemplate(this.endpoint.session, this.store?.state);
+            // canEditRoles = this.store && userCanUpdateTemplate(this.endpoint.session, this.store?.state);
+        }
+        let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);
+        if (!canPreview && selectedStepIndex >= 4) {
+            selectedStepIndex = 3;
+        }
+        if (!canEditFields && selectedStepIndex >= 3) {
+            selectedStepIndex = 1;
+        }
+        if (!canEditRoles && selectedStepIndex >= 1) {
+            selectedStepIndex = 0;
+        }
+        console.log({ selectedStepIndex, canPreview, canEditFields, canEditRoles });
+        return (h(Host, null, h("verdocs-tabs", { onSelectTab: e => this.setStep(e), selectedTab: selectedStepIndex, tabs: [
+                { id: 'attachments', disabled: false, label: this.templateId && this.store ? 'Attachment(s)' : 'Upload Attachment(s)' },
+                { id: 'roles', disabled: !canEditRoles, label: 'Roles' },
+                { id: 'settings', disabled: !canEditFields, label: 'Settings' },
+                { id: 'fields', disabled: !canEditFields, label: 'Fields' },
+                { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
+            ] })));
+    }
+    static get watchers() { return {
+        "step": ["onStepChanged"]
+    }; }
+};
+VerdocsTemplateBuildTabs.style = VerdocsTemplateBuildTabsStyle0;
+
+const verdocsTemplateCreateCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateCreateStyle0 = verdocsTemplateCreateCss;
+
+const unicodeNBSP = ' ';
+const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
+const VerdocsTemplateCreate = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.exit = createEvent(this, "exit", 7);
+        this.next = createEvent(this, "next", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateCreated = createEvent(this, "templateCreated", 7);
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.file = undefined;
+        this.creating = false;
+        this.progressLabel = 'Uploading...';
+        this.progressPercent = 0;
+    }
+    componentWillLoad() {
+        this.endpoint.setTimeout(30000);
+        this.endpoint.loadSession();
+    }
+    handleFileChanged(e) {
+        var _a;
+        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
+        console.log('[CREATE] Selected file', this.file);
+        // this.filePath = e.target.files?.[0]?.name;
+    }
+    handleUpload(e) {
+        e.stopPropagation();
+        const fileElem = document.getElementById('verdocs-template-create-file');
+        fileElem.click();
+    }
+    handleCancel(e) {
+        e.stopPropagation();
+        this.exit.emit();
+    }
+    async handleSubmit(e) {
+        var _a, _b, _c;
+        e.stopPropagation();
+        console.log('Submitting');
+        // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
+        if (!this.file) {
+            return;
+        }
+        this.creating = true;
+        this.progressLabel = 'Uploading...';
+        try {
+            const template = await createTemplatev2(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
+                if (percent >= 99) {
+                    this.progressLabel = 'Processing...';
+                    this.progressPercent = 100;
+                }
+                else {
+                    this.progressPercent = percent;
+                }
+            });
+            console.log('[CREATE] Created template', template);
+            getTemplateStore(this.endpoint, template.id, true)
+                .then(() => {
+                var _a, _b;
+                (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, templateId: template.id });
+                (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit(template);
+                this.creating = false;
+                this.progressLabel = '';
+                this.progressPercent = 0;
+            })
+                .catch(e => {
+                console.log(e);
+            });
+        }
+        catch (e) {
+            console.log('[CREATE] Error creating template', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            this.creating = false;
+        }
+    }
+    render() {
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box", onDrop: (e) => {
+                e.preventDefault();
+                e.target.classList.remove('drag-over');
+                this.file = e.dataTransfer.files[0];
+            }, onDragOver: (e) => {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'copy';
+            }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+                marginTop: '20px',
+                marginBottom: '20px',
+                fontSize: '16px',
+                height: '20px',
+            } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating })))));
+    }
+};
+VerdocsTemplateCreate.style = VerdocsTemplateCreateStyle0;
+
+const verdocsTemplateFieldsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;position:relative;display:block;min-height:600px}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{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-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields #verdocs-template-fields-toolbar{height:50px;display:-ms-flexbox;display:flex;-ms-flex:0 0 50px;flex:0 0 50px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;font-weight:700;padding:0 20px 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#f5f5fa;-ms-flex-pack:center;justify-content:center;background:#46497d}verdocs-template-fields #verdocs-template-fields-toolbar>verdocs-select-input{margin:0}verdocs-template-fields #verdocs-template-fields-toolbar svg{width:24px;height:24px}verdocs-template-fields #verdocs-template-fields-toolbar .add-for{margin:0;font-weight:500;color:#f5f5fa}verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{margin:0 20px 0 0}verdocs-template-fields.placing-attachment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-checkbox_group{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' 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' /%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-radio_button_group{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E\") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url(\"data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A\") 0 14, pointer}verdocs-template-fields.placing-timestamp{cursor:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' 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'%3E%3C/path%3E%3C/svg%3E\") 16 16, pointer}";
+const VerdocsTemplateFieldsStyle0 = verdocsTemplateFieldsCss;
+
+const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
+const iconTextarea = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
+const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
+const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';
+const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
+const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
+const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
+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 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 },
+    { id: 'initial', tooltip: 'Initials', icon: iconInitial },
+    { id: 'sep1', tooltip: '', icon: separator },
+    { id: 'textbox', tooltip: 'Text Box', icon: iconTextbox },
+    { id: 'textarea', tooltip: 'Text Area', icon: iconTextarea },
+    { id: 'checkbox_group', tooltip: 'Check Box', icon: iconCheck },
+    { id: 'radio_button_group', tooltip: 'Radio Button', icon: iconRadio },
+    { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown },
+    { id: 'sep2', tooltip: '', icon: separator },
+    { id: 'date', tooltip: 'Date', icon: iconDatepicker },
+    { id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp },
+    // {id: 'sep3', tooltip: '', icon: separator},
+    // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
+    // {id: 'payment', tooltip: 'Payment', icon: 'P'},
+];
+const VerdocsTemplateFields = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.fieldsUpdated = createEvent(this, "fieldsUpdated", 7);
+        this.pageHeights = {};
+        this.templateStore = null;
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.cachedPageInfo = {};
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = null;
+        this.toolbarTargetId = null;
+        this.placing = null;
+        this.showMustSelectRole = false;
+        this.selectedRoleName = '';
+        this.loading = true;
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[FIELDS] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[FIELDS] Unable to start builder session, must be authenticated');
+                return;
+            }
+            getTemplateStore(this.endpoint, this.templateId, true)
+                .then(ts => {
+                var _a, _b;
+                this.templateStore = ts;
+                this.fieldStore = getTemplateFieldStore(this.templateId);
+                this.roleStore = getTemplateRoleStore(this.templateId);
+                this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
+                this.loading = false;
+                this.fieldStore.onChange('fields', fields => {
+                    var _a;
+                    console.log('[FIELDS] Fields changed', { fields });
+                    (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
+                });
+            })
+                .catch(e => {
+                console.log(e);
+            });
+        }
+        catch (e) {
+            console.log('[FIELDS] Error with preview session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    componentDidRender() {
+        interact.dynamicDrop(true);
+        const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
+        const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
+        if (toolbarTarget && toolbarEl) {
+            console.log('[FIELDS] Moving toolbar');
+            toolbarEl.remove();
+            toolbarTarget.append(toolbarEl);
+        }
+    }
+    componentWillUpdate() {
+        var _a;
+        // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
+        const roles = this.roleStore.get('roles');
+        if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
+            this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
+            console.log('[FIELDS] Selected new role', this.selectedRoleName);
+        }
+    }
+    // Stop field-placement mode if ESC is pressed
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.placing = null;
+        }
+    }
+    async handleFieldChange(field, e, optionId) {
+        console.log('[FIELDS] handleFieldChange', field, e, optionId);
+    }
+    attachFieldAttributes(pageInfo, field, el) {
+        el.addEventListener('input', e => this.handleFieldChange(field, e));
+        el.addEventListener('settingsChanged', e => {
+            var _a, _b;
+            console.log('Settings changed', e.detail);
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
+        });
+        el.addEventListener('deleted', () => {
+            var _a, _b;
+            console.log('[FIELDS] Deleted', this, field);
+            el.remove();
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+        });
+        el.setAttribute('templateid', this.templateId);
+        el.setAttribute('fieldname', field.name);
+        el.setAttribute('pageNumber', pageInfo.pageNumber);
+        el.setAttribute('xScale', pageInfo.xScale);
+        el.setAttribute('yScale', pageInfo.yScale);
+        el.setAttribute('name', field.name);
+    }
+    handlePageRendered(e) {
+        const pageInfo = e.detail;
+        // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);
+        this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
+        this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
+        this.fieldStore
+            .get('fields')
+            .filter(field => field && field.page === pageInfo.pageNumber)
+            .forEach(field => {
+            // TODO: Why isn't the attr already on the element carrying through?
+            switch (field.type) {
+                case 'checkbox_group':
+                case 'radio_button_group':
+                    (field.settings || {}).options.map((_, index) => {
+                        const id = getFieldOptionId(field, index);
+                        const el = document.getElementById(id);
+                        if (el) {
+                            el.setAttribute('fieldname', field.name);
+                            el.setAttribute('pagenumber', String(field.page));
+                            this.makeDraggable(el);
+                        }
+                    });
+                    break;
+                default:
+                    const id = getFieldId(field);
+                    const el = document.getElementById(id);
+                    if (el) {
+                        el.setAttribute('fieldname', field.name);
+                        el.setAttribute('pagenumber', String(field.page));
+                        this.makeDraggable(el);
+                    }
+                    break;
+            }
+        });
+    }
+    makeDraggable(el) {
+        interact(el).draggable({
+            listeners: {
+                move: this.handleMoveField.bind(this),
+                end: this.handleMoveEnd.bind(this),
+            },
+        });
+    }
+    async handleMoveField(event) {
+        const oldX = +(event.target.getAttribute('posX') || 0);
+        const oldY = +(event.target.getAttribute('posY') || 0);
+        const xScale = +(event.target.getAttribute('xScale') || 1);
+        const yScale = +(event.target.getAttribute('yScale') || 1);
+        const newX = event.dx / xScale + oldX;
+        const newY = event.dy / yScale + oldY;
+        event.target.setAttribute('posX', newX);
+        event.target.setAttribute('posy', newY);
+        updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+    }
+    async handleMoveEnd(event) {
+        var _a, _b;
+        const name = event.target.getAttribute('fieldname');
+        const option = +(event.target.getAttribute('option') || '0');
+        const field = this.fieldStore.get('fields').find(field => field.name === name);
+        if (!field) {
+            console.log('[FIELDS] Unable to find field', name, event.target);
+            return;
+        }
+        const pageNumber = event.target.getAttribute('pagenumber');
+        const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
+        const clientRect = event.target.getBoundingClientRect();
+        const parent = event.target.parentElement;
+        const parentRect = parent.getBoundingClientRect();
+        const width = field.settings.width || defaultWidth(field.type);
+        const height = field.settings.height || defaultHeight(field.type);
+        // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
+        // "up" from the bottom (negative displacement).
+        const newX = Math.max(clientRect.left - parentRect.left, 0);
+        const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
+        const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
+        switch (field.type) {
+            case 'attachment':
+            case 'payment':
+            case 'initial':
+            case 'signature':
+            case 'date':
+            case 'dropdown':
+            case 'textarea':
+            case 'textbox':
+            case 'timestamp':
+                field.settings.x = x;
+                field.settings.y = y;
+                break;
+            case 'checkbox_group':
+            case 'radio_button_group':
+                {
+                    const opt = field.settings.options[option];
+                    if (opt) {
+                        opt.x = x;
+                        opt.y = y;
+                    }
+                }
+                break;
+        }
+        console.log('[FIELDS] Will update', name, y, option, field);
+        const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
+        updateStoreField(this.fieldStore, name, newFieldData);
+        event.target.removeAttribute('posX');
+        event.target.removeAttribute('posY');
+        removeCssTransform(event.target);
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+    }
+    generateFieldName(type, pageNumber) {
+        let i = 1;
+        let fieldName;
+        do {
+            fieldName = `${type}P${pageNumber}-${i}`;
+            i++;
+        } while (this.fieldStore.get('fields').some(field => field && field.name === fieldName));
+        return fieldName;
+    }
+    // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
+    viewCoordinatesToPageCoordinates(viewX, viewY, pageNumber, xMax, yMax) {
+        const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
+        const x = Math.floor(Math.min(viewX / xScale, xMax));
+        const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
+        return { x, y };
+    }
+    async handleClickPage(e, pageNumber) {
+        var _a, _b;
+        if (this.placing) {
+            const clickedX = e.offsetX;
+            const clickedY = e.offsetY;
+            const width = defaultWidth(this.placing);
+            const height = defaultHeight(this.placing);
+            const cachedPage = this.cachedPageInfo[pageNumber];
+            const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
+            const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
+            const x = Math.floor(coords.x);
+            const y = Math.floor(coords.y);
+            const field = {
+                name: this.generateFieldName(this.placing, pageNumber), //  'textboxP1-22',
+                role_name: this.selectedRoleName,
+                template_id: this.templateId,
+                document_id: cachedPage.documentId,
+                type: this.placing,
+                required: true,
+                page: pageNumber,
+                validator: null,
+                label: null,
+                default: null,
+                placeholder: null,
+                group: null,
+                settings: { x, y }, // In the future, this is all we should send, see below
+                x,
+                y,
+                width,
+                height,
+            };
+            console.log('[FIELDS] Will save new field', field);
+            // TODO: Fix how the server validates all this. It uses a JSON schema and is very particular about shapes for each field type.
+            //  That makes it harder for third party developers to create fields via API calls. It would be better to always set X/Y and
+            //  let the server normalize the rest, discarding properties that are invalid and back-filling defaults as needed.
+            switch (field.type) {
+                case 'attachment':
+                case 'payment':
+                    field.settings = { x, y };
+                    break;
+                case 'initial':
+                case 'signature':
+                    field.settings = { x, y, result: '' };
+                    break;
+                case 'checkbox_group':
+                    // @ts-ignore
+                    field.setting = {
+                        minimum_checked: 0,
+                        maximum_checked: 1000,
+                        options: [
+                            {
+                                id: `${field.name}-1`,
+                                value: 'Option 1',
+                                checked: false,
+                                x,
+                                y,
+                            },
+                        ],
+                    };
+                    break;
+                case 'date':
+                    field.settings = { x, y, width, height, result: '' };
+                    break;
+                case 'dropdown':
+                    field.required = false;
+                    field.settings = { x, y, width, height, value: null, placeholder: 'Choose', options: [{ id: 'option-1', value: 'Option 1' }] };
+                    break;
+                case 'radio_button_group':
+                    // @ts-ignore
+                    field.setting = {
+                        options: [
+                            {
+                                id: `${field.name}-1`,
+                                value: 'Option 1',
+                                selected: false,
+                                x,
+                                y,
+                            },
+                        ],
+                    };
+                    break;
+                // TODO: What about textareas?
+                case 'textarea':
+                case 'textbox':
+                    field.settings = { x, y, width, height, result: '', leading: 0, alignment: 0, upperCase: false };
+                    break;
+                case 'timestamp':
+                    field.settings = { x, y, width, height };
+                    break;
+            }
+            // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
+            // as a textbox with a leading>0 (typically 16).
+            if (field.type === 'textarea') {
+                field.settings.leading = 16;
+                field.type = 'textbox';
+            }
+            const saved = await createField(this.endpoint, this.templateId, field);
+            console.log('[FIELDS] Saved field', saved);
+            this.fieldStore.set('fields', [...this.fieldStore.get('fields'), saved]);
+            this.placing = null;
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
+        const selectableRoles = this.roleStore.get('roles').map(role => ({ value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name }));
+        return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, onSubmit: () => { } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
+                // We ignore empty-tooltip entries because they're separators
+                if (option.tooltip) {
+                    // We require a role to be selected first
+                    if (this.selectedRoleName) {
+                        this.placing = option.id;
+                    }
+                    else {
+                        this.showMustSelectRole = true;
+                    }
+                }
+            } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
+            const pageNumbers = integerSequence(1, document.pages);
+            return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+                    { name: 'page', type: 'canvas' },
+                    { name: 'controls', type: 'div' },
+                ] })));
+        })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
+    }
+};
+VerdocsTemplateFields.style = VerdocsTemplateFieldsStyle0;
+
+const verdocsTemplateNameCss = "";
+const VerdocsTemplateNameStyle0 = verdocsTemplateNameCss;
+
+const VerdocsTemplateName = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.store = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.name = '';
+        this.dirty = false;
+    }
+    async componentWillLoad() {
+        var _a, _b, _c, _d, _e;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[ROLES] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+            this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
+            this.dirty = false;
+        }
+        catch (e) {
+            console.log('[TEMPLATE NAME] Error loading template', e);
+            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+        }
+    }
+    handleCancel(e) {
+        var _a, _b, _c;
+        e.stopPropagation();
+        this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
+        this.dirty = false;
+        console.log('Closing');
+        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
+    }
+    async handleSave(e) {
+        var _a, _b, _c;
+        e.stopPropagation();
+        await updateTemplate(this.endpoint, this.templateId, { name: this.name });
+        if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
+            this.store.state.name = this.name;
+        }
+        this.dirty = false;
+        (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.store.state, event: 'name' });
+        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
+    }
+    render() {
+        var _a, _b;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoading) {
+            return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
+        }
+        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), h("verdocs-text-input", { id: "verdocs-template-name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
+                var _a, _b;
+                this.name = e.target.value;
+                this.dirty = this.name !== ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name);
+            } }), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+    }
+};
+VerdocsTemplateName.style = VerdocsTemplateNameStyle0;
+
+const verdocsTemplateRemindersCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-reminders{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-reminders.loading{min-height:300px;position:relative;display:block}verdocs-template-reminders.empty{display:none}verdocs-template-reminders form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-reminders form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 20px 0}verdocs-template-reminders form label{font-size:16px;font-weight:500;margin:0 0 6px 0;color:#33364b}verdocs-template-reminders form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-reminders form input:focus{outline:none}verdocs-template-reminders form .input-row{display:-ms-flexbox;display:flex;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-reminders form .input-row label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-reminders form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px}verdocs-template-reminders form .input-row verdocs-text-input input{text-align:center}verdocs-template-reminders form .input-row verdocs-checkbox{display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px;-ms-flex-pack:center;justify-content:center}verdocs-template-reminders .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-reminders ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-reminders ::-moz-placeholder{color:#aaaaaa}verdocs-template-reminders :-ms-input-placeholder{color:#aaaaaa}verdocs-template-reminders ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-reminders ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateRemindersStyle0 = verdocsTemplateRemindersCss;
+
+const VerdocsTemplateReminders = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.store = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.showPlanBlocker = false;
+        this.sendReminders = false;
+        this.firstReminderDays = '1';
+        this.reminderDays = '1';
+        this.dirty = false;
+    }
+    // POST https://api.verdocs.com/templates/8337af06-3b5a-4e1b-98be-67d82bc7ecd1/reminder
+    // interval_time: 1,
+    // setup_time:1,
+    async componentWillLoad() {
+        var _a, _b, _c, _d, _e;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[ROLES] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+            this.sendReminders = !!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id);
+            this.dirty = false;
+        }
+        catch (e) {
+            console.log('[TEMPLATE REMINDERS] Error loading template', e);
+            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+        }
+    }
+    handleCancel(e) {
+        var _a, _b, _c;
+        e.stopPropagation();
+        this.sendReminders = !!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id);
+        this.dirty = false;
+        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
+    }
+    async handleSave(e) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        e.stopPropagation();
+        try {
+            if (this.sendReminders) {
+                const params = {
+                    setup_time: +this.firstReminderDays,
+                    interval_time: +this.reminderDays,
+                };
+                if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.reminder_id)) {
+                    await createTemplateReminder(this.endpoint, this.templateId, params);
+                    this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+                }
+                else {
+                    await updateTemplateReminder(this.endpoint, this.templateId, (_c = this.store) === null || _c === void 0 ? void 0 : _c.state.reminder_id, params);
+                    this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+                }
+            }
+            else {
+                await deleteTemplateReminder(this.endpoint, this.templateId, (_d = this.store) === null || _d === void 0 ? void 0 : _d.state.reminder_id);
+                this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+            }
+            (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: this.store.state, event: 'attachments' });
+        }
+        catch (e) {
+            console.log('[TEMPLATE REMINDERS] Unable to update reminders', e);
+            VerdocsToast(e.message);
+            (_f = this.sdkError) === null || _f === void 0 ? void 0 : _f.emit(new SDKError(e.message, (_g = e.response) === null || _g === void 0 ? void 0 : _g.status, (_h = e.response) === null || _h === void 0 ? void 0 : _h.data));
+        }
+        this.dirty = false;
+        (_j = this.close) === null || _j === void 0 ? void 0 : _j.emit();
+    }
+    render() {
+        var _a, _b;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+        if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
+            return h(Host, { class: "empty" });
+        }
+        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Reminders"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-send-reminders" }, "Send Automatic Reminders"), h("verdocs-checkbox", { id: "verdocs-send-reminders", name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => {
+                // this.showPlanBlocker = true;
+                // e.target.checked = false;
+                this.sendReminders = e.target.checked;
+                this.dirty = true;
+            } })), h("p", null, h("strong", null, "NOTE:"), " Reminders will only be sent for up to 14 days."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-first-reminder-days" }, "Days Before First Reminder"), h("verdocs-text-input", { id: "verdocs-first-reminder-days", type: "number", value: this.firstReminderDays, onInput: (e) => {
+                this.firstReminderDays = e.target.value;
+                this.dirty = true;
+            }, disabled: !this.sendReminders })), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-days-between-reminders" }, "Days Between Reminders"), h("verdocs-text-input", { id: "verdocs-days-between-reminders", type: "number", value: this.reminderDays, onInput: (e) => {
+                this.reminderDays = e.target.value;
+                this.dirty = true;
+            }, disabled: !this.sendReminders })), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) }))), this.showPlanBlocker && (h("verdocs-ok-dialog", { heading: "Upgrade to access this feature", message: "Please upgrade your plan to access this feature.", onNext: () => (this.showPlanBlocker = false) }))));
+    }
+};
+VerdocsTemplateReminders.style = VerdocsTemplateRemindersStyle0;
+
+const verdocsTemplateRolesCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 15px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{display:-ms-flexbox;display:flex;cursor:pointer;margin:0 0 0 9px}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:2px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:rgba(101, 77, 203, 0.4980392157);border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:rgba(101, 77, 203, 0.4980392157);-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .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-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateRolesStyle0 = verdocsTemplateRolesCss;
+
+const senderLabels = {
+    everyone: 'Everyone',
+    everyone_as_creator: 'Everyone as Me',
+    organization_member: 'Organization member',
+    organization_member_as_creator: 'Organization Member as Me',
+    creator: 'Me',
+};
+const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="#00000089"><path d="m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z"/></svg>';
+const startIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';
+const stepIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';
+const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="#00000089"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';
+const plusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>`;
+const iconSigner = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
+const iconApprover = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>`;
+const iconCC = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" /><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" /></svg>`;
+const VerdocsTemplateRoles = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.next = createEvent(this, "next", 7);
+        this.exit = createEvent(this, "exit", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.rolesUpdated = createEvent(this, "rolesUpdated", 7);
+        this.templateStore = null;
+        this.roleStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.showingRoleDialog = null;
+        this.showingSenderDialog = false;
+        this.sender = null;
+        this.loading = true;
+    }
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[ROLES] Unable to start builder session, must be authenticated');
+                return;
+            }
+            await getTemplateStore(this.endpoint, this.templateId, false)
+                .then(ts => {
+                var _a;
+                this.templateStore = ts;
+                this.roleStore = getTemplateRoleStore(this.templateId);
+                console.log('RS', (_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.state);
+                this.loading = false;
+                this.roleStore.onChange('roles', roles => {
+                    var _a;
+                    console.log('[ROLES] Roles changed', { roles });
+                    (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles });
+                });
+            })
+                .catch(e => {
+                console.log(e);
+            });
+        }
+        catch (e) {
+            console.log('[FIELDS] Error with preview session', e);
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+        }
+    }
+    componentDidRender() {
+        interact.dynamicDrop(true);
+        interact('.recipient').draggable({
+            listeners: {
+                start: function handleStart(e) {
+                    e.target.classList.add('dragging');
+                    this.el.classList.add('dragging');
+                }.bind(this),
+                move: function handleMove(e) {
+                    const oldX = +(e.target.getAttribute('dX') || 0);
+                    const oldY = +(e.target.getAttribute('dY') || 0);
+                    const sequence = +(e.target.dataset['sequence'] || 0);
+                    const order = +(e.target.dataset['order'] || 0);
+                    const newX = e.dx + oldX;
+                    const newY = e.dy + oldY;
+                    e.target.setAttribute('dX', newX);
+                    e.target.setAttribute('dY', newY);
+                    const rect = e.target.getBoundingClientRect();
+                    // Note: I never did figure out exactly why this is, but if we don't offset the transform
+                    // the dragged item is offset from the mouse cursor quite a bit.
+                    console.log('w', rect.width);
+                    e.target.style.transform = `translate(${newX + rect.width - (order + 1)}px, ${newY - rect.height * sequence}px)`;
+                }.bind(this),
+                end: function handleEnd(e) {
+                    e.target.classList.remove('dragging');
+                    this.el.classList.remove('dragging');
+                    // console.log('end', event);
+                    e.target.removeAttribute('dX');
+                    e.target.removeAttribute('dY');
+                    e.target.style.transform = null;
+                }.bind(this),
+            },
+        });
+        interact('.dropzone').dropzone({
+            overlap: 0.05,
+            ondrop: async function onDrop(event) {
+                var _a;
+                console.log('dropped', event.target.classList);
+                event.target.classList.remove('active');
+                const roleName = event.relatedTarget.dataset.rolename;
+                const targetSequence = +event.target.dataset.sequence;
+                const targetOrder = +event.target.dataset.order;
+                updateStoreRole(this.roleStore, roleName, { sequence: targetSequence, order: targetOrder });
+                await this.renumberTemplateRoles();
+                console.log('[ROLES] Updated roles', this.getSortedRoles());
+                (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
+            }.bind(this),
+            ondropactivate: e => {
+                e.target.classList.add('visible');
+            },
+            ondropdeactivate: e => {
+                e.target.classList.remove('visible');
+            },
+            ondragenter: e => {
+                e.target.classList.add('active');
+            },
+            ondragleave: e => {
+                e.target.classList.remove('active');
+            },
+        });
+    }
+    handleCancel() {
+        var _a;
+        (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    handleSubmit() {
+        var _a;
+        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+    getSortedRoles() {
+        return this.roleStore.state.roles.sort((a, b) => {
+            return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
+        });
+    }
+    getSequenceNumbers() {
+        const sequences = [];
+        this.getSortedRoles().forEach(role => {
+            if (!sequences.includes(role.sequence)) {
+                sequences.push(role.sequence);
+            }
+        });
+        return sequences.sort((a, b) => a - b);
+    }
+    getRoleNames() {
+        const roles = this.getSortedRoles();
+        return roles.map(role => role.name);
+    }
+    getRolesAtSequence(sequence) {
+        // Entries can be undefined when deleted because Stencil has no remove() operator yet for stores.
+        // See https://github.com/ionic-team/stencil-store/issues/23
+        return this.roleStore.state.roles.filter(role => role && role.sequence === sequence);
+    }
+    // When the user drags a role around, we handle placement "between" items by assigning it a half-order number
+    // e.g. 1.5 to place it between items 1 and 2, 0.5 to place it at the beginning, or last+0.5 to place it at the end.
+    // Then we re-sort the list of roles and renumber them.
+    renumberTemplateRoles() {
+        // console.log('Renumbering roles', this.getSequenceNumbers(), JSON.stringify(this.roleStore.state));
+        // Avoid dupe renumber attempts
+        const renumbered = [];
+        // If the user dragged an entry from below a row to above it, we end up here like [1,0]. Make sure it's [0,1] for the next operation.
+        const renumberRequests = [];
+        this.getSequenceNumbers().forEach((originalSequence, newSequenceIndex) => {
+            this.getRolesAtSequence(originalSequence).forEach((role, newOrderIndex) => {
+                if (!renumbered.includes(role.name)) {
+                    role.sequence = newSequenceIndex + 1;
+                    role.order = newOrderIndex + 1;
+                    renumbered.push(role.name);
+                    renumberRequests.push(updateTemplateRole(this.endpoint, this.templateId, role.name, { sequence: role.sequence, order: role.order }));
+                }
+            });
+        });
+        return Promise.all(renumberRequests);
+    }
+    // Look for name conflicts, because they're UGC and can be anything, regardless of order.
+    getNextRoleName() {
+        let name = '';
+        let nextNumber = Object.keys(this.roleStore.state).length - 1;
+        do {
+            nextNumber++;
+            name = `Recipient ${nextNumber}`;
+        } while (!name || this.roleStore.state.roles.some(role => role && role.name === name));
+        return name;
+    }
+    callCreateRole(name, sequence, order) {
+        console.log('[ROLES] Will create role', { name, sequence, order });
+        createTemplateRole(this.endpoint, this.templateId, {
+            template_id: this.templateId,
+            name,
+            sequence,
+            message: '',
+            order,
+            full_name: '',
+            email: '',
+            phone: '',
+            type: 'signer',
+            delegator: false,
+        })
+            .then(async (r) => {
+            var _a;
+            console.log('[ROLES] Created role', r);
+            this.roleStore.set('roles', [...this.roleStore.state.roles, r]);
+            await this.renumberTemplateRoles();
+            (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'added', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
+        })
+            .catch(e => {
+            console.log('[ROLES] Error creating role', e);
+        });
+    }
+    handleAddRole(e, sequence) {
+        e.stopPropagation();
+        const order = this.getRolesAtSequence(sequence).length + 1;
+        const name = this.getNextRoleName();
+        this.callCreateRole(name, sequence, order);
+    }
+    handleAddStep(e, sequence) {
+        e.stopPropagation();
+        const order = 1;
+        const name = this.getNextRoleName();
+        this.callCreateRole(name, sequence, order);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        if (this.loading || !((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
+            console.log('Loading', this.loading, (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state.isLoaded);
+            return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
+        }
+        console.log('Rendering roles', this.roleStore.get('roles'));
+        const roleNames = this.getRoleNames();
+        const sequences = this.getSequenceNumbers();
+        console.log('Rendering', roleNames, sequences);
+        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[(_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
+            const unknown = !role.email;
+            return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+        }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+                this.showingRoleDialog = null;
+            }, onDelete: async () => {
+                var _a;
+                this.showingRoleDialog = null;
+                await this.renumberTemplateRoles();
+                (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'deleted', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
+            } })), this.showingSenderDialog && h("verdocs-template-sender", { endpoint: this.endpoint, templateId: this.templateId, onClose: () => (this.showingSenderDialog = false) })));
+    }
+    get el() { return getElement(this); }
+};
+VerdocsTemplateRoles.style = VerdocsTemplateRolesStyle0;
+
+const verdocsTemplateVisibilityCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-visibility{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-visibility.loading{min-height:300px;position:relative;display:block}verdocs-template-visibility.empty{display:none}verdocs-template-visibility form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-visibility form .description{font-size:14px;text-align:justify;color:#5c6575}verdocs-template-visibility form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0}verdocs-template-visibility form label{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:16px;font-weight:500;margin:0 0 4px 0;color:#33364b}verdocs-template-visibility form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-visibility form input:focus{outline:none}verdocs-template-visibility form .input-row{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility form .input-row verdocs-text-input{margin:0;display:-ms-flexbox;display:flex;-ms-flex:0 0 40px;flex:0 0 40px}verdocs-template-visibility form .input-row verdocs-text-input input{text-align:center}verdocs-template-visibility form .input-row verdocs-checkbox{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}verdocs-template-visibility form .input-row verdocs-checkbox label>input[type=checkbox]+*::before{margin-right:0}verdocs-template-visibility .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:25px;-ms-flex-direction:row;flex-direction:row}verdocs-template-visibility ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-moz-placeholder{color:#aaaaaa}verdocs-template-visibility :-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-visibility ::placeholder{color:#aaaaaa}";
+const VerdocsTemplateVisibilityStyle0 = verdocsTemplateVisibilityCss;
+
+const VerdocsTemplateVisibility = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 7);
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.templateUpdated = createEvent(this, "templateUpdated", 7);
+        this.store = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.templateId = '';
+        this.dirty = false;
+        this.personal = false;
+        this.public = false;
+    }
+    async componentWillLoad() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        try {
+            this.endpoint.loadSession();
+            if (!this.templateId) {
+                console.log(`[VISIBILITY] Missing required template ID ${this.templateId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[VISIBILITY] Unable to start builder session, must be authenticated');
+                return;
+            }
+            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+            this.personal = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_personal) || true;
+            this.public = ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_public) || false;
+            this.dirty = false;
+        }
+        catch (e) {
+            console.log('[TEMPLATE VISIBILITY] Error loading template', e);
+            (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+        }
+    }
+    handleCancel(e) {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        this.personal = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_personal;
+        this.public = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_public;
+        this.dirty = false;
+        (_e = this.close) === null || _e === void 0 ? void 0 : _e.emit();
+    }
+    async handleSave(e) {
+        var _a, _b, _c;
+        e.stopPropagation();
+        await updateTemplate(this.endpoint, this.templateId, { is_personal: this.personal, is_public: this.public });
+        if ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state) {
+            this.store.state.is_personal = this.personal;
+            this.store.state.is_public = this.public;
+        }
+        this.dirty = false;
+        (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: this.store.state, event: 'visibility' });
+        (_c = this.close) === null || _c === void 0 ? void 0 : _c.emit();
+    }
+    render() {
+        var _a, _b;
+        if (!this.endpoint.session) {
+            return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+        }
+        // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+        if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
+            return h(Host, { class: "empty" });
+        }
+        return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Visibility"), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-shared" }, "Shared"), h("verdocs-checkbox", { id: "verdocs-is-shared", name: "is-shared", checked: !this.personal, value: "on", onInput: (e) => {
+                this.personal = !e.target.checked;
+                this.dirty = true;
+            } })), h("div", { class: "description" }, "Shared templates are visible to other members of your Organization (if any)."), h("div", { class: "input-row" }, h("label", { htmlFor: "verdocs-is-public" }, "Public"), h("verdocs-checkbox", { id: "verdocs-is-public", name: "is-public", checked: this.public, value: "on", onInput: (e) => {
+                this.public = e.target.checked;
+                this.dirty = true;
+            } })), h("div", { class: "description" }, "Public templates may appear in results when any other user searches for templates. Note that a template may be both Personal and Public, which may be useful if you want your template to be found via search but not otherwise displayed to other members of your Organization (if any)."), h("div", { class: "buttons" }, h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+    }
+};
+VerdocsTemplateVisibility.style = VerdocsTemplateVisibilityStyle0;
+
+export { VerdocsPreview as verdocs_preview, VerdocsSend as verdocs_send, VerdocsTemplateAttachments as verdocs_template_attachments, VerdocsTemplateBuildTabs as verdocs_template_build_tabs, VerdocsTemplateCreate as verdocs_template_create, VerdocsTemplateFields as verdocs_template_fields, VerdocsTemplateName as verdocs_template_name, VerdocsTemplateReminders as verdocs_template_reminders, VerdocsTemplateRoles as verdocs_template_roles, VerdocsTemplateVisibility as verdocs_template_visibility };