@verdocs/web-sdk 1.1.0 → 1.4.2

package/dist/components/verdocs-sign.js

@@ -0,0 +1,628 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getEndpoint, d as decodeAccessTokenBody, V as VerdocsEndpoint, s as setActiveEndpoint } from './Token.js';
+import { B as Buffer } from './buffer-es6.js';
+import { d as defineCustomElement$j } from './verdocs-button2.js';
+import { d as defineCustomElement$i } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$h } from './verdocs-field-attachment2.js';
+import { d as defineCustomElement$g } from './verdocs-field-checkbox2.js';
+import { d as defineCustomElement$f } from './verdocs-field-date2.js';
+import { d as defineCustomElement$e } from './verdocs-field-dropdown2.js';
+import { d as defineCustomElement$d } from './verdocs-field-initial2.js';
+import { d as defineCustomElement$c } from './verdocs-field-payment2.js';
+import { d as defineCustomElement$b } from './verdocs-field-radio-button2.js';
+import { d as defineCustomElement$a } from './verdocs-field-signature2.js';
+import { d as defineCustomElement$9 } from './verdocs-field-textarea2.js';
+import { d as defineCustomElement$8 } from './verdocs-field-textbox2.js';
+import { d as defineCustomElement$7 } from './verdocs-initial-dialog2.js';
+import { d as defineCustomElement$6 } from './verdocs-loader2.js';
+import { d as defineCustomElement$5 } from './verdocs-signature-dialog2.js';
+import { d as defineCustomElement$4 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$3 } from './verdocs-upload-dialog2.js';
+import { d as defineCustomElement$2 } from './verdocs-view2.js';
+
+/**
+ * Given a `rgba(r,g,b,a)` string value, returns the hex equivalent, dropping the alpha channel.
+ */
+/**
+ * Given a signer role index, return the color code for that signer.
+ */
+function getRGBA(roleIndex) {
+    switch (roleIndex % 10) {
+        case 0:
+            return roleIndex === 0 ? 'rgba(255, 193, 7, 0.4)' : 'rgba(134, 134, 134, 0.3)'; // #FFE69C
+        case 1:
+            return 'rgba(156, 39, 176, .4)'; // '#E3C3E9'
+        case 2:
+            return 'rgba(33, 150, 243, .4)'; // '#C1E1FB'
+        case 3:
+            return 'rgba(220, 231, 117, 0.3)';
+        case 4:
+            return 'rgba(121, 134, 203, 0.3)';
+        case 5:
+            return 'rgba(77, 182, 172, 0.3)';
+        case 6:
+            return 'rgba(255, 202, 165, 0.3)';
+        case 7:
+            return 'rgba(2, 247, 190, 0.3)';
+        case 8:
+            return 'rgba(255, 138, 101, 0.3)';
+        case 9:
+            return 'rgba(82, 255, 79, 0.3)';
+        default:
+            return 'rgba(229, 115, 155, 0.3)';
+    }
+}
+
+function rescale(r, n) {
+    return r * n;
+}
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator$1 = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var updateRecipientStatus = function (documentId, roleName, action, params) { return __awaiter$1(void 0, void 0, void 0, function () {
+    return __generator$1(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.put("/documents/".concat(documentId, "/recipients/").concat(roleName), __assign({ role_name: roleName, action: action }, (params || {})))
+                .then(function (r) { return r.data; })];
+    });
+}); };
+
+var e164Regex = new RegExp(/\+[1-9]\d{6,14}/g);
+function simpleE164Validator(code) {
+    return (code !== null && code.length < 16 && code.length > 6 && e164Regex.test(code)) || code === '' || code === null;
+}
+
+var EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+var isValidEmail = function (value) { return EmailRegEx.test(value); };
+var isValidPhone = function (value) { return simpleE164Validator(value); };
+
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+/**
+ * Get a signing session for a document.
+ */
+var getSigningSession = function (params) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.get("/documents/".concat(params.documentId, "/recipients/").concat(encodeURIComponent(params.roleId), "/invitation/").concat(params.inviteCode))
+                .then(function (r) {
+                var _a, _b;
+                // Avoiding a jsonwebtoken dependency here - we don't actually need the whole library
+                var signerToken = ((_a = r.headers) === null || _a === void 0 ? void 0 : _a.signer_token) || '';
+                var session = decodeAccessTokenBody(signerToken);
+                getEndpoint().setAuthorization((_b = r.headers) === null || _b === void 0 ? void 0 : _b.signer_token);
+                return { recipient: r.data, session: session, signerToken: signerToken };
+            })];
+    });
+}); };
+var getDocument = function (documentId) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.get("/documents/".concat(documentId))
+                .then(function (r) { return r.data; })];
+    });
+}); };
+var getDocumentFile = function (documentId, envelopeDocumentId) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.get("/documents/".concat(documentId, "/envelope_documents/").concat(envelopeDocumentId, "?file=true"), {
+                responseType: 'arraybuffer',
+            })
+                .then(function (r) { return Buffer.from(r.data, 'binary').toString('base64'); })];
+    });
+}); };
+var updateDocumentField = function (documentId, fieldName, value) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.put("/documents/".concat(documentId, "/fields/").concat(fieldName), value)
+                .then(function (r) { return r.data; })];
+    });
+}); };
+
+const verdocsSignCss = "verdocs-sign{font-family:\"Barlow\", sans-serif;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:600px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}verdocs-sign.storybook{max-height:600px}verdocs-sign div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign .header{-ms-flex:0 0 115px;flex:0 0 115px;z-index:1000;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);-webkit-transition:all 0.25s;transition:all 0.25s}verdocs-sign .intro{background-color:#ffffff;width:100%;margin:0 auto;padding:20px;max-width:1028px;color:rgba(0, 0, 0, 0.87)}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 20px;max-width:1028px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;padding:4px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;position:relative;overflow-y:scroll}verdocs-sign .agree-checkbox{-ms-flex:0 0 20px;flex:0 0 20px;display:-ms-flexbox;display:flex;width:20px;height:20px;border-radius:3px;background:#ffffff;position:relative;margin:0 10px 0 30px}verdocs-sign .agree-checkbox label{left:2px;top:2px;width:16px;height:16px;cursor:pointer;position:absolute;background:#33354c;-webkit-box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8);box-shadow:inset 0 -1px 1px rgba(255, 255, 255, 0.8)}verdocs-sign .agree-checkbox label:after{top:2px;left:3px;width:8px;opacity:0;height:5px;content:\"\";position:absolute;background:transparent;filter:alpha(opacity=0);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border:2px solid #fcfff4;border-top:none;border-right:none}verdocs-sign .agree-checkbox label:hover::after{filter:alpha(opacity=30);opacity:0.3}verdocs-sign .agree-checkbox input[type=checkbox]:checked+label:after{filter:alpha(opacity=100);opacity:1}verdocs-sign.agreed .intro{display:none}verdocs-sign.agreed .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign.agreed .agree-checkbox{background:#ccc}verdocs-sign.agreed .agree-checkbox label{cursor:default}verdocs-sign .page-controls{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:500}";
+
+const BASE_URL = 'https://stage-api.verdocs.com';
+const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
+     * signing session.
+     */
+    this.documentid = null;
+    /**
+     * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
+     * signing session.
+     */
+    this.roleid = null;
+    /**
+     * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a
+     * signing session.
+     */
+    this.invitecode = null;
+    this.endpoint = null;
+    this.recipient = null;
+    this.signerToken = null;
+    this.pdfUrl = null;
+    this.recipientIndex = -1;
+    this.document = null;
+    this.fields = [];
+    this.hasSignature = false;
+    this.nextButtonLabel = 'Start';
+    this.focusedField = '';
+  }
+  componentWillLoad() {
+    const endpoint = new VerdocsEndpoint().setBaseURL(BASE_URL);
+    setActiveEndpoint(endpoint);
+  }
+  async componentDidLoad() {
+    try {
+      console.log('[SIGN] Processing invite code', this.documentid, this.roleid, this.invitecode);
+      const { session, recipient, signerToken } = await getSigningSession({
+        documentId: this.documentid,
+        roleId: this.roleid,
+        inviteCode: this.invitecode,
+      });
+      console.log('[SIGN] Got signing session', session);
+      console.log('[SIGN] Recipient', recipient);
+      this.recipient = recipient;
+      this.signerToken = signerToken;
+      getEndpoint().setSigningAuthorization(signerToken);
+      if (this.recipient.agreed) {
+        this.nextButtonLabel = 'Next';
+      }
+      const document = await getDocument(this.documentid);
+      this.document = document;
+      console.log('[SIGN] Document', document);
+      this.pdfUrl = `${BASE_URL}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;
+      this.recipientIndex = this.document.recipients.findIndex(recipient => recipient.role_name == this.roleid);
+      if (this.recipientIndex > -1) {
+        console.log('Found recipient', this.document.recipients[this.recipientIndex]);
+      }
+      this.fields = this.document.fields.filter(field => field.recipient_role === this.roleid);
+      console.log('Loaded fields', this.fields);
+      // TODO: Fix service to allow this?
+      // const sigs = await getSignatures();
+      // console.log('sigs', sigs);
+    }
+    catch (e) {
+      console.log('Error with signing session', e);
+    }
+  }
+  handleClickAgree() {
+    console.log('agree clicked');
+    updateRecipientStatus(this.documentid, this.roleid, 'update', { agreed: true })
+      .then(r => {
+      console.log('update result', r);
+      this.nextButtonLabel = 'Next';
+      this.recipient = r;
+    })
+      .catch(e => {
+      console.log('update failure', e);
+    });
+  }
+  async savePDF() {
+    const fileName = `${this.document.name} - ${this.document.updated_at.split('T')[0]}.pdf`;
+    const data = await getDocumentFile(this.documentid, this.document.envelope_document_id);
+    // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique
+    // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image
+    let xhr = new XMLHttpRequest();
+    xhr.responseType = 'blob';
+    xhr.onload = function () {
+      let a = document.createElement('a');
+      a.href = window.URL.createObjectURL(xhr.response);
+      a.download = fileName;
+      a.style.display = 'none';
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    };
+    const url = `data:application/pdf;base64,${data}`;
+    console.log('url', url.length, url);
+    xhr.open('GET', `data:application/pdf;base64,${data}`);
+    xhr.send();
+  }
+  async handleOptionSelected(e) {
+    switch (e.detail.id) {
+      case 'later':
+        // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
+        if (!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV'])) {
+          window.alert('User intends to sign later.');
+        }
+        break;
+      case 'claim':
+        break;
+      case 'decline':
+        break;
+      case 'print':
+        break;
+      case 'download':
+        this.savePDF().catch(() => { });
+        break;
+    }
+  }
+  async handleFieldChange(field, e, optionId) {
+    console.log('fieldChange', field, e.detail);
+    switch (field.type) {
+      case 'textbox':
+        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => console.log('Error updating', e));
+        break;
+      case 'checkbox_group':
+        updateDocumentField(this.documentid, field.name, { prepared: false, value: { options: [{ id: optionId, checked: e.detail }] } })
+          .then(r => console.log('Update result', r))
+          .catch(e => console.log('Error updating', e));
+        break;
+      case 'radio_button_group':
+        const options = field.settings.options.map(option => ({ id: option.id, selected: optionId === option.id }));
+        updateDocumentField(this.documentid, field.name, { prepared: false, value: { options } })
+          .then(r => console.log('Update result', r))
+          .catch(e => console.log('Error updating', e));
+        break;
+      case 'dropdown':
+        updateDocumentField(this.documentid, field.name, { prepared: false, value: e.detail })
+          .then(r => console.log('Update result', r))
+          .catch(e => console.log('Error updating', e));
+        break;
+      case 'initial':
+        console.log('Got initial', e.detail);
+        break;
+      case 'signature':
+        console.log('Got signature', e.detail);
+        break;
+    }
+  }
+  renderCheckboxGroupOption(page, field, option, index) {
+    const left = rescale(page.xRatio, option.x);
+    const bottom = rescale(page.yRatio, option.y);
+    const style = {
+      left: `${left}px`,
+      bottom: `${bottom}px`,
+      position: 'absolute',
+      transform: `scale(${page.xRatio}, ${page.yRatio})`,
+      backgroundColor: getRGBA(this.recipientIndex),
+    };
+    return h("verdocs-field-checkbox", { style: style, order: index, value: option.checked, onFieldChange: e => this.handleFieldChange(field, e, option.id) });
+  }
+  renderRadioGroupOption(page, field, option, index) {
+    const left = rescale(page.xRatio, option.x);
+    const bottom = rescale(page.yRatio, option.y);
+    const style = {
+      left: `${left}px`,
+      bottom: `${bottom}px`,
+      position: 'absolute',
+      transform: `scale(${page.xRatio}, ${page.yRatio})`,
+      backgroundColor: getRGBA(this.recipientIndex),
+    };
+    return (h("verdocs-field-radio-button", { style: style, order: index, value: option.id, name: field.name, checked: option.selected, onFieldChange: e => this.handleFieldChange(field, e, option.id) }));
+  }
+  renderField(field, index) {
+    const { required = false, settings = {} } = field;
+    const { x = 0, y = 0, base64 = '', placeholder = '', options = [], value = '', result = '' } = settings;
+    const renderOnPage = this.pdfPageInfo.pages.find(page => page.pageNumber === field.page);
+    if (!renderOnPage) {
+      console.log('Unable to render invalid field', field);
+      return h("div", { class: "invalid-field" }, "Invalid field.");
+    }
+    const left = rescale(renderOnPage.xRatio, x);
+    const bottom = rescale(renderOnPage.yRatio, y);
+    const style = {
+      left: `${left}px`,
+      bottom: `${bottom}px`,
+      position: 'absolute',
+      transform: `scale(${renderOnPage.xRatio}, ${renderOnPage.yRatio})`,
+      backgroundColor: field.settings.rgba || getRGBA(this.recipientIndex),
+    };
+    if (field.settings.height) {
+      style.height = `${field.settings.height}px`;
+    }
+    if (field.settings.width) {
+      style.width = `${field.settings.width}px`;
+    }
+    console.log('rendering field', field.type, field);
+    const id = `field-${field.name}`;
+    switch (field.type) {
+      case 'signature':
+        return h("verdocs-field-signature", { style: style, value: base64, required: required, id: id });
+      case 'initial':
+        return h("verdocs-field-initial", { style: style, required: required, id: id });
+      case 'textbox':
+        return h("verdocs-field-textbox", { style: style, order: index, value: result || '', placeholder: placeholder, id: id, onFieldChange: e => this.handleFieldChange(field, e) });
+      case 'textarea':
+        return h("verdocs-field-textarea", { style: style, placeholder: placeholder || '', id: id });
+      case 'date':
+        return h("verdocs-field-date", { style: style, order: index, value: result || '', placeholder: placeholder, required: required, id: id });
+      case 'dropdown':
+        return h("verdocs-field-dropdown", { style: style, options: options, value: value, required: required, id: id, onFieldChange: e => this.handleFieldChange(field, e) });
+      case 'checkbox':
+        return h("verdocs-field-checkbox", { style: style, value: result || '', id: id });
+      case 'checkbox_group':
+        return field.settings.options.map((option, index) => this.renderCheckboxGroupOption(renderOnPage, field, option, index));
+      case 'radio_button_group':
+        return field.settings.options.map((option, index) => this.renderRadioGroupOption(renderOnPage, field, option, index));
+      case 'attachment':
+        return h("verdocs-field-attachment", { style: style, value: result || '', id: id });
+      case 'payment':
+        return h("verdocs-field-payment", { style: style, field: field, id: id });
+      default:
+        console.log('[SIGN] Skipping unsupported field type', field);
+    }
+    return h("div", { style: { display: 'none' } }, "Unsupported field type \"", field.type, "\"");
+  }
+  isFieldValid(field) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    switch (field.type) {
+      case 'textbox':
+        switch (((_a = field.settings) === null || _a === void 0 ? void 0 : _a.validator) || '') {
+          case 'email':
+            return isValidEmail(((_b = field.settings) === null || _b === void 0 ? void 0 : _b.result) || '');
+          case 'phone':
+            return isValidPhone(((_c = field.settings) === null || _c === void 0 ? void 0 : _c.result) || '');
+          default:
+            return !!((_d = field.settings) === null || _d === void 0 ? void 0 : _d.result);
+        }
+      case 'signature':
+      case 'initial':
+      case 'textarea':
+      case 'date':
+      case 'attachment':
+        return !!((_e = field.settings) === null || _e === void 0 ? void 0 : _e.result);
+      case 'dropdown':
+        return !!((_f = field.settings) === null || _f === void 0 ? void 0 : _f.value);
+      case 'checkbox_group':
+        const checked = (((_h = (_g = field.settings) === null || _g === void 0 ? void 0 : _g.options) === null || _h === void 0 ? void 0 : _h.filter(option => option.checked)) || []).length;
+        return checked >= (((_j = field.settings) === null || _j === void 0 ? void 0 : _j.minimum_checked) || 0) && checked <= (((_k = field.settings) === null || _k === void 0 ? void 0 : _k.maximum_checked) || 999);
+      case 'radio_button_group':
+        return (((_m = (_l = field.settings) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.filter(option => option.selected)) || []).length > 0;
+      // TODO
+      // case 'checkbox':
+      //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;
+      // case 'payment':
+      //   return <verdocs-field-payment style={style} field={field} id={id} />;
+      default:
+        return false;
+    }
+  }
+  handleDocumentRendered(e) {
+    console.log('[SIGN] Document rendered', e.detail);
+    this.pdfPageInfo = e.detail;
+  }
+  handleNext() {
+    // Find and focus the next incomplete required field
+    const requiredFields = this.fields.filter(field => field.required);
+    console.log('required Fields', requiredFields);
+    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);
+    console.log('focused Index', focusedIndex);
+    let nextFocusedIndex = focusedIndex + 1;
+    if (nextFocusedIndex >= requiredFields.length) {
+      nextFocusedIndex = 0;
+    }
+    const nextRequiredField = requiredFields[nextFocusedIndex];
+    console.log('next required fielod', nextRequiredField);
+    if (nextRequiredField) {
+      const el = document.getElementById(`field-${nextRequiredField.name}`);
+      el === null || el === void 0 ? void 0 : el.focusField();
+      this.focusedField = nextRequiredField.name;
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e;
+    const menuOptions = [
+      { id: 'later', label: 'Finish Later' },
+      { id: 'claim', label: 'Claim the Document', disabled: true },
+      { id: 'decline', label: 'Decline to Sign' },
+      { id: 'print', label: 'Print Without Signing' },
+      { id: 'download', label: 'Download' },
+    ];
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), agreed: (_a = this.recipient) === null || _a === void 0 ? void 0 : _a.agreed } }, h("div", { class: "header" }, h("div", { class: "intro" }, "Please review and act on these documents."), h("div", { class: "toolbar" }, h("div", { class: "tools" }, h("verdocs-dropdown", { options: menuOptions, onOptionSelected: e => this.handleOptionSelected(e) }), !((_b = this.recipient) === null || _b === void 0 ? void 0 : _b.agreed) ? (h("div", { style: { flex: '1', flexDirection: 'row', display: 'flex', alignItems: 'center' } }, h("div", { class: "agree-checkbox" }, h("input", { type: "checkbox", value: "None", id: "agree-checkbox-element", name: "agree", onChange: () => this.handleClickAgree() }), h("label", { htmlFor: "agree-checkbox-element" })), "I agree to use electronic records and signatures.")) : (h("div", { style: { flex: '1' } })), h("verdocs-button", { label: this.nextButtonLabel, disabled: !((_c = this.recipient) === null || _c === void 0 ? void 0 : _c.agreed), onClick: () => this.handleNext() })))), !((_d = this.recipient) === null || _d === void 0 ? void 0 : _d.agreed) ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document" }, this.pdfUrl ? h("verdocs-view", { source: this.pdfUrl, token: this.signerToken, onDocumentRendered: e => this.handleDocumentRendered(e) }) : h("verdocs-loader", null), (((_e = this.pdfPageInfo) === null || _e === void 0 ? void 0 : _e.pages) || []).map(page => {
+      var _a;
+      return (h("div", { class: "page-controls", style: { height: `${page.height}px`, width: `${page.width}px`, top: `${page.canvasTop}px`, margin: '0 auto' } }, ((_a = this.pdfPageInfo) === null || _a === void 0 ? void 0 : _a.numRendered) > 0 ? (this.fields.filter(field => field.page === page.pageNumber).map((field, index) => this.renderField(field, index))) : (h("div", { style: { display: 'none' } }, "Waiting for PDF to render..."))));
+    }))));
+  }
+  static get style() { return verdocsSignCss; }
+}, [0, "verdocs-sign", {
+    "documentid": [1],
+    "roleid": [1],
+    "invitecode": [1],
+    "endpoint": [32],
+    "recipient": [32],
+    "signerToken": [32],
+    "pdfUrl": [32],
+    "recipientIndex": [32],
+    "document": [32],
+    "fields": [32],
+    "pdfPageInfo": [32],
+    "hasSignature": [32],
+    "nextButtonLabel": [32],
+    "focusedField": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-sign", "verdocs-button", "verdocs-dropdown", "verdocs-field-attachment", "verdocs-field-checkbox", "verdocs-field-date", "verdocs-field-dropdown", "verdocs-field-initial", "verdocs-field-payment", "verdocs-field-radio-button", "verdocs-field-signature", "verdocs-field-textarea", "verdocs-field-textbox", "verdocs-initial-dialog", "verdocs-loader", "verdocs-signature-dialog", "verdocs-text-input", "verdocs-upload-dialog", "verdocs-view"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-sign":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSign$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "verdocs-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "verdocs-field-attachment":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "verdocs-field-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "verdocs-field-date":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "verdocs-field-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "verdocs-field-initial":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "verdocs-field-payment":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "verdocs-field-radio-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "verdocs-field-signature":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "verdocs-field-textarea":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "verdocs-field-textbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-initial-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-signature-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-upload-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-view":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsSign = VerdocsSign$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsSign, defineCustomElement };

package/dist/components/verdocs-signature-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsSignatureDialog extends Components.VerdocsSignatureDialog, HTMLElement {}
+export const VerdocsSignatureDialog: {
+  prototype: VerdocsSignatureDialog;
+  new (): VerdocsSignatureDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-signature-dialog.js

@@ -0,0 +1,6 @@
+import { V as VerdocsSignatureDialog$1, d as defineCustomElement$1 } from './verdocs-signature-dialog2.js';
+
+const VerdocsSignatureDialog = VerdocsSignatureDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsSignatureDialog, defineCustomElement };