@verdocs/web-sdk 1.9.9 → 1.9.14

package/dist/esm/verdocs-template-create_4.entry.js

@@ -1,22 +1,53 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-f78d163d.js';
-import { c as createPage, l as loadTemplate } from './Templates-035e0ea2.js';
 import { c as createTemplate, g as getTemplate } from './Templates-f7c590c0.js';
-import { c as createTemplateDocument } from './TemplateDocuments-89ba2276.js';
 import { T as TemplateSenderTypes } from './Types-ab9f6af8.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint-82f4600d.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint-dac04424.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils-3f23facc.js';
-import { s as state } from './templateStore-3b26e38d.js';
+import { r as renderDocumentField, a as getRoleIndex, u as updateCssTransform } from './utils-99a3c1f0.js';
+import { s as state } from './templateStore-96a39844.js';
+import { l as loadTemplate } from './Templates-1034fade.js';
+import './index-fd7b8a34.js';
+
+/**
+ * A TemplateDocument represents a PDF or other attachment in a Template.
+ *
+ * @module
+ */
+/**
+ * Create a Document for a particular Template.
+ *
+ * ```typescript
+ * import {TemplateDocument} from '@verdocs/js-sdk/Templates';
+ *
+ * await TemplateDocument.createDocument((VerdocsEndpoint.getDefault(), templateID, params);
+ * ```
+ */
+var createTemplateDocument = function (endpoint, templateId, file, onUploadProgress) {
+    var formData = new FormData();
+    formData.append('document', file, file.name);
+    return endpoint.api //
+        .post("/templates/".concat(templateId, "/documents"), formData, {
+        timeout: 10000,
+        onUploadProgress: function (event) {
+            var total = event.total || 1;
+            var loaded = event.loaded || 0;
+            onUploadProgress === null || onUploadProgress === void 0 ? void 0 : onUploadProgress(Math.floor((loaded * 100) / (total || 1)), loaded, total || 1);
+        },
+    })
+        .then(function (r) { return r.data; });
+};
 
 const verdocsTemplateCreateCss = "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{max-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 svg{width:64px;fill:#5c6575}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}";
 
+// import {ITemplate, ITemplateDocument} from '@verdocs/js-sdk/Templates/Types';
+// import {createPage} from '@verdocs/js-sdk/Templates/Pages';
 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.cancel = createEvent(this, "cancel", 7);
-    this.templateCreated = createEvent(this, "templateCreated", 7);
+    this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.file = undefined;
@@ -51,13 +82,14 @@ const VerdocsTemplateCreate = class {
       console.log('created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('created document', template_document);
-      for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
-        console.log('Updating page', pageNumber);
-        const page = await createPage(this.endpoint, template.id, { sequence: pageNumber, page_number: pageNumber, document_id: template_document.id });
-        console.log('Created page', page);
-      }
-      (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ template, template_document });
-      // this.fileUploaded?.emit({filePath: this.filePath});
+      const finalTemplate = await getTemplate(this.endpoint, template.id);
+      console.log('[CREATE] Created template', finalTemplate);
+      // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
+      //   console.log('Updating page', pageNumber);
+      //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
+      //   console.log('Created page', page);
+      // }
+      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
     }
     catch (e) {
       console.log('[TEMPLATE-CREATE] Error creating template', e);
@@ -65,7 +97,7 @@ const VerdocsTemplateCreate = class {
     }
   }
   render() {
-    return (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) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, "Drag a file here"), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px' } }, "Or, if you prefer..."), h("verdocs-button", { label: "Select a file from your computer", size: "small", onPress: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "Next", size: "small", onPress: e => this.handleSubmit(e), disabled: !this.file }))));
+    return (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) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, "Drag a file here"), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px' } }, "Or, if you prefer..."), h("verdocs-button", { label: "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) }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file }))));
   }
 };
 VerdocsTemplateCreate.style = verdocsTemplateCreateCss;
@@ -96,27 +128,8 @@ var interact_min = createCommonjsModule(function (module, exports) {
 
 const interact = /*@__PURE__*/getDefaultExportFromCjs(interact_min);
 
-const verdocsTemplateFieldsCss = "verdocs-template-fields{position:relative;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}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 #0000000f;box-shadow:0 0 10px 5px #0000000f}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 .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}";
+const verdocsTemplateFieldsCss = "verdocs-template-fields{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}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 #0000000f;box-shadow:0 0 10px 5px #0000000f}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 .fields-bar{height:50px;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;padding:5px 20px;line-height:28px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#46497d}verdocs-template-fields .fields-bar .label{color:#ffffff;font-size:14px;font-weight:bold;margin-right:8px}verdocs-template-fields .fields-bar .icon{margin:0 4px;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8, 0.8);transform:scale(0.8, 0.8)}verdocs-template-fields .fields-bar .icon svg{fill:#ffffff}verdocs-template-fields .fields-bar .operation{border:none;outline:none;color:#ffffff;cursor:pointer;font-size:16px;margin-left:10px;background:transparent;text-transform:uppercase}verdocs-template-fields .fields-bar .operation:disabled{color:#cccccc;cursor:inherit;pointer-events:none}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}";
 
-/**
- * Helper function to safely set/update components in a CSS transform attribute. Transform is normally set as a string of
- * `operation1(param) operation2(param) ...` components, which makes updating them a bit of a pain. This will remove the
- * specified component if it's already set and replace it with the new value, without touching the other components that
- * may already be set. Note that this operation moves the component to the end of the transform chain so it's not meant
- * to be used for order-sensitive components e.g. translate-then-rotate.
- */
-const updateCssTransform = (el, key, value) => {
-  // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-};
 const iconSingleline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconMultiline = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path 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 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>';
@@ -127,7 +140,7 @@ const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="
 const VerdocsTemplateFields = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
+    this.next = createEvent(this, "next", 7);
     this.cancel = createEvent(this, "cancel", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -168,11 +181,11 @@ const VerdocsTemplateFields = class {
   handlePageRendered(e) {
     const pageInfo = e.detail;
     console.log('[FIELDS] Page rendered', pageInfo);
-    const fields = state.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
+    const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     console.log('[FIELDS] Fields on page', fields);
     fields.forEach(field => {
-      const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
+      const el = renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), this.handleFieldChange, true, true, true);
       // const el = renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(this.roles, field.role_name), this.handleFieldChange, true, true, true);
       if (!el) {
         return;
@@ -181,8 +194,8 @@ const VerdocsTemplateFields = class {
         el.setAttribute('roleindex', getRoleIndex(state.roleNames, e.detail));
         // el.setAttribute('roleindex', getRoleIndex(this.roles, e.detail));
       });
-      el.setAttribute('xScale', pageInfo.renderedPage.xScale);
-      el.setAttribute('yScale', pageInfo.renderedPage.yScale);
+      el.setAttribute('xScale', pageInfo.xScale);
+      el.setAttribute('yScale', pageInfo.yScale);
       interact(el).draggable({
         listeners: {
           start(event) {
@@ -222,13 +235,19 @@ const VerdocsTemplateFields = class {
       },
       page_sequence: 0,
     };
-    if (state.loading) {
+    // TODO: Render a better error
+    if (state.loading || !state.template) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, null, state.template ? (h(Fragment, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onPress: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onPress: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onPress: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onPress: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onPress: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onPress: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onPress: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => console.log('save'), disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => console.log('close'), class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("verdocs-view", { templateId: this.templateId, endpoint: this.endpoint, onPageRendered: e => this.handlePageRendered(e), pageLayers: [
-        { name: 'page', type: 'canvas' },
-        { name: 'controls', type: 'div' },
-      ] }))) : (h("div", null, "Error loading Template. Please try again later."))));
+    const pages = [...state.template.pages];
+    pages.sort((a, b) => a.sequence - b.sequence);
+    return (h(Host, null, h("div", { class: "fields-bar", ref: el => (this.toolbarEl = el) }, h("div", { class: "label" }, "Add Field:"), h("verdocs-toolbar-icon", { icon: iconSingleline, text: "Single-line Text Box", onClick: () => console.log('single press') }), h("verdocs-toolbar-icon", { icon: iconMultiline, text: "Multi-line Text Box", onClick: () => console.log('multi press') }), h("verdocs-toolbar-icon", { icon: iconCheck, text: "Checkbox", onClick: () => console.log('check press') }), h("verdocs-toolbar-icon", { icon: iconRadio, text: "Radio Button", onClick: () => console.log('radio press') }), h("verdocs-toolbar-icon", { icon: iconDatepicker, text: "Date Picker", onClick: () => console.log('date press') }), h("verdocs-toolbar-icon", { icon: iconSignature, text: "Signature", onClick: () => console.log('signature press') }), h("verdocs-toolbar-icon", { icon: iconInitial, text: "Initials", onClick: () => console.log('initial press') }), h("div", { style: { flex: '1' } }), h("button", { onClick: () => { var _a; return (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(state.template); }, disabled: true, class: "operation" }, "Save"), h("button", { onClick: () => { var _a; return (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit(); }, class: "operation" }, "Close")), h("div", { class: "page-0", ref: el => (this.page0El = el) }, h("div", { class: "user-placed-fields" }, h("div", { class: "title" }, "User-Placed Fields"), h("verdocs-field-signature", { field: testField, style: { width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0) }, moveable: true, editable: true }))), h("div", { class: "pages" }, pages.map(page => {
+      console.log('rendering page', page);
+      return (h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
+          { name: 'page', type: 'canvas' },
+          { name: 'controls', type: 'div' },
+        ] }));
+    }))));
   }
 };
 VerdocsTemplateFields.style = verdocsTemplateFieldsCss;
@@ -239,7 +258,7 @@ const VerdocsTemplateProperties = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.cancel = createEvent(this, "cancel", 7);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
+    this.next = createEvent(this, "next", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
@@ -271,10 +290,6 @@ const VerdocsTemplateProperties = class {
       (_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));
     }
   }
-  handleMessageChange(e) {
-    console.log(e);
-    // this.message = e.target.value;
-  }
   handleCancel(e) {
     var _a;
     e.stopPropagation();
@@ -283,32 +298,15 @@ const VerdocsTemplateProperties = class {
   handleSubmit(e) {
     var _a;
     e.stopPropagation();
-    console.log('new', {
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       name: this.name,
-      visibility: this.visibility,
       firstReminderDays: +this.firstReminderDays,
       reminderDays: +this.reminderDays,
       sendReminders: this.sendReminders,
     });
-    (_a = this.settingsUpdated) === null || _a === void 0 ? void 0 : _a.emit({
-      name: this.name,
-      firstReminderDays: +this.firstReminderDays,
-      reminderDays: +this.reminderDays,
-      sendReminders: this.sendReminders,
-    });
-    // this.contactSelected?.emit({
-    //   delegator: this.delegator,
-    // });
   }
   render() {
-    console.log('vals', { firstReminderDays: this.firstReminderDays, reminderDays: this.reminderDays, name: this.name });
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => {
-        this.name = e.target.value;
-      } })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onSelected: e => (this.sendReminders = e.detail.value === 'on') })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => {
-        this.firstReminderDays = e.target.value;
-      } }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private" }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "public" }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) }))));
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Template Name"), h("fieldset", null, h("verdocs-text-input", { value: this.name, autocomplete: "off", onInput: (e) => (this.name = e.target.value) })), h("h5", null, "Reminders"), h("fieldset", null, h("div", { class: "input-row" }, h("label", null, "Send Automatic Reminders"), h("verdocs-checkbox", { name: "automatic-reminders", checked: this.sendReminders, value: "on", onInput: (e) => (this.sendReminders = e.target.checked) })), h("div", { class: "input-row" }, h("label", null, "Days Before First Reminder"), h("verdocs-text-input", { value: this.firstReminderDays, onInput: (e) => (this.firstReminderDays = e.target.value) })), h("div", { class: "input-row" }, h("label", null, "Days Between Reminders"), h("verdocs-text-input", { value: this.reminderDays, onInput: (e) => (this.reminderDays = e.target.value) }))), h("h5", null, "Template Visibility"), h("fieldset", null, h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "private", onChange: () => (this.visibility = 'private') }), h("label", { htmlFor: "verdocs-radio-button-visibility-private" }, h("div", { class: "title" }, "Private"), h("div", { class: "description" }, "Only you can share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared", onChange: () => (this.visibility = 'shared') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared" }, h("div", { class: "title" }, "Shared to your organization"), h("div", { class: "description" }, "Give access to your organization to share and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: true, value: "shared_public", onChange: () => (this.visibility = 'shared_public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-shared_public" }, h("div", { class: "title" }, "Shared to your organization and Public"), h("div", { class: "description" }, "Give access to your organization to share this template, and anyone on the Web can find and use this template"))), h("div", { class: "radio-row" }, h("verdocs-radio-button", { name: "visibility", checked: this.visibility === 'public', value: "public", onChange: () => (this.visibility = 'public') }), h("label", { htmlFor: "verdocs-radio-button-visibility-public" }, h("div", { class: "title" }, "Public"), h("div", { class: "description" }, "Anyone on the Web can find and use this template")))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
   }
 };
 VerdocsTemplateProperties.style = verdocsTemplatePropertiesCss;
@@ -336,8 +334,7 @@ const VerdocsTemplateRecipients = class {
     registerInstance(this, hostRef);
     this.searchContacts = createEvent(this, "searchContacts", 7);
     this.cancel = createEvent(this, "cancel", 7);
-    this.settingsUpdated = createEvent(this, "settingsUpdated", 7);
-    this.contactSelected = createEvent(this, "contactSelected", 7);
+    this.next = createEvent(this, "next", 7);
     this.sequences = [];
     this.rolesAtSequence = {};
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -498,17 +495,16 @@ const VerdocsTemplateRecipients = class {
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   handleSubmit(e) {
-    var _a, _b;
+    var _a;
     e.stopPropagation();
     this.showSuggestions = false;
-    (_a = this.contactSelected) === null || _a === void 0 ? void 0 : _a.emit({
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({
       full_name: this.name,
       email: this.email,
       phone: this.phone,
       message: this.message,
       delegator: this.delegator,
     });
-    (_b = this.settingsUpdated) === null || _b === void 0 ? void 0 : _b.emit({});
   }
   render() {
     console.log('ordered roles', JSON.parse(JSON.stringify(this.orderedRoles)));
@@ -517,9 +513,9 @@ const VerdocsTemplateRecipients = class {
     return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Participant Order"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[this.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" }))), this.sequences.map(sequence => (h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence }), this.rolesAtSequence[sequence].map(role => {
       beforeOrder = role.order;
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": beforeOrder, "data-sequence": sequence })));
-    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onPress: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onPress: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { open: true, value: this.sender, onCancel: () => (this.showingSenderDialog = false), onDone: e => {
+    })))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "complete" }, "Document Complete"))), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e) })), this.showingSenderDialog && (h("verdocs-template-sender-dialog", { value: this.sender, onCancel: () => (this.showingSenderDialog = false), onNext: e => {
         this.showingSenderDialog = false;
-        this.sender = e.detail.sender;
+        this.sender = e.detail;
       } }))));
   }
 };