@verdocs/web-sdk 5.0.33 → 5.0.35

package/dist/verdocs-web-sdk/p-bfc815d0.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e,H as s,c as a}from"./p-b9654a5e.js";import{f as c}from"./p-12bab948.js";const r='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-organization-card{font-family:"Inter", "Barlow", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#ffffff;border-radius:8px;padding:7px 15px}verdocs-organization-card .icon{-ms-flex:0;flex:0;height:24px;width:24px;margin:0 14px 0 0}verdocs-organization-card .icon svg{fill:#aeb4bf;height:24px;width:24px}verdocs-organization-card .content{margin-top:2px}.verdocs-org-card-popup{font-family:"Inter", "Barlow", sans-serif;background:#ffffff;border-radius:10px;width:326px;padding:20px 40px 0 40px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border:1px solid #cccccc}.verdocs-org-card-popup .popup-header-with-logo{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-header-with-logo img{max-width:300px;max-height:50px}.verdocs-org-card-popup .popup-header{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:14px;text-transform:uppercase}.verdocs-org-card-popup .status{-webkit-transform:scale(1.5);transform:scale(1.5);width:24px;height:24px}.verdocs-org-card-popup .field{margin:0 0 20px 0}.verdocs-org-card-popup .field strong{color:#7b7b9a;display:block;margin:0 0 5px 0}.verdocs-org-card-popup .field a{color:#654dcb;text-transform:uppercase}';const i=r;const d='<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';const t=class{constructor(e){o(this,e);this.organization=undefined;this.hovered=false}onMouseOver(){this.hovered=true}onMouseOut(){this.hovered=false}render(){var o,a,r,i,t,n;console.log("Rendering org card",this.organization.thumbnail_url,this.organization);const l=d;const p=`verdocs-org-card-${this.organization.id}`;return e(s,{key:"4b97ef1ea4b3153e59861956910ba3bf86935ac9",id:p},this.organization.thumbnail_url?e("img",{class:"icon",src:this.organization.thumbnail_url,alt:"Logo"}):e("span",{class:"icon",innerHTML:l}),e("span",{key:"7f238a3d942b19ac1b0f15eb4c4572f80cdfbac8",class:"content"},(o=this.organization)===null||o===void 0?void 0:o.name),e("verdocs-portal",{key:"faba8d4862b600a36dfda1a1c2af1cc5730d73db",anchor:p},e("div",{key:"5ea6d5ad24911cb38aef6144c10419b93767eb5d",class:"verdocs-org-card-popup",style:{display:this.hovered?"block":"none"}},this.organization.full_logo_url?e("div",{class:"popup-header-with-logo"},e("img",{src:this.organization.full_logo_url,alt:"Logo"}),e("div",{class:"title"},(a=this.organization)===null||a===void 0?void 0:a.name)):e("div",{class:"popup-header"},e("span",{class:"status"},e("span",{class:"icon",innerHTML:l})),e("span",{class:"title"},(r=this.organization)===null||r===void 0?void 0:r.name)),e("div",{key:"0e5e9bfcd06e8658955f44cfcab2b05a1b130a4c",class:"popup-body"},e("div",{key:"09fecd4216b3b333ee685040fe84813f065fa2ef",class:"field"},e("strong",{key:"922a1d90657e1d1c1349b55edf7a1c3e69c45063"},"Joined"),c(new Date(((i=this.organization)===null||i===void 0?void 0:i.created_at)||undefined),"LLL d, Y")),this.organization.url&&e("div",{key:"04c399ba5a851f2ac82d04ae789b70433f3b296a",class:"field"},e("strong",{key:"e24cbe31601ea892c524991b0ddc4c64f6908df8"},"Website"),e("a",{key:"26fc1252aebc78eb84228de77092e1cfb650ebfa",href:(t=this.organization)===null||t===void 0?void 0:t.url,target:"_blank",rel:"nofollow"},(n=this.organization)===null||n===void 0?void 0:n.url))))))}};t.style=i;const n="@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";const l=n;const p="10001";const f=class{constructor(e){o(this,e);this.clickAway=a(this,"clickAway",7);this.moved=false;this.anchor=undefined;this.voffset=0}handleScroll(){this.calculatePosition()}handleResize(){this.calculatePosition()}handleClick(o){var e;if(!this.element.contains(o.target)){(e=this.clickAway)===null||e===void 0?void 0:e.emit()}}calculateLeft(){var o;const e=document.getElementById(this.anchor);if(!e)return 0;const s=e.getBoundingClientRect();const a=document.documentElement.clientWidth+document.documentElement.scrollLeft;const c=Math.max(s.left,0);const r=((o=this.element)===null||o===void 0?void 0:o.offsetWidth)||400;const i=c+r>a;return i?a-r-20:c}calculateTop(){var o;const e=document.getElementById(this.anchor);if(!e)return 0;const s=e.getBoundingClientRect();const a=document.documentElement.clientHeight+document.documentElement.scrollTop;const c=s.bottom+this.voffset+document.documentElement.scrollTop;const r=((o=this.element)===null||o===void 0?void 0:o.offsetHeight)||300;const i=c+r>a;return i?c-r-s.height:c}calculatePosition(){this.portal.style.top=`${this.calculateTop()}px`;this.portal.style.left=`${this.calculateLeft()}px`}componentWillLoad(){var o;const e=`${this.anchor}-portal`;(o=document.getElementById(e))===null||o===void 0?void 0:o.remove();this.portal=document.createElement("div");this.portal.setAttribute("id",e);this.portal.style.zIndex=p;this.portal.style.position="absolute";document.body.append(this.portal)}componentDidLoad(){this.portal.appendChild(this.element);this.calculatePosition()}disconnectedCallback(){this.moved?this.portal.remove():this.moved=true}render(){return e(s,{key:"a6baeca20a28ae94d4a9fab6e31dec45474cf887",ref:o=>this.element=o},e("slot",{key:"e6a704a85b5208613aef1a3db3bf85adc8f60bf7"}))}};f.style=l;export{t as verdocs_organization_card,f as verdocs_portal};
-//# sourceMappingURL=p-bfc815d0.entry.js.map

package/dist/verdocs-web-sdk/p-d58010a4.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,F as s,H as i}from"./p-b9654a5e.js";import{VerdocsEndpoint as a,formatFullName as c,isValidEmail as d}from"@verdocs/js-sdk";import{h as r}from"./p-0c45b79c.js";import"./p-85aa8e05.js";import"./p-c7ee88c7.js";import"./p-12bab948.js";const l='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-contact-picker{display:block;border:1px solid #ebebeb;background-color:#ffffff;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form{gap:12px;width:300px;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5fa}verdocs-contact-picker form .row{gap:8px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}verdocs-contact-picker form .row.message{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}verdocs-contact-picker form .names-row{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .names-row>input{font-size:14px;width:103px}verdocs-contact-picker form .kba-row{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .kba-row verdocs-select-input{margin:0}verdocs-contact-picker form .pin-code{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .pin-code>input{-ms-flex:0;flex:0;width:133px;font-size:14px;margin-left:58px}verdocs-contact-picker form .address{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .address>input{-ms-flex:1;flex:1;font-size:14px;margin-left:58px}verdocs-contact-picker form .zip-code{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .zip-code>input{-ms-flex:1;flex:1;font-size:14px;margin-left:58px}verdocs-contact-picker form label{display:-ms-flexbox;display:flex;-ms-flex:0 0 50px;flex:0 0 50px;font-size:14px;font-weight:500;color:#5c6575}verdocs-contact-picker form .row.message label{-ms-flex:0;flex:0}verdocs-contact-picker form .row.message input{width:100%}verdocs-contact-picker form input{-ms-flex:1;flex:1;padding:6px;font-size:14px;border-radius:3px;background:rgba(0, 0, 0, 0.0196078431);border:1px solid rgba(112, 122, 229, 0.3725490196)}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;max-height:225px;overflow-y:scroll;position:absolute;background:#ffffff;-webkit-box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1);box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1)}verdocs-contact-picker form .dropdown .suggestion{display:-ms-flexbox;display:flex;padding:6px 12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker form .dropdown .suggestion svg{width:32px;height:32px}verdocs-contact-picker form .dropdown .suggestion .avatar{width:32px;height:32px;-ms-flex:0 0 32px;flex:0 0 32px;margin-right:8px;border-radius:100%}verdocs-contact-picker form .dropdown .suggestion .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .dropdown .suggestion .name{font-size:16px;font-weight:500;margin-bottom:3px;color:#092c4c}verdocs-contact-picker form .dropdown .suggestion .destination{font-size:14px;margin-bottom:3px;color:#33364b}verdocs-contact-picker form .dropdown .suggestion:hover{background:#eee;cursor:pointer}verdocs-contact-picker .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-contact-picker .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-contact-picker ::-webkit-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-moz-placeholder{color:#aaaaaa}verdocs-contact-picker :-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::-ms-input-placeholder{color:#aaaaaa}verdocs-contact-picker ::placeholder{color:#aaaaaa}verdocs-contact-picker [data-lastpass-icon-root]{display:none !important}';const n=l;const f='<svg focusable="false" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>';const p='<svg focusable="false" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z" clip-rule="evenodd" /></svg>';const h=`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-user"><path d="M15 13a3 3 0 1 0-6 0"/><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"/><circle cx="12" cy="8" r="2"/></svg>`;const b=class{constructor(o){e(this,o);this.searchContacts=t(this,"searchContacts",7);this.exit=t(this,"exit",7);this.next=t(this,"next",7);this.endpoint=a.getDefault();this.templateRole=null;this.contactSuggestions=[];this.first_name=undefined;this.last_name=undefined;this.email=undefined;this.phone=undefined;this.zip=undefined;this.address=undefined;this.message=undefined;this.showSuggestions=false;this.showMessage=false;this.delegator=false;this.showKba=false;this.kba_method="";this.kba_pin="";this.nameFieldId=`verdocs-contact-picker-name-${Math.random().toString(36).substring(2,11)}`;this.firstNameFieldId=`verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2,11)}`;this.lastNameFieldId=`verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2,11)}`;this.emailFieldId=`verdocs-contact-picker-email-${Math.random().toString(36).substring(2,11)}`;this.phoneFieldId=`verdocs-contact-picker-phone-${Math.random().toString(36).substring(2,11)}`}componentWillLoad(){if(this.templateRole){const e=c(this.templateRole);const t=e.split(" ");const o=this.templateRole.first_name||t.shift()||"";const s=this.templateRole.last_name||t.join(" ")||"";this.first_name=o;this.last_name=s;this.email=this.templateRole.email||"";this.phone=this.templateRole.phone||"";this.delegator=this.templateRole.delegator||false;this.message=this.templateRole.message||"";this.showMessage=this.message!=="";this.kba_method=this.templateRole.kba_method||"";this.kba_pin=this.templateRole.kba_pin||"";this.showKba=!!this.kba_method}}handleFirstNameChange(e){var t;this.first_name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.first_name})}handleLastNameChange(e){var t;this.last_name=e.target.value;(t=this.searchContacts)===null||t===void 0?void 0:t.emit({query:this.last_name})}handleCancel(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.exit)===null||t===void 0?void 0:t.emit()}handleSubmit(e){var t;e.stopPropagation();this.showSuggestions=false;(t=this.next)===null||t===void 0?void 0:t.emit({first_name:this.first_name,last_name:this.last_name,email:this.email,phone:this.phone,message:this.message,delegator:this.delegator,kba_method:this.kba_method,kba_pin:this.kba_pin,address:this.address,zip:this.zip})}handleSelectSuggestion(e,t){e.stopPropagation();this.first_name=t.first_name;this.last_name=t.last_name;this.email=t.email;this.phone=t.phone;this.showSuggestions=false}render(){const e=this.first_name&&this.last_name&&d(this.email);const t=!this.kba_method||this.kba_method==="pin"&&this.kba_pin||this.kba_method==="identity";const i=e&&t;return o("form",{key:"2ce99d1c3ae979f25dde56e4a9dc7ec56cec2542",onSubmit:e=>e.preventDefault(),onClick:e=>e.stopPropagation(),autocomplete:"off"},o("div",{key:"6257ebf610c9ea9a8f6238311ad1b4ed0095e498",class:"row"},o("label",{key:"c36d51599847033b0c096c9d5de7d8af49e05c7d",htmlFor:this.nameFieldId},"Name:"),o("div",{key:"23cdb2afffff2ede3429c8591093eb89ca89d4b6",class:"names-row"},o("input",{key:"d281392383863edbcfc14440e18631b97962ea2f",id:this.firstNameFieldId,name:this.firstNameFieldId,type:"text","data-lpignore":"true",autocomplete:"blocked",value:this.first_name,placeholder:"First...",onFocus:()=>{var e;return this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0},onInput:e=>this.handleFirstNameChange(e)}),o("input",{key:"eea0626eb854ae95c32ad7e98d479a614e7df81c",id:this.lastNameFieldId,name:this.lastNameFieldId,type:"text","data-lpignore":"true",autocomplete:"blocked",value:this.last_name,placeholder:"Last...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handleLastNameChange(e)})),this.showSuggestions&&o("div",{key:"2e3fc57f42e3281b83b03e53b92c07243dcff544",class:"dropdown"},this.contactSuggestions.filter((e=>!this.first_name||e.first_name.toLowerCase().includes(this.first_name.toLowerCase()))).map((e=>{var t;return o("div",{key:(t=e.id)!==null&&t!==void 0?t:e.email,class:"suggestion",onClick:t=>this.handleSelectSuggestion(t,e)},e.picture?o("img",{alt:"Avatar",class:"avatar",src:e.picture}):o("div",{class:"avatar",innerHTML:h}),o("div",{class:"details"},o("div",{class:"name"},c(e)),e.email&&o("div",{class:"destination"},e.email),e.phone&&o("div",{class:"destination"},e.phone)))})))),o("div",{key:"f18fd6d889ea70f8a5e51bd1780007b3ff061b56",class:"row"},o("label",{key:"5cda3922bb705ed0d3af00644df9ef8d42042021",htmlFor:this.emailFieldId},"Email:"),o("input",{key:"34474c4c8bbbde2802b3c2f58ea3abed4b3e27f6",id:this.emailFieldId,name:this.emailFieldId,type:"text","data-lpignore":"true",autoComplete:"blocked",value:this.email,placeholder:"Email address...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.email=e.target.value})),o("div",{key:"c757b186ca60272855ed5701c59857856dcd863f",class:"row"},o("label",{key:"1d971705ab36609db6a4e9cb7d24281d98441cd5",htmlFor:this.phoneFieldId},"Phone:"),o("input",{key:"2a516e28498a6727409ef51e61ca3fe912c65789",id:this.phoneFieldId,name:this.phoneFieldId,type:"text","data-lpignore":"true",autoComplete:"blocked",value:this.phone,placeholder:"Phone (SMS)...",onFocus:()=>this.showSuggestions=false,onInput:e=>{this.phone=r(e.target.value)}})),this.showKba&&o(s,{key:"05cdb2c78abc3156d04a012c40a52f2c6ab24a86"},o("div",{key:"56d53a04ba6ab45ecc30f11e44669ad503400a49",class:"kba-row"},o("label",{key:"8af91071db065071bb40e931ea92231f31e9c0c9"},"KBA:"),o("verdocs-select-input",{key:"3f2eec31ee0078779eeed5d3f2fbd222fcdbaa42",value:this.kba_method,onInput:e=>{this.kba_method=e.target.value;this.zip="";this.address="";this.kba_pin=""},options:[{label:"None",value:""},{label:"PIN Code",value:"pin"},{label:"Full Verification",value:"identity"}]}),o("div",{key:"33e9efc07399e6930264b4b79f73a5497728c7c7",style:{flex:"1"}}),o("verdocs-help-icon",{key:"bc5ec8ad3fcf22a4f9a0f4659b574e238526574a",text:"Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature."})),this.kba_method==="pin"&&o("div",{key:"cd07404e1e9cd0a344c0975bdd23b2374d97ad61",class:"row pin-code"},o("input",{key:"92909cedb50e11bffe60dcd032b2d8c3dd901834",id:"verdocs-pin-code",name:"verdocs-pin-code",type:"text","data-lpignore":"true",autocomplete:"blocked",value:this.kba_pin,placeholder:"PIN Code...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.kba_pin=e.target.value})),this.kba_method==="identity"&&o("div",{key:"6ad1983ac8f9394bb9f35a8a9bba2f16d48d7bcd",class:"row address"},o("input",{key:"d598a1fb52b77eb85f17bda65f1730900d1d94e5",id:"verdocs-address",name:"verdocs-address",type:"text","data-lpignore":"true",autocomplete:"blocked",value:this.address,placeholder:"Address...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.address=e.target.value}),o("verdocs-help-icon",{key:"09d3cfa8e92c6c59cda2cff599ae474296de35a0",text:"Pre-fill the recipient's current street address. They will still be asked ID challenge questions."})),this.kba_method==="identity"&&o("div",{key:"1ccb3caa35f5474f40245ca1fe9c11aa175b4cc2",class:"row zip-code"},o("input",{key:"e967aba3ffac6e25f359c56c0bd5cd057394ad82",id:"verdocs-zip-code",name:"verdocs-zip-code",type:"text","data-lpignore":"true",autocomplete:"blocked",value:this.zip,placeholder:"Zip Code...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.zip=e.target.value}),o("verdocs-help-icon",{key:"b4075b320d84028e8717e8383113751155a6aebf",text:"Pre-fill the recipient's current zip code. They will still be asked ID challenge questions."}))),this.showMessage&&o("div",{key:"8212baa1274eb1dd98deeec972afeeb5bfb3c400",class:"row message"},o("label",{key:"1b1c58c77ebd0dfd1e193e68a9bf472d93b8914f",htmlFor:"verdocs-contact-picker-message"},"Message:"),o("input",{key:"d5525496367b3fa0bde52a91bad7f68964454a3c",id:"verdocs-contact-picker-message",name:"verdocs-contact-picker-message",type:"text","data-lpignore":"true",autocomplete:"blocked",value:this.message,placeholder:"Message shown in invitation...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.message=e.target.value})),o("div",{key:"c39a19e49ea3ae82ecb287bf2acb87734237fdb9",class:"buttons"},o("verdocs-toggle-button",{key:"311f86449b98cad74d5811473578ab223237d39e",icon:p,size:"small",active:this.showKba,onToggle:e=>{this.showKba=e.detail.active;if(!e.detail.active){this.kba_pin="";this.kba_method="";this.zip=""}this.showSuggestions=false}}),o("verdocs-toggle-button",{key:"c51c8bba37758ad6ada6946d9c2df9880204b1be",icon:f,size:"small",active:this.showMessage,onToggle:e=>{this.showMessage=e.detail.active;this.showSuggestions=false}}),o("div",{key:"747951c6d9273bf5142be1f20b6e51a2cc4239d5",class:"flex-fill"}),o("verdocs-button",{key:"12f60448cac7f6bb6804119ad620bdc77d4c0c9c",variant:"outline",label:"Cancel",size:"small",onClick:e=>this.handleCancel(e)}),o("verdocs-button",{key:"507b52e7904d9e5c31e1ba40c7ffa0ccba7763f2",label:"OK",size:"small",disabled:!i,onClick:!i?()=>{}:e=>this.handleSubmit(e)})))}};b.style=n;const u='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-toggle-button{font-family:"Inter", "Barlow", sans-serif}verdocs-toggle-button button{border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#cccccc;color:#33364b}verdocs-toggle-button button svg{max-width:100%;max-height:100%;fill:#33364b}verdocs-toggle-button button.active{background:#55bc81;color:#f5f5fa}verdocs-toggle-button button.active svg{fill:#f5f5fa}verdocs-toggle-button button:focus{border:none;outline:none}verdocs-toggle-button.size-normal button{width:40px;height:40px;padding:6px;border-radius:4px}verdocs-toggle-button.size-small button{width:34px;height:34px;padding:4px;border-radius:2px}';const m=u;const g=class{constructor(o){e(this,o);this.toggle=t(this,"toggle",7);this.active=false;this.icon=null;this.label=null;this.size="normal";this._active=false}componentWillLoad(){this._active=this.active}handleToggle(e){var t;e.stopPropagation();const o=!this._active;this._active=o;(t=this.toggle)===null||t===void 0?void 0:t.emit({active:o})}render(){return o(i,{key:"57d988cf0335a521279382d8c91be3b7af3b1f87",class:`size-${this.size}`},this.icon?o("button",{innerHTML:this.icon,class:{active:this._active},onClick:e=>this.handleToggle(e)}):o("button",{class:{active:this._active},onClick:e=>this.handleToggle(e)},this.label))}};g.style=m;export{b as verdocs_contact_picker,g as verdocs_toggle_button};
-//# sourceMappingURL=p-d58010a4.entry.js.map

package/dist/verdocs-web-sdk/p-d58010a4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["verdocsContactPickerCss","VerdocsContactPickerStyle0","messageIcon","kbaIcon","addrBookIcon","VerdocsContactPicker","VerdocsEndpoint","getDefault","Math","random","toString","substring","componentWillLoad","this","templateRole","fullName","formatFullName","nameComponents","split","firstName","first_name","shift","lastName","last_name","join","email","phone","delegator","message","showMessage","kba_method","kba_pin","showKba","handleFirstNameChange","e","target","value","_a","searchContacts","emit","query","handleLastNameChange","handleCancel","stopPropagation","showSuggestions","exit","handleSubmit","next","address","zip","handleSelectSuggestion","suggestion","render","hasBasics","isValidEmail","hasKbaRequirements","canSubmit","h","key","onSubmit","preventDefault","onClick","autocomplete","class","htmlFor","nameFieldId","id","firstNameFieldId","name","type","placeholder","onFocus","contactSuggestions","length","onInput","lastNameFieldId","filter","toLowerCase","includes","map","picture","alt","src","innerHTML","emailFieldId","autoComplete","phoneFieldId","convertToE164","Fragment","options","label","style","flex","text","icon","size","active","onToggle","detail","variant","disabled","verdocsToggleButtonCss","VerdocsToggleButtonStyle0","VerdocsToggleButton","_active","handleToggle","newState","toggle","Host"],"sources":["src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx","src/components/controls/verdocs-toggle-button/verdocs-toggle-button.scss?tag=verdocs-toggle-button","src/components/controls/verdocs-toggle-button/verdocs-toggle-button.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  display: block;\n  border: 1px solid #ebebeb;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n  form {\n    gap: 12px;\n    width: 300px;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n    background-color: $verdocs-grey-3;\n\n    .row {\n      gap: 8px;\n      display: flex;\n      position: relative;\n      flex-direction: row;\n      align-items: center;\n\n      &.message {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n    }\n\n    .names-row {\n      gap: 8px;\n      display: flex;\n      flex-direction: row;\n\n      > input {\n        font-size: 14px;\n        width: 103px;\n      }\n    }\n\n    .kba-row {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      verdocs-select-input {\n        margin: 0;\n      }\n    }\n\n    .pin-code {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 0;\n        width: 133px;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    .address {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 1;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    .zip-code {\n      gap: 8px;\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      > input {\n        flex: 1;\n        font-size: 14px;\n        margin-left: 58px;\n      }\n    }\n\n    label {\n      display: flex;\n      flex: 0 0 50px;\n      font-size: 14px;\n      font-weight: 500;\n      color: $verdocs-bg-4;\n    }\n\n    .row.message label {\n      flex: 0;\n    }\n\n    .row.message input {\n      width: 100%;\n    }\n\n    input {\n      flex: 1;\n      padding: 6px;\n      font-size: 14px;\n      border-radius: 3px;\n      background: #00000005;\n      border: 1px solid $border-color-extralight;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 1000000;\n      max-height: 225px;\n      overflow-y: scroll;\n      position: absolute;\n      background: #ffffff;\n      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n      .suggestion {\n        display: flex;\n        padding: 6px 12px;\n        align-items: center;\n        flex-direction: row;\n\n        svg {\n          width: 32px;\n          height: 32px;\n        }\n\n        .avatar {\n          width: 32px;\n          height: 32px;\n          flex: 0 0 32px;\n          margin-right: 8px;\n          border-radius: 100%;\n        }\n\n        .details {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .name {\n          font-size: 16px;\n          font-weight: 500;\n          margin-bottom: 3px;\n          color: $verdocs-grey-0;\n        }\n\n        .destination {\n          font-size: 14px;\n          margin-bottom: 3px;\n          color: $verdocs-grey-1;\n        }\n\n        &:hover {\n          background: #eee;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 6px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {Component, h, Event, EventEmitter, Fragment, Prop, State} from '@stencil/core';\nimport {formatFullName, IProfile, IRecipient, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {convertToE164} from '../../../utils/utils';\n\nconst messageIcon =\n  '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\n// const delegateIcon =\n//   '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst kbaIcon =\n  '<svg focusable=\"false\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z\" clip-rule=\"evenodd\" /></svg>';\n\nconst addrBookIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-book-user\"><path d=\"M15 13a3 3 0 1 0-6 0\"/><path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\"/><circle cx=\"12\" cy=\"8\" r=\"2\"/></svg>`;\n\nexport interface IContactSearchEvent {\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  first_name: string;\n  last_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n  kba_method: string;\n  kba_pin: string;\n  address: string;\n  zip: string;\n}\n\nexport type TPickerContact = Partial<IProfile>;\n\n/**\n * Display a contact picker suitable for filling out Recipient objects when sending Envelopes.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name fields is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n *\n * ```ts\n * <verdocs-contact-picker\n *   templateRole={role}\n *   contactSuggestions={[]}\n *   onNext={e => console.log('Contact completed', e.detail)}\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\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   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: Partial<IRecipient> | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: TPickerContact[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() first_name: string;\n  @State() last_name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() zip: string;\n  @State() address: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n  @State() showKba: boolean = false;\n  @State() kba_method: '' | 'pin' | 'identity' = '';\n  @State() kba_pin: string = '';\n\n  @State() nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;\n  @State() firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;\n  @State() lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;\n  @State() emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;\n  @State() phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      const fullName = formatFullName(this.templateRole);\n      const nameComponents = fullName.split(' ');\n      const firstName = this.templateRole.first_name || nameComponents.shift() || '';\n      const lastName = this.templateRole.last_name || nameComponents.join(' ') || '';\n      this.first_name = firstName;\n      this.last_name = lastName;\n\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n      this.kba_method = this.templateRole.kba_method || '';\n      this.kba_pin = this.templateRole.kba_pin || '';\n      this.showKba = !!this.kba_method;\n      // TODO: Allow template roles to have zip codes predefined?\n    }\n  }\n\n  handleFirstNameChange(e: any) {\n    this.first_name = e.target.value;\n    this.searchContacts?.emit({query: this.first_name});\n  }\n\n  handleLastNameChange(e: any) {\n    this.last_name = e.target.value;\n    this.searchContacts?.emit({query: this.last_name});\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.exit?.emit();\n  }\n\n  handleSubmit(e: any) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      first_name: this.first_name,\n      last_name: this.last_name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n      kba_method: this.kba_method,\n      kba_pin: this.kba_pin,\n      address: this.address,\n      zip: this.zip,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: TPickerContact) {\n    e.stopPropagation();\n\n    this.first_name = suggestion.first_name;\n    this.last_name = suggestion.last_name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them\n  // and show a duplicate autocomplete picker on top of our own.\n  render() {\n    // TODO: Re-activate this one SMS is re-enabled\n    // const hasBasics = this.first_name && this.last_name && (isValidEmail(this.email) || isValidPhone(this.phone));\n    const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);\n    const hasKbaRequirements =\n      !this.kba_method ||\n      (this.kba_method === 'pin' && this.kba_pin) ||\n      this.kba_method === 'identity';\n      // TODO: For discussion\n      // (this.kba_method === 'identity' && this.address && this.zip)\n    const canSubmit = hasBasics && hasKbaRequirements;\n\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor={this.nameFieldId}>Name:</label>\n          <div class=\"names-row\">\n            <input\n              id={this.firstNameFieldId}\n              name={this.firstNameFieldId}\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.first_name}\n              placeholder=\"First...\"\n              onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n              onInput={e => this.handleFirstNameChange(e)}\n            />\n            <input\n              id={this.lastNameFieldId}\n              name={this.lastNameFieldId}\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.last_name}\n              placeholder=\"Last...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleLastNameChange(e)}\n            />\n          </div>\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions\n                .filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))\n                .map(suggestion => (\n                  <div key={suggestion.id ?? suggestion.email} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                    {suggestion.picture ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.picture} /> : <div class=\"avatar\" innerHTML={addrBookIcon} />}\n                    <div class=\"details\">\n                      <div class=\"name\">{formatFullName(suggestion)}</div>\n                      {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                      {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                    </div>\n                  </div>\n                ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor={this.emailFieldId}>Email:</label>\n          <input\n            id={this.emailFieldId}\n            name={this.emailFieldId}\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"blocked\"\n            value={this.email}\n            placeholder=\"Email address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={(e: any) => (this.email = e.target.value)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor={this.phoneFieldId}>Phone:</label>\n          <input\n            id={this.phoneFieldId}\n            name={this.phoneFieldId}\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"blocked\"\n            value={this.phone}\n            placeholder=\"Phone (SMS)...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={(e: any) => {\n              this.phone = convertToE164(e.target.value);\n            }}\n          />\n        </div>\n\n        {this.showKba && (\n          <Fragment>\n            <div class=\"kba-row\">\n              <label>KBA:</label>\n              <verdocs-select-input\n                value={this.kba_method}\n                onInput={(e: any) => {\n                  this.kba_method = e.target.value;\n                  this.zip = '';\n                  this.address = '';\n                  this.kba_pin = '';\n                }}\n                options={[\n                  {label: 'None', value: ''},\n                  {label: 'PIN Code', value: 'pin'},\n                  {label: 'Full Verification', value: 'identity'},\n                ]}\n              />\n              <div style={{flex: '1'}}></div>\n              <verdocs-help-icon text=\"Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature.\" />\n            </div>\n\n            {this.kba_method === 'pin' && (\n              <div class=\"row pin-code\">\n                <input\n                  id=\"verdocs-pin-code\"\n                  name=\"verdocs-pin-code\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.kba_pin}\n                  placeholder=\"PIN Code...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.kba_pin = e.target.value)}\n                />\n              </div>\n            )}\n\n            {this.kba_method === 'identity' && (\n              <div class=\"row address\">\n                <input\n                  id=\"verdocs-address\"\n                  name=\"verdocs-address\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.address}\n                  placeholder=\"Address...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.address = e.target.value)}\n                />\n                <verdocs-help-icon text=\"Pre-fill the recipient's current street address. They will still be asked ID challenge questions.\" />\n              </div>\n            )}\n\n            {this.kba_method === 'identity' && (\n              <div class=\"row zip-code\">\n                <input\n                  id=\"verdocs-zip-code\"\n                  name=\"verdocs-zip-code\"\n                  type=\"text\"\n                  data-lpignore=\"true\"\n                  autocomplete=\"blocked\"\n                  value={this.zip}\n                  placeholder=\"Zip Code...\"\n                  onFocus={() => (this.showSuggestions = false)}\n                  onInput={(e: any) => (this.zip = e.target.value)}\n                />\n                <verdocs-help-icon text=\"Pre-fill the recipient's current zip code. They will still be asked ID challenge questions.\" />\n              </div>\n            )}\n          </Fragment>\n        )}\n\n        {this.showMessage && (\n          <div class=\"row message\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"blocked\"\n              value={this.message}\n              placeholder=\"Message shown in invitation...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={(e: any) => (this.message = e.target.value)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={kbaIcon}\n            size=\"small\"\n            active={this.showKba}\n            onToggle={e => {\n              this.showKba = e.detail.active;\n              if (!e.detail.active) {\n                this.kba_pin = '';\n                this.kba_method = '';\n                this.zip = '';\n              }\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" disabled={!canSubmit} onClick={!canSubmit ? () => {} : e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toggle-button {\n  font-family: $primary-font;\n\n  button {\n    border: none;\n    outline: none;\n    cursor: pointer;\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    background: $verdocs-bg-1;\n    color: $verdocs-dark-blue;\n\n    svg {\n      max-width: 100%;\n      max-height: 100%;\n      fill: $verdocs-dark-blue;\n    }\n\n    &.active {\n      background: $verdocs-green;\n      color: $verdocs-grey-3;\n\n      svg {\n        fill: $verdocs-grey-3;\n      }\n    }\n\n    &:focus {\n      border: none;\n      outline: none;\n    }\n  }\n\n  &.size-normal button {\n    width: 40px;\n    height: 40px;\n    padding: 6px;\n    border-radius: 4px;\n  }\n\n  &.size-small button {\n    width: 34px;\n    height: 34px;\n    padding: 4px;\n    border-radius: 2px;\n  }\n}\n","import {Component, Prop, h, State, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Displays a single button that can be toggled on or off by clicking it.\n *\n * ```ts\n * <verdocs-toggle-button icon={MessageIcon} size=\"normal\" active={true} />\n * ```\n */\n@Component({\n  tag: 'verdocs-toggle-button',\n  styleUrl: 'verdocs-toggle-button.scss',\n})\nexport class VerdocsToggleButton {\n  @Prop() active = false;\n\n  /**\n   * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.\n   */\n  @Prop() icon?: string | null = null;\n\n  /**\n   * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.\n   */\n  @Prop() label?: string | null = null;\n\n  /**\n   * How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions.\n   */\n  @Prop() size?: 'small' | 'normal' = 'normal';\n\n  /**\n   * Event fired when the button is pressed.\n   */\n  @Event({composed: true}) toggle!: EventEmitter<{active: boolean}>;\n\n  @State() _active = false;\n\n  componentWillLoad() {\n    this._active = this.active;\n  }\n\n  handleToggle(e: any) {\n    e.stopPropagation();\n\n    const newState = !this._active;\n    this._active = newState;\n    this.toggle?.emit({active: newState});\n  }\n\n  render() {\n    return (\n      <Host class={`size-${this.size}`}>\n        {this.icon ? (\n          <button innerHTML={this.icon} class={{active: this._active}} onClick={e => this.handleToggle(e)} />\n        ) : (\n          <button class={{active: this._active}} onClick={e => this.handleToggle(e)}>\n            {this.label}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}