@verdocs/web-sdk 4.2.58 → 4.2.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/verdocs-contact-picker_2.cjs.entry.js +10 -8
- package/dist/cjs/verdocs-preview_10.cjs.entry.js +15 -7
- package/dist/collection/components/embeds/verdocs-send/verdocs-send.js +16 -8
- package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.css +7 -4
- package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.js +13 -16
- package/dist/components/verdocs-contact-picker2.js +10 -8
- package/dist/components/verdocs-send2.js +16 -8
- package/dist/custom-elements.json +2030 -0
- package/dist/esm/verdocs-contact-picker_2.entry.js +10 -8
- package/dist/esm/verdocs-preview_10.entry.js +16 -8
- package/dist/esm-es5/verdocs-contact-picker_2.entry.js +1 -1
- package/dist/esm-es5/verdocs-preview_10.entry.js +1 -1
- package/dist/types/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.d.ts +4 -23
- package/dist/types/components.d.ts +4 -4
- package/dist/verdocs-web-sdk/p-03a228e4.system.js +1 -1
- package/dist/verdocs-web-sdk/p-17f27f15.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-b7d033d1.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-ee92a1fc.entry.js +1 -0
- package/dist/verdocs-web-sdk/p-f50e73e6.system.entry.js +1 -0
- package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
- package/package.json +2 -2
- package/dist/verdocs-web-sdk/p-33fc5994.system.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-a84f9767.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-dd4b01d3.entry.js +0 -1
- package/dist/verdocs-web-sdk/p-f403fe1c.system.entry.js +0 -1
|
@@ -9,14 +9,14 @@ require('./_commonjsHelpers-e6ff1d6e.js');
|
|
|
9
9
|
require('./Types-db1bd1d8.js');
|
|
10
10
|
require('./index-5f130ec0.js');
|
|
11
11
|
|
|
12
|
-
const verdocsContactPickerCss = "@-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{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .names-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px}verdocs-contact-picker form .names-row>input{min-width:0}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;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{
|
|
12
|
+
const verdocsContactPickerCss = "@-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{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .names-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px}verdocs-contact-picker form .names-row>input{min-width:0}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}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}";
|
|
13
13
|
const VerdocsContactPickerStyle0 = verdocsContactPickerCss;
|
|
14
14
|
|
|
15
15
|
const messageIcon = '<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>';
|
|
16
16
|
// const delegateIcon =
|
|
17
17
|
// '<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>';
|
|
18
18
|
const kbaIcon = '<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>';
|
|
19
|
-
const
|
|
19
|
+
const 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>`;
|
|
20
20
|
const VerdocsContactPicker = class {
|
|
21
21
|
constructor(hostRef) {
|
|
22
22
|
index.registerInstance(this, hostRef);
|
|
@@ -113,24 +113,26 @@ const VerdocsContactPicker = class {
|
|
|
113
113
|
// The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
|
|
114
114
|
// and show a duplicate autocomplete picker on top of our own.
|
|
115
115
|
render() {
|
|
116
|
-
return (index.h("form", { key: '
|
|
116
|
+
return (index.h("form", { key: '77d4a7a5740dc9afc0adf90a9370a8df7f7e57db', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: 'c98cfc773ed6c59202b9752ce4386ba877839902', class: "row" }, index.h("label", { key: '831913a57ad8de80d3e234ca8aee38c9293be25a', htmlFor: this.nameFieldId }, "Name:"), index.h("div", { key: '856ff7e946194f61a918af19150043ab5914128d', class: "names-row" }, index.h("input", { key: '861a16cf88c5e79bc85ae9ba62e0aab5d7bedb34', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), index.h("input", { key: 'cbc821b96e4241745fbb655e540fe9e0699170b3', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (index.h("div", { key: 'b6d7c93ac96ae383000d549244993ce3e9473b07', class: "dropdown" }, this.contactSuggestions
|
|
117
|
+
.filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))
|
|
118
|
+
.map(suggestion => {
|
|
117
119
|
var _a;
|
|
118
|
-
return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.
|
|
119
|
-
})))), index.h("div", { key: '
|
|
120
|
+
return (index.h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? index.h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : index.h("div", { class: "avatar", innerHTML: addrBookIcon }), index.h("div", { class: "details" }, index.h("div", { class: "name" }, suggestion.first_name, " ", suggestion.last_name), suggestion.email && index.h("div", { class: "destination" }, suggestion.email), suggestion.phone && index.h("div", { class: "destination" }, suggestion.phone))));
|
|
121
|
+
})))), index.h("div", { key: '7b750d3f7ab27c0b5feea0ebf322aaa21273f6cf', class: "row" }, index.h("label", { key: '31a8e0dfd76cc0dd2cd6299c97ac57c3b626de10', htmlFor: this.emailFieldId }, "Email:"), index.h("input", { key: 'e42b4e3d34d399de6fea837d3257ee50244d690c', 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.handleEmailChange(e) })), index.h("div", { key: '192985b0f48fcdf781e9ef4ff64d393da11df2ab', class: "row" }, index.h("label", { key: 'e0ceef244fc561b2d488b7f5228d31a78ab3e415', htmlFor: this.phoneFieldId }, "Phone:"), index.h("input", { key: 'b9bcaa6a282bdd853ff237fb80d93adb765b80d3', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (index.h("div", { key: '9c8e31b692e62901886104f27a5beb56312196a2', class: "row" }, index.h("div", { key: 'd8f17ff86c0a3a994db391df8a71ad6ddd81735f', class: "label-with-icon" }, index.h("label", { key: '82263fb743f8ff6809d33cdf5ae964bdc28ea661' }, "KBA:"), index.h("verdocs-help-icon", { key: '5eaa626c45ce5d0cbb3cc34f07d686099ea7bf83', 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." })), index.h("verdocs-select-input", { key: 'f1f5ebac6f6b5ec68232d71bc9f116f077348e30', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
|
|
120
122
|
{ label: 'None', value: '' },
|
|
121
123
|
{ label: 'PIN Code', value: 'pin' },
|
|
122
124
|
{ label: 'Full Verification', value: 'kba' },
|
|
123
|
-
] }), this.kbaMethod === 'pin' && (index.h("input", { key: '
|
|
125
|
+
] }), this.kbaMethod === 'pin' && (index.h("input", { key: 'fe87947c167f926ad49bf082df02c8eab1fc9b3a', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (index.h("div", { key: 'b202f9482e1d58748bf389036ea5707bf9edc1ae', class: "row" }, index.h("label", { key: 'b9a25c63c47aa3e3201b3a221f5d26bb56ca0154', htmlFor: "verdocs-contact-picker-message" }, "Message:"), index.h("input", { key: '607ab3f44f08c30d5e2a44ca26db1afce6b82313', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), index.h("div", { key: '8c0295589fb39514d9da534bc57d18e35e2b77bb', class: "buttons" }, index.h("verdocs-toggle-button", { key: '2fa1df450fa7c66b8fd70a83bff4967dde6a100e', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
|
|
124
126
|
this.showKba = e.detail.active;
|
|
125
127
|
if (!e.detail.active) {
|
|
126
128
|
this.pinCode = '';
|
|
127
129
|
this.kbaMethod = '';
|
|
128
130
|
}
|
|
129
131
|
this.showSuggestions = false;
|
|
130
|
-
} }), index.h("verdocs-toggle-button", { key: '
|
|
132
|
+
} }), index.h("verdocs-toggle-button", { key: '4d9e6bb2b64b3c9c6e9f7a74ce5631189ef9b358', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
|
|
131
133
|
this.showMessage = e.detail.active;
|
|
132
134
|
this.showSuggestions = false;
|
|
133
|
-
} }), index.h("div", { key: '
|
|
135
|
+
} }), index.h("div", { key: '5686aed5c1b33e96d945de8bb467935fc51f09d0', class: "flex-fill" }), index.h("verdocs-button", { key: '74d6bcc7f14a79e381adfb89c6fb196fb749cae3', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { key: 'dc734de21e10ff2f17511dff743196abd18fd533', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
|
|
134
136
|
}
|
|
135
137
|
};
|
|
136
138
|
VerdocsContactPicker.style = VerdocsContactPickerStyle0;
|
|
@@ -132,14 +132,22 @@ const VerdocsSend = class {
|
|
|
132
132
|
var _a, _b, _c;
|
|
133
133
|
try {
|
|
134
134
|
this.endpoint.onSessionChanged((_endpoint, _session, profile) => {
|
|
135
|
+
const me = {
|
|
136
|
+
id: profile.id,
|
|
137
|
+
first_name: profile.first_name,
|
|
138
|
+
last_name: profile.last_name,
|
|
139
|
+
email: profile.email,
|
|
140
|
+
phone: profile.phone,
|
|
141
|
+
};
|
|
135
142
|
if (profile) {
|
|
136
|
-
this.sessionContacts = [];
|
|
137
|
-
this.
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
+
this.sessionContacts = [me];
|
|
144
|
+
jsSdk.getOrganizationContacts(this.endpoint)
|
|
145
|
+
.then(contacts => {
|
|
146
|
+
console.log('Got contacts', contacts);
|
|
147
|
+
this.sessionContacts = [...contacts, me];
|
|
148
|
+
})
|
|
149
|
+
.catch(e => {
|
|
150
|
+
console.log('Error getting contacts', e);
|
|
143
151
|
});
|
|
144
152
|
}
|
|
145
153
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h, Host } from "@stencil/core";
|
|
2
|
-
import { createEnvelope, getRGBA, isValidEmail, isValidPhone, VerdocsEndpoint, } from "@verdocs/js-sdk";
|
|
2
|
+
import { createEnvelope, getOrganizationContacts, getRGBA, isValidEmail, isValidPhone, VerdocsEndpoint, } from "@verdocs/js-sdk";
|
|
3
3
|
import { getRoleIndex, getRoleNames, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
|
|
4
4
|
import { getTemplateStore } from "../../../utils/TemplateStore";
|
|
5
5
|
import { SDKError } from "../../../utils/errors";
|
|
@@ -47,14 +47,22 @@ export class VerdocsSend {
|
|
|
47
47
|
var _a, _b, _c;
|
|
48
48
|
try {
|
|
49
49
|
this.endpoint.onSessionChanged((_endpoint, _session, profile) => {
|
|
50
|
+
const me = {
|
|
51
|
+
id: profile.id,
|
|
52
|
+
first_name: profile.first_name,
|
|
53
|
+
last_name: profile.last_name,
|
|
54
|
+
email: profile.email,
|
|
55
|
+
phone: profile.phone,
|
|
56
|
+
};
|
|
50
57
|
if (profile) {
|
|
51
|
-
this.sessionContacts = [];
|
|
52
|
-
this.
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
this.sessionContacts = [me];
|
|
59
|
+
getOrganizationContacts(this.endpoint)
|
|
60
|
+
.then(contacts => {
|
|
61
|
+
console.log('Got contacts', contacts);
|
|
62
|
+
this.sessionContacts = [...contacts, me];
|
|
63
|
+
})
|
|
64
|
+
.catch(e => {
|
|
65
|
+
console.log('Error getting contacts', e);
|
|
58
66
|
});
|
|
59
67
|
}
|
|
60
68
|
});
|
package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.css
CHANGED
|
@@ -67,6 +67,8 @@ verdocs-contact-picker form .dropdown {
|
|
|
67
67
|
right: 0;
|
|
68
68
|
top: 49px;
|
|
69
69
|
z-index: 1000000;
|
|
70
|
+
max-height: 225px;
|
|
71
|
+
overflow-y: scroll;
|
|
70
72
|
position: absolute;
|
|
71
73
|
background: #ffffff;
|
|
72
74
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
|
|
@@ -78,12 +80,13 @@ verdocs-contact-picker form .dropdown .suggestion {
|
|
|
78
80
|
flex-direction: row;
|
|
79
81
|
}
|
|
80
82
|
verdocs-contact-picker form .dropdown .suggestion svg {
|
|
81
|
-
|
|
83
|
+
width: 32px;
|
|
84
|
+
height: 32px;
|
|
82
85
|
}
|
|
83
86
|
verdocs-contact-picker form .dropdown .suggestion .avatar {
|
|
84
|
-
width:
|
|
85
|
-
height:
|
|
86
|
-
flex: 0 0
|
|
87
|
+
width: 32px;
|
|
88
|
+
height: 32px;
|
|
89
|
+
flex: 0 0 32px;
|
|
87
90
|
margin-right: 8px;
|
|
88
91
|
border-radius: 100%;
|
|
89
92
|
}
|
package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.js
CHANGED
|
@@ -5,7 +5,7 @@ const messageIcon = '<svg focusable="false" viewBox="0 0 24 24"><path d="M20 2H4
|
|
|
5
5
|
// const delegateIcon =
|
|
6
6
|
// '<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>';
|
|
7
7
|
const kbaIcon = '<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>';
|
|
8
|
-
const
|
|
8
|
+
const 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>`;
|
|
9
9
|
/**
|
|
10
10
|
* Displays a contact picker suitable for filling out Recipient objects when sending Documents.
|
|
11
11
|
*
|
|
@@ -107,24 +107,26 @@ export class VerdocsContactPicker {
|
|
|
107
107
|
// The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
|
|
108
108
|
// and show a duplicate autocomplete picker on top of our own.
|
|
109
109
|
render() {
|
|
110
|
-
return (h("form", { key: '
|
|
110
|
+
return (h("form", { key: '77d4a7a5740dc9afc0adf90a9370a8df7f7e57db', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'c98cfc773ed6c59202b9752ce4386ba877839902', class: "row" }, h("label", { key: '831913a57ad8de80d3e234ca8aee38c9293be25a', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '856ff7e946194f61a918af19150043ab5914128d', class: "names-row" }, h("input", { key: '861a16cf88c5e79bc85ae9ba62e0aab5d7bedb34', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: 'cbc821b96e4241745fbb655e540fe9e0699170b3', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: 'b6d7c93ac96ae383000d549244993ce3e9473b07', class: "dropdown" }, this.contactSuggestions
|
|
111
|
+
.filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))
|
|
112
|
+
.map(suggestion => {
|
|
111
113
|
var _a;
|
|
112
|
-
return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.
|
|
113
|
-
})))), h("div", { key: '
|
|
114
|
+
return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : h("div", { class: "avatar", innerHTML: addrBookIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.first_name, " ", suggestion.last_name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
|
|
115
|
+
})))), h("div", { key: '7b750d3f7ab27c0b5feea0ebf322aaa21273f6cf', class: "row" }, h("label", { key: '31a8e0dfd76cc0dd2cd6299c97ac57c3b626de10', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'e42b4e3d34d399de6fea837d3257ee50244d690c', 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.handleEmailChange(e) })), h("div", { key: '192985b0f48fcdf781e9ef4ff64d393da11df2ab', class: "row" }, h("label", { key: 'e0ceef244fc561b2d488b7f5228d31a78ab3e415', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'b9bcaa6a282bdd853ff237fb80d93adb765b80d3', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: '9c8e31b692e62901886104f27a5beb56312196a2', class: "row" }, h("div", { key: 'd8f17ff86c0a3a994db391df8a71ad6ddd81735f', class: "label-with-icon" }, h("label", { key: '82263fb743f8ff6809d33cdf5ae964bdc28ea661' }, "KBA:"), h("verdocs-help-icon", { key: '5eaa626c45ce5d0cbb3cc34f07d686099ea7bf83', 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." })), h("verdocs-select-input", { key: 'f1f5ebac6f6b5ec68232d71bc9f116f077348e30', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
|
|
114
116
|
{ label: 'None', value: '' },
|
|
115
117
|
{ label: 'PIN Code', value: 'pin' },
|
|
116
118
|
{ label: 'Full Verification', value: 'kba' },
|
|
117
|
-
] }), this.kbaMethod === 'pin' && (h("input", { key: '
|
|
119
|
+
] }), this.kbaMethod === 'pin' && (h("input", { key: 'fe87947c167f926ad49bf082df02c8eab1fc9b3a', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: 'b202f9482e1d58748bf389036ea5707bf9edc1ae', class: "row" }, h("label", { key: 'b9a25c63c47aa3e3201b3a221f5d26bb56ca0154', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: '607ab3f44f08c30d5e2a44ca26db1afce6b82313', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '8c0295589fb39514d9da534bc57d18e35e2b77bb', class: "buttons" }, h("verdocs-toggle-button", { key: '2fa1df450fa7c66b8fd70a83bff4967dde6a100e', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
|
|
118
120
|
this.showKba = e.detail.active;
|
|
119
121
|
if (!e.detail.active) {
|
|
120
122
|
this.pinCode = '';
|
|
121
123
|
this.kbaMethod = '';
|
|
122
124
|
}
|
|
123
125
|
this.showSuggestions = false;
|
|
124
|
-
} }), h("verdocs-toggle-button", { key: '
|
|
126
|
+
} }), h("verdocs-toggle-button", { key: '4d9e6bb2b64b3c9c6e9f7a74ce5631189ef9b358', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
|
|
125
127
|
this.showMessage = e.detail.active;
|
|
126
128
|
this.showSuggestions = false;
|
|
127
|
-
} }), h("div", { key: '
|
|
129
|
+
} }), h("div", { key: '5686aed5c1b33e96d945de8bb467935fc51f09d0', class: "flex-fill" }), h("verdocs-button", { key: '74d6bcc7f14a79e381adfb89c6fb196fb749cae3', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'dc734de21e10ff2f17511dff743196abd18fd533', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
|
|
128
130
|
}
|
|
129
131
|
static get is() { return "verdocs-contact-picker"; }
|
|
130
132
|
static get originalStyleUrls() {
|
|
@@ -191,18 +193,13 @@ export class VerdocsContactPicker {
|
|
|
191
193
|
"type": "unknown",
|
|
192
194
|
"mutable": false,
|
|
193
195
|
"complexType": {
|
|
194
|
-
"original": "
|
|
195
|
-
"resolved": "
|
|
196
|
+
"original": "TPickerContact[]",
|
|
197
|
+
"resolved": "Partial<IProfile>[]",
|
|
196
198
|
"references": {
|
|
197
|
-
"
|
|
199
|
+
"TPickerContact": {
|
|
198
200
|
"location": "local",
|
|
199
201
|
"path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx",
|
|
200
|
-
"id": "src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx::
|
|
201
|
-
},
|
|
202
|
-
"IPhoneContact": {
|
|
203
|
-
"location": "local",
|
|
204
|
-
"path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx",
|
|
205
|
-
"id": "src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx::IPhoneContact"
|
|
202
|
+
"id": "src/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.tsx::TPickerContact"
|
|
206
203
|
}
|
|
207
204
|
}
|
|
208
205
|
},
|
|
@@ -6,14 +6,14 @@ import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
|
|
|
6
6
|
import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
|
|
7
7
|
import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
|
|
8
8
|
|
|
9
|
-
const verdocsContactPickerCss = "@-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{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .names-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px}verdocs-contact-picker form .names-row>input{min-width:0}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:1000000;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{
|
|
9
|
+
const verdocsContactPickerCss = "@-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{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .names-row{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:8px}verdocs-contact-picker form .names-row>input{min-width:0}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form .label-with-icon{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-contact-picker form .label-with-icon verdocs-help-icon svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}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}";
|
|
10
10
|
const VerdocsContactPickerStyle0 = verdocsContactPickerCss;
|
|
11
11
|
|
|
12
12
|
const messageIcon = '<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>';
|
|
13
13
|
// const delegateIcon =
|
|
14
14
|
// '<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>';
|
|
15
15
|
const kbaIcon = '<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>';
|
|
16
|
-
const
|
|
16
|
+
const 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>`;
|
|
17
17
|
const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsContactPicker extends HTMLElement {
|
|
18
18
|
constructor() {
|
|
19
19
|
super();
|
|
@@ -111,24 +111,26 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
|
|
|
111
111
|
// The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
|
|
112
112
|
// and show a duplicate autocomplete picker on top of our own.
|
|
113
113
|
render() {
|
|
114
|
-
return (h("form", { key: '
|
|
114
|
+
return (h("form", { key: '77d4a7a5740dc9afc0adf90a9370a8df7f7e57db', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'c98cfc773ed6c59202b9752ce4386ba877839902', class: "row" }, h("label", { key: '831913a57ad8de80d3e234ca8aee38c9293be25a', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '856ff7e946194f61a918af19150043ab5914128d', class: "names-row" }, h("input", { key: '861a16cf88c5e79bc85ae9ba62e0aab5d7bedb34', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: 'cbc821b96e4241745fbb655e540fe9e0699170b3', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last Name...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: 'b6d7c93ac96ae383000d549244993ce3e9473b07', class: "dropdown" }, this.contactSuggestions
|
|
115
|
+
.filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))
|
|
116
|
+
.map(suggestion => {
|
|
115
117
|
var _a;
|
|
116
|
-
return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.
|
|
117
|
-
})))), h("div", { key: '
|
|
118
|
+
return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : h("div", { class: "avatar", innerHTML: addrBookIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.first_name, " ", suggestion.last_name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
|
|
119
|
+
})))), h("div", { key: '7b750d3f7ab27c0b5feea0ebf322aaa21273f6cf', class: "row" }, h("label", { key: '31a8e0dfd76cc0dd2cd6299c97ac57c3b626de10', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: 'e42b4e3d34d399de6fea837d3257ee50244d690c', 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.handleEmailChange(e) })), h("div", { key: '192985b0f48fcdf781e9ef4ff64d393da11df2ab', class: "row" }, h("label", { key: 'e0ceef244fc561b2d488b7f5228d31a78ab3e415', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'b9bcaa6a282bdd853ff237fb80d93adb765b80d3', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showKba && (h("div", { key: '9c8e31b692e62901886104f27a5beb56312196a2', class: "row" }, h("div", { key: 'd8f17ff86c0a3a994db391df8a71ad6ddd81735f', class: "label-with-icon" }, h("label", { key: '82263fb743f8ff6809d33cdf5ae964bdc28ea661' }, "KBA:"), h("verdocs-help-icon", { key: '5eaa626c45ce5d0cbb3cc34f07d686099ea7bf83', 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." })), h("verdocs-select-input", { key: 'f1f5ebac6f6b5ec68232d71bc9f116f077348e30', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
|
|
118
120
|
{ label: 'None', value: '' },
|
|
119
121
|
{ label: 'PIN Code', value: 'pin' },
|
|
120
122
|
{ label: 'Full Verification', value: 'kba' },
|
|
121
|
-
] }), this.kbaMethod === 'pin' && (h("input", { key: '
|
|
123
|
+
] }), this.kbaMethod === 'pin' && (h("input", { key: 'fe87947c167f926ad49bf082df02c8eab1fc9b3a', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) })))), this.showMessage && (h("div", { key: 'b202f9482e1d58748bf389036ea5707bf9edc1ae', class: "row" }, h("label", { key: 'b9a25c63c47aa3e3201b3a221f5d26bb56ca0154', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: '607ab3f44f08c30d5e2a44ca26db1afce6b82313', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { key: '8c0295589fb39514d9da534bc57d18e35e2b77bb', class: "buttons" }, h("verdocs-toggle-button", { key: '2fa1df450fa7c66b8fd70a83bff4967dde6a100e', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
|
|
122
124
|
this.showKba = e.detail.active;
|
|
123
125
|
if (!e.detail.active) {
|
|
124
126
|
this.pinCode = '';
|
|
125
127
|
this.kbaMethod = '';
|
|
126
128
|
}
|
|
127
129
|
this.showSuggestions = false;
|
|
128
|
-
} }), h("verdocs-toggle-button", { key: '
|
|
130
|
+
} }), h("verdocs-toggle-button", { key: '4d9e6bb2b64b3c9c6e9f7a74ce5631189ef9b358', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
|
|
129
131
|
this.showMessage = e.detail.active;
|
|
130
132
|
this.showSuggestions = false;
|
|
131
|
-
} }), h("div", { key: '
|
|
133
|
+
} }), h("div", { key: '5686aed5c1b33e96d945de8bb467935fc51f09d0', class: "flex-fill" }), h("verdocs-button", { key: '74d6bcc7f14a79e381adfb89c6fb196fb749cae3', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'dc734de21e10ff2f17511dff743196abd18fd533', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
|
|
132
134
|
}
|
|
133
135
|
static get style() { return VerdocsContactPickerStyle0; }
|
|
134
136
|
}, [0, "verdocs-contact-picker", {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { VerdocsEndpoint, createEnvelope, isValidEmail, isValidPhone, getRGBA } from '@verdocs/js-sdk';
|
|
2
|
+
import { VerdocsEndpoint, getOrganizationContacts, createEnvelope, isValidEmail, isValidPhone, getRGBA } from '@verdocs/js-sdk';
|
|
3
3
|
import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './TemplateRoleStore.js';
|
|
4
4
|
import { g as getTemplateStore } from './TemplateStore.js';
|
|
5
5
|
import { S as SDKError } from './errors.js';
|
|
@@ -50,14 +50,22 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
|
|
|
50
50
|
var _a, _b, _c;
|
|
51
51
|
try {
|
|
52
52
|
this.endpoint.onSessionChanged((_endpoint, _session, profile) => {
|
|
53
|
+
const me = {
|
|
54
|
+
id: profile.id,
|
|
55
|
+
first_name: profile.first_name,
|
|
56
|
+
last_name: profile.last_name,
|
|
57
|
+
email: profile.email,
|
|
58
|
+
phone: profile.phone,
|
|
59
|
+
};
|
|
53
60
|
if (profile) {
|
|
54
|
-
this.sessionContacts = [];
|
|
55
|
-
this.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
+
this.sessionContacts = [me];
|
|
62
|
+
getOrganizationContacts(this.endpoint)
|
|
63
|
+
.then(contacts => {
|
|
64
|
+
console.log('Got contacts', contacts);
|
|
65
|
+
this.sessionContacts = [...contacts, me];
|
|
66
|
+
})
|
|
67
|
+
.catch(e => {
|
|
68
|
+
console.log('Error getting contacts', e);
|
|
61
69
|
});
|
|
62
70
|
}
|
|
63
71
|
});
|