@verdocs/web-sdk 1.16.3 → 1.16.5

package/dist/collection/components/controls/verdocs-help-icon/verdocs-help-icon.js

@@ -31,7 +31,7 @@ export class VerdocsHelpIcon {
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
   }
   render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: helpIcon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.icon = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: helpIcon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.icon = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, h("span", { innerHTML: this.text }), h("div", { "data-popper-arrow": "true", class: "arrow" }))));
   }
   static get is() { return "verdocs-help-icon"; }
   static get originalStyleUrls() {

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.css

@@ -35,6 +35,9 @@ verdocs-auth h4 {
   line-height: 1.43;
   margin: 0;
 }
+verdocs-auth h4 verdocs-button button.normal .button-label {
+  padding: 0;
+}
 verdocs-auth .status-result {
   display: none;
 }
@@ -52,4 +55,10 @@ verdocs-auth form {
 }
 verdocs-auth verdocs-text-input {
   margin-bottom: 10px;
+}
+verdocs-auth .account-option {
+  gap: 8px;
+  margin: 20px 0 8px 0;
+  display: flex;
+  flex-direction: row;
 }

package/dist/collection/components/embeds/verdocs-auth/verdocs-auth.js

@@ -46,6 +46,8 @@ export class VerdocsAuth {
     this.password = '';
     this.loggingIn = false;
     this.activeSession = null;
+    this.accountType = 'org';
+    this.step = 1;
   }
   componentWillLoad() {
     var _a, _b;
@@ -109,6 +111,10 @@ export class VerdocsAuth {
     this.isAuthenticated = false;
     (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
   }
+  checkAvailability() {
+    // Stage: POST - https://2r8pilqa44.execute-api.us-east-1.amazonaws.com/organizations/check-availability
+    // Prod: POST - https://lb1is9fxoc.execute-api.us-east-1.amazonaws.com/organizations/check-availability
+  }
   render() {
     if (!this.visible) {
       return h("div", { style: { display: 'none' } }, "Authenticated");
@@ -117,9 +123,24 @@ export class VerdocsAuth {
       return (h("verdocs-button", { label: "Sign Out", disabled: this.loggingIn, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
     }
     if (this.displayMode === 'signup') {
-      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", value: this.orgname, onInput: (e) => (this.orgname = e.target.value), disabled: this.loggingIn }), h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.loggingIn })), h("verdocs-text-input", { label: "Email", autocomplete: "email", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Create Account", disabled: this.loggingIn, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for a free account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), this.step === 1 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.loggingIn })), h("verdocs-text-input", { label: "Email", autocomplete: "email", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: this.loggingIn, onClick: () => {
+          this.step = 2;
+        }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.step === 2 && (h("form", { onSubmit: () => this.handleSignup() }, h("p", null, "Please check your e-mail inbox for a verification code and follow the instructions provided."), h("p", null, "NOTE: Verification messages may take up to 1 hour to arrive. If you do not receive the invitation, ", h("a", { href: "#" }, "Click Here"), " to resend it. Be sure to check your spam folder."), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.loggingIn, onClick: () => {
+          this.step = 1;
+        }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }), h("verdocs-button", { label: "Go to Dashboard", disabled: true, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } })))), this.step === 3 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { class: "account-option" }, h("verdocs-radio-button", { id: "create-for-org", name: "account-type", value: "org", checked: this.accountType === 'org', onInput: e => {
+          console.log('o', e.target);
+          this.accountType = 'org';
+        } }), h("label", { htmlFor: "verdocs-radio-button-account-type-org" }, "Create an Organization"), h("verdocs-help-icon", { text: "Creating an organization allows you to organize shared resources such as templates, and add additional users who may access them.<br /><br />Organization names must be unique." })), h("div", null, this.accountType === 'org' && (h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", value: this.orgname, onInput: (e) => (this.orgname = e.target.value), disabled: this.loggingIn }))), h("div", { class: "account-option" }, h("verdocs-radio-button", { id: "create-for-personal", name: "account-type", value: "personal", checked: this.accountType === 'personal', onInput: e => {
+          console.log('p', e.target);
+          this.accountType = 'personal';
+        } }), h("label", { htmlFor: "verdocs-radio-button-account-type-personal" }, "Create a Personal Account"), h("verdocs-help-icon", { text: "Personal accounts are free, but are limited in functionality." })), h("div", { style: { marginTop: '30px' } }), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.loggingIn, onClick: () => {
+          this.step = 1;
+        }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }), h("verdocs-button", { label: "Create Account", disabled: this.loggingIn, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))))));
     }
-    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => {
+        this.displayMode = 'signup';
+        this.step = 1;
+      }, disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
   }
   static get is() { return "verdocs-auth"; }
   static get originalStyleUrls() {
@@ -203,7 +224,9 @@ export class VerdocsAuth {
       "username": {},
       "password": {},
       "loggingIn": {},
-      "activeSession": {}
+      "activeSession": {},
+      "accountType": {},
+      "step": {}
     };
   }
   static get events() {

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -90,7 +90,7 @@ export class VerdocsFieldTextbox {
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
     const width = settings.width || 150;
-    // TODO: This is an antiquated technique from the old system. We should compute it.
+    // TODO: This is an outdated technique from the old system. We should compute it.
     const maxlength = width / 5;
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -113,13 +113,12 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
-    console.log('will', newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(() => {
+      .then(field => {
       var _a, _b;
       this.dirty = false;
-      this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
+      this.updateField(field);
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -153,29 +152,30 @@ export class VerdocsTemplateFieldProperties {
     delete newProperties.setting.result;
     newProperties.setting.options = [...this.options];
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(() => {
+      .then(field => {
       var _a, _b;
       this.dirty = false;
-      this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
+      this.updateField(field);
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
     });
   }
-  updateField() {
+  updateField(newField) {
     const newFields = [...this.store.state.fields];
     newFields.forEach(field => {
       if (field.name === this.fieldName) {
-        field.name = this.name;
-        field.role_name = this.roleName;
-        field.required = this.required;
-        field.label = this.placeholder;
+        Object.assign(field, newField);
+        // field.name = this.name;
+        // field.role_name = this.roleName;
+        // field.required = this.required;
+        // field.label = this.placeholder;
         // field.setting.result = this.defaultValue;
-        if (field.setting.options) {
-          field.setting.options = this.options;
-        }
+        // if (field.setting.options) {
+        //   field.setting.options = this.options;
+        // }
       }
     });
     this.store.state.fields = newFields;
@@ -403,12 +403,16 @@ export class VerdocsTemplateFieldProperties {
           "text": "Event fired when the field's settings are changed."
         },
         "complexType": {
-          "original": "{fieldName: string; settings: ITemplateFieldSetting}",
-          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
+          "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
           "references": {
             "ITemplateFieldSetting": {
               "location": "import",
               "path": "@verdocs/js-sdk/Templates/Types"
+            },
+            "ITemplateField": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Templates/Types"
             }
           }
         }

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

@@ -104,8 +104,9 @@ export class VerdocsTemplateFields {
     el.addEventListener('settingsChanged', e => {
       var _a, _b, _c, _d;
       console.log('[FIELDS] settingsChanged', e.detail);
-      Object.assign(field.setting, e.detail.settings);
+      Object.assign(field, e.detail.field);
       this.selectedRoleName = field.role_name;
+      el.field = e.detail.field;
       el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
       el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
       this.rerender++;
@@ -120,7 +121,7 @@ export class VerdocsTemplateFields {
     });
     el.addEventListener('deleted', () => {
       var _a, _b;
-      console.log('deleted', this, field);
+      console.log('[FIELDS] Deleted', this, field);
       el.remove();
       this.rerender++;
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+    templateId: '',
   },
   argTypes: {},
   parameters: {

package/dist/collection/utils/utils.js

@@ -12,9 +12,9 @@ export const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 105;
+      return 130;
     case 'date':
-      return 64;
+      return 75;
     case 'dropdown':
       return 85;
     case 'attachment':

package/dist/components/utils.js

@@ -33,9 +33,9 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 105;
+      return 130;
     case 'date':
-      return 64;
+      return 75;
     case 'dropdown':
       return 85;
     case 'attachment':

package/dist/components/verdocs-auth.js

@@ -3,8 +3,9 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import './Types.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$4 } from './verdocs-button2.js';
-import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$3 } from './verdocs-radio-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
 /**
@@ -24,7 +25,7 @@ var authenticateUser = function (endpoint, params) {
         .then(function (r) { return r.data; });
 };
 
-const verdocsAuthCss = "verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}";
+const verdocsAuthCss = "verdocs-auth{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-auth .login-form,verdocs-auth .signup-form{background:#ffffff;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;display:-ms-flexbox;display:flex;padding:20px;width:300px;max-width:100%}verdocs-auth .logo{margin:20px 0 30px;width:128px;max-width:100%}verdocs-auth h3{text-align:center;font-weight:400;font-size:16px;line-height:1.75;margin:0}verdocs-auth h4{text-align:center;font-weight:400;font-size:14px;line-height:1.43;margin:0}verdocs-auth h4 verdocs-button button.normal .button-label{padding:0}verdocs-auth .status-result{display:none}verdocs-auth .status-result.debug{white-space:pre-wrap;font-size:14px;background:#fff;padding:10px;display:block;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}verdocs-auth form{width:100%}verdocs-auth verdocs-text-input{margin-bottom:10px}verdocs-auth .account-option{gap:8px;margin:20px 0 8px 0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}";
 
 const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -44,6 +45,8 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.password = '';
     this.loggingIn = false;
     this.activeSession = null;
+    this.accountType = 'org';
+    this.step = 1;
   }
   componentWillLoad() {
     var _a, _b;
@@ -107,6 +110,10 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.isAuthenticated = false;
     (_a = this.authenticated) === null || _a === void 0 ? void 0 : _a.emit({ authenticated: false, session: null });
   }
+  checkAvailability() {
+    // Stage: POST - https://2r8pilqa44.execute-api.us-east-1.amazonaws.com/organizations/check-availability
+    // Prod: POST - https://lb1is9fxoc.execute-api.us-east-1.amazonaws.com/organizations/check-availability
+  }
   render() {
     if (!this.visible) {
       return h("div", { style: { display: 'none' } }, "Authenticated");
@@ -115,9 +122,24 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       return (h("verdocs-button", { label: "Sign Out", disabled: this.loggingIn, onClick: () => this.handleLogout(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }));
     }
     if (this.displayMode === 'signup') {
-      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for an account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleSignup() }, h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", value: this.orgname, onInput: (e) => (this.orgname = e.target.value), disabled: this.loggingIn }), h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.loggingIn })), h("verdocs-text-input", { label: "Email", autocomplete: "email", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Create Account", disabled: this.loggingIn, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))));
+      return (h("div", { class: "signup-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Sign up for a free account"), h("h4", null, "Already have an account?", h("verdocs-button", { label: "Log In", variant: "text", onClick: () => (this.displayMode = 'login'), disabled: this.loggingIn })), this.step === 1 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { style: { display: 'flex', flexDirection: 'row', columnGap: '20px' } }, h("verdocs-text-input", { label: "First Name", autocomplete: "first", value: this.first, onInput: (e) => (this.first = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Last Name", autocomplete: "last", value: this.last, onInput: (e) => (this.last = e.target.value), disabled: this.loggingIn })), h("verdocs-text-input", { label: "Email", autocomplete: "email", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("div", { style: { marginTop: '30px' } }), h("verdocs-button", { label: "Next", disabled: this.loggingIn, onClick: () => {
+          this.step = 2;
+        }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))), this.step === 2 && (h("form", { onSubmit: () => this.handleSignup() }, h("p", null, "Please check your e-mail inbox for a verification code and follow the instructions provided."), h("p", null, "NOTE: Verification messages may take up to 1 hour to arrive. If you do not receive the invitation, ", h("a", { href: "#" }, "Click Here"), " to resend it. Be sure to check your spam folder."), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.loggingIn, onClick: () => {
+          this.step = 1;
+        }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }), h("verdocs-button", { label: "Go to Dashboard", disabled: true, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } })))), this.step === 3 && (h("form", { onSubmit: () => this.handleSignup() }, h("div", { class: "account-option" }, h("verdocs-radio-button", { id: "create-for-org", name: "account-type", value: "org", checked: this.accountType === 'org', onInput: e => {
+          console.log('o', e.target);
+          this.accountType = 'org';
+        } }), h("label", { htmlFor: "verdocs-radio-button-account-type-org" }, "Create an Organization"), h("verdocs-help-icon", { text: "Creating an organization allows you to organize shared resources such as templates, and add additional users who may access them.<br /><br />Organization names must be unique." })), h("div", null, this.accountType === 'org' && (h("verdocs-text-input", { label: "Organization Name", autocomplete: "org", value: this.orgname, onInput: (e) => (this.orgname = e.target.value), disabled: this.loggingIn }))), h("div", { class: "account-option" }, h("verdocs-radio-button", { id: "create-for-personal", name: "account-type", value: "personal", checked: this.accountType === 'personal', onInput: e => {
+          console.log('p', e.target);
+          this.accountType = 'personal';
+        } }), h("label", { htmlFor: "verdocs-radio-button-account-type-personal" }, "Create a Personal Account"), h("verdocs-help-icon", { text: "Personal accounts are free, but are limited in functionality." })), h("div", { style: { marginTop: '30px' } }), h("div", { style: { display: 'flex', flexDirection: 'row', gap: '20px' } }, h("verdocs-button", { label: "Back", disabled: this.loggingIn, onClick: () => {
+          this.step = 1;
+        }, style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }), h("verdocs-button", { label: "Create Account", disabled: this.loggingIn, onClick: () => this.handleSignup(), style: { display: 'flex', justifyContent: 'center', margin: '30px auto 0' } }))))));
     }
-    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
+    return (h("div", { class: "login-form" }, h("img", { src: this.logo, alt: "Verdocs Logo", class: "logo" }), h("h3", null, "Log in to your account"), h("h4", null, "Don't have an account?", h("verdocs-button", { label: "Sign Up", variant: "text", onClick: () => {
+        this.displayMode = 'signup';
+        this.step = 1;
+      }, disabled: this.loggingIn })), h("form", { onSubmit: () => this.handleLogin() }, h("verdocs-text-input", { label: "Email", autocomplete: "username", value: this.username, onInput: (e) => (this.username = e.target.value), disabled: this.loggingIn }), h("verdocs-text-input", { label: "Password", type: "password", autocomplete: "current-password", value: this.password, onInput: (e) => (this.password = e.target.value), disabled: this.loggingIn }), h("verdocs-button", { label: "Forgot Your Password?", variant: "text", onClick: () => (this.displayMode = 'signup'), disabled: this.loggingIn, style: { display: 'flex', justifyContent: 'center', margin: '10px auto 20px' } }), h("verdocs-button", { label: "Login", disabled: this.loggingIn, onClick: () => this.handleLogin(), style: { display: 'flex', justifyContent: 'center', margin: '10px auto 0' } }))));
   }
   static get style() { return verdocsAuthCss; }
 }, [0, "verdocs-auth", {
@@ -132,13 +154,15 @@ const VerdocsAuth$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "username": [32],
     "password": [32],
     "loggingIn": [32],
-    "activeSession": [32]
+    "activeSession": [32],
+    "accountType": [32],
+    "step": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-text-input"];
+  const components = ["verdocs-auth", "verdocs-button", "verdocs-help-icon", "verdocs-radio-button", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-auth":
       if (!customElements.get(tagName)) {
@@ -147,10 +171,15 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-radio-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-field-textbox.js

@@ -103,7 +103,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
     const width = settings.width || 150;
-    // TODO: This is an antiquated technique from the old system. We should compute it.
+    // TODO: This is an outdated technique from the old system. We should compute it.
     const maxlength = width / 5;
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);

package/dist/components/verdocs-help-icon2.js

@@ -33,7 +33,7 @@ const VerdocsHelpIcon = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
   }
   render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: helpIcon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.icon = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: helpIcon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.icon = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, h("span", { innerHTML: this.text }), h("div", { "data-popper-arrow": "true", class: "arrow" }))));
   }
   static get style() { return verdocsHelpIconCss; }
 }, [0, "verdocs-help-icon", {

package/dist/components/verdocs-template-field-properties2.js

@@ -315,13 +315,12 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         options: this.options,
       };
     }
-    console.log('will', newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(() => {
+      .then(field => {
       var _a, _b;
       this.dirty = false;
-      this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
+      this.updateField(field);
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
@@ -355,29 +354,30 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     delete newProperties.setting.result;
     newProperties.setting.options = [...this.options];
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-      .then(() => {
+      .then(field => {
       var _a, _b;
       this.dirty = false;
-      this.updateField();
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties });
+      this.updateField(field);
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
     });
   }
-  updateField() {
+  updateField(newField) {
     const newFields = [...this.store.state.fields];
     newFields.forEach(field => {
       if (field.name === this.fieldName) {
-        field.name = this.name;
-        field.role_name = this.roleName;
-        field.required = this.required;
-        field.label = this.placeholder;
+        Object.assign(field, newField);
+        // field.name = this.name;
+        // field.role_name = this.roleName;
+        // field.required = this.required;
+        // field.label = this.placeholder;
         // field.setting.result = this.defaultValue;
-        if (field.setting.options) {
-          field.setting.options = this.options;
-        }
+        // if (field.setting.options) {
+        //   field.setting.options = this.options;
+        // }
       }
     });
     this.store.state.fields = newFields;

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

@@ -115,8 +115,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     el.addEventListener('settingsChanged', e => {
       var _a, _b, _c, _d;
       console.log('[FIELDS] settingsChanged', e.detail);
-      Object.assign(field.setting, e.detail.settings);
+      Object.assign(field, e.detail.field);
       this.selectedRoleName = field.role_name;
+      el.field = e.detail.field;
       el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
       el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
       this.rerender++;
@@ -131,7 +132,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     });
     el.addEventListener('deleted', () => {
       var _a, _b;
-      console.log('deleted', this, field);
+      console.log('[FIELDS] Deleted', this, field);
       el.remove();
       this.rerender++;
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-06T20:31:50",
+  "timestamp": "2023-07-12T02:45:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -315,12 +315,16 @@
       "dependents": [],
       "dependencies": [
         "verdocs-button",
-        "verdocs-text-input"
+        "verdocs-text-input",
+        "verdocs-radio-button",
+        "verdocs-help-icon"
       ],
       "dependencyGraph": {
         "verdocs-auth": [
           "verdocs-button",
-          "verdocs-text-input"
+          "verdocs-text-input",
+          "verdocs-radio-button",
+          "verdocs-help-icon"
         ],
         "verdocs-text-input": [
           "verdocs-help-icon"
@@ -4931,12 +4935,16 @@
       "slots": [],
       "parts": [],
       "dependents": [
+        "verdocs-auth",
         "verdocs-template-role-properties",
         "verdocs-template-sender",
         "verdocs-text-input"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "verdocs-auth": [
+          "verdocs-help-icon"
+        ],
         "verdocs-template-role-properties": [
           "verdocs-help-icon"
         ],
@@ -5903,10 +5911,14 @@
       "slots": [],
       "parts": [],
       "dependents": [
+        "verdocs-auth",
         "verdocs-template-sender"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "verdocs-auth": [
+          "verdocs-radio-button"
+        ],
         "verdocs-template-sender": [
           "verdocs-radio-button"
         ]
@@ -7353,7 +7365,7 @@
         },
         {
           "event": "settingsChanged",
-          "detail": "{ fieldName: string; settings: ITemplateFieldSetting; }",
+          "detail": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
           "bubbles": true,
           "cancelable": true,
           "composed": true,