@verdocs/web-sdk 1.9.6 → 1.9.10

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/controls/verdocs-help-icon/verdocs-help-icon.scss?tag=verdocs-help-icon","src/components/controls/verdocs-help-icon/verdocs-help-icon.tsx","src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.scss?tag=verdocs-template-sender-dialog","src/components/dialogs/verdocs-template-sender-dialog/verdocs-template-sender-dialog.tsx"],"names":["verdocsHelpIconCss","helpIcon","VerdocsHelpIcon","Math","random","toString","substring","[object Object]","this","popperInstance","createPopper","icon","tooltip","destroy","_a","setAttribute","_b","update","catch","removeAttribute","h","Host","class","aria-describedby","containerId","innerHTML","onMouseEnter","show","onFocus","onMouseLeave","hide","onBlur","ref","el","id","role","data-popper-placement","text","data-popper-arrow","verdocsTemplateSenderDialogCss","VerdocsTemplateSenderDialog","TemplateSenderTypes","EVERYONE","newValue","value","cancel","emit","e","target","className","preventDefault","handleCancel","next","onClick","handleDismiss","name","checked","onInput","handleSelectSetting","EVERYONE_AS_CREATOR","ORGANIZATION_MEMBER","ORGANIZATION_MEMBER_AS_CREATOR","CREATOR","label","variant","handleDone"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-help-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    position: relative;\n    padding: 5px 10px;\n    font-size: 13px;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n\nconst helpIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z\"/></svg>';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-help-icon',\n  styleUrl: 'verdocs-help-icon.scss',\n  shadow: false,\n})\nexport class VerdocsHelpIcon {\n  icon: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  @State() containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.icon, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={helpIcon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.icon = el as HTMLDivElement)}\n        />\n        <div\n          id={this.containerId}\n          role=\"tooltip\"\n          class=\"tooltip\"\n          // style=\"display: none; visibility: visible; margin: 0px; position: absolute; inset: 0px auto auto 0px; transform: translate(951px, 5510px);\"\n          data-popper-placement=\"bottom\"\n          ref={el => (this.tooltip = el as HTMLDivElement)}\n        >\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-template-sender-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 340px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 20px;\n    font-weight: 500;\n    flex-direction: row;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .options {\n    row-gap: 10px;\n\n    .option {\n      display: flex;\n      flex-direction: row;\n\n      .description {\n        margin-left: 10px;\n\n        .name {\n          display: inline-block;\n          vertical-align: top;\n          margin-top: 4px;\n          margin-right: 4px;\n        }\n      }\n    }\n  }\n}\n","import {TemplateSenderTypes} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, Prop, h, Event, EventEmitter, Host, State} from '@stencil/core';\n\n/**\n * Display a dialog that allows a template sender to be selected.\n */\n@Component({\n  tag: 'verdocs-template-sender-dialog',\n  styleUrl: 'verdocs-template-sender-dialog.scss',\n})\nexport class VerdocsTemplateSenderDialog {\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() value: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the selected value.\n   */\n  @Event({composed: true}) next: EventEmitter<TemplateSenderTypes>;\n\n  @State() newValue: TemplateSenderTypes = TemplateSenderTypes.EVERYONE;\n\n  componentWillLoad() {\n    this.newValue = this.value;\n  }\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.newValue);\n  }\n\n  handleSelectSetting(value: TemplateSenderTypes) {\n    this.newValue = value;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"options\">\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE}\n                  checked={this.value === TemplateSenderTypes.EVERYONE}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web</div>\n                  <verdocs-help-icon text=\"Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.EVERYONE_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.EVERYONE_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone on the Web as me</div>\n                  <verdocs-help-icon text=\"Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  checked={this.value === TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.ORGANIZATION_MEMBER_AS_CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Anyone in my organization as me</div>\n                  <verdocs-help-icon text=\"Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)\" />\n                </div>\n              </div>\n              <div class=\"option\">\n                <verdocs-radio-button\n                  name=\"template-sender\"\n                  value={TemplateSenderTypes.CREATOR}\n                  checked={this.value === TemplateSenderTypes.CREATOR}\n                  onInput={() => this.handleSelectSetting(TemplateSenderTypes.CREATOR)}\n                />\n                <div class=\"description\">\n                  <div class=\"name\">Me</div>\n                  <verdocs-help-icon text=\"Only I can use this template.\" />\n                </div>\n              </div>\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/{p-a84616dc.entry.js → p-932571a1.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as i,H as o}from"./p-ff1278ed.js";import{g as t}from"./p-d534fffb.js";import"./p-8efc9749.js";import{i as l,a as n}from"./p-e662f81b.js";import{g as d}from"./p-6de76553.js";import{V as a}from"./p-10d804cf.js";import{a as c}from"./p-7ce27ce2.js";const r='verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}';const p='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';const x='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';const h='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';const v='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';const f=class{constructor(i){e(this,i);this.send=s(this,"send",7);this.cancel=s(this,"cancel",7);this.sdkError=s(this,"sdkError",7);this.levels=[];this.endpoint=a.getDefault();this.templateId=null;this.template=null;this.pdfUrl=null;this.containerId=`verdocs-send-${Math.random().toString(36).substring(2,11)}`;this.rolesAtLevel={};this.showPickerForId="";this.sessionContacts=[];this.recipientsAssigned={}}async componentWillLoad(){var e;this.sessionContacts=[];try{const s=await this.endpoint.loadSession();if((e=s.session)===null||e===void 0?void 0:e.profile){this.sessionContacts.push({id:s.session.profile.id,name:`${s.session.profile.first_name} ${s.session.profile.last_name}`,email:s.session.profile.email,phone:s.session.profile.phone})}}catch(e){console.log("Error loading session",e)}}async componentDidLoad(){console.log("[SEND] Showing template",this.templateId);try{console.log(`[SEND] Loading template ${this.templateId}`);const e=await t(this.endpoint,this.templateId);console.log("[SEND] Got template",e);this.template=e;if(e===null||e===void 0?void 0:e.roles){const s={};e.roles.forEach((e=>{const i=e.sequence-1;s[i]||(s[i]=[]);const o=`r-${i}-${s[i].length}`;s[i].push({...e,id:o})}));this.rolesAtLevel=s;this.levels=Object.keys(s).map((e=>+e));this.levels.sort(((e,s)=>e-s))}}catch(e){console.log("[SEND] Error getting template",e)}}getLevelIcon(e){if(e<0){return i("div",{class:"level-icon",innerHTML:x})}else if(e>=this.levels.length){return i("div",{class:"level-icon",innerHTML:v})}else{return i("div",{class:"level-icon",innerHTML:h})}}handleSelectContact(e,s){e.preventDefault();this.recipientsAssigned[s.id]={...s,...e.detail};this.showPickerForId=""}handleClickRole(e,s){e.stopPropagation();this.showPickerForId=s.id}handleSend(e){var s;e.stopPropagation();(s=this.send)===null||s===void 0?void 0:s.emit({recipientsAssigned:Object.values(this.recipientsAssigned)})}handleCancel(e){var s;e.stopPropagation();(s=this.cancel)===null||s===void 0?void 0:s.emit()}render(){var e,s,t;const a=((s=(e=this.template)===null||e===void 0?void 0:e.roles)===null||s===void 0?void 0:s.map((e=>e.name)))||[];const r=Object.values(this.recipientsAssigned).filter((e=>{console.log("valid email",l(e.email),e.email);console.log("valid phone",n(e.phone),e.phone);return l(e.email)||n(e.phone)})).length>=((t=this.template)===null||t===void 0?void 0:t.roles.length);console.log("assigned",r);return i(o,{class:{}},i("div",{class:"recipients"},i("div",{class:"left-line"}),i("div",{class:`level level-start`},this.getLevelIcon(-1),i("div",{class:"complete"},"Send Document")),this.levels.map((e=>i("div",{class:`level level-${e}`},this.getLevelIcon(e),this.rolesAtLevel[e].map((e=>{var s,o,t;return i("div",{class:"recipient",style:{backgroundColor:d(c(a,e.name))},onClick:s=>this.handleClickRole(s,e)},(o=(s=this.recipientsAssigned[e.id])===null||s===void 0?void 0:s.full_name)!==null&&o!==void 0?o:e.name,i("div",{class:"icon",innerHTML:p}),this.showPickerForId===e.id&&i("verdocs-contact-picker",{onCancel:()=>this.showPickerForId="",contactSuggestions:this.sessionContacts,templateRole:(t=this.recipientsAssigned[e.id])!==null&&t!==void 0?t:e,onSearchContacts:e=>console.log("Search",e.detail),onContactSelected:s=>this.handleSelectContact(s,e)}))}))))),i("div",{class:`level level-done`},this.getLevelIcon(this.levels.length),i("div",{class:"complete"},"Document Complete"))),i("div",{class:"buttons"},i("verdocs-button",{label:"Cancel",size:"small",variant:"outline",onPress:e=>this.handleCancel(e)}),i("verdocs-button",{label:"Send",size:"small",disabled:!r,onPress:e=>this.handleSend(e)})))}};f.style=r;export{f as verdocs_send};
-//# sourceMappingURL=p-a84616dc.entry.js.map
+import{r as e,c as i,h as s,H as o}from"./p-ff1278ed.js";import{g as t}from"./p-d534fffb.js";import"./p-8efc9749.js";import{i as l,a as n}from"./p-e662f81b.js";import{g as d}from"./p-6de76553.js";import{V as a}from"./p-629237fc.js";import{a as c}from"./p-7ce27ce2.js";const r='verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}';const p='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';const x='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';const h='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';const v='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';const f=class{constructor(s){e(this,s);this.send=i(this,"send",7);this.cancel=i(this,"cancel",7);this.sdkError=i(this,"sdkError",7);this.levels=[];this.endpoint=a.getDefault();this.templateId=null;this.template=null;this.pdfUrl=null;this.containerId=`verdocs-send-${Math.random().toString(36).substring(2,11)}`;this.rolesAtLevel={};this.showPickerForId="";this.sessionContacts=[];this.recipientsAssigned={}}async componentWillLoad(){var e;this.sessionContacts=[];try{const i=await this.endpoint.loadSession();if((e=i.session)===null||e===void 0?void 0:e.profile){this.sessionContacts.push({id:i.session.profile.id,name:`${i.session.profile.first_name} ${i.session.profile.last_name}`,email:i.session.profile.email,phone:i.session.profile.phone})}}catch(e){console.log("Error loading session",e)}}async componentDidLoad(){console.log("[SEND] Showing template",this.templateId);try{console.log(`[SEND] Loading template ${this.templateId}`);const e=await t(this.endpoint,this.templateId);console.log("[SEND] Got template",e);this.template=e;if(e===null||e===void 0?void 0:e.roles){const i={};e.roles.forEach((e=>{const s=e.sequence-1;i[s]||(i[s]=[]);const o=`r-${s}-${i[s].length}`;i[s].push({...e,id:o})}));this.rolesAtLevel=i;this.levels=Object.keys(i).map((e=>+e));this.levels.sort(((e,i)=>e-i))}}catch(e){console.log("[SEND] Error getting template",e)}}getLevelIcon(e){if(e<0){return s("div",{class:"level-icon",innerHTML:x})}else if(e>=this.levels.length){return s("div",{class:"level-icon",innerHTML:v})}else{return s("div",{class:"level-icon",innerHTML:h})}}handleSelectContact(e,i){e.preventDefault();this.recipientsAssigned[i.id]={...i,...e.detail};this.showPickerForId=""}handleClickRole(e,i){e.stopPropagation();this.showPickerForId=i.id}handleSend(e){var i;e.stopPropagation();(i=this.send)===null||i===void 0?void 0:i.emit({recipientsAssigned:Object.values(this.recipientsAssigned)})}handleCancel(e){var i;e.stopPropagation();(i=this.cancel)===null||i===void 0?void 0:i.emit()}render(){var e,i,t;const a=((i=(e=this.template)===null||e===void 0?void 0:e.roles)===null||i===void 0?void 0:i.map((e=>e.name)))||[];const r=Object.values(this.recipientsAssigned).filter((e=>{console.log("valid email",l(e.email),e.email);console.log("valid phone",n(e.phone),e.phone);return l(e.email)||n(e.phone)})).length>=((t=this.template)===null||t===void 0?void 0:t.roles.length);console.log("assigned",r);return s(o,{class:{}},s("div",{class:"recipients"},s("div",{class:"left-line"}),s("div",{class:`level level-start`},this.getLevelIcon(-1),s("div",{class:"complete"},"Send Document")),this.levels.map((e=>s("div",{class:`level level-${e}`},this.getLevelIcon(e),this.rolesAtLevel[e].map((e=>{var i,o,t;return s("div",{class:"recipient",style:{backgroundColor:d(c(a,e.name))},onClick:i=>this.handleClickRole(i,e)},(o=(i=this.recipientsAssigned[e.id])===null||i===void 0?void 0:i.full_name)!==null&&o!==void 0?o:e.name,s("div",{class:"icon",innerHTML:p}),this.showPickerForId===e.id&&s("verdocs-contact-picker",{onCancel:()=>this.showPickerForId="",onNext:i=>this.handleSelectContact(i,e),contactSuggestions:this.sessionContacts,templateRole:(t=this.recipientsAssigned[e.id])!==null&&t!==void 0?t:e,onSearchContacts:e=>console.log("Search",e.detail)}))}))))),s("div",{class:`level level-done`},this.getLevelIcon(this.levels.length),s("div",{class:"complete"},"Document Complete"))),s("div",{class:"buttons"},s("verdocs-button",{label:"Cancel",size:"small",variant:"outline",onClick:e=>this.handleCancel(e)}),s("verdocs-button",{label:"Send",size:"small",disabled:!r,onClick:e=>this.handleSend(e)})))}};f.style=r;export{f as verdocs_send};
+//# sourceMappingURL=p-932571a1.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"names":["verdocsSendCss","editIcon","startIcon","stepIcon","doneIcon","VerdocsSend","this","levels","VerdocsEndpoint","getDefault","Math","random","toString","substring","[object Object]","sessionContacts","result","endpoint","loadSession","_a","session","profile","push","id","name","first_name","last_name","email","phone","e","console","log","templateId","template","getTemplate","roles","rolesAtLevel","forEach","role","level","sequence","length","Object","keys","map","levelStr","sort","a","b","h","class","innerHTML","preventDefault","recipientsAssigned","detail","showPickerForId","stopPropagation","send","emit","values","cancel","roleNames","_b","allRecipientsAssigned","filter","recipient","isValidEmail","isValidPhone","_c","Host","getLevelIcon","style","backgroundColor","getRGBA","getRoleIndex","onClick","handleClickRole","full_name","onCancel","onNext","handleSelectContact","contactSuggestions","templateRole","onSearchContacts","label","size","variant","handleCancel","disabled","handleSend"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n  display: flex;\n  padding: 10px;\n  position: relative;\n  background: #ffffff;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .recipients {\n    position: relative;\n  }\n\n  // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n  // background obscures the horizontal lines.\n  .left-line {\n    top: 32px;\n    left: 20px;\n    z-index: 1;\n    width: 12px;\n    bottom: 30px;\n    position: absolute;\n    background: #ffffff;\n    border-left: 3px dotted #9b9b9b;\n  }\n\n  .level {\n    display: flex;\n    column-gap: 10px;\n    margin-left: 50px;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 0 4px 0;\n    border-bottom: 1px solid #97979744;\n\n    .level-icon {\n      top: 14px;\n      z-index: 2;\n      left: -40px;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      background: #ffffff;\n\n      svg {\n        fill: #00000089;\n      }\n    }\n\n    .recipient {\n      height: 30px;\n      display: flex;\n      flex: 0 0 30px;\n      color: #000000;\n      cursor: pointer;\n      font-size: 14px;\n      align-items: center;\n      border-radius: 30px;\n      flex-direction: row;\n      background: #dddddd;\n      white-space: nowrap;\n      padding: 2px 10px 2px 14px;\n\n      .icon {\n        width: 22px;\n        height: 22px;\n        flex: 0 0 22px;\n        margin: 0 0 0 10px;\n\n        svg {\n          width: 22px;\n          height: 22px;\n          fill: #333333;\n          outline: none;\n        }\n      }\n    }\n\n    .complete {\n      flex: 1;\n      height: 30px;\n      display: flex;\n      color: #000000;\n      font-size: 14px;\n      align-items: center;\n      flex-direction: row;\n      padding: 3px 10px 3px 2px;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    column-gap: 15px;\n    flex-direction: row;\n  }\n\n  verdocs-contact-picker {\n    left: 0;\n    top: 41px;\n    z-index: 10;\n    position: absolute;\n    border: 1px solid #dddddd;\n    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/**\n * Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n  /**\n   * The user canceled the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() template: ITemplate | null = null;\n\n  @State() pdfUrl = null;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n  @State() showPickerForId = '';\n\n  @State() sessionContacts = [];\n\n  @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n  levels: number[] = [];\n\n  async componentWillLoad() {\n    this.sessionContacts = [];\n    try {\n      const result = await this.endpoint.loadSession();\n\n      if (result.session?.profile) {\n        this.sessionContacts.push({\n          id: result.session.profile.id,\n          name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n          email: result.session.profile.email,\n          phone: result.session.profile.phone,\n        });\n      }\n    } catch (e) {\n      console.log('Error loading session', e);\n    }\n  }\n\n  async componentDidLoad() {\n    console.log('[SEND] Showing template', this.templateId);\n\n    try {\n      console.log(`[SEND] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[SEND] Got template', template);\n      this.template = template;\n\n      if (template?.roles) {\n        const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n        template.roles.forEach(role => {\n          const level = role.sequence - 1;\n          rolesAtLevel[level] ||= [];\n          const id = `r-${level}-${rolesAtLevel[level].length}`;\n          rolesAtLevel[level].push({...role, id});\n        });\n\n        this.rolesAtLevel = rolesAtLevel;\n        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n        this.levels.sort((a, b) => a - b);\n      }\n    } catch (e) {\n      console.log('[SEND] Error getting template', e);\n    }\n  }\n\n  getLevelIcon(level: number) {\n    if (level < 0) {\n      return <div class=\"level-icon\" innerHTML={startIcon} />;\n    } else if (level >= this.levels.length) {\n      return <div class=\"level-icon\" innerHTML={doneIcon} />;\n    } else {\n      return <div class=\"level-icon\" innerHTML={stepIcon} />;\n    }\n  }\n\n  handleSelectContact(e: any, role: TAnnotatedRole) {\n    e.preventDefault();\n    e.detail; // IContactSelectEvent\n    this.recipientsAssigned[role.id] = {...role, ...e.detail};\n    this.showPickerForId = '';\n  }\n\n  handleClickRole(e: any, role: TAnnotatedRole) {\n    e.stopPropagation();\n    this.showPickerForId = role.id;\n  }\n\n  handleSend(e) {\n    e.stopPropagation();\n    this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  render() {\n    const roleNames = this.template?.roles?.map(role => role.name) || [];\n    const allRecipientsAssigned =\n      Object.values(this.recipientsAssigned).filter(recipient => {\n        console.log('valid email', isValidEmail(recipient.email), recipient.email);\n        console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n        return isValidEmail(recipient.email) || isValidPhone(recipient.phone);\n      }).length >= this.template?.roles.length;\n    console.log('assigned', allRecipientsAssigned);\n\n    return (\n      <Host class={{}}>\n        <div class=\"recipients\">\n          <div class=\"left-line\" />\n          <div class={`level level-start`}>\n            {this.getLevelIcon(-1)}\n            <div class=\"complete\">Send Document</div>\n          </div>\n\n          {this.levels.map(level => (\n            <div class={`level level-${level}`}>\n              {this.getLevelIcon(level)}\n\n              {this.rolesAtLevel[level].map(role => (\n                <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n                  {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n                  <div class=\"icon\" innerHTML={editIcon} />\n                  {this.showPickerForId === role.id && (\n                    <verdocs-contact-picker\n                      onCancel={() => (this.showPickerForId = '')}\n                      onNext={e => this.handleSelectContact(e, role)}\n                      contactSuggestions={this.sessionContacts}\n                      templateRole={this.recipientsAssigned[role.id] ?? role}\n                      onSearchContacts={e => console.log('Search', e.detail)}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          <div class={`level level-done`}>\n            {this.getLevelIcon(this.levels.length)}\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onClick={e => this.handleSend(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-a4041773.system.js.map

@@ -1 +1 @@
-{"version":3,"sources":["node_modules/@verdocs/js-sdk/Utils/Fields.js","src/utils/utils.ts"],"names":["rescale","r","n","integerSequence","exports","start","count","Array","fill","map","_","index","fullNameToInitials","name","split","word","join","defaultWidth","field","type","defaultHeight","setControlStyles","el","xScale","yScale","option","settings","setting","_e","x","_f","y","_g","width","_h","height","optionSettings","undefined","options","_a","_b","_c","_d","style","concat","position","left","bottom","transform","getFieldId","getFieldOptionId","renderDocumentField","docPage","roleIndex","handleFieldChange","disabled","editable","draggable","controlsDiv","document","getElementById","containerId","id","existingField","createElement","setAttribute","addEventListener","e","appendChild","forEach","checkboxIndex","cbEl","buttonIndex","console","log","getRoleIndex","roles","role","indexOf","getFieldSettings","required","result","value"],"mappings":"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","sourcesContent":["export function getRTop(y, fieldHeight, iTextHeight, yRatio) {\n    return iTextHeight - (y + fieldHeight) * yRatio;\n}\nexport function getRLeft(x, ratio) {\n    return x * ratio;\n}\nexport function getRValue(y, ratio) {\n    return y * ratio;\n}\nexport function blobToBase64(image) {\n    var fileReader = new FileReader();\n    return new Promise(function (resolve, reject) {\n        fileReader.onerror = function () {\n            reject(new DOMException('Problem reading blob.'));\n        };\n        fileReader.onload = function () {\n            resolve(fileReader.result);\n        };\n        fileReader.readAsDataURL(image);\n    });\n}\nexport function rescale(r, n) {\n    return r * n;\n}\n","// These should probably all move to JS-SDK\nimport {rescale} from '@verdocs/js-sdk/Utils/Fields';\n// import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Documents/Types';\nimport {IDocumentPageInfo} from './Types';\n\nexport const integerSequence = (start: number, count: number): number[] =>\n  Array(count)\n    .fill(1)\n    .map((_, index) => index + start);\n\nexport const fullNameToInitials = (name: string) =>\n  name\n    .split(' ')\n    .map(word => word[0])\n    .join('');\n\nexport const defaultWidth = (field: ITemplateField | IDocumentField) => {\n  switch (field.type) {\n    case 'attachment':\n    case 'payment':\n      return 24;\n    case 'checkbox':\n    case 'checkbox_group':\n    case 'radio_button_group':\n      return 14;\n    case 'signature':\n    case 'initial':\n      return 82;\n  }\n\n  return 150;\n};\n\nexport const defaultHeight = (field: ITemplateField | IDocumentField) => {\n  switch (field.type) {\n    case 'attachment':\n    case 'payment':\n      return 24;\n    case 'checkbox':\n    case 'checkbox_group':\n    case 'radio_button_group':\n      return 14;\n    case 'signature':\n    case 'initial':\n      return 41;\n  }\n\n  return 50;\n};\n\nexport const setControlStyles = (el: HTMLElement, field: ITemplateField | IDocumentField, xScale: number, yScale: number, option?: number) => {\n  const settings = (field as ITemplateField).setting || (field as IDocumentField).settings;\n  let {x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field)} = settings;\n\n  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;\n  if (optionSettings) {\n    x = optionSettings.x ?? x;\n    y = optionSettings.y ?? y;\n    width = optionSettings.width ?? width;\n    height = optionSettings.height ?? height;\n  }\n\n  el.style.width = `${width}px`;\n  el.style.height = `${height}px`;\n  el.style.position = 'absolute';\n  el.style.left = `${rescale(xScale, x)}px`;\n  el.style.bottom = `${rescale(yScale, y)}px`;\n  el.style.transform = `scale(${xScale}, ${yScale})`;\n  // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);\n};\n\nexport const getFieldId = (field: ITemplateField | IDocumentField) => {\n  return `verdocs-doc-fld-${field.name}`;\n};\n\nexport const getFieldOptionId = (field: ITemplateField, index: number) => {\n  return `verdocs-doc-fld-${field.name}-${index}`;\n};\n\nexport const renderDocumentField = (\n  field: ITemplateField,\n  docPage: IDocumentPageInfo,\n  roleIndex: number,\n  handleFieldChange: (field: ITemplateField, e: any, optionId?: string) => void,\n  disabled: boolean,\n  editable: boolean = false,\n  draggable: boolean = false,\n) => {\n  const controlsDiv = document.getElementById(docPage.containerId + '-controls');\n  if (!controlsDiv) {\n    return;\n  }\n\n  switch (field.type) {\n    case 'attachment':\n    case 'date':\n    case 'dropdown':\n    case 'initial':\n    case 'payment':\n    case 'signature':\n    case 'timestamp':\n    case 'textarea':\n    case 'textbox': {\n      const id = getFieldId(field);\n      const existingField = document.getElementById(id);\n      if (existingField) {\n        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n        return;\n      }\n\n      const el: any = document.createElement(`verdocs-field-${field.type}`);\n      el.field = field;\n      el.setAttribute('id', id);\n      el.setAttribute('roleindex', roleIndex);\n      if (disabled) {\n        el.setAttribute('disabled', true);\n      }\n      if (editable) {\n        el.setAttribute('editable', true);\n      }\n      if (draggable) {\n        el.setAttribute('draggable', true);\n      }\n      el.addEventListener('fieldChange', e => handleFieldChange(field, e));\n      setControlStyles(el, field, docPage.xScale, docPage.yScale);\n      controlsDiv.appendChild(el);\n\n      return el;\n    }\n\n    case 'checkbox_group':\n      field.setting.options.forEach((_, checkboxIndex) => {\n        const id = getFieldOptionId(field, checkboxIndex);\n        const existingField = document.getElementById(id);\n        if (existingField) {\n          setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n          return;\n        }\n\n        const cbEl: any = document.createElement(`verdocs-field-checkbox`);\n        cbEl.field = field;\n        cbEl.setAttribute('id', id);\n        cbEl.setAttribute('roleindex', roleIndex);\n        cbEl.setAttribute('option', checkboxIndex);\n        if (disabled) {\n          cbEl.setAttribute('disabled', true);\n        }\n        cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n        setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);\n        controlsDiv.appendChild(cbEl);\n\n        return cbEl;\n      });\n\n      break;\n\n    case 'radio_button_group':\n      field.setting.options.forEach((_, buttonIndex) => {\n        const id = getFieldOptionId(field, buttonIndex);\n        const existingField = document.getElementById(id);\n        if (existingField) {\n          setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n          return;\n        }\n\n        const cbEl: any = document.createElement(`verdocs-field-radio-button`);\n        cbEl.field = field;\n        cbEl.setAttribute('id', id);\n        cbEl.setAttribute('roleindex', roleIndex);\n        cbEl.setAttribute('option', buttonIndex);\n        if (disabled) {\n          cbEl.setAttribute('disabled', true);\n        }\n        cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n        setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, buttonIndex);\n        controlsDiv.appendChild(cbEl);\n\n        return cbEl;\n      });\n\n      break;\n\n    // case 'attachment':\n    //   el = document.createElement('verdocs-field-attachment');\n    //   el.setAttribute('value', result || '');\n    //   break;\n    // case 'payment':\n    //   el = document.createElement('verdocs-field-payment');\n    //   break;\n    default:\n      console.log('[PREVIEW] Skipping unsupported field type', field);\n      return null;\n  }\n};\n\nexport const getRoleIndex = (roles: string[], role: string) => roles.indexOf(role) || 0;\n\n// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,\n//   but then merge the SDK types to encourage developers to use just `settings`.\nexport const getFieldSettings = (field: ITemplateField | IDocumentField) => {\n  if ((field as ITemplateField).setting) {\n    return (field as ITemplateField).setting;\n  }\n\n  if ((field as IDocumentField).settings) {\n    return (field as IDocumentField).settings;\n  }\n\n  return {x: 0, y: 0, required: false, disabled: false, result: '', value: ''};\n};\n"]}
+{"version":3,"sources":["node_modules/@verdocs/js-sdk/Utils/Fields.js","src/utils/utils.ts"],"names":["rescale","r","n","integerSequence","exports","start","count","Array","fill","map","_","index","fullNameToInitials","name","split","word","join","defaultWidth","field","type","defaultHeight","setControlStyles","el","xScale","yScale","option","settings","setting","_e","x","_f","y","_g","width","_h","height","optionSettings","undefined","options","_a","_b","_c","_d","style","concat","position","left","bottom","transform","getFieldId","getFieldOptionId","renderDocumentField","docPage","roleIndex","handleFieldChange","disabled","editable","draggable","controlsDiv","document","getElementById","containerId","id","existingField","createElement","setAttribute","addEventListener","e","appendChild","forEach","checkboxIndex","cbEl","buttonIndex","console","log","getRoleIndex","roles","role","indexOf","getFieldSettings","required","result","value"],"mappings":"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","sourcesContent":["export function getRTop(y, fieldHeight, iTextHeight, yRatio) {\n    return iTextHeight - (y + fieldHeight) * yRatio;\n}\nexport function getRLeft(x, ratio) {\n    return x * ratio;\n}\nexport function getRValue(y, ratio) {\n    return y * ratio;\n}\nexport function blobToBase64(image) {\n    var fileReader = new FileReader();\n    return new Promise(function (resolve, reject) {\n        fileReader.onerror = function () {\n            reject(new DOMException('Problem reading blob.'));\n        };\n        fileReader.onload = function () {\n            resolve(fileReader.result);\n        };\n        fileReader.readAsDataURL(image);\n    });\n}\nexport function rescale(r, n) {\n    return r * n;\n}\n","// These should probably all move to JS-SDK\nimport {rescale} from '@verdocs/js-sdk/Utils/Fields';\n// import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {IDocumentPageInfo} from './Types';\n\nexport const integerSequence = (start: number, count: number): number[] =>\n  Array(count)\n    .fill(1)\n    .map((_, index) => index + start);\n\nexport const fullNameToInitials = (name: string) =>\n  name\n    .split(' ')\n    .map(word => word[0])\n    .join('');\n\nexport const defaultWidth = (field: ITemplateField | IDocumentField) => {\n  switch (field.type) {\n    case 'attachment':\n    case 'payment':\n      return 24;\n    case 'checkbox':\n    case 'checkbox_group':\n    case 'radio_button_group':\n      return 14;\n    case 'signature':\n    case 'initial':\n      return 82;\n  }\n\n  return 150;\n};\n\nexport const defaultHeight = (field: ITemplateField | IDocumentField) => {\n  switch (field.type) {\n    case 'attachment':\n    case 'payment':\n      return 24;\n    case 'checkbox':\n    case 'checkbox_group':\n    case 'radio_button_group':\n      return 14;\n    case 'signature':\n    case 'initial':\n      return 41;\n  }\n\n  return 50;\n};\n\nexport const setControlStyles = (el: HTMLElement, field: ITemplateField | IDocumentField, xScale: number, yScale: number, option?: number) => {\n  const settings = (field as ITemplateField).setting || (field as IDocumentField).settings;\n  let {x = 0, y = 0, width = defaultWidth(field), height = defaultHeight(field)} = settings;\n\n  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;\n  if (optionSettings) {\n    x = optionSettings.x ?? x;\n    y = optionSettings.y ?? y;\n    width = optionSettings.width ?? width;\n    height = optionSettings.height ?? height;\n  }\n\n  el.style.width = `${width}px`;\n  el.style.height = `${height}px`;\n  el.style.position = 'absolute';\n  el.style.left = `${rescale(xScale, x)}px`;\n  el.style.bottom = `${rescale(yScale, y)}px`;\n  el.style.transform = `scale(${xScale}, ${yScale})`;\n  // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);\n};\n\nexport const getFieldId = (field: ITemplateField | IDocumentField) => {\n  return `verdocs-doc-fld-${field.name}`;\n};\n\nexport const getFieldOptionId = (field: ITemplateField, index: number) => {\n  return `verdocs-doc-fld-${field.name}-${index}`;\n};\n\nexport const renderDocumentField = (\n  field: ITemplateField,\n  docPage: IDocumentPageInfo,\n  roleIndex: number,\n  handleFieldChange: (field: ITemplateField, e: any, optionId?: string) => void,\n  disabled: boolean,\n  editable: boolean = false,\n  draggable: boolean = false,\n) => {\n  const controlsDiv = document.getElementById(docPage.containerId + '-controls');\n  if (!controlsDiv) {\n    return;\n  }\n\n  switch (field.type) {\n    case 'attachment':\n    case 'date':\n    case 'dropdown':\n    case 'initial':\n    case 'payment':\n    case 'signature':\n    case 'timestamp':\n    case 'textarea':\n    case 'textbox': {\n      const id = getFieldId(field);\n      const existingField = document.getElementById(id);\n      if (existingField) {\n        setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n        return;\n      }\n\n      const el: any = document.createElement(`verdocs-field-${field.type}`);\n      el.field = field;\n      el.setAttribute('id', id);\n      el.setAttribute('roleindex', roleIndex);\n      if (disabled) {\n        el.setAttribute('disabled', true);\n      }\n      if (editable) {\n        el.setAttribute('editable', true);\n      }\n      if (draggable) {\n        el.setAttribute('draggable', true);\n      }\n      el.addEventListener('fieldChange', e => handleFieldChange(field, e));\n      setControlStyles(el, field, docPage.xScale, docPage.yScale);\n      controlsDiv.appendChild(el);\n\n      return el;\n    }\n\n    case 'checkbox_group':\n      field.setting.options.forEach((_, checkboxIndex) => {\n        const id = getFieldOptionId(field, checkboxIndex);\n        const existingField = document.getElementById(id);\n        if (existingField) {\n          setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n          return;\n        }\n\n        const cbEl: any = document.createElement(`verdocs-field-checkbox`);\n        cbEl.field = field;\n        cbEl.setAttribute('id', id);\n        cbEl.setAttribute('roleindex', roleIndex);\n        cbEl.setAttribute('option', checkboxIndex);\n        if (disabled) {\n          cbEl.setAttribute('disabled', true);\n        }\n        cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n        setControlStyles(cbEl, field, docPage.xScale, docPage.yScale);\n        controlsDiv.appendChild(cbEl);\n\n        return cbEl;\n      });\n\n      break;\n\n    case 'radio_button_group':\n      field.setting.options.forEach((_, buttonIndex) => {\n        const id = getFieldOptionId(field, buttonIndex);\n        const existingField = document.getElementById(id);\n        if (existingField) {\n          setControlStyles(existingField, field, docPage.xScale, docPage.yScale);\n          return;\n        }\n\n        const cbEl: any = document.createElement(`verdocs-field-radio-button`);\n        cbEl.field = field;\n        cbEl.setAttribute('id', id);\n        cbEl.setAttribute('roleindex', roleIndex);\n        cbEl.setAttribute('option', buttonIndex);\n        if (disabled) {\n          cbEl.setAttribute('disabled', true);\n        }\n        cbEl.addEventListener('fieldChange', e => handleFieldChange(field, e));\n        setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, buttonIndex);\n        controlsDiv.appendChild(cbEl);\n\n        return cbEl;\n      });\n\n      break;\n\n    // case 'attachment':\n    //   el = document.createElement('verdocs-field-attachment');\n    //   el.setAttribute('value', result || '');\n    //   break;\n    // case 'payment':\n    //   el = document.createElement('verdocs-field-payment');\n    //   break;\n    default:\n      console.log('[PREVIEW] Skipping unsupported field type', field);\n      return null;\n  }\n};\n\nexport const getRoleIndex = (roles: string[], role: string) => roles.indexOf(role) || 0;\n\n// TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,\n//   but then merge the SDK types to encourage developers to use just `settings`.\nexport const getFieldSettings = (field: ITemplateField | IDocumentField) => {\n  if ((field as ITemplateField).setting) {\n    return (field as ITemplateField).setting;\n  }\n\n  if ((field as IDocumentField).settings) {\n    return (field as IDocumentField).settings;\n  }\n\n  return {x: 0, y: 0, required: false, disabled: false, result: '', value: ''};\n};\n"]}

package/dist/verdocs-web-sdk/p-aa3a42a4.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./p-97329951.system.js","./p-e12b7fbc.system.js"],(function(e){"use strict";var t,o,n,i;return{setters:[function(e){t=e.r;o=e.h;n=e.H},function(e){i=e.c}],execute:function(){var l='verdocs-button-panel{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer}verdocs-button-panel .icon svg{fill:#cccccc}verdocs-button-panel .icon:hover svg{fill:#ffffff}.verdocs-button-panel-content{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:280px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{color:#092c4c;font-size:16px;font-weight:bold;margin:0 0 8px 0}.verdocs-button-panel-content form{margin:0;padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.verdocs-button-panel-content label{display:block;font-size:14px;font-weight:bold;margin:0 0 3px 0;color:#33364b}.verdocs-button-panel-content input{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:14px;margin:0 0 10px 0}';var a=e("verdocs_button_panel",function(){function e(e){t(this,e);this.showing=false;this.icon=""}e.prototype.componentDidRender=function(){document.body.appendChild(this.panelEl);if(this.popperInstance){this.popperInstance.destroy()}this.popperInstance=i(this.iconEl,this.panelEl,{})};e.prototype.disconnectedCallback=function(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}if(this.panelEl){this.panelEl.remove()}};e.prototype.toggle=function(e){var t=this;var o,n,i,l;e.stopPropagation();if(this.showing){(o=this.panelEl)===null||o===void 0?void 0:o.removeAttribute("data-show");(n=this.hiderEl)===null||n===void 0?void 0:n.remove();this.showing=false}else{(i=this.panelEl)===null||i===void 0?void 0:i.setAttribute("data-show","");(l=this.popperInstance)===null||l===void 0?void 0:l.update().catch((function(){}));this.showing=true;this.hiderEl=document.createElement("div");this.hiderEl.style.zIndex="100";this.hiderEl.style.position="absolute";this.hiderEl.style.top="0px";this.hiderEl.style.left="0px";this.hiderEl.style.right="0px";this.hiderEl.style.bottom="0px";this.hiderEl.onclick=function(e){return t.toggle(e)};document.body.appendChild(this.hiderEl)}};e.prototype.render=function(){var e=this;return o(n,null,o("div",{class:"icon",innerHTML:this.icon,onClick:function(t){return e.toggle(t)},ref:function(t){return e.iconEl=t}}),o("div",{role:"tooltip",class:"verdocs-button-panel-content","data-popper-placement":"bottom",ref:function(t){return e.panelEl=t}},o("div",{"data-popper-arrow":"true",class:"arrow"}),o("slot",null)))};return e}());a.style=l;var s='verdocs-select-input{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-select-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px}verdocs-select-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-select-input .input-element:focus{border:1px solid #7d88ff}verdocs-select-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}';var p=e("verdocs_select_input",function(){function e(e){t(this,e);this.value="";this.label="";this.options=undefined;this.disabled=false}e.prototype.render=function(){var e=this;return o(n,{class:"input-field"},o("label",null,this.label?o("div",{class:"input-label"},this.label+":"):o("div",null),o("select",{class:"input-element",disabled:this.disabled},this.options.map((function(t){return o("option",{value:t.value,selected:t.value===e.value},t.label)})))))};return e}());p.style=s;var r='verdocs-text-input{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input [data-lastpass-icon-root]{display:none !important}';var c=e("verdocs_text_input",function(){function e(e){t(this,e);this.value="";this.label="";this.placeholder="";this.autocomplete="";this.type="text";this.disabled=false}e.prototype.render=function(){return o(n,{class:"input-field"},o("label",null,this.label?o("div",{class:"input-label"},this.label+":"):o("div",null),o("input",{type:this.type,value:this.value,class:"input-element","data-lpignore":"true",disabled:this.disabled,placeholder:this.placeholder,autoComplete:this.autocomplete})))};return e}());c.style=r}}}));
+//# sourceMappingURL=p-aa3a42a4.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/controls/verdocs-button-panel/verdocs-button-panel.scss?tag=verdocs-button-panel","src/components/controls/verdocs-button-panel/verdocs-button-panel.tsx","src/components/controls/verdocs-select-input/verdocs-select-input.scss?tag=verdocs-select-input","src/components/controls/verdocs-select-input/verdocs-select-input.tsx","src/components/controls/verdocs-text-input/verdocs-text-input.scss?tag=verdocs-text-input","src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"names":["verdocsButtonPanelCss","VerdocsButtonPanel","exports","this","showing","class_1","prototype","componentDidRender","document","body","appendChild","panelEl","popperInstance","destroy","createPopper","iconEl","disconnectedCallback","remove","toggle","e","_this","stopPropagation","_a","removeAttribute","_b","hiderEl","_c","setAttribute","_d","update","catch","createElement","style","zIndex","position","top","left","right","bottom","onclick","render","h","Host","class","innerHTML","icon","onClick","ref","el","role","data-popper-placement","data-popper-arrow","verdocsSelectInputCss","VerdocsSelectInput","class_2","label","disabled","options","map","option","value","selected","verdocsTextInputCss","VerdocsTextInput","class_3","type","data-lpignore","placeholder","autoComplete","autocomplete"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-button-panel {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $light-border-color;\n    }\n\n    &:hover {\n      svg {\n        fill: $verdocs-grey-4;\n      }\n    }\n  }\n}\n\n.verdocs-button-panel-content {\n  font-family: $verdocs-primary-font;\n  box-shadow: 0 0 10px 1px #999999;\n  display: none;\n  background: #ffffff;\n  color: $label-color;\n  width: 280px;\n  font-weight: bold;\n  padding: 15px;\n  font-size: 14px;\n  position: relative;\n  border-radius: 4px;\n  z-index: 10000;\n\n  .arrow,\n  .arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n  }\n\n  .arrow {\n    visibility: hidden;\n    top: -4px;\n  }\n\n  .arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n  }\n\n  &[data-show] {\n    display: block;\n  }\n\n  &[data-popper-placement^='top'] > .arrow {\n    bottom: -4px;\n  }\n\n  &[data-popper-placement^='bottom'] > .arrow {\n    top: -4px;\n  }\n\n  &[data-popper-placement^='left'] > .arrow {\n    right: -4px;\n  }\n\n  &[data-popper-placement^='right'] > .arrow {\n    left: -4px;\n  }\n\n  h6 {\n    color: $verdocs-grey-0;\n    font-size: 16px;\n    font-weight: bold;\n    margin: 0 0 8px 0;\n  }\n\n  form {\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  label {\n    display: block;\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0 0 3px 0;\n    color: $verdocs-grey-1;\n  }\n\n  input {\n    flex: 1;\n    height: 34px;\n    display: flex;\n    font-size: 14px;\n    margin: 0 0 10px 0;\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a clickable icon suitable for display in a toolbar. When clicked, a customizable drop-down panel will be\n * displayed.\n *\n * *\n * ```html\n * <verdocs-button-panel icon=\"<svg.../>\">\n *   <form>...</form>\n * </verdocs-button-panel>\n * ```\n */\n@Component({\n  tag: 'verdocs-button-panel',\n  styleUrl: 'verdocs-button-panel.scss',\n  shadow: false,\n})\nexport class VerdocsButtonPanel {\n  iconEl: HTMLDivElement;\n  panelEl: HTMLDivElement;\n  hiderEl?: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  componentDidRender() {\n    document.body.appendChild(this.panelEl);\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n    }\n\n    this.popperInstance = createPopper(this.iconEl, this.panelEl, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n\n    if (this.panelEl) {\n      this.panelEl.remove();\n    }\n  }\n\n  showing = false;\n  toggle(e: any) {\n    e.stopPropagation();\n\n    if (this.showing) {\n      this.panelEl?.removeAttribute('data-show');\n      this.hiderEl?.remove();\n      this.showing = false;\n    } else {\n      this.panelEl?.setAttribute('data-show', '');\n      this.popperInstance?.update().catch(() => {});\n      this.showing = true;\n\n      this.hiderEl = document.createElement('div');\n      this.hiderEl.style.zIndex = '100';\n      this.hiderEl.style.position = 'absolute';\n      this.hiderEl.style.top = '0px';\n      this.hiderEl.style.left = '0px';\n      this.hiderEl.style.right = '0px';\n      this.hiderEl.style.bottom = '0px';\n      this.hiderEl.onclick = (e: any) => this.toggle(e);\n      document.body.appendChild(this.hiderEl);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"icon\" innerHTML={this.icon} onClick={(e: any) => this.toggle(e)} ref={el => (this.iconEl = el)} />\n        <div role=\"tooltip\" class=\"verdocs-button-panel-content\" data-popper-placement=\"bottom\" ref={el => (this.panelEl = el as HTMLDivElement)}>\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-select-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      border: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n}\n","import {Component, Prop, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-text-input {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  margin: 0 0 10px 0;\n  display: block;\n\n  .input-element {\n    box-sizing: border-box;\n    border: 1px solid $border-color;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    color: #000;\n    width: 100%;\n    font-size: 16px;\n    height: 28px;\n    padding: 4px 12px;\n    outline: none;\n\n    &::placeholder {\n      color: $light-disabled-color;\n      opacity: 1;\n    }\n\n    &:focus {\n      outline: 1px solid $border-color-highlight;\n    }\n  }\n\n  .input-label {\n    display: block;\n    color: $label-color-light;\n    font-weight: 700;\n    font-size: 14px;\n    margin: 0 0 4px 0;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {Component, Prop, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}