@verdocs/web-sdk 1.5.2 → 1.6.0

package/dist/esm-es5/verdocs-sign.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@verdocs/js-sdk/Utils/Locales.js","node_modules/@verdocs/js-sdk/Templates/Validators.js","node_modules/@verdocs/js-sdk/Utils/Colors.js","node_modules/@verdocs/js-sdk/Utils/Fields.js","src/components/embeds/verdocs-sign/verdocs-sign.scss?tag=verdocs-sign","src/components/embeds/verdocs-sign/verdocs-sign.tsx"],"names":["e164Regex","RegExp","simpleE164Validator","code","length","test","EmailRegEx","isValidEmail","value","isValidPhone","getRGBA","roleIndex","rescale","r","n","verdocsSignCss","VerdocsSign","class_1","hostRef","this","endpoint","VerdocsEndpoint","getDefault","documentid","roleid","invitecode","recipient","signerToken","pdfUrl","recipientIndex","document","fields","hasSignature","nextButtonLabel","focusedField","prototype","componentDidLoad","console","log","Documents.getSigningSession","documentId","roleId","inviteCode","_o","_p","sent","session","setToken","agreed","Documents.getDocument","concat","getBaseURL","envelope_document_id","recipients","findIndex","role_name","_this","filter","field","recipient_role","e_1","handleClickAgree","updateRecipientStatus","then","catch","e","savePDF","fileName","name","updated_at","split","Documents.getDocumentFile","data","xhr","XMLHttpRequest","responseType","onload","a","createElement","href","window","URL","createObjectURL","response","download","style","display","body","appendChild","click","remove","url","open","send","handleOptionSelected","detail","id","alert","handleFieldChange","optionId","type","Documents.updateDocumentField","prepared","options","checked","settings","map","option","selected","renderCheckboxGroupOption","page","index","left","xRatio","x","bottom","yRatio","y","position","transform","backgroundColor","h","order","onFieldChange","renderRadioGroupOption","renderField","required","_q","_r","_s","base64","_t","placeholder","_u","_v","_w","result","renderOnPage","pdfPageInfo","pages","find","pageNumber","class","rgba","height","width","isFieldValid","_a","validator","_b","_c","_d","_e","_f","_h","_g","_j","minimum_checked","_k","maximum_checked","_m","_l","handleDocumentRendered","handleNext","requiredFields","focusedIndex","nextFocusedIndex","nextRequiredField","el","getElementById","focusField","render","menuOptions","label","disabled","Host","storybook","onOptionSelected","onChange","htmlFor","flex","size","onClick","source","onDocumentRendered","top","canvasTop","margin","numRendered"],"mappings":"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","sourcesContent":["export var Countries = [\n    {\n        code: '+7 840',\n        name: 'Abkhazia',\n        value: '+7',\n    },\n    {\n        code: '+93',\n        name: 'Afghanistan',\n        value: '+93',\n    },\n    {\n        code: '+355',\n        name: 'Albania',\n        value: '+355',\n    },\n    {\n        code: '+213',\n        name: 'Algeria',\n        value: '+213',\n    },\n    {\n        code: '+1',\n        name: 'American Samoa',\n        value: '+1',\n    },\n    {\n        code: '+376',\n        name: 'Andorra',\n        value: '+376',\n    },\n    {\n        code: '+244',\n        name: 'Angola',\n        value: '+244',\n    },\n    {\n        code: '+1',\n        name: 'Anguilla',\n        value: '+1',\n    },\n    {\n        code: '+1',\n        name: 'Antigua and Barbuda',\n        value: '+1',\n    },\n    {\n        code: '+54',\n        name: 'Argentina',\n        value: '+54',\n    },\n    {\n        code: '+374',\n        name: 'Armenia',\n        value: '+374',\n    },\n    {\n        code: '+297',\n        name: 'Aruba',\n        value: '+297',\n    },\n    {\n        code: '+247',\n        name: 'Ascension',\n        value: '+247',\n    },\n    {\n        code: '+61',\n        name: 'Australia',\n        value: '+61',\n    },\n    {\n        code: '+672',\n        name: 'Australian External Territories',\n        value: '+672',\n    },\n    {\n        code: '+43',\n        name: 'Austria',\n        value: '+43',\n    },\n    {\n        code: '+994',\n        name: 'Azerbaijan',\n        value: '+994',\n    },\n    {\n        code: '+1',\n        name: 'Bahamas',\n        value: '+1',\n    },\n    {\n        code: '+973',\n        name: 'Bahrain',\n        value: '+973',\n    },\n    {\n        code: '+880',\n        name: 'Bangladesh',\n        value: '+880',\n    },\n    {\n        code: '+1',\n        name: 'Barbados',\n        value: '+1',\n    },\n    {\n        code: '+1',\n        name: 'Barbuda',\n        value: '+1',\n    },\n    {\n        code: '+375',\n        name: 'Belarus',\n        value: '+375',\n    },\n    {\n        code: '+32',\n        name: 'Belgium',\n        value: '+32',\n    },\n    {\n        code: '+501',\n        name: 'Belize',\n        value: '+501',\n    },\n    {\n        code: '+229',\n        name: 'Benin',\n        value: '+229',\n    },\n    {\n        code: '+1',\n        name: 'Bermuda',\n        value: '+1',\n    },\n    {\n        code: '+975',\n        name: 'Bhutan',\n        value: '+975',\n    },\n    {\n        code: '+591',\n        name: 'Bolivia',\n        value: '+591',\n    },\n    {\n        code: '+387',\n        name: 'Bosnia and Herzegovina',\n        value: '+387',\n    },\n    {\n        code: '+267',\n        name: 'Botswana',\n        value: '+267',\n    },\n    {\n        code: '+55',\n        name: 'Brazil',\n        value: '+55',\n    },\n    {\n        code: '+246',\n        name: 'British Indian Ocean Territory',\n        value: '+246',\n    },\n    {\n        code: '+1',\n        name: 'British Virgin Islands',\n        value: '+1',\n    },\n    {\n        code: '+673',\n        name: 'Brunei',\n        value: '+673',\n    },\n    {\n        code: '+359',\n        name: 'Bulgaria',\n        value: '+359',\n    },\n    {\n        code: '+226',\n        name: 'Burkina Faso',\n        value: '+226',\n    },\n    {\n        code: '+257',\n        name: 'Burundi',\n        value: '+257',\n    },\n    {\n        code: '+855',\n        name: 'Cambodia',\n        value: '+855',\n    },\n    {\n        code: '+237',\n        name: 'Cameroon',\n        value: '+237',\n    },\n    {\n        code: '+1',\n        name: 'Canada',\n        value: '+1',\n    },\n    {\n        code: '+238',\n        name: 'Cape Verde',\n        value: '+238',\n    },\n    {\n        code: '+1',\n        name: 'Cayman Islands',\n        value: '+1',\n    },\n    {\n        code: '+236',\n        name: 'Central African Republic',\n        value: '+236',\n    },\n    {\n        code: '+235',\n        name: 'Chad',\n        value: '+235',\n    },\n    {\n        code: '+56',\n        name: 'Chile',\n        value: '+56',\n    },\n    {\n        code: '+86',\n        name: 'China',\n        value: '+86',\n    },\n    {\n        code: '+61',\n        name: 'Christmas Island',\n        value: '+61',\n    },\n    {\n        code: '+61',\n        name: 'Cocos-Keeling Islands',\n        value: '+61',\n    },\n    {\n        code: '+57',\n        name: 'Colombia',\n        value: '+57',\n    },\n    {\n        code: '+269',\n        name: 'Comoros',\n        value: '+269',\n    },\n    {\n        code: '+242',\n        name: 'Congo',\n        value: '+242',\n    },\n    {\n        code: '+243',\n        name: 'Congo, Dem. Rep. of (Zaire)',\n        value: '+243',\n    },\n    {\n        code: '+682',\n        name: 'Cook Islands',\n        value: '+682',\n    },\n    {\n        code: '+506',\n        name: 'Costa Rica',\n        value: '+506',\n    },\n    {\n        code: '+385',\n        name: 'Croatia',\n        value: '+385',\n    },\n    {\n        code: '+53',\n        name: 'Cuba',\n        value: '+53',\n    },\n    {\n        code: '+599',\n        name: 'Curacao',\n        value: '+599',\n    },\n    {\n        code: '+537',\n        name: 'Cyprus',\n        value: '+537',\n    },\n    {\n        code: '+420',\n        name: 'Czech Republic',\n        value: '+420',\n    },\n    {\n        code: '+45',\n        name: 'Denmark',\n        value: '+45',\n    },\n    {\n        code: '+246',\n        name: 'Diego Garcia',\n        value: '+246',\n    },\n    {\n        code: '+253',\n        name: 'Djibouti',\n        value: '+253',\n    },\n    {\n        code: '+1',\n        name: 'Dominica',\n        value: '+1',\n    },\n    {\n        code: '+1',\n        name: 'Dominican Republic',\n        value: '+1',\n    },\n    {\n        code: '+670',\n        name: 'East Timor',\n        value: '+670',\n    },\n    {\n        code: '+56',\n        name: 'Easter Island',\n        value: '+56',\n    },\n    {\n        code: '+593',\n        name: 'Ecuador',\n        value: '+593',\n    },\n    {\n        code: '+20',\n        name: 'Egypt',\n        value: '+20',\n    },\n    {\n        code: '+503',\n        name: 'El Salvador',\n        value: '+503',\n    },\n    {\n        code: '+240',\n        name: 'Equatorial Guinea',\n        value: '+240',\n    },\n    {\n        code: '+291',\n        name: 'Eritrea',\n        value: '+291',\n    },\n    {\n        code: '+372',\n        name: 'Estonia',\n        value: '+372',\n    },\n    {\n        code: '+251',\n        name: 'Ethiopia',\n        value: '+251',\n    },\n    {\n        code: '+500',\n        name: 'Falkland Islands',\n        value: '+500',\n    },\n    {\n        code: '+298',\n        name: 'Faroe Islands',\n        value: '+298',\n    },\n    {\n        code: '+679',\n        name: 'Fiji',\n        value: '+679',\n    },\n    {\n        code: '+358',\n        name: 'Finland',\n        value: '+358',\n    },\n    {\n        code: '+33',\n        name: 'France',\n        value: '+33',\n    },\n    {\n        code: '+596',\n        name: 'Martinique',\n        value: '+596',\n    },\n    {\n        code: '+594',\n        name: 'French Guiana',\n        value: '+594',\n    },\n    {\n        code: '+689',\n        name: 'French Polynesia',\n        value: '+689',\n    },\n    {\n        code: '+241',\n        name: 'Gabon',\n        value: '+241',\n    },\n    {\n        code: '+220',\n        name: 'Gambia',\n        value: '+220',\n    },\n    {\n        code: '+995',\n        name: 'Georgia',\n        value: '+995',\n    },\n    {\n        code: '+49',\n        name: 'Germany',\n        value: '+49',\n    },\n    {\n        code: '+233',\n        name: 'Ghana',\n        value: '+233',\n    },\n    {\n        code: '+350',\n        name: 'Gibraltar',\n        value: '+350',\n    },\n    {\n        code: '+30',\n        name: 'Greece',\n        value: '+30',\n    },\n    {\n        code: '+299',\n        name: 'Greenland',\n        value: '+299',\n    },\n    {\n        code: '+1',\n        name: 'Grenada',\n        value: '+1',\n    },\n    {\n        code: '+590',\n        name: 'Guadeloupe',\n        value: '+590',\n    },\n    {\n        code: '+1',\n        name: 'Guam',\n        value: '+1',\n    },\n    {\n        code: '+502',\n        name: 'Guatemala',\n        value: '+502',\n    },\n    {\n        code: '+224',\n        name: 'Guinea',\n        value: '+224',\n    },\n    {\n        code: '+245',\n        name: 'Guinea-Bissau',\n        value: '+245',\n    },\n    {\n        code: '+595',\n        name: 'Guyana',\n        value: '+595',\n    },\n    {\n        code: '+509',\n        name: 'Haiti',\n        value: '+509',\n    },\n    {\n        code: '+504',\n        name: 'Honduras',\n        value: '+504',\n    },\n    {\n        code: '+852',\n        name: 'Hong Kong SAR China',\n        value: '+852',\n    },\n    {\n        code: '+36',\n        name: 'Hungary',\n        value: '+36',\n    },\n    {\n        code: '+354',\n        name: 'Iceland',\n        value: '+354',\n    },\n    {\n        code: '+91',\n        name: 'India',\n        value: '+91',\n    },\n    {\n        code: '+62',\n        name: 'Indonesia',\n        value: '+62',\n    },\n    {\n        code: '+98',\n        name: 'Iran',\n        value: '+98',\n    },\n    {\n        code: '+964',\n        name: 'Iraq',\n        value: '+964',\n    },\n    {\n        code: '+353',\n        name: 'Ireland',\n        value: '+353',\n    },\n    {\n        code: '+972',\n        name: 'Israel',\n        value: '+972',\n    },\n    {\n        code: '+39',\n        name: 'Italy',\n        value: '+39',\n    },\n    {\n        code: '+225',\n        name: 'Ivory Coast',\n        value: '+225',\n    },\n    {\n        code: '+1',\n        name: 'Jamaica',\n        value: '+1',\n    },\n    {\n        code: '+81',\n        name: 'Japan',\n        value: '+81',\n    },\n    {\n        code: '+962',\n        name: 'Jordan',\n        value: '+962',\n    },\n    {\n        code: '+77',\n        name: 'Kazakhstan',\n        value: '+7',\n    },\n    {\n        code: '+254',\n        name: 'Kenya',\n        value: '+254',\n    },\n    {\n        code: '+686',\n        name: 'Kiribati',\n        value: '+686',\n    },\n    {\n        code: '+965',\n        name: 'Kuwait',\n        value: '+965',\n    },\n    {\n        code: '+996',\n        name: 'Kyrgyzstan',\n        value: '+996',\n    },\n    {\n        code: '+856',\n        name: 'Laos',\n        value: '+856',\n    },\n    {\n        code: '+371',\n        name: 'Latvia',\n        value: '+371',\n    },\n    {\n        code: '+961',\n        name: 'Lebanon',\n        value: '+961',\n    },\n    {\n        code: '+266',\n        name: 'Lesotho',\n        value: '+266',\n    },\n    {\n        code: '+231',\n        name: 'Liberia',\n        value: '+231',\n    },\n    {\n        code: '+218',\n        name: 'Libya',\n        value: '+218',\n    },\n    {\n        code: '+423',\n        name: 'Liechtenstein',\n        value: '+423',\n    },\n    {\n        code: '+370',\n        name: 'Lithuania',\n        value: '+370',\n    },\n    {\n        code: '+352',\n        name: 'Luxembourg',\n        value: '+352',\n    },\n    {\n        code: '+853',\n        name: 'Macau SAR China',\n        value: '+853',\n    },\n    {\n        code: '+389',\n        name: 'Macedonia',\n        value: '+389',\n    },\n    {\n        code: '+261',\n        name: 'Madagascar',\n        value: '+261',\n    },\n    {\n        code: '+265',\n        name: 'Malawi',\n        value: '+265',\n    },\n    {\n        code: '+60',\n        name: 'Malaysia',\n        value: '+60',\n    },\n    {\n        code: '+960',\n        name: 'Maldives',\n        value: '+960',\n    },\n    {\n        code: '+223',\n        name: 'Mali',\n        value: '+223',\n    },\n    {\n        code: '+356',\n        name: 'Malta',\n        value: '+356',\n    },\n    {\n        code: '+692',\n        name: 'Marshall Islands',\n        value: '+692',\n    },\n    {\n        code: '+596',\n        name: 'Martinique',\n        value: '+596',\n    },\n    {\n        code: '+222',\n        name: 'Mauritania',\n        value: '+222',\n    },\n    {\n        code: '+230',\n        name: 'Mauritius',\n        value: '+230',\n    },\n    {\n        code: '+262',\n        name: 'Mayotte or Réunion',\n        value: '+262',\n    },\n    {\n        code: '+52',\n        name: 'Mexico',\n        value: '+52',\n    },\n    {\n        code: '+691',\n        name: 'Micronesia',\n        value: '+691',\n    },\n    {\n        code: '+1',\n        name: 'Midway Island',\n        value: '+1',\n    },\n    {\n        code: '+373',\n        name: 'Moldova',\n        value: '+373',\n    },\n    {\n        code: '+377',\n        name: 'Monaco',\n        value: '+377',\n    },\n    {\n        code: '+976',\n        name: 'Mongolia',\n        value: '+976',\n    },\n    {\n        code: '+382',\n        name: 'Montenegro',\n        value: '+382',\n    },\n    {\n        code: '+1',\n        name: 'Montserrat',\n        value: '+1',\n    },\n    {\n        code: '+212',\n        name: 'Morocco',\n        value: '+212',\n    },\n    {\n        code: '+95',\n        name: 'Myanmar',\n        value: '+95',\n    },\n    {\n        code: '+264',\n        name: 'Namibia',\n        value: '+264',\n    },\n    {\n        code: '+674',\n        name: 'Nauru',\n        value: '+674',\n    },\n    {\n        code: '+977',\n        name: 'Nepal',\n        value: '+977',\n    },\n    {\n        code: '+31',\n        name: 'Netherlands',\n        value: '+31',\n    },\n    {\n        code: '+599',\n        name: 'Netherlands Antilles',\n        value: '+599',\n    },\n    {\n        code: '+1',\n        name: 'Nevis',\n        value: '+1',\n    },\n    {\n        code: '+687',\n        name: 'New Caledonia',\n        value: '+687',\n    },\n    {\n        code: '+64',\n        name: 'New Zealand',\n        value: '+64',\n    },\n    {\n        code: '+505',\n        name: 'Nicaragua',\n        value: '+505',\n    },\n    {\n        code: '+227',\n        name: 'Niger',\n        value: '+227',\n    },\n    {\n        code: '+234',\n        name: 'Nigeria',\n        value: '+234',\n    },\n    {\n        code: '+683',\n        name: 'Niue',\n        value: '+683',\n    },\n    {\n        code: '+672',\n        name: 'Norfolk Island',\n        value: '+672',\n    },\n    {\n        code: '+850',\n        name: 'North Korea',\n        value: '+850',\n    },\n    {\n        code: '+1',\n        name: 'Northern Mariana Islands',\n        value: '+1',\n    },\n    {\n        code: '+47',\n        name: 'Norway',\n        value: '+47',\n    },\n    {\n        code: '+968',\n        name: 'Oman',\n        value: '+968',\n    },\n    {\n        code: '+92',\n        name: 'Pakistan',\n        value: '+92',\n    },\n    {\n        code: '+680',\n        name: 'Palau',\n        value: '+680',\n    },\n    {\n        code: '+970',\n        name: 'Palestinian Territory',\n        value: '+970',\n    },\n    {\n        code: '+507',\n        name: 'Panama',\n        value: '+507',\n    },\n    {\n        code: '+675',\n        name: 'Papua New Guinea',\n        value: '+675',\n    },\n    {\n        code: '+595',\n        name: 'Paraguay',\n        value: '+595',\n    },\n    {\n        code: '+51',\n        name: 'Peru',\n        value: '+51',\n    },\n    {\n        code: '+63',\n        name: 'Philippines',\n        value: '+63',\n    },\n    {\n        code: '+48',\n        name: 'Poland',\n        value: '+48',\n    },\n    {\n        code: '+351',\n        name: 'Portugal',\n        value: '+351',\n    },\n    {\n        code: '+1',\n        name: 'Puerto Rico',\n        value: '+1',\n    },\n    {\n        code: '+974',\n        name: 'Qatar',\n        value: '+974',\n    },\n    {\n        code: '+40',\n        name: 'Romania',\n        value: '+40',\n    },\n    {\n        code: '+7',\n        name: 'Russia',\n        value: '+7',\n    },\n    {\n        code: '+250',\n        name: 'Rwanda',\n        value: '+250',\n    },\n    {\n        code: '508',\n        name: 'Saint Pierre and Miquelon',\n        value: '508',\n    },\n    {\n        code: '+685',\n        name: 'Samoa',\n        value: '+685',\n    },\n    {\n        code: '+378',\n        name: 'San Marino',\n        value: '+378',\n    },\n    {\n        code: '+966',\n        name: 'Saudi Arabia',\n        value: '+966',\n    },\n    {\n        code: '+221',\n        name: 'Senegal',\n        value: '+221',\n    },\n    {\n        code: '+381',\n        name: 'Serbia',\n        value: '+381',\n    },\n    {\n        code: '+248',\n        name: 'Seychelles',\n        value: '+248',\n    },\n    {\n        code: '+232',\n        name: 'Sierra Leone',\n        value: '+232',\n    },\n    {\n        code: '+65',\n        name: 'Singapore',\n        value: '+65',\n    },\n    {\n        code: '+421',\n        name: 'Slovakia',\n        value: '+421',\n    },\n    {\n        code: '+386',\n        name: 'Slovenia',\n        value: '+386',\n    },\n    {\n        code: '+677',\n        name: 'Solomon Islands',\n        value: '+677',\n    },\n    {\n        code: '+27',\n        name: 'South Africa',\n        value: '+27',\n    },\n    {\n        code: '+500',\n        name: 'South Georgia and the South Sandwich Islands',\n        value: '+500',\n    },\n    {\n        code: '+82',\n        name: 'South Korea',\n        value: '+82',\n    },\n    {\n        code: '+34',\n        name: 'Spain',\n        value: '+34',\n    },\n    {\n        code: '+94',\n        name: 'Sri Lanka',\n        value: '+94',\n    },\n    {\n        code: '+249',\n        name: 'Sudan',\n        value: '+249',\n    },\n    {\n        code: '+597',\n        name: 'Suriname',\n        value: '+597',\n    },\n    {\n        code: '+268',\n        name: 'Swaziland',\n        value: '+268',\n    },\n    {\n        code: '+46',\n        name: 'Sweden',\n        value: '+46',\n    },\n    {\n        code: '+41',\n        name: 'Switzerland',\n        value: '+41',\n    },\n    {\n        code: '+963',\n        name: 'Syria',\n        value: '+963',\n    },\n    {\n        code: '+886',\n        name: 'Taiwan',\n        value: '+886',\n    },\n    {\n        code: '+992',\n        name: 'Tajikistan',\n        value: '+992',\n    },\n    {\n        code: '+255',\n        name: 'Tanzania',\n        value: '+255',\n    },\n    {\n        code: '+66',\n        name: 'Thailand',\n        value: '+66',\n    },\n    {\n        code: '+670',\n        name: 'Timor Leste',\n        value: '+670',\n    },\n    {\n        code: '+228',\n        name: 'Togo',\n        value: '+228',\n    },\n    {\n        code: '+690',\n        name: 'Tokelau',\n        value: '+690',\n    },\n    {\n        code: '+676',\n        name: 'Tonga',\n        value: '+676',\n    },\n    {\n        code: '+1',\n        name: 'Trinidad and Tobago',\n        value: '+1',\n    },\n    {\n        code: '+216',\n        name: 'Tunisia',\n        value: '+216',\n    },\n    {\n        code: '+90',\n        name: 'Turkey',\n        value: '+90',\n    },\n    {\n        code: '+993',\n        name: 'Turkmenistan',\n        value: '+993',\n    },\n    {\n        code: '+1',\n        name: 'Turks and Caicos Islands',\n        value: '+1',\n    },\n    {\n        code: '+688',\n        name: 'Tuvalu',\n        value: '+688',\n    },\n    {\n        code: '+1',\n        name: 'U.S. Virgin Islands',\n        value: '+1',\n    },\n    {\n        code: '+256',\n        name: 'Uganda',\n        value: '+256',\n    },\n    {\n        code: '+380',\n        name: 'Ukraine',\n        value: '+380',\n    },\n    {\n        code: '+971',\n        name: 'United Arab Emirates',\n        value: '+971',\n    },\n    {\n        code: '+44',\n        name: 'United Kingdom',\n        value: '+44',\n    },\n    {\n        code: '+1',\n        name: 'United States',\n        value: '+1',\n    },\n    {\n        code: '+598',\n        name: 'Uruguay',\n        value: '+598',\n    },\n    {\n        code: '+998',\n        name: 'Uzbekistan',\n        value: '+998',\n    },\n    {\n        code: '+678',\n        name: 'Vanuatu',\n        value: '+678',\n    },\n    {\n        code: '+58',\n        name: 'Venezuela',\n        value: '+58',\n    },\n    {\n        code: '+84',\n        name: 'Vietnam',\n        value: '+84',\n    },\n    {\n        code: '+1',\n        name: 'Wake Island',\n        value: '+1',\n    },\n    {\n        code: '+681',\n        name: 'Wallis and Futuna',\n        value: '+681',\n    },\n    {\n        code: '+967',\n        name: 'Yemen',\n        value: '+967',\n    },\n    {\n        code: '+260',\n        name: 'Zambia',\n        value: '+260',\n    },\n    {\n        code: '+255',\n        name: 'Zanzibar',\n        value: '+255',\n    },\n    {\n        code: '+263',\n        name: 'Zimbabwe',\n        value: '+263',\n    },\n];\nexport function getCountryByCode(code) {\n    var found = Countries.find(function (country) { return country.code === code; });\n    if (found)\n        return found;\n    if (isFrenchGuiana(code)) {\n        return {\n            code: '+594',\n            name: 'French Guiana',\n            value: '+594',\n        };\n    }\n    else if (isGuadeloupe(code)) {\n        return {\n            code: '+590',\n            name: 'Guadeloupe',\n            value: '+590',\n        };\n    }\n    else if (isMartinique(code)) {\n        return {\n            code: '+596',\n            name: 'Martinique',\n            value: '+596',\n        };\n    }\n    else if (isMayotte(code)) {\n        return {\n            code: '+262',\n            name: 'Mayotte or Réunion',\n            value: '+262',\n        };\n    }\n    return null;\n}\nexport function isFrenchGuiana(code) {\n    return '+594' === code.substring(0, 4);\n}\nexport function isGuadeloupe(code) {\n    return '+590' === code.substring(0, 4);\n}\nexport function isMartinique(code) {\n    return '+596' === code.substring(0, 4);\n}\nexport function isMayotte(code) {\n    return '+262' === code.substring(0, 4);\n}\nexport function getPlusOneCountry(code) {\n    var info = null;\n    switch (code.substring(0, 5)) {\n        case '+1684':\n            info = {\n                code: '+1',\n                name: 'American Samoa',\n                value: '+1',\n            };\n            break;\n        case '+1264':\n            info = {\n                code: '+1',\n                name: 'Anguilla',\n                value: '+1',\n            };\n        case '+1268':\n            info = {\n                code: '+1',\n                name: 'Antigua and Barbuda',\n                value: '+1',\n            };\n        case '+1242':\n            info = {\n                code: '+1',\n                name: 'Bahamas',\n                value: '+1',\n            };\n            break;\n        case '+1246':\n            info = {\n                code: '+1',\n                name: 'Barbados',\n                value: '+1',\n            };\n            break;\n        case '+1441':\n            info = {\n                code: '+1',\n                name: 'Bermuda',\n                value: '+1',\n            };\n            break;\n        case '+1284':\n            info = {\n                code: '+1',\n                name: 'British Virgin Islands',\n                value: '+1',\n            };\n            break;\n        case '+1':\n            info = {\n                code: '+1',\n                name: '',\n                value: '+1',\n            };\n            break;\n        default:\n            break;\n    }\n    return info;\n}\nexport function isCanada(code) {\n    var canadianAreaCodes = [\n        '403',\n        '587',\n        '780',\n        '825',\n        '604',\n        '250',\n        '778',\n        '236',\n        '204',\n        '431',\n        '506',\n        '709',\n        '867',\n        '782',\n        '902',\n        '867',\n        '548',\n        '705',\n        '365',\n        '613',\n        '807',\n        '226',\n        '289',\n        '437',\n        '519',\n        '647',\n        '905',\n        '249',\n        '343',\n        '416',\n        '902',\n        '782',\n        '450',\n        '418',\n        '579',\n        '873',\n        '367',\n        '514',\n        '581',\n        '819',\n        '438',\n        '639',\n        '306',\n        '867',\n    ];\n    var areaCode = code.substring(0, 5);\n    return canadianAreaCodes.findIndex(function (x) { return '+1' + x === areaCode; }) > -1;\n}\nexport function isAmericanSamoa(code) {\n    return code.substring(0, 5) === '+1684';\n}\nexport function isDominicanRepublic(code) {\n    return '+1809' === code.substring(0, 5) || '+1829' === code.substring(0, 5) || '+1849' === code.substring(0, 5);\n}\nexport function isPuertoRico(code) {\n    return code.substring(0, 5) === '+' || code.substring(0, 5) === '+';\n}\n// need to finish\nexport function getMatchingCountry(code, substrings) {\n    var toMatch = code.substring(0, substrings);\n    return Countries.filter(function (c) { return c.code === toMatch; }).length;\n}\nvar e164Regex = new RegExp(/\\+[1-9]\\d{6,14}/g);\nexport function simpleE164Validator(code) {\n    return (code !== null && code.length < 16 && code.length > 6 && e164Regex.test(code)) || code === '' || code === null;\n}\n","import { simpleE164Validator } from '../Utils/Locales';\n/**\n * Get all defined validators\n *\n * ```typescript\n * import {Documents} from '@verdocs/js-sdk/Templates';\n *\n * await Documents.getDocuments(templateID);\n * ```\n */\nexport var getValidators = function (endpoint) {\n    return endpoint.api //\n        .get('/validators')\n        .then(function (r) { return r.data; });\n};\nexport var getValidator = function (endpoint, validatorName) {\n    return endpoint.api //\n        .get(\"/validators/\".concat(validatorName))\n        .then(function (r) { return r.data; });\n};\nvar 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,}))$/;\nexport var isValidEmail = function (value) { return EmailRegEx.test(value); };\nexport var isValidPhone = function (value) { return simpleE164Validator(value); };\nexport var isValidRoleName = function (value, roles) { return roles.findIndex(function (role) { return role.name === value; }) !== -1; };\nvar TagRegEx = /^[a-zA-Z0-9-]{0,32}$/;\nexport var isValidTag = function (value, tags) { return TagRegEx.test(value) || tags.findIndex(function (tag) { return tag.name === value; }) !== -1; };\n","/**\n * Given a `rgba(r,g,b,a)` string value, returns the hex equivalent, dropping the alpha channel.\n */\nexport function getRGB(rgba) {\n    var rgbNumbers = rgba.replace('rgba(', '').replace(')', '').split(',');\n    var rgbObject = {\n        red: +rgbNumbers[0],\n        green: +rgbNumbers[1],\n        blue: +rgbNumbers[2],\n        alpha: +rgbNumbers[3],\n    };\n    var alpha = 1 - rgbObject.alpha;\n    var red = Math.round((rgbObject.alpha * (rgbObject.red / 255) + alpha) * 255);\n    var green = Math.round((rgbObject.alpha * (rgbObject.green / 255) + alpha) * 255);\n    var blue = Math.round((rgbObject.alpha * (rgbObject.blue / 255) + alpha) * 255);\n    return '#' + rgbToHex(red) + rgbToHex(green) + rgbToHex(blue);\n}\n/**\n * Given an RGB string value, returns the hex equivalent.\n */\nfunction rgbToHex(rgb) {\n    var hex = rgb.toString(16);\n    if (hex.length < 2) {\n        return '0' + hex;\n    }\n    return hex;\n}\n/**\n * Given a signer role index, return the color code for that signer.\n */\nexport function getRGBA(roleIndex) {\n    switch (roleIndex % 10) {\n        case 0:\n            return roleIndex === 0 ? 'rgba(255, 193, 7, 0.4)' : 'rgba(134, 134, 134, 0.3)'; // #FFE69C\n        case 1:\n            return 'rgba(156, 39, 176, .4)'; // '#E3C3E9'\n        case 2:\n            return 'rgba(33, 150, 243, .4)'; // '#C1E1FB'\n        case 3:\n            return 'rgba(220, 231, 117, 0.3)';\n        case 4:\n            return 'rgba(121, 134, 203, 0.3)';\n        case 5:\n            return 'rgba(77, 182, 172, 0.3)';\n        case 6:\n            return 'rgba(255, 202, 165, 0.3)';\n        case 7:\n            return 'rgba(2, 247, 190, 0.3)';\n        case 8:\n            return 'rgba(255, 138, 101, 0.3)';\n        case 9:\n            return 'rgba(82, 255, 79, 0.3)';\n        default:\n            return 'rgba(229, 115, 155, 0.3)';\n    }\n}\n/**\n * Given a role name, return a color code for it. This works by computing a hash code so the specific color returned\n * is not specified explicitly, but will be the same for every call with the same input value.\n */\nexport function nameToRGBA(str) {\n    if (!!str) {\n        var validNum = parseInt(str.slice(-1), 10);\n        if (!isNaN(validNum)) {\n            str += (validNum * 99).toString();\n        }\n        var hash = 0;\n        for (var i = 0; i < str.length; i++) {\n            hash = str.charCodeAt(i) + ((hash << 5) - hash);\n        }\n        hash = Math.round(hash / 1.3);\n        var c = (hash & 0x00ffff08).toString(16).toUpperCase();\n        var hex = '#' + '00000'.substring(0, 6 - c.length) + c;\n        var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n        var color = {\n            r: parseInt(result[1], 16),\n            g: parseInt(result[2], 16),\n            b: parseInt(result[3], 16),\n        };\n        return \"rgba(\".concat(color.r, \", \").concat(color.g, \", \").concat(color.b, \", 0.2)\");\n    }\n}\n/**\n * Helper function to obtain a color code given a role name given various possible inputs.\n */\nexport function getRoleColor(name, roles, index) {\n    if (index) {\n        return getRGBA(index);\n    }\n    else if (roles && roles.length > 0) {\n        var roleIndex = roles.findIndex(function (role) { return role.name === name; });\n        if (roleIndex > -1) {\n            return roles[roleIndex].rgba || getRGBA(roleIndex);\n        }\n        else {\n            return nameToRGBA(name);\n        }\n    }\n    else {\n        return nameToRGBA(name);\n    }\n}\n","export function getRTop(y, fieldHeight, iTextHeight, yRatio) {\n    return iTextHeight - (y + fieldHeight) * yRatio;\n}\nexport function getRLeft(x, ratio) {\n    return x * ratio;\n}\nexport function getRValue(y, ratio) {\n    return y * ratio;\n}\nexport function blobToBase64(image) {\n    var fileReader = new FileReader();\n    return new Promise(function (resolve, reject) {\n        fileReader.onerror = function () {\n            reject(new DOMException('Problem reading blob.'));\n        };\n        fileReader.onload = function () {\n            resolve(fileReader.result);\n        };\n        fileReader.readAsDataURL(image);\n    });\n}\nexport function rescale(r, n) {\n    return r * n;\n}\n","@import '../../../theme.scss';\n\nverdocs-sign {\n  font-family: $verdocs-primary-font;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 600px;\n  box-sizing: border-box;\n  overflow: hidden;\n  //width: 360px;\n\n  &.storybook {\n    max-height: 600px;\n  }\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0 0 115px;\n    z-index: 1000;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n    transition: all 0.25s;\n  }\n\n  .intro {\n    background-color: #ffffff;\n    width: 100%;\n    margin: 0 auto;\n    padding: 20px;\n    max-width: 1028px;\n    color: rgba(0, 0, 0, 0.87);\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    max-width: 1028px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    padding: 4px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n  }\n\n  .cover {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999;\n    position: absolute;\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    position: relative;\n    overflow-y: scroll;\n  }\n\n  .agree {\n    flex: 1;\n    flex-direction: row;\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n\n    .intro {\n      display: none;\n    }\n\n    .header {\n      flex: 0 0 56px;\n    }\n\n    .agree-checkbox {\n      background: #ccc;\n      flex: 0 0 20px;\n      display: flex;\n      width: 20px;\n      height: 20px;\n      border-radius: 3px;\n      position: relative;\n      margin: 0 10px 0 14px;\n\n      input[type='checkbox']:checked + label:after {\n        filter: alpha(opacity=100);\n        opacity: 1;\n      }\n\n      label {\n        left: 2px;\n        top: 2px;\n        width: 16px;\n        height: 16px;\n        cursor: pointer;\n        position: absolute;\n        background: #33354c;\n        box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);\n\n        .agree-checkbox label:hover::after {\n          filter: alpha(opacity=30);\n          opacity: 0.3;\n        }\n\n        &:after {\n          top: 2px;\n          left: 3px;\n          width: 8px;\n          opacity: 0;\n          height: 5px;\n          content: '';\n          position: absolute;\n          background: transparent;\n          filter: alpha(opacity=0);\n          transform: rotate(-45deg);\n          border: 2px solid #fcfff4;\n          border-top: none;\n          border-right: none;\n        }\n      }\n    }\n  }\n\n  .page-controls {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 500;\n  }\n}\n","import {Host} from '@stencil/core';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Documents} from '@verdocs/js-sdk/Documents';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {rescale} from '@verdocs/js-sdk/Utils/Fields';\nimport {Component, Prop, State, h} from '@stencil/core';\nimport {updateRecipientStatus} from '@verdocs/js-sdk/Documents/Recipients';\nimport {IPDFPageInfo, IPDFRenderEvent} from '../verdocs-view/verdocs-view';\nimport {IDocument, IDocumentField} from '@verdocs/js-sdk/Documents/Documents';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\n\n/**\n * Display a document signing experience.\n */\n@Component({\n  tag: 'verdocs-sign',\n  styleUrl: 'verdocs-sign.scss',\n})\nexport class VerdocsSign {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a\n   * signing session.\n   */\n  @Prop() documentid: string | null = null;\n\n  /**\n   * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a\n   * signing session.\n   */\n  @Prop() roleid: string | null = null;\n\n  /**\n   * If `source` is set to `verdocs-sign`, this should be set to a valid invitation code to activate a\n   * signing session.\n   */\n  @Prop() invitecode: string | null = null;\n\n  @State() recipient = null;\n\n  @State() signerToken = null;\n  @State() pdfUrl = null;\n  @State() recipientIndex: number = -1;\n  @State() document: IDocument | null = null;\n  @State() fields: IDocumentField[] = [];\n  @State() pdfPageInfo: IPDFRenderEvent;\n\n  @State() hasSignature = false;\n\n  @State() nextButtonLabel = 'Start';\n\n  @State() focusedField = '';\n\n  async componentDidLoad() {\n    try {\n      console.log('[SIGN] Processing invite code', this.documentid, this.roleid, this.invitecode);\n      const {session, recipient, signerToken} = await Documents.getSigningSession(this.endpoint, {\n        documentId: this.documentid,\n        roleId: this.roleid,\n        inviteCode: this.invitecode,\n      });\n      console.log('[SIGN] Got signing session', session);\n      console.log('[SIGN] Recipient', recipient);\n      this.recipient = recipient;\n      this.signerToken = signerToken;\n      this.endpoint.setToken(signerToken);\n\n      if (this.recipient.agreed) {\n        this.nextButtonLabel = 'Next';\n      }\n\n      const document = await Documents.getDocument(this.endpoint, this.documentid);\n      this.document = document;\n      console.log('[SIGN] Document', document);\n\n      this.pdfUrl = `${this.endpoint.getBaseURL()}/documents/${this.documentid}/envelope_documents/${document.envelope_document_id}?file=true`;\n\n      this.recipientIndex = this.document.recipients.findIndex(recipient => recipient.role_name == this.roleid);\n      if (this.recipientIndex > -1) {\n        console.log('Found recipient', this.document.recipients[this.recipientIndex]);\n      }\n\n      this.fields = this.document.fields.filter(field => field.recipient_role === this.roleid);\n      console.log('Loaded fields', this.fields);\n\n      // TODO: Fix service to allow this?\n      // const sigs = await getSignatures();\n      // console.log('sigs', sigs);\n    } catch (e) {\n      console.log('Error with signing session', e);\n    }\n  }\n\n  handleClickAgree() {\n    console.log('agree clicked');\n    updateRecipientStatus(this.endpoint, this.documentid, this.roleid, 'update', {agreed: true})\n      .then(r => {\n        console.log('update result', r);\n        this.nextButtonLabel = 'Next';\n        this.recipient = r;\n      })\n      .catch(e => {\n        console.log('update failure', e);\n      });\n  }\n\n  async savePDF() {\n    const fileName = `${this.document.name} - ${this.document.updated_at.split('T')[0]}.pdf`;\n    const data = await Documents.getDocumentFile(this.endpoint, this.documentid, this.document.envelope_document_id);\n\n    // This is better in React than doing window.href= or similar to trigger a download. For a description of the technique\n    // see https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image\n    let xhr = new XMLHttpRequest();\n    xhr.responseType = 'blob';\n    xhr.onload = function () {\n      let a = document.createElement('a');\n      a.href = window.URL.createObjectURL(xhr.response);\n      a.download = fileName;\n      a.style.display = 'none';\n      document.body.appendChild(a);\n      a.click();\n      a.remove();\n    };\n\n    const url = `data:application/pdf;base64,${data}`;\n    console.log('url', url.length, url);\n    xhr.open('GET', `data:application/pdf;base64,${data}`);\n    xhr.send();\n  }\n\n  async handleOptionSelected(e) {\n    switch (e.detail.id) {\n      case 'later':\n        // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);\n        if (!window?.['STORYBOOK_ENV']) {\n          window.alert('User intends to sign later.');\n        }\n        break;\n      case 'claim':\n        break;\n      case 'decline':\n        break;\n      case 'print':\n        break;\n      case 'download':\n        this.savePDF().catch(() => {});\n        break;\n    }\n  }\n\n  async handleFieldChange(field: IDocumentField, e: any, optionId?: string) {\n    console.log('fieldChange', field, e.detail);\n    switch (field.type) {\n      case 'textbox':\n        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => console.log('Error updating', e));\n        break;\n\n      case 'checkbox_group':\n        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, {prepared: false, value: {options: [{id: optionId, checked: e.detail}]}})\n          .then(r => console.log('Update result', r))\n          .catch(e => console.log('Error updating', e));\n        break;\n\n      case 'radio_button_group':\n        const options = field.settings.options.map(option => ({id: option.id, selected: optionId === option.id}));\n        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, {prepared: false, value: {options}})\n          .then(r => console.log('Update result', r))\n          .catch(e => console.log('Error updating', e));\n        break;\n\n      case 'dropdown':\n        Documents.updateDocumentField(this.endpoint, this.documentid, field.name, {prepared: false, value: e.detail})\n          .then(r => console.log('Update result', r))\n          .catch(e => console.log('Error updating', e));\n        break;\n\n      case 'initial':\n        console.log('Got initial', e.detail);\n        break;\n\n      case 'signature':\n        console.log('Got signature', e.detail);\n        break;\n    }\n  }\n\n  renderCheckboxGroupOption(page: IPDFPageInfo, field: IDocumentField, option: any, index: number) {\n    const left = rescale(page.xRatio, option.x);\n    const bottom = rescale(page.yRatio, option.y);\n\n    const style = {\n      left: `${left}px`,\n      bottom: `${bottom}px`,\n      position: 'absolute',\n      transform: `scale(${page.xRatio}, ${page.yRatio})`,\n      backgroundColor: getRGBA(this.recipientIndex),\n    } as any;\n\n    return <verdocs-field-checkbox style={style} order={index} value={option.checked} onFieldChange={e => this.handleFieldChange(field, e, option.id)} />;\n  }\n\n  renderRadioGroupOption(page: IPDFPageInfo, field: IDocumentField, option: any, index: number) {\n    const left = rescale(page.xRatio, option.x);\n    const bottom = rescale(page.yRatio, option.y);\n\n    const style = {\n      left: `${left}px`,\n      bottom: `${bottom}px`,\n      position: 'absolute',\n      transform: `scale(${page.xRatio}, ${page.yRatio})`,\n      backgroundColor: getRGBA(this.recipientIndex),\n    } as any;\n\n    return (\n      <verdocs-field-radio-button\n        style={style}\n        order={index}\n        value={option.id}\n        name={field.name}\n        checked={option.selected}\n        onFieldChange={e => this.handleFieldChange(field, e, option.id)}\n      />\n    );\n  }\n\n  renderField(field: IDocumentField, index: number) {\n    const {required = false, settings = {} as any} = field;\n    const {x = 0, y = 0, base64 = '', placeholder = '', options = [], value = '', result = ''} = settings;\n\n    const renderOnPage = this.pdfPageInfo.pages.find(page => page.pageNumber === field.page);\n    if (!renderOnPage) {\n      console.log('Unable to render invalid field', field);\n      return <div class=\"invalid-field\">Invalid field.</div>;\n    }\n\n    const left = rescale(renderOnPage.xRatio, x);\n    const bottom = rescale(renderOnPage.yRatio, y);\n\n    const style = {\n      left: `${left}px`,\n      bottom: `${bottom}px`,\n      position: 'absolute',\n      transform: `scale(${renderOnPage.xRatio}, ${renderOnPage.yRatio})`,\n      backgroundColor: field.settings.rgba || getRGBA(this.recipientIndex),\n    } as any;\n\n    if (field.settings.height) {\n      style.height = `${field.settings.height}px`;\n    }\n\n    if (field.settings.width) {\n      style.width = `${field.settings.width}px`;\n    }\n\n    console.log('rendering field', field.type, field);\n\n    const id = `field-${field.name}`;\n    switch (field.type) {\n      case 'signature':\n        return <verdocs-field-signature style={style} value={base64} required={required} id={id} />;\n      case 'initial':\n        return <verdocs-field-initial style={style} required={required} id={id} />;\n      case 'textbox':\n        return <verdocs-field-textbox style={style} order={index} value={result || ''} placeholder={placeholder} id={id} onFieldChange={e => this.handleFieldChange(field, e)} />;\n      case 'textarea':\n        return <verdocs-field-textarea style={style} placeholder={placeholder || ''} id={id} />;\n      case 'date':\n        return <verdocs-field-date style={style} order={index} value={result || ''} placeholder={placeholder} required={required} id={id} />;\n      case 'dropdown':\n        return <verdocs-field-dropdown style={style} options={options} value={value} required={required} id={id} onFieldChange={e => this.handleFieldChange(field, e)} />;\n      case 'checkbox':\n        return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;\n      case 'checkbox_group':\n        return field.settings.options.map((option: any, index) => this.renderCheckboxGroupOption(renderOnPage, field, option, index));\n      case 'radio_button_group':\n        return field.settings.options.map((option: any, index) => this.renderRadioGroupOption(renderOnPage, field, option, index));\n      case 'attachment':\n        return <verdocs-field-attachment style={style} value={result || ''} id={id} />;\n      case 'payment':\n        return <verdocs-field-payment style={style} field={field} id={id} />;\n      default:\n        console.log('[SIGN] Skipping unsupported field type', field);\n    }\n\n    return <div style={{display: 'none'}}>Unsupported field type \"{field.type}\"</div>;\n  }\n\n  isFieldValid(field: IDocumentField) {\n    switch (field.type) {\n      case 'textbox':\n        switch (field.settings?.validator || '') {\n          case 'email':\n            return isValidEmail(field.settings?.result || '');\n          case 'phone':\n            return isValidPhone(field.settings?.result || '');\n          default:\n            return !!field.settings?.result;\n        }\n\n      case 'signature':\n      case 'initial':\n      case 'textarea':\n      case 'date':\n      case 'attachment':\n        return !!field.settings?.result;\n      case 'dropdown':\n        return !!field.settings?.value;\n      case 'checkbox_group':\n        const checked = (field.settings?.options?.filter(option => option.checked) || []).length;\n        return checked >= (field.settings?.minimum_checked || 0) && checked <= (field.settings?.maximum_checked || 999);\n      case 'radio_button_group':\n        return (field.settings?.options?.filter(option => option.selected) || []).length > 0;\n      // TODO\n      // case 'checkbox':\n      //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;\n      // case 'payment':\n      //   return <verdocs-field-payment style={style} field={field} id={id} />;\n      default:\n        return false;\n    }\n  }\n\n  handleDocumentRendered(e) {\n    console.log('[SIGN] Document rendered', e.detail);\n    this.pdfPageInfo = e.detail;\n  }\n\n  handleNext() {\n    // Find and focus the next incomplete required field\n    const requiredFields = this.fields.filter(field => field.required);\n    console.log('required Fields', requiredFields);\n\n    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);\n    console.log('focused Index', focusedIndex);\n\n    let nextFocusedIndex = focusedIndex + 1;\n    if (nextFocusedIndex >= requiredFields.length) {\n      nextFocusedIndex = 0;\n    }\n\n    const nextRequiredField = requiredFields[nextFocusedIndex];\n    console.log('next required fielod', nextRequiredField);\n\n    if (nextRequiredField) {\n      const el = document.getElementById(`field-${nextRequiredField.name}`) as any;\n      el?.focusField();\n      this.focusedField = nextRequiredField.name;\n    }\n  }\n\n  render() {\n    const menuOptions = [\n      {id: 'later', label: 'Finish Later'}, //\n      {id: 'claim', label: 'Claim the Document', disabled: true},\n      {id: 'decline', label: 'Decline to Sign'},\n      {id: 'print', label: 'Print Without Signing'},\n      {id: 'download', label: 'Download'},\n    ];\n\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], agreed: this.recipient?.agreed}}>\n        <div class=\"header\">\n          <div class=\"intro\">Please review and act on these documents.</div>\n          <div class=\"toolbar\">\n            <div class=\"tools\">\n              <verdocs-dropdown options={menuOptions} onOptionSelected={e => this.handleOptionSelected(e)} />\n\n              {!this.recipient?.agreed ? (\n                <div class=\"agree\">\n                  <div class=\"agree-checkbox\">\n                    <input type=\"checkbox\" value=\"None\" id=\"agree-checkbox-element\" name=\"agree\" onChange={() => this.handleClickAgree()} />\n                    <label htmlFor=\"agree-checkbox-element\" />\n                  </div>\n                  <span>I agree to use electronic records and signatures.</span>\n                </div>\n              ) : (\n                <div style={{flex: '1'}} />\n              )}\n              <verdocs-button size=\"small\" label={this.nextButtonLabel} disabled={!this.recipient?.agreed} onClick={() => this.handleNext()} />\n            </div>\n          </div>\n        </div>\n\n        {!this.recipient?.agreed ? <div class=\"cover\" /> : <div style={{display: 'none'}} />}\n\n        <div class=\"document\">\n          {this.pdfUrl ? <verdocs-view source={this.pdfUrl} endpoint={this.endpoint} onDocumentRendered={e => this.handleDocumentRendered(e)} /> : <verdocs-loader />}\n          {(this.pdfPageInfo?.pages || []).map(page => (\n            <div class=\"page-controls\" style={{height: `${page.height}px`, width: `${page.width}px`, top: `${page.canvasTop}px`, margin: '0 auto'}}>\n              {this.pdfPageInfo?.numRendered > 0 ? (\n                this.fields.filter(field => field.page === page.pageNumber).map((field, index) => this.renderField(field, index))\n              ) : (\n                <div style={{display: 'none'}}>Waiting for PDF to render...</div>\n              )}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/verdocs-signature-dialog.entry.js

@@ -1 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-859bc689.js";var verdocsSignatureDialogCss='verdocs-signature-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;display:none}verdocs-signature-dialog.open{display:block}verdocs-signature-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f5f5fa}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}';var VerdocsSignatureDialog=function(){function e(e){registerInstance(this,e);this.adopt=createEvent(this,"adopt",7);this.cancel=createEvent(this,"cancel",7);this.fullname="";this.open=false;this.fontLoaded=false;this.enteredName="";this.mode="type"}e.prototype.componentWillLoad=function(){var e=this;this.enteredName=this.fullname;var t=new FontFace("Dancing Script","url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)");t.load().then((function(t){document.fonts.add(t);e.fontLoaded=true}))};e.prototype.componentDidLoad=function(){this.redrawSignature()};e.prototype.componentDidUpdate=function(){this.redrawSignature()};e.prototype.redrawSignature=function(){if(!this.canvasElement){return}var e=this.canvasElement.width;var t=this.canvasElement.getContext("2d");t.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);var n=100;do{n-=2;t.font="".concat(n,"px Dancing Script")}while(t.measureText(this.enteredName).width>e-32);t.textAlign="center";t.textBaseline="middle";t.font="".concat(n,"px Dancing Script");t.fillText(this.enteredName,this.canvasElement.width/2,this.canvasElement.height/2)};e.prototype.handleDismiss=function(e){if(e.target.className==="background-overlay"){e.preventDefault();this.handleCancel()}};e.prototype.handleNameChange=function(e){this.enteredName=e.detail};e.prototype.handleAdopt=function(){var e=this.canvasElement.toDataURL("image/png");this.adopt.emit(e);this.open=false};e.prototype.handleCancel=function(){this.cancel.emit();this.open=false};e.prototype.render=function(){var e=this;return h(Host,{class:{open:this.open}},h("div",{class:"background-overlay",onClick:function(t){return e.handleDismiss(t)}},h("div",{class:"dialog"},h("div",{class:"heading"},"Create Your Signature"),h("div",{class:"content"},h("verdocs-text-input",{placeholder:"Full Name...",label:"Full Name",value:this.enteredName,onFieldInput:function(t){return e.handleNameChange(t)}}),h("div",{class:"as-shown"},"As shown on driver's license or govt. ID card."),h("div",{class:"tabs"},h("div",{class:{tab:true,active:this.mode==="type"},onClick:function(){return e.mode="type"}},"Type"),h("div",{class:{tab:true,active:this.mode==="draw"},onClick:function(){return e.mode="draw"}},"Draw")),this.fontLoaded?h("canvas",{ref:function(t){return e.canvasElement=t}}):h("div",{style:{display:"none"}}),h("div",{class:"disclaimer"},"By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts — just the same as a pen-and-paper signature or initial."),h("div",{class:"buttons"},h("verdocs-button",{label:"CANCEL",size:"normal",variant:"outline",onPress:function(){return e.handleCancel()}}),h("verdocs-button",{label:"Adopt & Sign",size:"normal",onPress:function(){return e.handleAdopt()}}))))))};return e}();VerdocsSignatureDialog.style=verdocsSignatureDialogCss;export{VerdocsSignatureDialog as verdocs_signature_dialog};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-859bc689.js";var verdocsSignatureDialogCss='verdocs-signature-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;display:none}verdocs-signature-dialog.open{display:block}verdocs-signature-dialog .background-overlay{position:absolute;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f5f5fa}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}';var VerdocsSignatureDialog=function(){function e(e){registerInstance(this,e);this.adopt=createEvent(this,"adopt",7);this.cancel=createEvent(this,"cancel",7);this.fullname="";this.open=false;this.fontLoaded=false;this.enteredName="";this.mode="type"}e.prototype.componentWillLoad=function(){var e=this;this.enteredName=this.fullname;var t=new FontFace("Dancing Script","url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)");t.load().then((function(t){document.fonts.add(t);e.fontLoaded=true}))};e.prototype.componentDidLoad=function(){this.redrawSignature()};e.prototype.componentDidUpdate=function(){this.redrawSignature()};e.prototype.redrawSignature=function(){if(!this.canvasElement){return}var e=this.canvasElement.width;var t=this.canvasElement.getContext("2d");t.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);var n=100;do{n-=2;t.font="".concat(n,"px Dancing Script")}while(t.measureText(this.enteredName).width>e-32);t.textAlign="center";t.textBaseline="middle";t.font="".concat(n,"px Dancing Script");t.fillText(this.enteredName,this.canvasElement.width/2,this.canvasElement.height/2)};e.prototype.handleDismiss=function(e){if(e.target.className==="background-overlay"){e.preventDefault();this.handleCancel()}};e.prototype.handleNameChange=function(e){this.enteredName=e.detail};e.prototype.handleAdopt=function(){var e=this.canvasElement.toDataURL("image/png");this.adopt.emit(e);this.open=false};e.prototype.handleCancel=function(){this.cancel.emit();this.open=false};e.prototype.render=function(){var e=this;return h(Host,{class:{open:this.open}},h("div",{class:"background-overlay",onClick:function(t){return e.handleDismiss(t)}},h("div",{class:"dialog"},h("div",{class:"heading"},"Create Your Signature"),h("div",{class:"content"},h("verdocs-text-input",{placeholder:"Full Name...",label:"Full Name",value:this.enteredName,onFieldInput:function(t){return e.handleNameChange(t)}}),h("div",{class:"as-shown"},"As shown on driver's license or govt. ID card."),h("div",{class:"tabs"},h("div",{class:{tab:true,active:this.mode==="type"},onClick:function(){return e.mode="type"}},"Type"),h("div",{class:{tab:true,active:this.mode==="draw"},onClick:function(){return e.mode="draw"}},"Draw")),this.fontLoaded?h("canvas",{ref:function(t){return e.canvasElement=t}}):h("div",{style:{display:"none"}}),h("div",{class:"disclaimer"},"By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts — just the same as a pen-and-paper signature or initial."),h("div",{class:"buttons"},h("verdocs-button",{label:"CANCEL",size:"normal",variant:"outline",onPress:function(){return e.handleCancel()}}),h("verdocs-button",{label:"Adopt & Sign",size:"normal",onPress:function(){return e.handleAdopt()}}))))))};return e}();VerdocsSignatureDialog.style=verdocsSignatureDialogCss;export{VerdocsSignatureDialog as verdocs_signature_dialog};
+//# sourceMappingURL=verdocs-signature-dialog.entry.js.map

package/dist/esm-es5/verdocs-signature-dialog.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx"],"names":["verdocsSignatureDialogCss","VerdocsSignatureDialog","hostRef","this","fullname","open","fontLoaded","enteredName","mode","prototype","componentWillLoad","_this","ds","FontFace","load","then","font","document","fonts","add","componentDidLoad","redrawSignature","componentDidUpdate","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","concat","measureText","textAlign","textBaseline","fillText","handleDismiss","e","target","className","preventDefault","handleCancel","handleNameChange","detail","handleAdopt","data","toDataURL","adopt","emit","cancel","render","h","Host","class","onClick","placeholder","label","value","onFieldInput","tab","active","ref","el","style","display","size","variant","onPress"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  display: none;\n\n  &.open {\n    display: block;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $verdocs-grey-3;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() fullname: string = '';\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the initials are adopted.\n   */\n  @Event({composed: true}) adopt: EventEmitter<string>;\n\n  /**\n   * Event fired when the step is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.fullname;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleNameChange(e) {\n    this.enteredName = e.detail;\n  }\n\n  handleAdopt() {\n    const data = this.canvasElement.toDataURL('image/png');\n    this.adopt.emit(data);\n    this.open = false;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host class={{open: this.open}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Create Your Signature</div>\n\n            <div class=\"content\">\n              <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onFieldInput={e => this.handleNameChange(e)} />\n              <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n              <div class=\"tabs\">\n                <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>\n                  Type\n                </div>\n                <div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>\n                  Draw\n                </div>\n              </div>\n\n              {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n              <div class=\"disclaimer\">\n                By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n                including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n              </div>\n\n              <div class=\"buttons\">\n                <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onPress={() => this.handleCancel()} />\n                <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onPress={() => this.handleAdopt()} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}