@verdocs/web-sdk 1.2.0 → 1.4.0

package/dist/components/verdocs-sign.js

@@ -0,0 +1,2135 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './index2.js';
+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.
+ */
+function getRGB(rgba) {
+    var rgbNumbers = rgba.replace('rgba(', '').replace(')', '').split(',');
+    var rgbObject = {
+        red: +rgbNumbers[0],
+        green: +rgbNumbers[1],
+        blue: +rgbNumbers[2],
+        alpha: +rgbNumbers[3],
+    };
+    var alpha = 1 - rgbObject.alpha;
+    var red = Math.round((rgbObject.alpha * (rgbObject.red / 255) + alpha) * 255);
+    var green = Math.round((rgbObject.alpha * (rgbObject.green / 255) + alpha) * 255);
+    var blue = Math.round((rgbObject.alpha * (rgbObject.blue / 255) + alpha) * 255);
+    return '#' + rgbToHex(red) + rgbToHex(green) + rgbToHex(blue);
+}
+/**
+ * Given an RGB string value, returns the hex equivalent.
+ */
+function rgbToHex(rgb) {
+    var hex = rgb.toString(16);
+    if (hex.length < 2) {
+        return '0' + hex;
+    }
+    return hex;
+}
+/**
+ * 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)';
+    }
+}
+/**
+ * Given a role name, return a color code for it. This works by computing a hash code so the specific color returned
+ * is not specified explicitly, but will be the same for every call with the same input value.
+ */
+function nameToRGBA(str) {
+    if (!!str) {
+        var validNum = parseInt(str.slice(-1), 10);
+        if (!isNaN(validNum)) {
+            str += (validNum * 99).toString();
+        }
+        var hash = 0;
+        for (var i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        hash = Math.round(hash / 1.3);
+        var c = (hash & 0x00ffff08).toString(16).toUpperCase();
+        var hex = '#' + '00000'.substring(0, 6 - c.length) + c;
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        var color = {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        };
+        return "rgba(".concat(color.r, ", ").concat(color.g, ", ").concat(color.b, ", 0.2)");
+    }
+}
+/**
+ * Helper function to obtain a color code given a role name given various possible inputs.
+ */
+function getRoleColor(name, roles, index) {
+    if (index) {
+        return getRGBA(index);
+    }
+    else if (roles && roles.length > 0) {
+        var roleIndex = roles.findIndex(function (role) { return role.name === name; });
+        if (roleIndex > -1) {
+            return roles[roleIndex].rgba || getRGBA(roleIndex);
+        }
+        else {
+            return nameToRGBA(name);
+        }
+    }
+    else {
+        return nameToRGBA(name);
+    }
+}
+
+function getRTop(y, fieldHeight, iTextHeight, yRatio) {
+    return iTextHeight - (y + fieldHeight) * yRatio;
+}
+function getRLeft(x, ratio) {
+    return x * ratio;
+}
+function getRValue(y, ratio) {
+    return y * ratio;
+}
+function blobToBase64(image) {
+    var fileReader = new FileReader();
+    return new Promise(function (resolve, reject) {
+        fileReader.onerror = function () {
+            reject(new DOMException('Problem reading blob.'));
+        };
+        fileReader.onload = function () {
+            resolve(fileReader.result);
+        };
+        fileReader.readAsDataURL(image);
+    });
+}
+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 Countries = [
+    {
+        code: '+7 840',
+        name: 'Abkhazia',
+        value: '+7',
+    },
+    {
+        code: '+93',
+        name: 'Afghanistan',
+        value: '+93',
+    },
+    {
+        code: '+355',
+        name: 'Albania',
+        value: '+355',
+    },
+    {
+        code: '+213',
+        name: 'Algeria',
+        value: '+213',
+    },
+    {
+        code: '+1',
+        name: 'American Samoa',
+        value: '+1',
+    },
+    {
+        code: '+376',
+        name: 'Andorra',
+        value: '+376',
+    },
+    {
+        code: '+244',
+        name: 'Angola',
+        value: '+244',
+    },
+    {
+        code: '+1',
+        name: 'Anguilla',
+        value: '+1',
+    },
+    {
+        code: '+1',
+        name: 'Antigua and Barbuda',
+        value: '+1',
+    },
+    {
+        code: '+54',
+        name: 'Argentina',
+        value: '+54',
+    },
+    {
+        code: '+374',
+        name: 'Armenia',
+        value: '+374',
+    },
+    {
+        code: '+297',
+        name: 'Aruba',
+        value: '+297',
+    },
+    {
+        code: '+247',
+        name: 'Ascension',
+        value: '+247',
+    },
+    {
+        code: '+61',
+        name: 'Australia',
+        value: '+61',
+    },
+    {
+        code: '+672',
+        name: 'Australian External Territories',
+        value: '+672',
+    },
+    {
+        code: '+43',
+        name: 'Austria',
+        value: '+43',
+    },
+    {
+        code: '+994',
+        name: 'Azerbaijan',
+        value: '+994',
+    },
+    {
+        code: '+1',
+        name: 'Bahamas',
+        value: '+1',
+    },
+    {
+        code: '+973',
+        name: 'Bahrain',
+        value: '+973',
+    },
+    {
+        code: '+880',
+        name: 'Bangladesh',
+        value: '+880',
+    },
+    {
+        code: '+1',
+        name: 'Barbados',
+        value: '+1',
+    },
+    {
+        code: '+1',
+        name: 'Barbuda',
+        value: '+1',
+    },
+    {
+        code: '+375',
+        name: 'Belarus',
+        value: '+375',
+    },
+    {
+        code: '+32',
+        name: 'Belgium',
+        value: '+32',
+    },
+    {
+        code: '+501',
+        name: 'Belize',
+        value: '+501',
+    },
+    {
+        code: '+229',
+        name: 'Benin',
+        value: '+229',
+    },
+    {
+        code: '+1',
+        name: 'Bermuda',
+        value: '+1',
+    },
+    {
+        code: '+975',
+        name: 'Bhutan',
+        value: '+975',
+    },
+    {
+        code: '+591',
+        name: 'Bolivia',
+        value: '+591',
+    },
+    {
+        code: '+387',
+        name: 'Bosnia and Herzegovina',
+        value: '+387',
+    },
+    {
+        code: '+267',
+        name: 'Botswana',
+        value: '+267',
+    },
+    {
+        code: '+55',
+        name: 'Brazil',
+        value: '+55',
+    },
+    {
+        code: '+246',
+        name: 'British Indian Ocean Territory',
+        value: '+246',
+    },
+    {
+        code: '+1',
+        name: 'British Virgin Islands',
+        value: '+1',
+    },
+    {
+        code: '+673',
+        name: 'Brunei',
+        value: '+673',
+    },
+    {
+        code: '+359',
+        name: 'Bulgaria',
+        value: '+359',
+    },
+    {
+        code: '+226',
+        name: 'Burkina Faso',
+        value: '+226',
+    },
+    {
+        code: '+257',
+        name: 'Burundi',
+        value: '+257',
+    },
+    {
+        code: '+855',
+        name: 'Cambodia',
+        value: '+855',
+    },
+    {
+        code: '+237',
+        name: 'Cameroon',
+        value: '+237',
+    },
+    {
+        code: '+1',
+        name: 'Canada',
+        value: '+1',
+    },
+    {
+        code: '+238',
+        name: 'Cape Verde',
+        value: '+238',
+    },
+    {
+        code: '+1',
+        name: 'Cayman Islands',
+        value: '+1',
+    },
+    {
+        code: '+236',
+        name: 'Central African Republic',
+        value: '+236',
+    },
+    {
+        code: '+235',
+        name: 'Chad',
+        value: '+235',
+    },
+    {
+        code: '+56',
+        name: 'Chile',
+        value: '+56',
+    },
+    {
+        code: '+86',
+        name: 'China',
+        value: '+86',
+    },
+    {
+        code: '+61',
+        name: 'Christmas Island',
+        value: '+61',
+    },
+    {
+        code: '+61',
+        name: 'Cocos-Keeling Islands',
+        value: '+61',
+    },
+    {
+        code: '+57',
+        name: 'Colombia',
+        value: '+57',
+    },
+    {
+        code: '+269',
+        name: 'Comoros',
+        value: '+269',
+    },
+    {
+        code: '+242',
+        name: 'Congo',
+        value: '+242',
+    },
+    {
+        code: '+243',
+        name: 'Congo, Dem. Rep. of (Zaire)',
+        value: '+243',
+    },
+    {
+        code: '+682',
+        name: 'Cook Islands',
+        value: '+682',
+    },
+    {
+        code: '+506',
+        name: 'Costa Rica',
+        value: '+506',
+    },
+    {
+        code: '+385',
+        name: 'Croatia',
+        value: '+385',
+    },
+    {
+        code: '+53',
+        name: 'Cuba',
+        value: '+53',
+    },
+    {
+        code: '+599',
+        name: 'Curacao',
+        value: '+599',
+    },
+    {
+        code: '+537',
+        name: 'Cyprus',
+        value: '+537',
+    },
+    {
+        code: '+420',
+        name: 'Czech Republic',
+        value: '+420',
+    },
+    {
+        code: '+45',
+        name: 'Denmark',
+        value: '+45',
+    },
+    {
+        code: '+246',
+        name: 'Diego Garcia',
+        value: '+246',
+    },
+    {
+        code: '+253',
+        name: 'Djibouti',
+        value: '+253',
+    },
+    {
+        code: '+1',
+        name: 'Dominica',
+        value: '+1',
+    },
+    {
+        code: '+1',
+        name: 'Dominican Republic',
+        value: '+1',
+    },
+    {
+        code: '+670',
+        name: 'East Timor',
+        value: '+670',
+    },
+    {
+        code: '+56',
+        name: 'Easter Island',
+        value: '+56',
+    },
+    {
+        code: '+593',
+        name: 'Ecuador',
+        value: '+593',
+    },
+    {
+        code: '+20',
+        name: 'Egypt',
+        value: '+20',
+    },
+    {
+        code: '+503',
+        name: 'El Salvador',
+        value: '+503',
+    },
+    {
+        code: '+240',
+        name: 'Equatorial Guinea',
+        value: '+240',
+    },
+    {
+        code: '+291',
+        name: 'Eritrea',
+        value: '+291',
+    },
+    {
+        code: '+372',
+        name: 'Estonia',
+        value: '+372',
+    },
+    {
+        code: '+251',
+        name: 'Ethiopia',
+        value: '+251',
+    },
+    {
+        code: '+500',
+        name: 'Falkland Islands',
+        value: '+500',
+    },
+    {
+        code: '+298',
+        name: 'Faroe Islands',
+        value: '+298',
+    },
+    {
+        code: '+679',
+        name: 'Fiji',
+        value: '+679',
+    },
+    {
+        code: '+358',
+        name: 'Finland',
+        value: '+358',
+    },
+    {
+        code: '+33',
+        name: 'France',
+        value: '+33',
+    },
+    {
+        code: '+596',
+        name: 'Martinique',
+        value: '+596',
+    },
+    {
+        code: '+594',
+        name: 'French Guiana',
+        value: '+594',
+    },
+    {
+        code: '+689',
+        name: 'French Polynesia',
+        value: '+689',
+    },
+    {
+        code: '+241',
+        name: 'Gabon',
+        value: '+241',
+    },
+    {
+        code: '+220',
+        name: 'Gambia',
+        value: '+220',
+    },
+    {
+        code: '+995',
+        name: 'Georgia',
+        value: '+995',
+    },
+    {
+        code: '+49',
+        name: 'Germany',
+        value: '+49',
+    },
+    {
+        code: '+233',
+        name: 'Ghana',
+        value: '+233',
+    },
+    {
+        code: '+350',
+        name: 'Gibraltar',
+        value: '+350',
+    },
+    {
+        code: '+30',
+        name: 'Greece',
+        value: '+30',
+    },
+    {
+        code: '+299',
+        name: 'Greenland',
+        value: '+299',
+    },
+    {
+        code: '+1',
+        name: 'Grenada',
+        value: '+1',
+    },
+    {
+        code: '+590',
+        name: 'Guadeloupe',
+        value: '+590',
+    },
+    {
+        code: '+1',
+        name: 'Guam',
+        value: '+1',
+    },
+    {
+        code: '+502',
+        name: 'Guatemala',
+        value: '+502',
+    },
+    {
+        code: '+224',
+        name: 'Guinea',
+        value: '+224',
+    },
+    {
+        code: '+245',
+        name: 'Guinea-Bissau',
+        value: '+245',
+    },
+    {
+        code: '+595',
+        name: 'Guyana',
+        value: '+595',
+    },
+    {
+        code: '+509',
+        name: 'Haiti',
+        value: '+509',
+    },
+    {
+        code: '+504',
+        name: 'Honduras',
+        value: '+504',
+    },
+    {
+        code: '+852',
+        name: 'Hong Kong SAR China',
+        value: '+852',
+    },
+    {
+        code: '+36',
+        name: 'Hungary',
+        value: '+36',
+    },
+    {
+        code: '+354',
+        name: 'Iceland',
+        value: '+354',
+    },
+    {
+        code: '+91',
+        name: 'India',
+        value: '+91',
+    },
+    {
+        code: '+62',
+        name: 'Indonesia',
+        value: '+62',
+    },
+    {
+        code: '+98',
+        name: 'Iran',
+        value: '+98',
+    },
+    {
+        code: '+964',
+        name: 'Iraq',
+        value: '+964',
+    },
+    {
+        code: '+353',
+        name: 'Ireland',
+        value: '+353',
+    },
+    {
+        code: '+972',
+        name: 'Israel',
+        value: '+972',
+    },
+    {
+        code: '+39',
+        name: 'Italy',
+        value: '+39',
+    },
+    {
+        code: '+225',
+        name: 'Ivory Coast',
+        value: '+225',
+    },
+    {
+        code: '+1',
+        name: 'Jamaica',
+        value: '+1',
+    },
+    {
+        code: '+81',
+        name: 'Japan',
+        value: '+81',
+    },
+    {
+        code: '+962',
+        name: 'Jordan',
+        value: '+962',
+    },
+    {
+        code: '+77',
+        name: 'Kazakhstan',
+        value: '+7',
+    },
+    {
+        code: '+254',
+        name: 'Kenya',
+        value: '+254',
+    },
+    {
+        code: '+686',
+        name: 'Kiribati',
+        value: '+686',
+    },
+    {
+        code: '+965',
+        name: 'Kuwait',
+        value: '+965',
+    },
+    {
+        code: '+996',
+        name: 'Kyrgyzstan',
+        value: '+996',
+    },
+    {
+        code: '+856',
+        name: 'Laos',
+        value: '+856',
+    },
+    {
+        code: '+371',
+        name: 'Latvia',
+        value: '+371',
+    },
+    {
+        code: '+961',
+        name: 'Lebanon',
+        value: '+961',
+    },
+    {
+        code: '+266',
+        name: 'Lesotho',
+        value: '+266',
+    },
+    {
+        code: '+231',
+        name: 'Liberia',
+        value: '+231',
+    },
+    {
+        code: '+218',
+        name: 'Libya',
+        value: '+218',
+    },
+    {
+        code: '+423',
+        name: 'Liechtenstein',
+        value: '+423',
+    },
+    {
+        code: '+370',
+        name: 'Lithuania',
+        value: '+370',
+    },
+    {
+        code: '+352',
+        name: 'Luxembourg',
+        value: '+352',
+    },
+    {
+        code: '+853',
+        name: 'Macau SAR China',
+        value: '+853',
+    },
+    {
+        code: '+389',
+        name: 'Macedonia',
+        value: '+389',
+    },
+    {
+        code: '+261',
+        name: 'Madagascar',
+        value: '+261',
+    },
+    {
+        code: '+265',
+        name: 'Malawi',
+        value: '+265',
+    },
+    {
+        code: '+60',
+        name: 'Malaysia',
+        value: '+60',
+    },
+    {
+        code: '+960',
+        name: 'Maldives',
+        value: '+960',
+    },
+    {
+        code: '+223',
+        name: 'Mali',
+        value: '+223',
+    },
+    {
+        code: '+356',
+        name: 'Malta',
+        value: '+356',
+    },
+    {
+        code: '+692',
+        name: 'Marshall Islands',
+        value: '+692',
+    },
+    {
+        code: '+596',
+        name: 'Martinique',
+        value: '+596',
+    },
+    {
+        code: '+222',
+        name: 'Mauritania',
+        value: '+222',
+    },
+    {
+        code: '+230',
+        name: 'Mauritius',
+        value: '+230',
+    },
+    {
+        code: '+262',
+        name: 'Mayotte or Réunion',
+        value: '+262',
+    },
+    {
+        code: '+52',
+        name: 'Mexico',
+        value: '+52',
+    },
+    {
+        code: '+691',
+        name: 'Micronesia',
+        value: '+691',
+    },
+    {
+        code: '+1',
+        name: 'Midway Island',
+        value: '+1',
+    },
+    {
+        code: '+373',
+        name: 'Moldova',
+        value: '+373',
+    },
+    {
+        code: '+377',
+        name: 'Monaco',
+        value: '+377',
+    },
+    {
+        code: '+976',
+        name: 'Mongolia',
+        value: '+976',
+    },
+    {
+        code: '+382',
+        name: 'Montenegro',
+        value: '+382',
+    },
+    {
+        code: '+1',
+        name: 'Montserrat',
+        value: '+1',
+    },
+    {
+        code: '+212',
+        name: 'Morocco',
+        value: '+212',
+    },
+    {
+        code: '+95',
+        name: 'Myanmar',
+        value: '+95',
+    },
+    {
+        code: '+264',
+        name: 'Namibia',
+        value: '+264',
+    },
+    {
+        code: '+674',
+        name: 'Nauru',
+        value: '+674',
+    },
+    {
+        code: '+977',
+        name: 'Nepal',
+        value: '+977',
+    },
+    {
+        code: '+31',
+        name: 'Netherlands',
+        value: '+31',
+    },
+    {
+        code: '+599',
+        name: 'Netherlands Antilles',
+        value: '+599',
+    },
+    {
+        code: '+1',
+        name: 'Nevis',
+        value: '+1',
+    },
+    {
+        code: '+687',
+        name: 'New Caledonia',
+        value: '+687',
+    },
+    {
+        code: '+64',
+        name: 'New Zealand',
+        value: '+64',
+    },
+    {
+        code: '+505',
+        name: 'Nicaragua',
+        value: '+505',
+    },
+    {
+        code: '+227',
+        name: 'Niger',
+        value: '+227',
+    },
+    {
+        code: '+234',
+        name: 'Nigeria',
+        value: '+234',
+    },
+    {
+        code: '+683',
+        name: 'Niue',
+        value: '+683',
+    },
+    {
+        code: '+672',
+        name: 'Norfolk Island',
+        value: '+672',
+    },
+    {
+        code: '+850',
+        name: 'North Korea',
+        value: '+850',
+    },
+    {
+        code: '+1',
+        name: 'Northern Mariana Islands',
+        value: '+1',
+    },
+    {
+        code: '+47',
+        name: 'Norway',
+        value: '+47',
+    },
+    {
+        code: '+968',
+        name: 'Oman',
+        value: '+968',
+    },
+    {
+        code: '+92',
+        name: 'Pakistan',
+        value: '+92',
+    },
+    {
+        code: '+680',
+        name: 'Palau',
+        value: '+680',
+    },
+    {
+        code: '+970',
+        name: 'Palestinian Territory',
+        value: '+970',
+    },
+    {
+        code: '+507',
+        name: 'Panama',
+        value: '+507',
+    },
+    {
+        code: '+675',
+        name: 'Papua New Guinea',
+        value: '+675',
+    },
+    {
+        code: '+595',
+        name: 'Paraguay',
+        value: '+595',
+    },
+    {
+        code: '+51',
+        name: 'Peru',
+        value: '+51',
+    },
+    {
+        code: '+63',
+        name: 'Philippines',
+        value: '+63',
+    },
+    {
+        code: '+48',
+        name: 'Poland',
+        value: '+48',
+    },
+    {
+        code: '+351',
+        name: 'Portugal',
+        value: '+351',
+    },
+    {
+        code: '+1',
+        name: 'Puerto Rico',
+        value: '+1',
+    },
+    {
+        code: '+974',
+        name: 'Qatar',
+        value: '+974',
+    },
+    {
+        code: '+40',
+        name: 'Romania',
+        value: '+40',
+    },
+    {
+        code: '+7',
+        name: 'Russia',
+        value: '+7',
+    },
+    {
+        code: '+250',
+        name: 'Rwanda',
+        value: '+250',
+    },
+    {
+        code: '508',
+        name: 'Saint Pierre and Miquelon',
+        value: '508',
+    },
+    {
+        code: '+685',
+        name: 'Samoa',
+        value: '+685',
+    },
+    {
+        code: '+378',
+        name: 'San Marino',
+        value: '+378',
+    },
+    {
+        code: '+966',
+        name: 'Saudi Arabia',
+        value: '+966',
+    },
+    {
+        code: '+221',
+        name: 'Senegal',
+        value: '+221',
+    },
+    {
+        code: '+381',
+        name: 'Serbia',
+        value: '+381',
+    },
+    {
+        code: '+248',
+        name: 'Seychelles',
+        value: '+248',
+    },
+    {
+        code: '+232',
+        name: 'Sierra Leone',
+        value: '+232',
+    },
+    {
+        code: '+65',
+        name: 'Singapore',
+        value: '+65',
+    },
+    {
+        code: '+421',
+        name: 'Slovakia',
+        value: '+421',
+    },
+    {
+        code: '+386',
+        name: 'Slovenia',
+        value: '+386',
+    },
+    {
+        code: '+677',
+        name: 'Solomon Islands',
+        value: '+677',
+    },
+    {
+        code: '+27',
+        name: 'South Africa',
+        value: '+27',
+    },
+    {
+        code: '+500',
+        name: 'South Georgia and the South Sandwich Islands',
+        value: '+500',
+    },
+    {
+        code: '+82',
+        name: 'South Korea',
+        value: '+82',
+    },
+    {
+        code: '+34',
+        name: 'Spain',
+        value: '+34',
+    },
+    {
+        code: '+94',
+        name: 'Sri Lanka',
+        value: '+94',
+    },
+    {
+        code: '+249',
+        name: 'Sudan',
+        value: '+249',
+    },
+    {
+        code: '+597',
+        name: 'Suriname',
+        value: '+597',
+    },
+    {
+        code: '+268',
+        name: 'Swaziland',
+        value: '+268',
+    },
+    {
+        code: '+46',
+        name: 'Sweden',
+        value: '+46',
+    },
+    {
+        code: '+41',
+        name: 'Switzerland',
+        value: '+41',
+    },
+    {
+        code: '+963',
+        name: 'Syria',
+        value: '+963',
+    },
+    {
+        code: '+886',
+        name: 'Taiwan',
+        value: '+886',
+    },
+    {
+        code: '+992',
+        name: 'Tajikistan',
+        value: '+992',
+    },
+    {
+        code: '+255',
+        name: 'Tanzania',
+        value: '+255',
+    },
+    {
+        code: '+66',
+        name: 'Thailand',
+        value: '+66',
+    },
+    {
+        code: '+670',
+        name: 'Timor Leste',
+        value: '+670',
+    },
+    {
+        code: '+228',
+        name: 'Togo',
+        value: '+228',
+    },
+    {
+        code: '+690',
+        name: 'Tokelau',
+        value: '+690',
+    },
+    {
+        code: '+676',
+        name: 'Tonga',
+        value: '+676',
+    },
+    {
+        code: '+1',
+        name: 'Trinidad and Tobago',
+        value: '+1',
+    },
+    {
+        code: '+216',
+        name: 'Tunisia',
+        value: '+216',
+    },
+    {
+        code: '+90',
+        name: 'Turkey',
+        value: '+90',
+    },
+    {
+        code: '+993',
+        name: 'Turkmenistan',
+        value: '+993',
+    },
+    {
+        code: '+1',
+        name: 'Turks and Caicos Islands',
+        value: '+1',
+    },
+    {
+        code: '+688',
+        name: 'Tuvalu',
+        value: '+688',
+    },
+    {
+        code: '+1',
+        name: 'U.S. Virgin Islands',
+        value: '+1',
+    },
+    {
+        code: '+256',
+        name: 'Uganda',
+        value: '+256',
+    },
+    {
+        code: '+380',
+        name: 'Ukraine',
+        value: '+380',
+    },
+    {
+        code: '+971',
+        name: 'United Arab Emirates',
+        value: '+971',
+    },
+    {
+        code: '+44',
+        name: 'United Kingdom',
+        value: '+44',
+    },
+    {
+        code: '+1',
+        name: 'United States',
+        value: '+1',
+    },
+    {
+        code: '+598',
+        name: 'Uruguay',
+        value: '+598',
+    },
+    {
+        code: '+998',
+        name: 'Uzbekistan',
+        value: '+998',
+    },
+    {
+        code: '+678',
+        name: 'Vanuatu',
+        value: '+678',
+    },
+    {
+        code: '+58',
+        name: 'Venezuela',
+        value: '+58',
+    },
+    {
+        code: '+84',
+        name: 'Vietnam',
+        value: '+84',
+    },
+    {
+        code: '+1',
+        name: 'Wake Island',
+        value: '+1',
+    },
+    {
+        code: '+681',
+        name: 'Wallis and Futuna',
+        value: '+681',
+    },
+    {
+        code: '+967',
+        name: 'Yemen',
+        value: '+967',
+    },
+    {
+        code: '+260',
+        name: 'Zambia',
+        value: '+260',
+    },
+    {
+        code: '+255',
+        name: 'Zanzibar',
+        value: '+255',
+    },
+    {
+        code: '+263',
+        name: 'Zimbabwe',
+        value: '+263',
+    },
+];
+function getCountryByCode(code) {
+    var found = Countries.find(function (country) { return country.code === code; });
+    if (found)
+        return found;
+    if (isFrenchGuiana(code)) {
+        return {
+            code: '+594',
+            name: 'French Guiana',
+            value: '+594',
+        };
+    }
+    else if (isGuadeloupe(code)) {
+        return {
+            code: '+590',
+            name: 'Guadeloupe',
+            value: '+590',
+        };
+    }
+    else if (isMartinique(code)) {
+        return {
+            code: '+596',
+            name: 'Martinique',
+            value: '+596',
+        };
+    }
+    else if (isMayotte(code)) {
+        return {
+            code: '+262',
+            name: 'Mayotte or Réunion',
+            value: '+262',
+        };
+    }
+    return null;
+}
+function isFrenchGuiana(code) {
+    return '+594' === code.substring(0, 4);
+}
+function isGuadeloupe(code) {
+    return '+590' === code.substring(0, 4);
+}
+function isMartinique(code) {
+    return '+596' === code.substring(0, 4);
+}
+function isMayotte(code) {
+    return '+262' === code.substring(0, 4);
+}
+function getPlusOneCountry(code) {
+    var info = null;
+    switch (code.substring(0, 5)) {
+        case '+1684':
+            info = {
+                code: '+1',
+                name: 'American Samoa',
+                value: '+1',
+            };
+            break;
+        case '+1264':
+            info = {
+                code: '+1',
+                name: 'Anguilla',
+                value: '+1',
+            };
+        case '+1268':
+            info = {
+                code: '+1',
+                name: 'Antigua and Barbuda',
+                value: '+1',
+            };
+        case '+1242':
+            info = {
+                code: '+1',
+                name: 'Bahamas',
+                value: '+1',
+            };
+            break;
+        case '+1246':
+            info = {
+                code: '+1',
+                name: 'Barbados',
+                value: '+1',
+            };
+            break;
+        case '+1441':
+            info = {
+                code: '+1',
+                name: 'Bermuda',
+                value: '+1',
+            };
+            break;
+        case '+1284':
+            info = {
+                code: '+1',
+                name: 'British Virgin Islands',
+                value: '+1',
+            };
+            break;
+        case '+1':
+            info = {
+                code: '+1',
+                name: '',
+                value: '+1',
+            };
+            break;
+        default:
+            break;
+    }
+    return info;
+}
+function isCanada(code) {
+    var canadianAreaCodes = [
+        '403',
+        '587',
+        '780',
+        '825',
+        '604',
+        '250',
+        '778',
+        '236',
+        '204',
+        '431',
+        '506',
+        '709',
+        '867',
+        '782',
+        '902',
+        '867',
+        '548',
+        '705',
+        '365',
+        '613',
+        '807',
+        '226',
+        '289',
+        '437',
+        '519',
+        '647',
+        '905',
+        '249',
+        '343',
+        '416',
+        '902',
+        '782',
+        '450',
+        '418',
+        '579',
+        '873',
+        '367',
+        '514',
+        '581',
+        '819',
+        '438',
+        '639',
+        '306',
+        '867',
+    ];
+    var areaCode = code.substring(0, 5);
+    return canadianAreaCodes.findIndex(function (x) { return '+1' + x === areaCode; }) > -1;
+}
+function isAmericanSamoa(code) {
+    return code.substring(0, 5) === '+1684';
+}
+function isDominicanRepublic(code) {
+    return '+1809' === code.substring(0, 5) || '+1829' === code.substring(0, 5) || '+1849' === code.substring(0, 5);
+}
+function isPuertoRico(code) {
+    return code.substring(0, 5) === '+' || code.substring(0, 5) === '+';
+}
+// need to finish
+function getMatchingCountry(code, substrings) {
+    var toMatch = code.substring(0, substrings);
+    return Countries.filter(function (c) { return c.code === toMatch; }).length;
+}
+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 getValidators = function () {
+    return getEndpoint()
+        .api.get('/validators')
+        .then(function (r) { return r.data; });
+};
+var getValidator = function (validatorName) {
+    return getEndpoint()
+        .api.get("/validators/".concat(validatorName))
+        .then(function (r) { return r.data; });
+};
+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 isValidRoleName = function (value, roles) { return roles.findIndex(function (role) { return role.name === value; }) !== -1; };
+var TagRegEx = /^[a-zA-Z0-9-]{0,32}$/;
+var isValidTag = function (value, tags) {
+    return TagRegEx.test(value) || tags.findIndex(function (tag) { return tag.tag_name === value; }) !== -1;
+};
+
+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 summary of currently active documents.
+ *
+ * ```typescript
+ * import {Documents} from '@verdocs/js-sdk/Documents';
+ *
+ * const {action_required, completed, waiting_on_others} = await Documents.getSummary();
+ * ```
+ */
+var getSummary = function (page) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.post('/documents/summary', { page: page })
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Search for documents matching various criteria.
+ *
+ * ```typescript
+ * import {Documents} from '@verdocs/js-sdk/Documents';
+ *
+ * const {result, page, total} = await Documents.search({ ... });
+ * ```
+ */
+var searchDocuments = function (params) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, getEndpoint()
+                .api.post('/documents/search', params)
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * 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 getDocumentRecipients = 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, "/recipients"))
+                .then(function (r) { return r.data; })];
+    });
+}); };
+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; })];
+    });
+}); };
+var updateDocumentFieldSignature = function (documentId, fieldName, signatureId) { 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, "/signature/").concat(signatureId))
+                .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(VerdocsSign$1);
+
+const VerdocsSign = VerdocsSign$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsSign, defineCustomElement };