@verdocs/web-sdk 1.9.16 → 1.9.21

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

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@verdocs/js-sdk/Envelopes/Recipients.js","node_modules/@verdocs/js-sdk/Envelopes/Signatures.js","node_modules/@verdocs/js-sdk/Envelopes/Initials.js","src/components/embeds/verdocs-sign/verdocs-sign.scss?tag=verdocs-sign","src/components/embeds/verdocs-sign/verdocs-sign.tsx"],"names":["__awaiter","this","thisArg","_arguments","P","generator","adopt","value","resolve","Promise","reject","fulfilled","step","next","e","rejected","result","done","then","apply","__generator","body","_","label","sent","t","trys","ops","f","y","g","verb","throw","return","Symbol","iterator","n","v","op","TypeError","call","pop","length","push","updateRecipient","endpoint","envelopeId","roleName","params","_a","api","put","concat","r","data","envelopeRecipientSubmit","action","envelopeRecipientDecline","envelopeRecipientAgree","agreed","createSignature","name","signature","FormData","append","post","createInitials","initials","verdocsSignCss","PrintIcon","DownloadIcon","VerdocsSign","exports","recipientIndex","fields","class_1","prototype","componentWillLoad","VerdocsEndpoint","sessionType","componentDidLoad","sdkError","emit","SDKError","roleId","_b","inviteCode","_c","console","log","Envelopes.getSigningSession","_h","_j","session","recipient","signerToken","email","profile_id","setToken","nextButtonLabel","getEnvelopeById","EnvelopeStore","envelope","recipients","findIndex","role_name","_this","isDone","includes","status","_d","envelopeLoaded","e_1","_e","message","_f","response","_g","handleClickAgree","envelopeUpdated","event","catch","handleOptionSelected","detail","id","finishLater","showFinishLater","declineResult","window","print","savePDF","envelope_document_id","saveFieldChange","fieldName","Envelopes.updateEnvelopeField","error","errorMessage","handleFieldChange","field","target","checked","type","prepared","options","settings","map","option","selected","fetch","_k","blob","initialsBlob","newInitials","updateEnvelopeFieldInitials","signatureBlob","newSignature","updateEnvelopeFieldSignature","iso","getAttribute","ts","isFieldValid","required","_l","_m","base64","validator","isValidEmail","isValidPhone","checkedCount","filter","minimum_checked","maximum_checked","handleNext","nextSubmits","showDone","e_2","requiredFields","focusedIndex","focusedField","nextFocusedIndex","nextRequiredField","skips","getFieldId","el","document","getElementById","focusField","checkRecipientFields","someFieldsInvalid","some","fieldValid","attachFieldAttributes","pageInfo","roleIndex","addEventListener","finally","setAttribute","xScale","yScale","fullNameToInitials","full_name","handlePageRendered","getRoleIndex","roleNames","recipientFields","page","pageNumber","forEach","renderDocumentField","disabled","editable","draggable","Array","isArray","otherRecipient","otherRoleIndex","render","loading","h","Host","menuOptions","class","onOptionSelected","onInput","Fragment","src","alt","style","flex","innerHTML","width","height","fill","cursor","onClick","marginLeft","maginRight","size","display","documents","envelopeDocument","pages","__spreadArray","sort","a","b","sequence","pageImageUri","display_uri","virtualWidth","virtualHeight","onPageRendered","layers","heading","onNext"],"mappings":"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","sourcesContent":["var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n    function verb(n) { return function (v) { return step([n, v]); }; }\n    function step(op) {\n        if (f) throw new TypeError(\"Generator is already executing.\");\n        while (_) try {\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n            if (y = 0, t) op = [op[0] & 2, t.value];\n            switch (op[0]) {\n                case 0: case 1: t = op; break;\n                case 4: _.label++; return { value: op[1], done: false };\n                case 5: _.label++; y = op[1]; op = [0]; continue;\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\n                default:\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n                    if (t[2]) _.ops.pop();\n                    _.trys.pop(); continue;\n            }\n            op = body.call(thisArg, _);\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n    }\n};\n/**\n * Update a recipient's status block\n */\nexport var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {\n    return __generator(this, function (_a) {\n        return [2 /*return*/, endpoint.api //\n                .put(\"/envelopes/\".concat(envelopeId, \"/recipients/\").concat(roleName), params)\n                .then(function (r) { return r.data; })];\n    });\n}); };\n/**\n * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.\n */\nexport var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {\n    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });\n};\n/**\n * Decline to complete an envelope (signing will not terminated).\n */\nexport var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {\n    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });\n};\n/**\n * Claim / change ownership of an envelope. This is a special-case operation only available in certain workflows.\n */\nexport var envelopeRecipientChangeOwner = function (endpoint, envelopeId, roleName, email, fullName) { return updateRecipient(endpoint, envelopeId, roleName, { action: 'owner_update', email: email, full_name: fullName }); };\n/**\n * Agree to electronic signing.\n */\nexport var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {\n    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });\n};\n/**\n * Change a recipient's name.\n */\nexport var envelopeRecipientUpdateName = function (endpoint, envelopeId, roleName, fullName) {\n    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', new_full_name: fullName });\n};\n/**\n * Change a recipient's name.\n */\nexport var envelopeRecipientPrepare = function (endpoint, envelopeId, roleName, recipients) {\n    return updateRecipient(endpoint, envelopeId, roleName, { action: 'prepare', recipients: recipients });\n};\nexport var getSignerToken = function (endpoint, envelopeId, roleName) {\n    return endpoint.api //\n        .get(\"/envelopes/\".concat(envelopeId, \"/recipients/\").concat(encodeURIComponent(roleName), \"/signer-token\"))\n        .then(function (r) { return r.data; });\n};\nexport var getInPersonLink = function (endpoint, envelopeId, roleName) {\n    return endpoint.api //\n        .get(\"/envelopes/\".concat(envelopeId, \"/recipients/\").concat(encodeURIComponent(roleName), \"?in_person_link=true\"))\n        .then(function (r) { return r.data; });\n};\n","/**\n * Create a signature block. In a typical signing workflow, the user is asked at the beginning of the process to \"adopt\"\n * a signature block to be used for all signature fields in the document. Thus, this is typically called one time to\n * create and store a signature block. Thereafter, the ID of the signature block may be re-used for each signature field\n * to be \"stamped\" by the user.\n */\nexport var createSignature = function (endpoint, name, signature) {\n    var data = new FormData();\n    data.append('signature', signature, name);\n    return endpoint.api //\n        .post(\"/signatures\", data)\n        .then(function (r) { return r.data; });\n};\n/**\n * Get the availbable signatures for a user.\n */\nexport var getSignatures = function (endpoint) {\n    return endpoint.api //\n        .get('/signatures')\n        .then(function (r) { return r.data; });\n};\n/**\n * Get a user's signature by ID.\n */\nexport var getSignature = function (endpoint, signatureId) {\n    return endpoint.api //\n        .get(\"/signatures/\".concat(signatureId))\n        .then(function (r) { return r.data; });\n};\n/**\n * Delete a user's signature.\n */\nexport var deleteSignature = function (endpoint, signatureId) {\n    return endpoint.api //\n        .delete(\"/signatures/\".concat(signatureId))\n        .then(function (r) { return r.data; });\n};\n","/**\n * Create an initials block. In a typical signing workflow, the user is asked at the beginning of the process to \"adopt\"\n * an initials block to be used for all initials fields in the document. Thus, this is typically called one time to\n * create and store an initials block. Thereafter, the ID of the initials block may be re-used for each initials field\n * to be \"stamped\" by the user.\n */\nexport var createInitials = function (endpoint, name, initials) {\n    var data = new FormData();\n    data.append('initial', initials, name);\n    return endpoint.api //\n        .post(\"/initials\", data)\n        .then(function (r) { return r.data; });\n};\n","@import '../../../theme.scss';\n\nverdocs-sign {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .intro {\n    width: 100%;\n    height: 60px;\n    display: flex;\n    background: #ffffff;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      color: #111111;\n      padding: 0 14px;\n      font-size: 20px;\n      font-weight: 500;\n      line-height: 28px;\n      max-width: 1024px;\n    }\n  }\n\n  &.agreed {\n    .intro {\n      //display: none;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n\n    .logo {\n      width: 77.5px;\n      margin: -6px 0 0 5px;\n    }\n\n    .title {\n      padding-left: 16px;\n      font-size: 18px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .cover {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999;\n    position: absolute;\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .agree {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0 15px;\n\n    .intro {\n      display: none;\n    }\n\n    .header {\n      flex: 0 0 56px;\n    }\n  }\n}\n\n@media print {\n  verdocs-sign .header {\n    display: none;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Envelopes} from '@verdocs/js-sdk/Envelopes';\nimport {createInitials} from '@verdocs/js-sdk/Envelopes/Initials';\nimport {createSignature} from '@verdocs/js-sdk/Envelopes/Signatures';\nimport {IDocumentField, IEnvelope, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {envelopeRecipientAgree, envelopeRecipientDecline, envelopeRecipientSubmit} from '@verdocs/js-sdk/Envelopes/Recipients';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Event, EventEmitter, Host, Fragment, Component, Prop, State, h} from '@stencil/core';\nimport {updateEnvelopeFieldInitials, updateEnvelopeFieldSignature} from '@verdocs/js-sdk/Envelopes/Envelopes';\nimport {fullNameToInitials, getFieldId, getRoleIndex, renderDocumentField, savePDF} from '../../../utils/utils';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\nconst PrintIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"></path></svg>`;\n\nconst DownloadIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z\"></path></svg>`;\n\n/**\n * Display an envelope signing experience. This will display the envelope's attached\n * documents with signing fields overlaid on each page.\n *\n * The component will attempt to initiate a signing session and load the specified\n * envelope. If successful, the recipient's fields will be enabled and the user will\n * be able to sign the envelope's attached documents. If not, an `sdkError` will be\n * thrown and the component will be blank/empty. To provide the best user experience,\n * applications should capture and handle this error to provide the user with\n * instructions/options for next steps based on the application's design and workflow.\n *\n * Unlike other components, this will always create its own endpoint to manage the\n * session session. This endpoint will be included in event callbacks for the\n * convenience of host applications that may wish to make server calls using the\n * signer's credentials once signing is complete (e.g. to obtain copies of\n * the signed attachments.)\n */\n@Component({\n  tag: 'verdocs-sign',\n  styleUrl: 'verdocs-sign.scss',\n  shadow: false,\n})\nexport class VerdocsSign {\n  endpoint: VerdocsEndpoint = null;\n\n  /**\n   * The ID of the envelope to sign.\n   */\n  @Prop() envelopeId: string | null = null;\n\n  /**\n   * The ID of the role that will be signing e.g. 'Recipient 1'\n   */\n  @Prop() roleId: string | null = null;\n\n  /**\n   * The invite code for the signer.\n   */\n  @Prop() inviteCode: string | null = null;\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  /**\n   * Event fired when the envelope is updated in any way.\n   */\n  @Event({composed: true}) envelopeLoaded: EventEmitter<{endpoint: VerdocsEndpoint; envelope: IEnvelope}>;\n\n  /**\n   * Event fired when the envelope is updated in any way.\n   */\n  @Event({composed: true}) envelopeUpdated: EventEmitter<{endpoint: VerdocsEndpoint; envelope: IEnvelope; event: string}>;\n\n  @State() recipient: IRecipient | null = null;\n  @State() signerToken = null;\n  // @State() envelope: IEnvelope | null = null;\n  // @State() fields: IDocumentField[] = [];\n  @State() hasSignature = false;\n  @State() nextButtonLabel = 'Start';\n  @State() nextSubmits = false;\n  @State() errorMessage = '';\n  @State() focusedField = '';\n  @State() isDone = false;\n  @State() showDone = false;\n\n  @State() finishLater = false;\n  @State() showFinishLater = false;\n\n  recipientIndex: number = -1;\n  fields: IDocumentField[] = [];\n\n  componentWillLoad() {\n    this.endpoint = new VerdocsEndpoint({sessionType: 'signing'});\n  }\n\n  async componentDidLoad() {\n    if (!this.envelopeId) {\n      this.sdkError?.emit(new SDKError('[SIGN] Missing required envelopId', 500, ''));\n      return;\n    }\n\n    if (!this.roleId) {\n      this.sdkError?.emit(new SDKError('[SIGN] Missing required roleId', 500, ''));\n      return;\n    }\n\n    if (!this.inviteCode) {\n      this.sdkError?.emit(new SDKError('[SIGN] Missing required inviteCode', 500, ''));\n      return;\n    }\n\n    try {\n      console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);\n      const {session, recipient, signerToken} = await Envelopes.getSigningSession(this.endpoint, {\n        envelopeId: this.envelopeId,\n        roleId: this.roleId,\n        inviteCode: this.inviteCode,\n      });\n\n      console.log(`[SIGN] Loaded signing session ${session.email} / ${session.profile_id}`);\n\n      this.recipient = recipient;\n      this.signerToken = signerToken;\n      this.endpoint.setToken(signerToken);\n\n      if (this.recipient.agreed) {\n        this.nextButtonLabel = 'Next';\n      }\n\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n      // const envelope = await Envelopes.getEnvelope(this.endpoint, this.envelopeId);\n      // this.envelope = envelope;\n      // console.log('[SIGN] Loaded envelope', envelope);\n\n      this.recipientIndex = EnvelopeStore.envelope.recipients.findIndex(recipient => recipient.role_name == this.roleId);\n      if (this.recipientIndex > -1) {\n        this.recipient = EnvelopeStore.envelope.recipients[this.recipientIndex];\n        this.fields = this.recipient.fields;\n      }\n\n      this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);\n      console.log('Done', this.isDone);\n\n      // TODO: Fix service to allow this?\n      // const sigs = await getSignatures();\n      // console.log('sigs', sigs);\n\n      this.envelopeLoaded?.emit({endpoint: this.endpoint, envelope: EnvelopeStore.envelope});\n    } catch (e) {\n      console.log('Error with signing session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handleClickAgree() {\n    envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)\n      .then(r => {\n        this.nextButtonLabel = 'Next';\n        this.recipient = r;\n        this.envelopeUpdated?.emit({endpoint: this.endpoint, envelope: EnvelopeStore.envelope, event: 'agreed'});\n      })\n      .catch(e => {\n        console.log('Update failure', e);\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      });\n  }\n\n  async handleOptionSelected(e) {\n    switch (e.detail.id) {\n      case 'later':\n        this.finishLater = true;\n        this.showFinishLater = true;\n        // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);\n        // if (!window?.['STORYBOOK_ENV']) {\n        //   window.alert('User intends to sign later.');\n        // }\n        break;\n      case 'claim':\n        break;\n      case 'decline':\n        {\n          const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);\n          console.log('Decline result', declineResult);\n          this.isDone = true;\n        }\n        break;\n      case 'print':\n        window.print();\n        break;\n      case 'download':\n        savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {});\n        break;\n    }\n  }\n\n  saveFieldChange(fieldName: string, fields: Record<string, any>) {\n    Envelopes.updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //\n      .catch(e => {\n        if (e.response?.status === 401 && e.response?.data?.error === 'jwt expired') {\n          // TODO: Do we want to improve the instructions here?\n          console.log('[SIGN] Signing session expired');\n          this.errorMessage = 'Signing session expired.';\n        } else {\n          console.log('[SIGN] Server error', e);\n        }\n\n        this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      });\n  }\n\n  async handleFieldChange(field: IDocumentField, e: any) {\n    console.log('fieldChange', field, e, e.target.value);\n    const {value, checked} = e.target;\n\n    switch (field.type) {\n      case 'textbox':\n        return this.saveFieldChange(field.name, {prepared: false, value});\n\n      case 'checkbox_group': {\n        const options = field.settings.options.map(option => ({id: option.id, checked: e.target.checked}));\n        return this.saveFieldChange(field.name, {prepared: false, value: {options}});\n      }\n\n      case 'radio_button_group': {\n        const options = field.settings.options.map(option => ({id: option.id, selected: e.target.value === option.id}));\n        return this.saveFieldChange(field.name, {prepared: false, value: {options}});\n      }\n\n      case 'dropdown':\n        return this.saveFieldChange(field.name, {prepared: false, value: e.detail});\n\n      case 'initial':\n        const initialsBlob = await (await fetch(e.detail)).blob();\n        return createInitials(this.endpoint, 'initial', initialsBlob) //\n          .then(newInitials => {\n            console.log('New initials', field.name, newInitials);\n            updateEnvelopeFieldInitials(this.endpoint, this.envelopeId, field.name, newInitials.id);\n          });\n\n      case 'signature':\n        const signatureBlob = await (await fetch(e.detail)).blob();\n        return createSignature(this.endpoint, 'signature', signatureBlob) //\n          .then(newSignature => {\n            console.log('New sign', field.name, newSignature);\n            updateEnvelopeFieldSignature(this.endpoint, this.envelopeId, field.name, newSignature.id);\n          });\n\n      case 'date':\n        const iso = e.target.getAttribute('iso');\n        return this.saveFieldChange(field.name, {prepared: false, value: iso});\n\n      case 'timestamp':\n        console.log('Updating timestamp', {value, ts: e.target.getAttribute('timestamp')});\n        break;\n\n      default:\n        console.log('Unhandled field update', {value, checked}, field);\n        break;\n    }\n  }\n\n  isFieldValid(field: IDocumentField) {\n    const {required = false} = field;\n    const {result = '', value = '', base64 = ''} = field.settings || {};\n    switch (field.type) {\n      case 'textbox':\n        switch (field.settings?.validator || '') {\n          case 'email':\n            return isValidEmail(result);\n          case 'phone':\n            return isValidPhone(result);\n          default:\n            return !required || result !== '';\n        }\n\n      case 'signature':\n      case 'initial':\n        return !required || base64 !== '';\n\n      // Timestamp fields get automatically filled when the envelope is submitted.\n      case 'timestamp':\n        return true;\n\n      case 'textarea':\n      case 'date':\n      case 'attachment':\n        return !required || result !== '';\n\n      case 'dropdown':\n        return !required || value !== '';\n\n      case 'checkbox_group':\n        const checkedCount = (field.settings?.options?.filter(option => option.checked) || []).length;\n        return !required || (checkedCount >= (field.settings?.minimum_checked || 0) && checkedCount <= (field.settings?.maximum_checked || 999));\n\n      case 'radio_button_group':\n        return !required || (field.settings?.options?.filter(option => option.selected) || []).length > 0;\n      // TODO\n      // case 'checkbox':\n      //   return <verdocs-field-checkbox style={style} value={result || ''} id={id} />;\n      // case 'payment':\n      //   return <verdocs-field-payment style={style} field={field} id={id} />;\n      default:\n        return false;\n    }\n  }\n\n  async handleNext() {\n    if (this.nextSubmits) {\n      try {\n        const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);\n        console.log('[SIGN] Submitted successfully', result);\n        this.showDone = true;\n        this.isDone = true;\n        // updateRecipientStatus()\n      } catch (e) {\n        console.log('Error submitting', e);\n      }\n      return;\n      // You're done.\n      // You can access the Verdoc at any time by clicking on the link from invitation email.\n      //\n      // After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.\n      //\n      // Thank you for using Verdocs.\n      // Got it, thanks\n    }\n\n    // Find and focus the next incomplete required field\n    const requiredFields = this.fields.filter(field => field.required);\n    const focusedIndex = requiredFields.findIndex(field => field.name === this.focusedField);\n\n    let nextFocusedIndex = focusedIndex + 1;\n    if (nextFocusedIndex >= requiredFields.length) {\n      nextFocusedIndex = 0;\n    }\n\n    let nextRequiredField = requiredFields[nextFocusedIndex];\n\n    // Skip signature and initial fields that are already filled in. We have to count our \"skips\" just in case, to avoid infinite loops.\n    let skips = 0;\n    if (skips < requiredFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && nextRequiredField.settings?.result === 'signed') {\n      skips++;\n      nextFocusedIndex++;\n      if (nextFocusedIndex >= requiredFields.length) {\n        nextFocusedIndex = 0;\n      }\n      nextRequiredField = requiredFields[nextFocusedIndex];\n    }\n\n    if (skips >= requiredFields.length) {\n      nextRequiredField = null;\n    }\n\n    if (nextRequiredField) {\n      const id = getFieldId(nextRequiredField);\n      const el = document.getElementById(id) as any;\n      el?.focusField();\n      this.focusedField = nextRequiredField.name;\n    }\n  }\n\n  // See if everything that \"needs to be\" filled in is, and all \"fillable fields\" are valid\n  checkRecipientFields() {\n    const someFieldsInvalid = this.recipient.fields.map(field => this.isFieldValid(field)).some(fieldValid => !fieldValid);\n    console.log({someFieldsInvalid});\n    if (!someFieldsInvalid) {\n      this.nextButtonLabel = 'Finish';\n      this.nextSubmits = true;\n    } else {\n      this.nextSubmits = false;\n    }\n  }\n\n  attachFieldAttributes(pageInfo, field, roleIndex, el) {\n    el.addEventListener('input', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));\n    el.addEventListener('fieldChange', e => this.handleFieldChange(field, e).finally(() => this.checkRecipientFields()));\n\n    el.setAttribute('roleindex', roleIndex);\n    el.setAttribute('xScale', pageInfo.xScale);\n    el.setAttribute('yScale', pageInfo.yScale);\n    el.setAttribute('initials', this.recipient ? fullNameToInitials(this.recipient.full_name) : '');\n    el.setAttribute('name', this.recipient?.full_name || '');\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    const roleIndex = getRoleIndex(EnvelopeStore.roleNames, this.recipient.role_name);\n    const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);\n    console.log('[SIGN] Page rendered, adding fields', {pageInfo, roleIndex, recipientFields});\n\n    recipientFields.forEach(field => {\n      const el = renderDocumentField(field, pageInfo, roleIndex, {disabled: false, editable: false, draggable: false, done: this.isDone});\n      if (!el) {\n        return;\n      }\n\n      if (Array.isArray(el)) {\n        el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));\n      } else {\n        this.attachFieldAttributes(pageInfo, field, roleIndex, el);\n      }\n\n      // interact(el).draggable({\n      //   listeners: {\n      //     start(event) {\n      //       console.log('[FIELDS] Drag started', event.type, event.target);\n      //     },\n      //     move(event) {\n      //       const oldX = +(event.target.getAttribute('posX') || 0);\n      //       const oldY = +(event.target.getAttribute('posY') || 0);\n      //       const xScale = +(event.target.getAttribute('xScale') || 1);\n      //       const yScale = +(event.target.getAttribute('yScale') || 1);\n      //       const newX = event.dx / xScale + oldX;\n      //       const newY = event.dy / yScale + oldY;\n      //       event.target.setAttribute('posX', newX);\n      //       event.target.setAttribute('posy', newY);\n      //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n      //     },\n      //     end(event) {\n      //       console.log('[FIELDS] Drag ended', event);\n      //       // event.target.setAttribute('posX', 0);\n      //       // event.target.setAttribute('posy', 0);\n      //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n      //     },\n      //   },\n      // });\n    });\n\n    // Render fields for \"the other\" recipients\n    EnvelopeStore.envelope.recipients\n      .filter(recipient => recipient.role_name !== this.recipient.role_name)\n      .map(otherRecipient => {\n        const otherRoleIndex = getRoleIndex(EnvelopeStore.roleNames, otherRecipient.role_name);\n        const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);\n        // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n        recipientFields.forEach(field => {\n          const el = renderDocumentField(field, pageInfo, otherRoleIndex, {disabled: true, editable: false, draggable: false, done: this.isDone});\n          if (!el) {\n            return;\n          }\n\n          el.setAttribute('roleindex', otherRoleIndex);\n          el.setAttribute('xScale', pageInfo.xScale);\n          el.setAttribute('yScale', pageInfo.yScale);\n        });\n      });\n\n    this.checkRecipientFields();\n  }\n\n  render() {\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    const menuOptions = [\n      {id: 'later', label: 'Finish Later'}, //\n      // {id: 'claim', label: 'Claim the Document', disabled: true},\n      {id: 'decline', label: 'Decline to Sign'},\n      {id: 'print', label: 'Print Without Signing', disabled: true},\n      {id: 'download', label: 'Download'},\n    ];\n\n    return (\n      <Host class={{agreed: this.recipient?.agreed}}>\n        {!this.isDone && !this.finishLater && (\n          <div class=\"intro\">\n            <div class=\"inner\">Please review and act on these documents.</div>\n          </div>\n        )}\n\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                {!this.isDone && !this.finishLater && <verdocs-dropdown options={menuOptions} onOptionSelected={e => this.handleOptionSelected(e)} />}\n\n                {!this.recipient?.agreed ? (\n                  <div class=\"agree\">\n                    <verdocs-checkbox name=\"agree\" label=\"I agree to use electronic records and signatures.\" onInput={() => this.handleClickAgree()} />\n                  </div>\n                ) : (\n                  <Fragment>\n                    <img src=\"https://verdocs.com/assets/white-logo.svg\" alt=\"Verdocs Logo\" class=\"logo\" />\n                    <div class=\"title\">{EnvelopeStore.envelope.name}</div>\n                    <div style={{flex: '1'}} />\n                    <div innerHTML={PrintIcon} style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer'}} onClick={() => window.print()} />\n                    <div\n                      innerHTML={DownloadIcon}\n                      style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px'}}\n                      onClick={() => savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {})}\n                    />\n                  </Fragment>\n                )}\n\n                {!this.isDone && !this.finishLater && (\n                  <verdocs-button size=\"small\" label={this.nextButtonLabel} disabled={!this.recipient?.agreed} onClick={() => this.handleNext()} />\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {!this.isDone && !this.recipient?.agreed ? <div class=\"cover\" /> : <div style={{display: 'none'}} />}\n\n        <div class=\"document\">\n          {(EnvelopeStore.envelope.documents || []).map(envelopeDocument => {\n            const pages = [...(envelopeDocument?.pages || [])];\n            pages.sort((a, b) => a.sequence - b.sequence);\n\n            return (\n              <Fragment>\n                {pages.map(page => (\n                  <verdocs-document-page\n                    pageImageUri={page.display_uri}\n                    virtualWidth={612}\n                    virtualHeight={792}\n                    pageNumber={page.sequence}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                ))}\n              </Fragment>\n            );\n          })}\n        </div>\n\n        {this.showFinishLater && (\n          <verdocs-ok-dialog\n            heading=\"You've saved your document to finish later.\"\n            message=\"To complete the document, use the link in the original email notification inviting you to review and finish the document.\"\n            onNext={() => (this.showFinishLater = false)}\n          />\n        )}\n\n        {this.errorMessage && <verdocs-ok-dialog heading=\"Network Error\" message={this.errorMessage} onNext={() => (this.errorMessage = '')} />}\n        {this.showDone && (\n          <verdocs-ok-dialog\n            heading=\"You're Done!\"\n            message=\"You can access the Verdoc at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.\"\n            onNext={() => (this.showDone = false)}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,r,n){function i(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,o){function l(e){try{s(n.next(e))}catch(e){o(e)}}function a(e){try{s(n["throw"](e))}catch(e){o(e)}}function s(e){e.done?r(e.value):i(e.value).then(l,a)}s((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,l;return l={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function a(e){return function(t){return s([e,t])}}function s(l){if(n)throw new TypeError("Generator is already executing.");while(r)try{if(n=1,i&&(o=l[0]&2?i["return"]:l[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,l[1])).done)return o;if(i=0,o)l=[l[0]&2,o.value];switch(l[0]){case 0:case 1:o=l;break;case 4:r.label++;return{value:l[1],done:false};case 5:r.label++;i=l[1];l=[0];continue;case 7:l=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(l[0]===6||l[0]===2)){r=0;continue}if(l[0]===3&&(!o||l[1]>o[0]&&l[1]<o[3])){r.label=l[1];break}if(l[0]===6&&r.label<o[1]){r.label=o[1];o=l;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(l);break}if(o[2])r.ops.pop();r.trys.pop();continue}l=t.call(e,r)}catch(e){l=[6,e];i=0}finally{n=o=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-05eb4fed.system.js","./p-0eee7f43.system.js","./p-af2c2f79.system.js"],(function(e){"use strict";var t,r,n,i,o;return{setters:[function(e){t=e.r;r=e.h;n=e.H},function(e){i=e.g},function(e){o=e.g},function(){}],execute:function(){var l='verdocs-field-textarea{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var a='<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';var s=e("verdocs_field_textarea",function(){function e(e){t(this,e);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.el.focus();return[2]}))}))};e.prototype.render=function(){var e=this;var t,l;var s=o(this.field);var u=(l=(t=this.disabled)!==null&&t!==void 0?t:s.disabled)!==null&&l!==void 0?l:false;var c=this.field["rgba"]||i(this.roleindex);if(this.done){return r(n,{class:{done:this.done}},s.value)}return r(n,{class:{required:s.required,disabled:u},style:{backgroundColor:c}},r("textarea",{placeholder:s.placeholder||"",tabIndex:s.order,value:s.value,disabled:u,required:s.required,ref:function(t){return e.el=t}}),this.editable&&r("verdocs-button-panel",{icon:a},r("h6",null,"Field Settings"),r("form",null,r("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}],onChange:function(e){console.log("select changed",e)}}),r("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:function(e){return console.log("ipt",e)}}),r("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:function(e){return console.log("ipt",e)}}))))};return e}());s.style=l}}}));
+//# sourceMappingURL=p-66eacdf0.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/elements/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"names":["verdocsFieldTextareaCss","settingsIcon","VerdocsFieldTextarea","exports","class_1","prototype","focusField","this","el","focus","render","_this","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","done","h","Host","class","value","required","style","placeholder","tabIndex","order","ref","editable","icon","label","options","onChange","e","console","log","onInput"],"mappings":"6sDAAA,IAAMA,EAA0B,2yBCMhC,IAAMC,EACJ,6rCAUWC,EAAoBC,EAAA,yBAAA,8CAMyB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,GAAGC,yBAGVL,EAAAC,UAAAK,OAAA,WAAA,IAAAC,EAAAJ,aACE,IAAMK,EAAWC,EAAiBN,KAAKO,OACvC,IAAMC,GAAWC,GAAAC,EAAAV,KAAKQ,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBX,KAAKO,MAAM,SAAWK,EAAQZ,KAAKa,WAE3D,GAAIb,KAAKc,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMd,KAAKc,OAAQT,EAASa,OAGnD,OACEH,EAACC,EAAI,CAACC,MAAO,CAACE,SAAUd,EAASc,SAAUX,SAAQA,GAAGY,MAAO,CAACT,gBAAeA,IAC3EI,EAAA,WAAA,CACEM,YAAahB,EAASgB,aAAe,GACrCC,SAAUjB,EAASkB,MACnBL,MAAOb,EAASa,MAChBV,SAAUA,EACVW,SAAUd,EAASc,SACnBK,IAAK,SAAAvB,GAAE,OAAKG,EAAKH,GAAKA,KAGvBD,KAAKyB,UACJV,EAAA,uBAAA,CAAsBW,KAAMhC,GAC1BqB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEY,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAAST,MAAO,SACxB,CAACS,MAAO,SAAUT,MAAO,WAE3BW,SAAU,SAAAC,GACRC,QAAQC,IAAI,iBAAkBF,MAIlCf,EAAA,qBAAA,CAAoBY,MAAM,aAAaT,MAAM,GAAGG,YAAY,uBAAuBY,QAAS,SAAAH,GAAK,OAAAC,QAAQC,IAAI,MAAOF,MACpHf,EAAA,qBAAA,CAAoBY,MAAM,cAAcT,MAAM,GAAGG,YAAY,sBAAsBY,QAAS,SAAAH,GAAK,OAAAC,QAAQC,IAAI,MAAOF,mBA1EjG","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  textarea {\n    box-sizing: border-box;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{settings.value}</Host>;\n    }\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n        />\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n                onChange={e => {\n                  console.log('select changed', e);\n                }}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+System.register(["./p-97329951.system.js","./p-05eb4fed.system.js","./p-0eee7f43.system.js","./p-af2c2f79.system.js"],(function(e){"use strict";var o,i,t,d,r;return{setters:[function(e){o=e.r;i=e.h;t=e.H},function(e){d=e.g},function(e){r=e.g},function(){}],execute:function(){var a='verdocs-field-radio-button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:"";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var n='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>';var s='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>';var l=e("verdocs_field_radio_button",function(){function e(e){o(this,e);this.field=null;this.option=0;this.disabled=false;this.done=false;this.roleindex=0}e.prototype.render=function(){var e,o;var a=r(this.field);var l=(o=(e=this.disabled)!==null&&e!==void 0?e:a.disabled)!==null&&o!==void 0?o:false;var f=this.field["rgba"]||d(this.roleindex);var b=a.options[this.option];var c="".concat(this.field.name,"-").concat(b.id);if(this.done){return i(t,{class:{done:this.done},style:{maxWidth:"10px"}},i("span",{innerHTML:!!b.selected?s:n}))}return i(t,{class:{required:a.required,disabled:l},style:{backgroundColor:f}},i("input",{id:c,type:"radio",value:b.id,tabIndex:a.order,name:this.field.name,checked:!!b.selected,disabled:l,required:a.required}),i("label",{htmlFor:c}))};return e}());l.style=a}}}));
+//# sourceMappingURL=p-6c2273ee.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsFieldRadioButtonCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadioButton","exports","class_1","prototype","render","settings","getFieldSettings","this","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","option","options","id","concat","name","done","h","Host","class","style","maxWidth","innerHTML","selected","required","type","value","tabIndex","order","checked","htmlFor"],"mappings":"oRAAA,IAAMA,EAA6B,krDCMnC,IAAMC,EAAsB,qNAE5B,IAAMC,EAAoB,kRAUbC,EAAuBC,EAAA,6BAAA,8CAIsB,iBAK/B,gBAKI,gBAKJ,qBAKI,EAE7BC,EAAAC,UAAAC,OAAA,mBACE,IAAMC,EAAWC,EAAiBC,KAAKC,OACvC,IAAMC,GAAWC,GAAAC,EAAAJ,KAAKE,YAAQ,MAAAE,SAAA,EAAAA,EAAIN,EAASI,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBL,KAAKC,MAAM,SAAWK,EAAQN,KAAKO,WAC3D,IAAMC,EAASV,EAASW,QAAQT,KAAKQ,QACrC,IAAME,EAAK,GAAAC,OAAGX,KAAKC,MAAMW,KAAI,KAAAD,OAAIH,EAAOE,IAExC,GAAIV,KAAKa,KAAM,CACb,OACEC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMb,KAAKa,MAAOI,MAAO,CAACC,SAAU,SAChDJ,EAAA,OAAA,CAAMK,YAAaX,EAAOY,SAAW5B,EAAoBD,KAK/D,OACEuB,EAACC,EAAI,CAACC,MAAO,CAACK,SAAUvB,EAASuB,SAAUnB,SAAQA,GAAGe,MAAO,CAACZ,gBAAeA,IAC3ES,EAAA,QAAA,CACEJ,GAAIA,EACJY,KAAK,QACLC,MAAOf,EAAOE,GACdc,SAAU1B,EAAS2B,MACnBb,KAAMZ,KAAKC,MAAMW,KACjBc,UAAWlB,EAAOY,SAClBlB,SAAUA,EACVmB,SAAUvB,EAASuB,WAErBP,EAAA,QAAA,CAAOa,QAASjB,eArDY","sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  &.done input[type='radio'] {\n    margin: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n  }\n\n  &:not(.done) input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        //background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst RadioIconUnselected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\nconst RadioIconSelected = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path></svg>`;\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const option = settings.options[this.option];\n    const id = `${this.field.name}-${option.id}`;\n\n    if (this.done) {\n      return (\n        <Host class={{done: this.done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={!!option.selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <input\n          id={id}\n          type=\"radio\"\n          value={option.id}\n          tabIndex={settings.order}\n          name={this.field.name}\n          checked={!!option.selected}\n          disabled={disabled}\n          required={settings.required}\n        />\n        <label htmlFor={id} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-71de4718.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as i}from"./p-1f1127dd.js";import"./p-21603661.js";const s='verdocs-contact-picker{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;background-color:#ffffff}verdocs-contact-picker form{background-color:#f5f5fa;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form .row{width:300px;display:-ms-flexbox;display:flex;position:relative;margin:0 0 20px 0;-ms-flex-direction:column;flex-direction:column}verdocs-contact-picker form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-contact-picker form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-contact-picker form input:focus{outline:none}verdocs-contact-picker form .dropdown{left:0;right:0;top:49px;z-index:100;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{fill:#666666}verdocs-contact-picker form .dropdown .suggestion .avatar{width:48px;height:48px;-ms-flex:0 0 48px;flex:0 0 48px;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:8px;-moz-column-gap:8px;column-gap:8px;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 c='<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc" focusable="false" aria-hidden="true" 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 a='<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AssignmentIndIcon" tabindex="-1" title="AssignmentInd"><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 n='<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AccountCircleIcon" tabindex="-1" title="AccountCircle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"></path></svg>';const r=class{constructor(t){e(this,t);this.searchContacts=o(this,"searchContacts",7);this.cancel=o(this,"cancel",7);this.next=o(this,"next",7);this.endpoint=i.getDefault();this.templateRole=null;this.contactSuggestions=[];this.name=undefined;this.email=undefined;this.phone=undefined;this.message=undefined;this.showSuggestions=false;this.showMessage=false;this.delegator=false}componentWillLoad(){if(this.templateRole){this.name=this.templateRole.full_name||"";this.email=this.templateRole.email||"";this.phone=this.templateRole.phone||"";this.delegator=this.templateRole.delegator||false;this.message=this.templateRole.message||"";this.showMessage=this.message!==""}}handleNameChange(e){var o;this.name=e.target.value;(o=this.searchContacts)===null||o===void 0?void 0:o.emit({query:this.name})}handleEmailChange(e){this.email=e.target.value}handlePhoneChange(e){this.phone=e.target.value}handleMessageChange(e){this.message=e.target.value}handleCancel(e){var o;e.stopPropagation();this.showSuggestions=false;(o=this.cancel)===null||o===void 0?void 0:o.emit()}handleSubmit(e){var o;e.stopPropagation();this.showSuggestions=false;(o=this.next)===null||o===void 0?void 0:o.emit({full_name:this.name,email:this.email,phone:this.phone,message:this.message,delegator:this.delegator})}handleSelectSuggestion(e,o){e.stopPropagation();this.name=o.name;this.email=o.email;this.phone=o.phone;this.showSuggestions=false}render(){return t("form",{onSubmit:e=>e.preventDefault(),onClick:e=>e.stopPropagation(),autocomplete:"off"},t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-name"},"Name:"),t("input",{id:"verdocs-contact-picker-name",name:"verdocs-contact-picker-name",type:"text","data-lpignore":"true",autocomplete:"off",value:this.name,placeholder:"Recipient Name...",onFocus:()=>{var e;return this.showSuggestions=((e=this.contactSuggestions)===null||e===void 0?void 0:e.length)>0},onInput:e=>this.handleNameChange(e)}),this.showSuggestions&&t("div",{class:"dropdown"},this.contactSuggestions.map((e=>{var o;return t("div",{key:(o=e.id)!==null&&o!==void 0?o:e.name,class:"suggestion",onClick:o=>this.handleSelectSuggestion(o,e)},e.avatar?t("img",{alt:"Avatar",class:"avatar",src:e.avatar}):t("div",{class:"avatar",innerHTML:n}),t("div",{class:"details"},t("div",{class:"name"},e.name),e.email&&t("div",{class:"destination"},e.email),e.phone&&t("div",{class:"destination"},e.phone)))})))),t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-email"},"Email:"),t("input",{id:"verdocs-contact-picker-email",name:"verdocs-contact-picker-email",type:"text","data-lpignore":"true",autoComplete:"off",value:this.email,placeholder:"Email Address...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handleEmailChange(e)})),t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-phone"},"Phone:"),t("input",{id:"verdocs-contact-picker-phone",name:"verdocs-contact-picker-phone",type:"text","data-lpignore":"true",autocomplete:"off",value:this.phone,placeholder:"Phone Number...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handlePhoneChange(e)})),this.showMessage&&t("div",{class:"row"},t("label",{htmlFor:"verdocs-contact-picker-message"},"Message:"),t("input",{id:"verdocs-contact-picker-message",name:"verdocs-contact-picker-message",type:"text","data-lpignore":"true",autocomplete:"off",value:this.message,placeholder:"Invitation Message...",onFocus:()=>this.showSuggestions=false,onInput:e=>this.handleMessageChange(e)})),t("div",{class:"buttons"},t("verdocs-toggle-button",{icon:c,size:"small",active:this.showMessage,onToggle:e=>{this.showMessage=e.detail.active;this.showSuggestions=false}}),t("verdocs-toggle-button",{icon:a,size:"small",active:this.delegator,onToggle:e=>{this.delegator=e.detail.active;this.showSuggestions=false}}),t("div",{class:"flex-fill"}),t("verdocs-button",{variant:"outline",label:"Cancel",size:"small",onClick:e=>this.handleCancel(e)}),t("verdocs-button",{label:"OK",size:"small",onClick:e=>this.handleSubmit(e)})))}};r.style=s;export{r as verdocs_contact_picker};
+//# sourceMappingURL=p-71de4718.entry.js.map

package/dist/verdocs-web-sdk/{p-fac05414.entry.js.map → p-71de4718.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"names":["verdocsContactPickerCss","messageIcon","delegateIcon","placeholderIcon","VerdocsContactPicker","VerdocsEndpoint","getDefault","[object Object]","this","templateRole","name","full_name","email","phone","delegator","message","showMessage","e","target","value","_a","searchContacts","emit","query","stopPropagation","showSuggestions","cancel","next","suggestion","h","onSubmit","preventDefault","onClick","autocomplete","class","htmlFor","id","type","data-lpignore","placeholder","onFocus","contactSuggestions","length","onInput","handleNameChange","map","key","handleSelectSuggestion","avatar","alt","src","innerHTML","autoComplete","handleEmailChange","handlePhoneChange","handleMessageChange","icon","size","active","onToggle","detail","variant","label","handleCancel","handleSubmit"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  font-family: $verdocs-primary-font;\n  background-color: $verdocs-grey-4;\n\n  form {\n    background-color: $verdocs-grey-3;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .row {\n      width: 300px;\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 100;\n      position: absolute;\n      background: #ffffff;\n      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n      .suggestion {\n        display: flex;\n        padding: 6px 12px;\n        align-items: center;\n        flex-direction: row;\n\n        svg {\n          fill: #666666;\n        }\n\n        .avatar {\n          width: 48px;\n          height: 48px;\n          flex: 0 0 48px;\n          margin-right: 8px;\n          border-radius: 100%;\n        }\n\n        .details {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .name {\n          font-size: 16px;\n          font-weight: 500;\n          margin-bottom: 3px;\n          color: $verdocs-grey-0;\n        }\n\n        .destination {\n          font-size: 14px;\n          margin-bottom: 3px;\n          color: $verdocs-grey-1;\n        }\n\n        &:hover {\n          background: #eee;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-contact-picker/verdocs-contact-picker.scss?tag=verdocs-contact-picker","src/components/elements/verdocs-contact-picker/verdocs-contact-picker.tsx"],"names":["verdocsContactPickerCss","messageIcon","delegateIcon","placeholderIcon","VerdocsContactPicker","VerdocsEndpoint","getDefault","[object Object]","this","templateRole","name","full_name","email","phone","delegator","message","showMessage","e","target","value","_a","searchContacts","emit","query","stopPropagation","showSuggestions","cancel","next","suggestion","h","onSubmit","preventDefault","onClick","autocomplete","class","htmlFor","id","type","data-lpignore","placeholder","onFocus","contactSuggestions","length","onInput","handleNameChange","map","key","handleSelectSuggestion","avatar","alt","src","innerHTML","autoComplete","handleEmailChange","handlePhoneChange","handleMessageChange","icon","size","active","onToggle","detail","variant","label","handleCancel","handleSubmit"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-contact-picker {\n  font-family: $verdocs-primary-font;\n  background-color: $verdocs-grey-4;\n\n  form {\n    background-color: $verdocs-grey-3;\n    padding: 12px;\n    display: flex;\n    flex-direction: column;\n\n    .row {\n      width: 300px;\n      display: flex;\n      position: relative;\n      margin: 0 0 20px 0;\n      flex-direction: column;\n    }\n\n    label {\n      display: block;\n      font-size: 14px;\n      font-weight: 500;\n      margin: 0 0 4px 0;\n      color: $verdocs-bg-4;\n    }\n\n    input {\n      border: none;\n      font-size: 18px;\n      padding: 3px 6px 3px 0;\n      background: transparent;\n      border-bottom: 1px solid $verdocs-dark-blue;\n\n      &:focus {\n        outline: none;\n      }\n    }\n\n    .dropdown {\n      left: 0;\n      right: 0;\n      top: 49px;\n      z-index: 100;\n      position: absolute;\n      background: #ffffff;\n      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);\n\n      .suggestion {\n        display: flex;\n        padding: 6px 12px;\n        align-items: center;\n        flex-direction: row;\n\n        svg {\n          fill: #666666;\n        }\n\n        .avatar {\n          width: 48px;\n          height: 48px;\n          flex: 0 0 48px;\n          margin-right: 8px;\n          border-radius: 100%;\n        }\n\n        .details {\n          display: flex;\n          flex-direction: column;\n        }\n\n        .name {\n          font-size: 16px;\n          font-weight: 500;\n          margin-bottom: 3px;\n          color: $verdocs-grey-0;\n        }\n\n        .destination {\n          font-size: 14px;\n          margin-bottom: 3px;\n          color: $verdocs-grey-1;\n        }\n\n        &:hover {\n          background: #eee;\n          cursor: pointer;\n        }\n      }\n    }\n  }\n\n  .buttons {\n    display: flex;\n    column-gap: 8px;\n    margin-top: 16px;\n    flex-direction: row;\n\n    .flex-fill {\n      flex: 1;\n    }\n  }\n\n  ::placeholder {\n    color: $verdocs-bg-2;\n  }\n\n  // @see https://community.logmein.com/t5/LastPass-Support-Discussions/placeholder-text-overrides-data-lpignore-quot-true-quot/td-p/295135\n  // LastPass is ignoring the data-lpignore attribute in some cases\n  [data-lastpass-icon-root] {\n    display: none !important;\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IRole} from '@verdocs/js-sdk/Templates/Types';\nimport {Component, h, Event, EventEmitter, Prop, State} from '@stencil/core';\n\nconst messageIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z\"></path></svg>';\n\nconst delegateIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AssignmentIndIcon\" tabindex=\"-1\" title=\"AssignmentInd\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z\"></path></svg>';\n\nconst placeholderIcon =\n  '<svg class=\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-zjt8k\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-testid=\"AccountCircleIcon\" tabindex=\"-1\" title=\"AccountCircle\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z\"></path></svg>';\n\nexport interface IContactSearchEvent {\n  // The text the user has entered in the search field\n  query: string;\n}\n\nexport interface IContactSelectEvent {\n  full_name: string;\n  email: string;\n  phone: string;\n  message: string;\n  delegator: boolean;\n}\n\nexport interface IEmailContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone?: string;\n\n  [key: string]: any;\n}\n\nexport interface IPhoneContact {\n  // Optional but recommended. An internal identifier used to identify the contact in the calling system.\n  id?: any;\n\n  // The user's avatar. If not set, a placeholder will be shown. To hide avatars entirely, use CSS to set\n  // `verdocs-contact-picker .avatar { display: none; }`\n  avatar?: string;\n\n  // The recipient's name, as it should be displayed to the user.\n  name: string;\n\n  // The email address for the contact.\n  email?: string;\n\n  // An optional phone number for the contact. This number must be able SMS messages. If both email and phone are provided,\n  // notifications will be sent to both locations.\n  phone: string;\n\n  [key: string]: any;\n}\n\n/**\n * Displays a contact picker suitable for filling out Recipient objects when sending Documents.\n *\n * This picker can also be integrated with a backend to provide contact list / suggestion / address-book style behavior. As the\n * user interacts with the component, the text entered in the name field is sent back to the parent via the `searchContacts` event.\n * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be\n * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as \"Recently Used\" contacts, or\n * to always display the user's own contact record.\n */\n@Component({\n  tag: 'verdocs-contact-picker',\n  styleUrl: 'verdocs-contact-picker.scss',\n  shadow: false,\n})\nexport class VerdocsContactPicker {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The role that this contact will be assigned to.\n   */\n  @Prop() templateRole: IRole | null = null;\n\n  /**\n   * If set, suggestions will be displayed in a drop-down list to the user. It is recommended that the number\n   * of suggestions be limited to the 5 best matching records.\n   */\n  @Prop() contactSuggestions: (IEmailContact | IPhoneContact)[] = [];\n\n  /**\n   * Event fired when the user enters text in the search field. The calling application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  /**\n   * Event fired when the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the user changes the type.\n   */\n  @Event({composed: true}) next: EventEmitter<IContactSelectEvent>;\n\n  @State() name: string;\n  @State() email: string;\n  @State() phone: string;\n  @State() message: string;\n  @State() showSuggestions: boolean = false;\n  @State() showMessage: boolean = false;\n  @State() delegator: boolean = false;\n\n  componentWillLoad() {\n    if (this.templateRole) {\n      this.name = this.templateRole.full_name || '';\n      this.email = this.templateRole.email || '';\n      this.phone = this.templateRole.phone || '';\n      this.delegator = this.templateRole.delegator || false;\n      this.message = this.templateRole.message || '';\n      this.showMessage = this.message !== '';\n    }\n  }\n\n  handleNameChange(e: any) {\n    this.name = e.target.value;\n    this.searchContacts?.emit({query: this.name});\n  }\n\n  handleEmailChange(e: any) {\n    this.email = e.target.value;\n  }\n\n  handlePhoneChange(e: any) {\n    this.phone = e.target.value;\n  }\n\n  handleMessageChange(e: any) {\n    this.message = e.target.value;\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.showSuggestions = false;\n    this.cancel?.emit();\n  }\n\n  handleSubmit(e) {\n    e.stopPropagation();\n\n    this.showSuggestions = false;\n    this.next?.emit({\n      full_name: this.name,\n      email: this.email,\n      phone: this.phone,\n      message: this.message,\n      delegator: this.delegator,\n    });\n  }\n\n  handleSelectSuggestion(e: any, suggestion: IEmailContact | IPhoneContact) {\n    e.stopPropagation();\n\n    this.name = suggestion.name;\n    this.email = suggestion.email;\n    this.phone = suggestion.phone;\n    this.showSuggestions = false;\n  }\n\n  render() {\n    return (\n      <form onSubmit={e => e.preventDefault()} onClick={e => e.stopPropagation()} autocomplete=\"off\">\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-name\">Name:</label>\n          <input\n            id=\"verdocs-contact-picker-name\"\n            name=\"verdocs-contact-picker-name\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.name}\n            placeholder=\"Recipient Name...\"\n            onFocus={() => (this.showSuggestions = this.contactSuggestions?.length > 0)}\n            // onBlur={() => (this.showSuggestions = false)}\n            onInput={e => this.handleNameChange(e)}\n          />\n\n          {this.showSuggestions && (\n            <div class=\"dropdown\">\n              {this.contactSuggestions.map(suggestion => (\n                <div key={suggestion.id ?? suggestion.name} class=\"suggestion\" onClick={e => this.handleSelectSuggestion(e, suggestion)}>\n                  {suggestion.avatar ? <img alt=\"Avatar\" class=\"avatar\" src={suggestion.avatar} /> : <div class=\"avatar\" innerHTML={placeholderIcon} />}\n                  <div class=\"details\">\n                    <div class=\"name\">{suggestion.name}</div>\n                    {suggestion.email && <div class=\"destination\">{suggestion.email}</div>}\n                    {suggestion.phone && <div class=\"destination\">{suggestion.phone}</div>}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-email\">Email:</label>\n          <input\n            id=\"verdocs-contact-picker-email\"\n            name=\"verdocs-contact-picker-email\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autoComplete=\"off\"\n            value={this.email}\n            placeholder=\"Email Address...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handleEmailChange(e)}\n          />\n        </div>\n\n        <div class=\"row\">\n          <label htmlFor=\"verdocs-contact-picker-phone\">Phone:</label>\n          <input\n            id=\"verdocs-contact-picker-phone\"\n            name=\"verdocs-contact-picker-phone\"\n            type=\"text\"\n            data-lpignore=\"true\"\n            autocomplete=\"off\"\n            value={this.phone}\n            placeholder=\"Phone Number...\"\n            onFocus={() => (this.showSuggestions = false)}\n            onInput={e => this.handlePhoneChange(e)}\n          />\n        </div>\n\n        {this.showMessage && (\n          <div class=\"row\">\n            <label htmlFor=\"verdocs-contact-picker-message\">Message:</label>\n            <input\n              id=\"verdocs-contact-picker-message\"\n              name=\"verdocs-contact-picker-message\"\n              type=\"text\"\n              data-lpignore=\"true\"\n              autocomplete=\"off\"\n              value={this.message}\n              placeholder=\"Invitation Message...\"\n              onFocus={() => (this.showSuggestions = false)}\n              onInput={e => this.handleMessageChange(e)}\n            />\n          </div>\n        )}\n\n        <div class=\"buttons\">\n          <verdocs-toggle-button\n            icon={messageIcon}\n            size=\"small\"\n            active={this.showMessage}\n            onToggle={e => {\n              this.showMessage = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n          <verdocs-toggle-button\n            icon={delegateIcon}\n            size=\"small\"\n            active={this.delegator}\n            onToggle={e => {\n              this.delegator = e.detail.active;\n              this.showSuggestions = false;\n            }}\n          />\n\n          <div class=\"flex-fill\" />\n\n          <verdocs-button variant=\"outline\" label=\"Cancel\" size=\"small\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"OK\" size=\"small\" onClick={e => this.handleSubmit(e)} />\n        </div>\n      </form>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-77a77df6.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as s,H as o}from"./p-ff1278ed.js";import{g as t}from"./p-c2cc4492.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-1f1127dd.js";import{a as c}from"./p-208a3320.js";import"./p-21603661.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-77a77df6.entry.js.map

package/dist/verdocs-web-sdk/{p-d1256888.entry.js.map → p-77a77df6.entry.js.map}

@@ -1 +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"]}
+{"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-8251b9eb.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as s}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as r}from"./p-1f1127dd.js";import"./p-21603661.js";const c='verdocs-search{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}';const o=class{constructor(s){e(this,s);this.endpoint=r.getDefault()}render(){return s("div",{class:"container"},s("verdocs-search-box",{endpoint:this.endpoint}),s("div",{class:"boxes"},s("verdocs-search-activity",{type:"recent",endpoint:this.endpoint}),s("verdocs-search-activity",{type:"saved",endpoint:this.endpoint}),s("verdocs-search-activity",{type:"starred",endpoint:this.endpoint}),s("verdocs-quick-functions",{endpoint:this.endpoint})))}};o.style=c;export{o as verdocs_search};
+//# sourceMappingURL=p-8251b9eb.entry.js.map

package/dist/verdocs-web-sdk/{p-2fe5b678.entry.js.map → p-8251b9eb.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/embeds/verdocs-search/verdocs-search.scss?tag=verdocs-search","src/components/embeds/verdocs-search/verdocs-search.tsx"],"names":["verdocsSearchCss","VerdocsSearch","VerdocsEndpoint","getDefault","[object Object]","h","class","endpoint","this","type"],"mappings":"uGAAA,MAAMA,EAAmB,ymBCQZC,EAAa,6CAIYC,EAAgBC,aAEpDC,SACE,OACEC,EAAA,MAAA,CAAKC,MAAM,aACTD,EAAA,qBAAA,CAAoBE,SAAUC,KAAKD,WAEnCF,EAAA,MAAA,CAAKC,MAAM,SACTD,EAAA,0BAAA,CAAyBI,KAAK,SAASF,SAAUC,KAAKD,WACtDF,EAAA,0BAAA,CAAyBI,KAAK,QAAQF,SAAUC,KAAKD,WACrDF,EAAA,0BAAA,CAAyBI,KAAK,UAAUF,SAAUC,KAAKD,WACvDF,EAAA,0BAAA,CAAyBE,SAAUC,KAAKD","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-search {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  background-color: $dark-bg;\n\n  search-box {\n    display: flex;\n    flex-direction: column;\n    margin: 20px 10px;\n  }\n\n  .boxes {\n    flex-wrap: wrap;\n    display: flex;\n    flex-direction: row;\n    margin: 20px 0;\n  }\n\n  search-recent,\n  search-saved,\n  search-quick-functions,\n  search-starred {\n    display: flex;\n    margin: 0 20px 20px 0;\n  }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\n\n@Component({\n  tag: 'verdocs-search',\n  styleUrl: 'verdocs-search.scss',\n  shadow: false,\n})\nexport class VerdocsSearch {\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  render() {\n    return (\n      <div class=\"container\">\n        <verdocs-search-box endpoint={this.endpoint} />\n\n        <div class=\"boxes\">\n          <verdocs-search-activity type=\"recent\" endpoint={this.endpoint} />\n          <verdocs-search-activity type=\"saved\" endpoint={this.endpoint} />\n          <verdocs-search-activity type=\"starred\" endpoint={this.endpoint} />\n          <verdocs-quick-functions endpoint={this.endpoint} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/embeds/verdocs-search/verdocs-search.scss?tag=verdocs-search","src/components/embeds/verdocs-search/verdocs-search.tsx"],"names":["verdocsSearchCss","VerdocsSearch","VerdocsEndpoint","getDefault","[object Object]","h","class","endpoint","this","type"],"mappings":"+HAAA,MAAMA,EAAmB,ymBCQZC,EAAa,6CAIYC,EAAgBC,aAEpDC,SACE,OACEC,EAAA,MAAA,CAAKC,MAAM,aACTD,EAAA,qBAAA,CAAoBE,SAAUC,KAAKD,WAEnCF,EAAA,MAAA,CAAKC,MAAM,SACTD,EAAA,0BAAA,CAAyBI,KAAK,SAASF,SAAUC,KAAKD,WACtDF,EAAA,0BAAA,CAAyBI,KAAK,QAAQF,SAAUC,KAAKD,WACrDF,EAAA,0BAAA,CAAyBI,KAAK,UAAUF,SAAUC,KAAKD,WACvDF,EAAA,0BAAA,CAAyBE,SAAUC,KAAKD","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-search {\n  font-family: $verdocs-primary-font;\n  display: flex;\n  background-color: $dark-bg;\n\n  search-box {\n    display: flex;\n    flex-direction: column;\n    margin: 20px 10px;\n  }\n\n  .boxes {\n    flex-wrap: wrap;\n    display: flex;\n    flex-direction: row;\n    margin: 20px 0;\n  }\n\n  search-recent,\n  search-saved,\n  search-quick-functions,\n  search-starred {\n    display: flex;\n    margin: 0 20px 20px 0;\n  }\n}\n","import {Component, h, Prop} from '@stencil/core';\nimport {VerdocsEndpoint} from '@verdocs/js-sdk';\n\n@Component({\n  tag: 'verdocs-search',\n  styleUrl: 'verdocs-search.scss',\n  shadow: false,\n})\nexport class VerdocsSearch {\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  render() {\n    return (\n      <div class=\"container\">\n        <verdocs-search-box endpoint={this.endpoint} />\n\n        <div class=\"boxes\">\n          <verdocs-search-activity type=\"recent\" endpoint={this.endpoint} />\n          <verdocs-search-activity type=\"saved\" endpoint={this.endpoint} />\n          <verdocs-search-activity type=\"starred\" endpoint={this.endpoint} />\n          <verdocs-quick-functions endpoint={this.endpoint} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}