@verdocs/web-sdk 5.0.37 → 5.0.38

package/dist/components/{p-19259124.js → p-c2860587.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-1f51246d.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { u as unicodeNBSP } from './p-b0766439.js';
-import { d as defineCustomElement$1 } from './p-82efd79a.js';
+import { d as defineCustomElement$1 } from './p-d013a90c.js';
 
 const verdocsFileChooserCss = "@-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-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";
 const VerdocsFileChooserStyle0 = verdocsFileChooserCss;
@@ -31,7 +31,7 @@ const VerdocsFileChooser = /*@__PURE__*/ proxyCustomElement(class VerdocsFileCho
     }
     render() {
         const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
-        return (h(Host, { key: '1fb7d04e27804d492a6b6acba5f1b0e807efa8b4' }, h("input", { key: '3a0848d85ec37c6425092c524f064f27fe8d9216', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: '801e620892edec0bd4fc060d041943d9b4f7a558', class: "upload-box" }, h("div", { key: '5172b33ffda0d71f944aa68b8f1e44d4e79cdad4', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'bc6aa5604b17cfd5f1fc46ad00cdcc33721f6ebd', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: '036010ea672f05aab75540103707c15bdd4b704d', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
+        return (h(Host, { key: '193c771d4f6da75c045295ebedadd31b90acee4f' }, h("input", { key: '94cc9d419b15de25763b7d6347b8b88a2c54234d', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: 'befdb80389deef16728b8591400953fdc141f644', class: "upload-box" }, h("div", { key: 'b065c35caef733d346ac1f788043f0b620a6b503', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: 'acbaa900429925b6a9c416620c82f81f64a2f4eb', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: '2ff422a21e6987e3f348d85acb6394f4bfebbcc0', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
     }
     static get style() { return VerdocsFileChooserStyle0; }
 }, [0, "verdocs-file-chooser", {
@@ -59,4 +59,4 @@ function defineCustomElement() {
 
 export { VerdocsFileChooser as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-19259124.js.map
+//# sourceMappingURL=p-c2860587.js.map

package/dist/components/{p-19259124.js.map → p-c2860587.js.map}

@@ -1 +1 @@
-{"file":"p-19259124.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,45BAA45B,CAAC;AAC37B,iCAAe,qBAAqB;;MCgBvB,kBAAkB;IAL/B;;;;;;;QASU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;KAiDlE;IAvCC,iBAAiB,CAAC,CAAM;;QACtB,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,KAAI,IAAI,CAAC;QACxC,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrD;IAED,gBAAgB,CAAC,CAAM;;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACtC,MAAA,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,0CAAE,KAAK,EAAE,CAAC;KAC1D;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,yBAAyB,GAAG,kCAAkC,CAAC;QAE/F,QACE,EAAC,IAAI,uDACH,8DACE,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,EAAE,EAAC,sBAAsB,EACzB,MAAM,EAAC,4HAA4H,EACnI,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EACxB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxC,EAEF,4DAAK,KAAK,EAAC,YAAY,IAGrB,4DAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAO,EAEtF,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,sBAAsB,CAAO,EAE/E,uEAAgB,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACvF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-file-chooser/verdocs-file-chooser.scss?tag=verdocs-file-chooser","src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-file-chooser {\n  display: flex;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n\n  .upload-box {\n    text-align: center;\n    box-sizing: border-box;\n    padding: 40px 15px;\n    //padding: 44px 18px 66px;\n    color: rgba(0, 0, 0, 0.54);\n\n    svg {\n      width: 64px;\n      height: 64px;\n      fill: #5c6575;\n    }\n  }\n\n  .selected-filename {\n    font-size: 20px;\n    //margin-top: 20px;\n    font-weight: bold;\n    overflow-wrap: anywhere;\n  }\n\n  .or-prefer {\n    height: 20px;\n    margin: 20px 0;\n    font-size: 16px;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {unicodeNBSP} from '../../../utils/Icons';\n\n/**\n * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\n * provide the actual upload functionality.\n *\n * ```ts\n * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />\n * ```\n */\n@Component({\n  tag: 'verdocs-file-chooser',\n  styleUrl: 'verdocs-file-chooser.scss',\n  shadow: false,\n})\nexport class VerdocsFileChooser {\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   * Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\n   * Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file.\n   */\n  @Event({composed: true}) fileSelected: EventEmitter<{file: File | null}>;\n\n  @State() file: File | null;\n\n  handleFileChanged(e: any) {\n    this.file = e.target.files?.[0] || null;\n    this.fileSelected?.emit({file: this.file});\n    console.debug('[CHOOSER] Selected file', this.file);\n  }\n\n  handleSelectFile(e: any) {\n    e.stopPropagation();\n    this.file = null;\n    this.fileSelected?.emit({file: null});\n    document.getElementById('verdocs-file-chooser')?.click();\n  }\n\n  render() {\n    const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';\n\n    return (\n      <Host>\n        <input\n          type=\"file\"\n          multiple\n          id=\"verdocs-file-chooser\"\n          accept=\"application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n          style={{display: 'none'}}\n          onChange={e => this.handleFileChanged(e)}\n        />\n\n        <div class=\"upload-box\">\n          {/*<div innerHTML={FileIcon} />*/}\n\n          <div class=\"selected-filename\">{this.file ? this.file.name : 'Drag a file here'}</div>\n\n          <div class=\"or-prefer\">{this.file ? unicodeNBSP : 'Or, if you prefer...'}</div>\n\n          <verdocs-button label={buttonlabel} size=\"small\" onClick={e => this.handleSelectFile(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-c2860587.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,45BAA45B,CAAC;AAC37B,iCAAe,qBAAqB;;MCgBvB,kBAAkB;IAL/B;;;;;;;QASU,aAAQ,GAAoB,eAAe,CAAC,UAAU,EAAE,CAAC;KAiDlE;IAvCC,iBAAiB,CAAC,CAAM;;QACtB,IAAI,CAAC,IAAI,GAAG,CAAA,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,KAAI,IAAI,CAAC;QACxC,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrD;IAED,gBAAgB,CAAC,CAAM;;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAC,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;QACtC,MAAA,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,0CAAE,KAAK,EAAE,CAAC;KAC1D;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,yBAAyB,GAAG,kCAAkC,CAAC;QAE/F,QACE,EAAC,IAAI,uDACH,8DACE,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,EAAE,EAAC,sBAAsB,EACzB,MAAM,EAAC,4HAA4H,EACnI,KAAK,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EACxB,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GACxC,EAEF,4DAAK,KAAK,EAAC,YAAY,IAGrB,4DAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAO,EAEtF,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,sBAAsB,CAAO,EAE/E,uEAAgB,KAAK,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAI,CACvF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-file-chooser/verdocs-file-chooser.scss?tag=verdocs-file-chooser","src/components/controls/verdocs-file-chooser/verdocs-file-chooser.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-file-chooser {\n  display: flex;\n  flex-direction: column;\n  background-color: $verdocs-grey-4;\n  font-family: $verdocs-primary-font;\n\n  .upload-box {\n    text-align: center;\n    box-sizing: border-box;\n    padding: 40px 15px;\n    //padding: 44px 18px 66px;\n    color: rgba(0, 0, 0, 0.54);\n\n    svg {\n      width: 64px;\n      height: 64px;\n      fill: #5c6575;\n    }\n  }\n\n  .selected-filename {\n    font-size: 20px;\n    //margin-top: 20px;\n    font-weight: bold;\n    overflow-wrap: anywhere;\n  }\n\n  .or-prefer {\n    height: 20px;\n    margin: 20px 0;\n    font-size: 16px;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Event, EventEmitter, Prop, State, Host} from '@stencil/core';\nimport {unicodeNBSP} from '../../../utils/Icons';\n\n/**\n * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\n * provide the actual upload functionality.\n *\n * ```ts\n * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />\n * ```\n */\n@Component({\n  tag: 'verdocs-file-chooser',\n  styleUrl: 'verdocs-file-chooser.scss',\n  shadow: false,\n})\nexport class VerdocsFileChooser {\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   * Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\n   * Host applications should use this event to enable/disable buttons to upload or otherwise process the selected file.\n   */\n  @Event({composed: true}) fileSelected: EventEmitter<{file: File | null}>;\n\n  @State() file: File | null;\n\n  handleFileChanged(e: any) {\n    this.file = e.target.files?.[0] || null;\n    this.fileSelected?.emit({file: this.file});\n    console.debug('[CHOOSER] Selected file', this.file);\n  }\n\n  handleSelectFile(e: any) {\n    e.stopPropagation();\n    this.file = null;\n    this.fileSelected?.emit({file: null});\n    document.getElementById('verdocs-file-chooser')?.click();\n  }\n\n  render() {\n    const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';\n\n    return (\n      <Host>\n        <input\n          type=\"file\"\n          multiple\n          id=\"verdocs-file-chooser\"\n          accept=\"application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n          style={{display: 'none'}}\n          onChange={e => this.handleFileChanged(e)}\n        />\n\n        <div class=\"upload-box\">\n          {/*<div innerHTML={FileIcon} />*/}\n\n          <div class=\"selected-filename\">{this.file ? this.file.name : 'Drag a file here'}</div>\n\n          <div class=\"or-prefer\">{this.file ? unicodeNBSP : 'Or, if you prefer...'}</div>\n\n          <verdocs-button label={buttonlabel} size=\"small\" onClick={e => this.handleSelectFile(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-f0db049a.js → p-c6d2c2d3.js}

@@ -13,7 +13,7 @@ const VerdocsQuickFilter = /*@__PURE__*/ proxyCustomElement(class VerdocsQuickFi
         this.mode = 'light';
     }
     render() {
-        return (h(Host, { key: '87070faacac5435c529ef7f2104e4e8df403fce8', style: {
+        return (h(Host, { key: '42b03fbd492a1a42bca313620e7e765c1b96391f', style: {
                 width: `${this.size}px`, //
                 height: `${this.size}px`,
                 flex: `0 0 ${this.size}px`,
@@ -41,4 +41,4 @@ function defineCustomElement() {
 
 export { VerdocsQuickFilter as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-f0db049a.js.map
+//# sourceMappingURL=p-c6d2c2d3.js.map

package/dist/components/{p-f0db049a.js.map → p-c6d2c2d3.js.map}

@@ -1 +1 @@
-{"file":"p-f0db049a.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mTAAmT,CAAC;AAC9U,6BAAe,iBAAiB;;ACChC,MAAM,WAAW,GAAG,EAAC,MAAM,EAAE,oCAAoC,EAAE,cAAc,EAAE,MAAM,EAAC,CAAC;AAC3F,MAAM,UAAU,GAAG,EAAC,MAAM,EAAE,8BAA8B,EAAE,cAAc,EAAE,MAAM,EAAC,CAAC;MAavE,kBAAkB;IAJ/B;;;QAME,SAAI,GAAW,EAAE,CAAC;QAGlB,SAAI,GAAqB,OAAO,CAAC;KAclC;IAZC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACxB,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI;gBAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;aACtD,GACD,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-spinner/verdocs-spinner.scss?tag=verdocs-spinner","src/components/controls/verdocs-spinner/verdocs-spinner.tsx"],"sourcesContent":["verdocs-spinner {\n  display: inline-block;\n  border-radius: 50%;\n  animation: spin 1s ease-in-out infinite;\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @-webkit-keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\n\nconst LIGHT_STYLE = {border: '3px solid rgba(255, 255, 255, 0.3)', borderTopColor: '#fff'};\nconst DARK_STYLE = {border: '3px solid rgba(0, 0, 0, 0.3)', borderTopColor: '#333'};\n\n/**\n * Display a small loading spinner.\n *\n * ```ts\n * <verdocs-spinner />\n * ```\n */\n@Component({\n  tag: 'verdocs-spinner',\n  styleUrl: 'verdocs-spinner.scss',\n})\nexport class VerdocsQuickFilter {\n  @Prop()\n  size: number = 32;\n\n  @Prop()\n  mode: 'light' | 'dark' = 'light';\n\n  render() {\n    return (\n      <Host\n        style={{\n          width: `${this.size}px`, //\n          height: `${this.size}px`,\n          flex: `0 0 ${this.size}px`,\n          ...(this.mode === 'light' ? LIGHT_STYLE : DARK_STYLE),\n        }}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"p-c6d2c2d3.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,mTAAmT,CAAC;AAC9U,6BAAe,iBAAiB;;ACChC,MAAM,WAAW,GAAG,EAAC,MAAM,EAAE,oCAAoC,EAAE,cAAc,EAAE,MAAM,EAAC,CAAC;AAC3F,MAAM,UAAU,GAAG,EAAC,MAAM,EAAE,8BAA8B,EAAE,cAAc,EAAE,MAAM,EAAC,CAAC;MAavE,kBAAkB;IAJ/B;;;QAME,SAAI,GAAW,EAAE,CAAC;QAGlB,SAAI,GAAqB,OAAO,CAAC;KAclC;IAZC,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACxB,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI;gBAC1B,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;aACtD,GACD,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/controls/verdocs-spinner/verdocs-spinner.scss?tag=verdocs-spinner","src/components/controls/verdocs-spinner/verdocs-spinner.tsx"],"sourcesContent":["verdocs-spinner {\n  display: inline-block;\n  border-radius: 50%;\n  animation: spin 1s ease-in-out infinite;\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @-webkit-keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n","import {Component, h, Host, Prop} from '@stencil/core';\n\nconst LIGHT_STYLE = {border: '3px solid rgba(255, 255, 255, 0.3)', borderTopColor: '#fff'};\nconst DARK_STYLE = {border: '3px solid rgba(0, 0, 0, 0.3)', borderTopColor: '#333'};\n\n/**\n * Display a small loading spinner.\n *\n * ```ts\n * <verdocs-spinner />\n * ```\n */\n@Component({\n  tag: 'verdocs-spinner',\n  styleUrl: 'verdocs-spinner.scss',\n})\nexport class VerdocsQuickFilter {\n  @Prop()\n  size: number = 32;\n\n  @Prop()\n  mode: 'light' | 'dark' = 'light';\n\n  render() {\n    return (\n      <Host\n        style={{\n          width: `${this.size}px`, //\n          height: `${this.size}px`,\n          flex: `0 0 ${this.size}px`,\n          ...(this.mode === 'light' ? LIGHT_STYLE : DARK_STYLE),\n        }}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-6593e435.js → p-ce8eb9b3.js}

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-1f51246d.js';
 import { VerdocsEndpoint, formatFullName, getActiveEntitlements, isValidEmail } from '@verdocs/js-sdk';
 import { c as convertToE164 } from './p-af5ecc92.js';
-import { d as defineCustomElement$2 } from './p-82efd79a.js';
-import { d as defineCustomElement$1 } from './p-c8802e82.js';
+import { d as defineCustomElement$3 } from './p-d013a90c.js';
+import { d as defineCustomElement$2 } from './p-74cd9648.js';
+import { d as defineCustomElement$1 } from './p-6e342167.js';
 
 function bind(fn, thisArg) {
   return function wrap() {
@@ -3741,15 +3742,9 @@ const getFeatureFlags = () => axios$1
     throw e;
 });
 
-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{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 .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:88px}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;-ms-flex:1;flex:1}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 0 197px;flex:0 0 197px;font-size:14px}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}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}verdocs-contact-picker form label{display:-ms-flexbox;display:flex;-ms-flex:0 0 80px;flex:0 0 80px;font-size:13px;font-weight:500;color:#5c6575}verdocs-contact-picker form .row.message textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;padding:5px 7px;width:100%}verdocs-contact-picker form input{-ms-flex:1;flex:1;padding:6px;font-size:14px;border-radius:3px;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 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{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 .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:88px}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;-ms-flex:1;flex:1}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 0 197px;flex:0 0 197px;font-size:14px}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}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}verdocs-contact-picker form label{display:-ms-flexbox;display:flex;-ms-flex:0 0 80px;flex:0 0 80px;font-size:13px;font-weight:500;color:#5c6575}verdocs-contact-picker form .row.message textarea{width:100%;padding:5px 7px;border-radius:4px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-contact-picker form input{-ms-flex:1;flex:1;padding:6px;font-size:14px;border-radius:3px;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 VerdocsContactPickerStyle0 = verdocsContactPickerCss;
 
-// 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>';
-// const delegateIcon =
-//   '<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>';
-// 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>';
 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>`;
 const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsContactPicker extends H {
     constructor() {
@@ -3774,7 +3769,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
-        this.auth_method = null;
+        this.auth_methods = [];
         this.passcode = '';
         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)}`;
@@ -3797,7 +3792,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
             this.delegator = this.templateRole.delegator || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
-            this.auth_method = this.templateRole.auth_method || null;
+            this.auth_methods = this.templateRole.auth_methods || [];
             this.passcode = this.templateRole.passcode || '';
             // TODO: Allow template roles to have zip codes predefined?
         }
@@ -3843,7 +3838,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
             phone: this.phone,
             message: this.message,
             delegator: this.delegator,
-            auth_method: this.auth_method,
+            auth_methods: this.auth_methods,
             passcode: this.passcode,
             address: this.address,
             zip: this.zip,
@@ -3860,46 +3855,58 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         // const hasBasics = this.first_name && this.last_name && (isValidEmail(this.email) || isValidPhone(this.phone));
         const hasBasics = this.first_name && this.last_name && isValidEmail(this.email);
-        const hasAuthRequirements = !this.auth_method ||
-            (this.auth_method === 'passcode' && !!this.passcode) ||
-            (this.auth_method === 'kba' && !!this.first_name && !!this.last_name) ||
-            this.auth_method === 'id' ||
-            (this.auth_method === 'email' && !!this.email) ||
-            (this.auth_method === 'sms' && !!this.phone) ||
-            this.auth_method === 'kba_id';
+        const hasAuthRequirements = !this.auth_methods.length ||
+            (this.auth_methods.includes('passcode') && !!this.passcode) ||
+            (this.auth_methods.includes('kba') && !!this.first_name && !!this.last_name) ||
+            (this.auth_methods.includes('email') && !!this.email) ||
+            (this.auth_methods.includes('sms') && !!this.phone);
         const canSubmit = hasBasics && hasAuthRequirements;
-        const verificationOptions = [{ label: 'None', value: '' }];
-        if (!!this.activeEntitlements.passcode_auth) {
-            verificationOptions.push({ label: 'Passcode', value: 'pin' });
+        const globalSMS = ((_c = (_b = (_a = this.featureFlags) === null || _a === void 0 ? void 0 : _a.toggles) === null || _b === void 0 ? void 0 : _b.find(t => t.name === 'sms')) === null || _c === void 0 ? void 0 : _c.enabled) === true;
+        const verificationOptions = [];
+        if (((_f = (_e = (_d = this.featureFlags) === null || _d === void 0 ? void 0 : _d.toggles) === null || _e === void 0 ? void 0 : _e.find(t => t.name === 'passcode-verification')) === null || _f === void 0 ? void 0 : _f.enabled) === true) {
+            verificationOptions.push({ label: 'Passcode', value: 'passcode' });
         }
-        if (((_c = (_b = (_a = this.featureFlags) === null || _a === void 0 ? void 0 : _a.toggles) === null || _b === void 0 ? void 0 : _b.find(t => t.name === 'sms-verification')) === null || _c === void 0 ? void 0 : _c.enabled) === true && !!this.activeEntitlements.sms_auth) {
+        if (((_j = (_h = (_g = this.featureFlags) === null || _g === void 0 ? void 0 : _g.toggles) === null || _h === void 0 ? void 0 : _h.find(t => t.name === 'email-verification')) === null || _j === void 0 ? void 0 : _j.enabled) === true) {
+            verificationOptions.push({ label: 'Email', value: 'email' });
+        }
+        if (globalSMS && ((_m = (_l = (_k = this.featureFlags) === null || _k === void 0 ? void 0 : _k.toggles) === null || _l === void 0 ? void 0 : _l.find(t => t.name === 'sms-verification')) === null || _m === void 0 ? void 0 : _m.enabled) === true && !!this.activeEntitlements.sms_auth) {
             verificationOptions.push({ label: 'SMS (One-Time Code)', value: 'sms' });
         }
-        if (((_f = (_e = (_d = this.featureFlags) === null || _d === void 0 ? void 0 : _d.toggles) === null || _e === void 0 ? void 0 : _e.find(t => t.name === 'kba-verification')) === null || _f === void 0 ? void 0 : _f.enabled) === true) {
+        if (((_q = (_p = (_o = this.featureFlags) === null || _o === void 0 ? void 0 : _o.toggles) === null || _p === void 0 ? void 0 : _p.find(t => t.name === 'kba-verification')) === null || _q === void 0 ? void 0 : _q.enabled) === true && !!this.activeEntitlements.kba_auth) {
             verificationOptions.push({ label: 'Knowledge-Based (KBA)', value: 'kba' });
         }
-        if (((_j = (_h = (_g = this.featureFlags) === null || _g === void 0 ? void 0 : _g.toggles) === null || _h === void 0 ? void 0 : _h.find(t => t.name === 'id-verification')) === null || _j === void 0 ? void 0 : _j.enabled) === true) {
+        if (((_t = (_s = (_r = this.featureFlags) === null || _r === void 0 ? void 0 : _r.toggles) === null || _s === void 0 ? void 0 : _s.find(t => t.name === 'id-verification')) === null || _t === void 0 ? void 0 : _t.enabled) === true && !!this.activeEntitlements.id_auth) {
             verificationOptions.push({ label: 'ID Check', value: 'id' });
-            verificationOptions.push({ label: 'KBA + ID Check', value: 'kba_id' });
         }
-        return (h("form", { key: '618f80a496600659af6b6c023f632f4cbed45a47', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '0693ecdfeb43e8a048bea68d1c455e90fec4336f', class: "row" }, h("label", { key: '7722b6e51e94833a187f4c61664bc94102c95344', htmlFor: this.firstNameFieldId }, "Name:"), h("div", { key: 'a6ae931ae5473b3324ca1ec4ddc19a404fbb033e', class: "names-row" }, h("input", { key: 'cb4167f01f07701ab9464a7c5294aebc83bbb334', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First...", 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: '0d220e73dfc026b21c7ccf313d2d3211be77e5cf', 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 && (h("div", { key: 'ac1de1f3486d98a1db37c517f291d6fcc08a6493', class: "dropdown" }, this.contactSuggestions
+        return (h("form", { key: '2f78aea85f048c9acbe32b2ae59149a5fb0f5cb1', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '385778d2da3801cb895dc24baeab3c169e55ad1c', class: "row" }, h("label", { key: 'd8e5801d12514c45a420d75bb26e8f3ddb30ddfb', htmlFor: this.firstNameFieldId }, "Name:"), h("div", { key: '25a0c4fff91fdcd6e3fbe353ba9c20b1530e96e0', class: "names-row" }, h("input", { key: 'ddead4d6d7052b8eb91ee59752e2d6c64e4410e8', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.first_name, placeholder: "First...", onBlur: () => {
+                this.showSuggestions = false;
+            }, onFocus: () => {
+                // Give the blur event a chance to hide it first if going between first/last
+                setTimeout(() => {
+                    var _a;
+                    this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+                }, 100);
+            }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: '3644718e45bcf1272dc3ad232292a8424641fb86', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.last_name, placeholder: "Last...", onBlur: () => {
+                this.showSuggestions = false;
+            }, onFocus: () => {
+                // Give the blur event a chance to hide it first if going between first/last
+                setTimeout(() => {
+                    var _a;
+                    this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+                }, 100);
+            }, onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: '2eb1a7cce3c4d2f02b7910ecbe5ad40e9b0cb9e9', class: "dropdown" }, this.contactSuggestions
             .filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))
             .map(suggestion => {
             var _a;
             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" }, formatFullName(suggestion)), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: '11dc6945c4239924d44c415e0ad28c0bdd489bfa', class: "row" }, h("label", { key: 'a45850710bcbd11fdc204003e9ee9b7428ab9822', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '854d5f96c614eec0b22059fec247961c01a18386', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Invite via email...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), h("div", { key: '3a52b7e1de7100192f23907b788d0ebc049771e2', class: "row" }, h("label", { key: '41ab3d2c6736b6da24688391310a9b05e49dcb37', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '5f89eb3ffd8da3baa3ca9a90fad418feff9d4f08', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Invite via SMS...", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
-                this.phone = convertToE164(e.target.value);
-            } })), h(Fragment, { key: '7eb87baa7743f9cdb4b0991cca1d010bbf0ab286' }, h("div", { key: '86f23fec37e14b1bbc430fed4a3e83f0d69a3980', class: "kba-row" }, h("label", { key: 'd12e7c699a0f4ca17801dc7e36ac6f8bdf0aa668' }, "Recipient Verification:"), h("verdocs-select-input", { key: '3faf2fdbda5a580ff7d2f0fa0ef1ef54c54756c3', value: this.auth_method, onInput: (e) => {
-                this.auth_method = e.target.value;
-                // this.zip = '';
-                // this.address = '';
-                this.passcode = '';
-            }, options: verificationOptions })), this.auth_method === 'sms' && (h("div", { key: '8c1c5c79fb8a9c33f4754c52f3b70ab658cf5559', class: "row" }, h("label", { key: '46548cbefdc0f286c32a272d0ab6796efeac46c7', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '1b85ba03502b9123468a5d64300b79ffd9c43a0d', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Verify via SMS one-time code...", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
+        })))), h("div", { key: '664bc6761d026a5c59b860e75ad69908dce3580c', class: "row" }, h("label", { key: 'f1bfcf93c0acaf6d20f975b395cf82354ea17412', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '65d144fa46caa4dd7dee3afe591f9c4e85f88ac9', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", "aria-autocomplete": "none", value: this.email, placeholder: "Invite/verify via email...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), globalSMS && (h("div", { key: 'bd29dbf6ef5d171e8848d584f5f33bc41a151d56', class: "row" }, h("label", { key: '7c818cd92ef86b9329256670626b04b5c21dd1b5', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: 'ccdf83ef82b56d01cb3adcd9aba5ac80256fa4c2', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", "aria-autocomplete": "none", value: this.phone, placeholder: "Invite/verify via SMS...", onFocus: () => (this.showSuggestions = false), onInput: (e) => {
                 this.phone = convertToE164(e.target.value);
-            } }))), this.auth_method === 'passcode' && (h("div", { key: '62ca2e43b3abfcc0f080785c0c3f1fe69e4214dd', class: "row pin-code" }, h("label", { key: '6eecff67935d8b7e3ed23d1b3551557b0b77b6b0', htmlFor: this.phoneFieldId }, "Passcode:"), h("input", { key: 'f48e66e8a677f36430e4bc43b42a38309a1971d4', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.passcode, placeholder: "4-8 digits recommended...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) })))), h("div", { key: 'c5e3ffb1fe99930cd210132d18c7321ad305fb68', class: "row message" }, h("label", { key: 'dc76e9fbcf7f549241583a368c076cb37ef41a9e', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("textarea", { key: '4ee53757d5c8e12f2bda801e17fb0f2a0a747e5d', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Optional message to include in invitation...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }, this.message)), h("div", { key: '0216b8fe9c89bd6f1d5c20d280a1edaa9ff7026c', class: "buttons" }, h("div", { key: '7332be6810c1abd20d6b836e0c5009a97fb2e932', class: "flex-fill" }), h("verdocs-button", { key: 'af7951df9fac7cde828779223e8bb0907a955c23', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '3989bc2781787088e54f7784d84577924051da39', label: "OK", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
+            } }))), h(Fragment, { key: 'c0161034905da56d8c7adf0f9eedad6d96b6aa73' }, h("div", { key: '6d27c022cbf33697bce1ade5a8873d3fb55f5b6c', class: "kba-row" }, h("label", { key: 'b31d258d5ad8fb01f0fff549616c243fc64600dd' }, "Recipient Verification:"), h("verdocs-multiselect", { key: 'fb4a8de84c3a1aa7362aa9eda9fdbcdf3114c0ea', label: "", placeholder: "None", options: verificationOptions, selectedOptions: this.auth_methods, onSelectionChanged: (e) => {
+                console.log('selectedOptions changed', e.detail);
+            } })), this.auth_methods.includes('passcode') && (h("div", { key: '6febdcedd0d383c7a98adb5348a9b241abec1056', class: "row pin-code" }, h("label", { key: '64750c806061cbb37a10a8bf03fa641fb2d331f6', htmlFor: this.phoneFieldId }, "Passcode:"), h("input", { key: 'd83bfedf02db8a4bef83e991b6a07009502cf638', id: "verdocs-passcode", name: "verdocs-passcode", type: "text", "data-lpignore": "true", autocomplete: "blocked", "aria-autocomplete": "none", value: this.passcode, placeholder: "4-8 digits recommended...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.passcode = e.target.value) })))), h("div", { key: '19417875f474a3c910fdd59a53aaa8dedf5b59df', class: "row message" }, h("label", { key: 'd89c0d9dc2a418299214f6b36f32b42711c02023', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("textarea", { key: '251cc50901679ee041622753190c23363ce82640', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", "data-lpignore": "true", autocomplete: "blocked", placeholder: "Optional message to include in invitation...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }, this.message)), h("div", { key: 'b04660e6869693bf16cd560caa9ba9cb8679a09c', class: "buttons" }, h("div", { key: 'b7cc91c06aa66fb3a52e2ebbc08675966e802a2a', class: "flex-fill" }), h("verdocs-button", { key: '2722a83dc937cbb2d4c9198543b14ea4cac51ab0', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '0c59c014ef5aefde3e4c6b01385384e465fb3c4c', label: "OK", size: "small", disabled: !canSubmit, onClick: !canSubmit ? () => { } : e => this.handleSubmit(e) }))));
     }
     static get style() { return VerdocsContactPickerStyle0; }
 }, [0, "verdocs-contact-picker", {
@@ -3916,7 +3923,7 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class VerdocsConta
         "showSuggestions": [32],
         "showMessage": [32],
         "delegator": [32],
-        "auth_method": [32],
+        "auth_methods": [32],
         "passcode": [32],
         "firstNameFieldId": [32],
         "lastNameFieldId": [32],
@@ -3929,7 +3936,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["verdocs-contact-picker", "verdocs-button", "verdocs-select-input"];
+    const components = ["verdocs-contact-picker", "verdocs-button", "verdocs-multiselect", "verdocs-portal"];
     components.forEach(tagName => { switch (tagName) {
         case "verdocs-contact-picker":
             if (!customElements.get(tagName)) {
@@ -3937,11 +3944,16 @@ function defineCustomElement() {
             }
             break;
         case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-multiselect":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "verdocs-select-input":
+        case "verdocs-portal":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -3951,4 +3963,4 @@ function defineCustomElement() {
 
 export { VerdocsContactPicker as V, defineCustomElement as d };
 
-//# sourceMappingURL=p-6593e435.js.map
+//# sourceMappingURL=p-ce8eb9b3.js.map