@verdocs/web-sdk 6.13.3 → 6.14.0

package/dist/components/p-DGNIsXfr.js

@@ -1,2 +0,0 @@
-import{p as e,H as c,h as o,d as t,t as r}from"./p-yZBlG3YQ.js";const s=()=>`@charset "UTF-8";verdocs-checkbox{line-height:18px;font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-checkbox label>input[type=checkbox]{display:none}verdocs-checkbox label>input[type=checkbox]+*::before{content:"";width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;line-height:20px;border-radius:2px;border-style:solid;border-width:0.1rem;display:inline-block;vertical-align:bottom;border-color:#aeb4bf}verdocs-checkbox label>input[type=checkbox]:checked+*::before{content:"✓";color:white;text-align:center;background:var(--verdocs-checkbox-color, #55bc81);border-color:var(--verdocs-checkbox-color, #55bc81)}verdocs-checkbox.dark label>input[type=checkbox]+*::before{border-color:#ffffff}verdocs-checkbox.dark label>input[type=checkbox]:checked+*::before{background:var(--verdocs-checkbox-color, #55bc81);border-color:var(--verdocs-checkbox-color, #55bc81)}verdocs-checkbox.small label>input[type=checkbox]+*::before{width:16px;height:16px;line-height:16px}`;const b=e(class e extends c{constructor(e){super();if(e!==false){this.__registerHost()}this.checked=false;this.name="";this.label="";this.value="";this.theme="light";this.size="normal";this.disabled=false}render(){return o(t,{key:"cf97024379b4e60ecc00d9b9a13a5dd6026903c6",class:{disabled:this.disabled,[this.theme]:true,[this.size]:true}},o("label",{key:"a2b44d29b3e58be78b59998d94bcec07719645b3"},o("input",{key:"2821ad886055aeb613ed490461007ed6628d159f",type:"checkbox",value:this.value,name:this.name,checked:this.checked,disabled:this.disabled}),o("span",{key:"d72a5ab4951ac6650bc330419880742b011d4729"},this.label)))}static get style(){return s()}},[0,"verdocs-checkbox",{checked:[4],name:[1],label:[1],value:[1],theme:[1],size:[1],disabled:[4]}]);function i(){if(typeof customElements==="undefined"){return}const e=["verdocs-checkbox"];e.forEach((e=>{switch(e){case"verdocs-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),b)}break}}))}export{b as V,i as d};
-//# sourceMappingURL=p-DGNIsXfr.js.map

package/dist/components/p-DGNIsXfr.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["verdocsCheckboxCss","VerdocsCheckbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","name","label","value","theme","size","disabled","render","h","Host","key","class","type"],"sources":["src/components/controls/verdocs-checkbox/verdocs-checkbox.scss?tag=verdocs-checkbox","src/components/controls/verdocs-checkbox/verdocs-checkbox.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// Your periodic reminder that it's 2022 and you still can't style HTML checkboxes\nverdocs-checkbox {\n  line-height: 18px;\n  font-family: $verdocs-primary-font;\n\n  label>input[type='checkbox'] {\n    display: none;\n  }\n\n  label>input[type='checkbox']+*::before {\n    content: '';\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    margin-right: 8px;\n    line-height: 20px;\n    border-radius: 2px;\n    border-style: solid;\n    border-width: 0.1rem;\n    display: inline-block;\n    vertical-align: bottom;\n    border-color: $verdocs-grey-2;\n  }\n\n\n  label>input[type='checkbox']:checked+*::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: var(--verdocs-checkbox-color, $verdocs-green);\n    border-color: var(--verdocs-checkbox-color, $verdocs-green);\n  }\n\n  &.dark {\n    label>input[type='checkbox']+*::before {\n      border-color: $verdocs-grey-4;\n    }\n\n    label>input[type='checkbox']:checked+*::before {\n      background: var(--verdocs-checkbox-color, $verdocs-green);\n      border-color: var(--verdocs-checkbox-color, $verdocs-green);\n    }\n  }\n\n  &.small {\n    label>input[type='checkbox']+*::before {\n      width: 16px;\n      height: 16px;\n      line-height: 16px;\n    }\n  }\n}","import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a check box. Note that this is different from the `verdocs-field-checkbox` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple check\n * box for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML checkbox. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```ts\n * <verdocs-checkbox\n *    value=\"on\"\n *    name=\"thingEnabled\"\n *    checked={this.thingEnabled}\n *    onInput={(e: any) => (this.thingEnabled = e.target.checked)}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-checkbox',\n  styleUrl: 'verdocs-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsCheckbox {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Label to display. Leave blank for no label. The label will be displayed to the right of the checkbox, but may be\n   * repositioned with CSS.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Value to track with the input. Value is not used internally by this component but is sometimes useful to set\n   * because it can be retrieved in event handlers via e.target.value. This can be used to identify which\n   * checkbox was clicked in a checkbox group.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Style of checkbox to render. Use 'dark' when rendering on a dark background.\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  /**\n   * Size of checkbox to render.\n   */\n  @Prop() size: 'normal' | 'small' = 'normal';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled, [this.theme]: true, [this.size]: true}}>\n        <label>\n          <input type=\"checkbox\" value={this.value} name={this.name} checked={this.checked} disabled={this.disabled} />\n          <span>{this.label}</span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAqB,IAAM,s/B,MCwBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAmB,MAKnBD,KAAAE,KAAe,GAMfF,KAAAG,MAAgB,GAOhBH,KAAAI,MAAgB,GAKhBJ,KAAAK,MAA0B,QAK1BL,KAAAM,KAA2B,SAK3BN,KAAAO,SAAqB,KAY9B,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAACL,SAAUP,KAAKO,SAAU,CAACP,KAAKK,OAAQ,KAAM,CAACL,KAAKM,MAAO,OACtEG,EAAA,SAAAE,IAAA,4CACEF,EAAA,SAAAE,IAAA,2CAAOE,KAAK,WAAWT,MAAOJ,KAAKI,MAAOF,KAAMF,KAAKE,KAAMD,QAASD,KAAKC,QAASM,SAAUP,KAAKO,WACjGE,EAAA,QAAAE,IAAA,4CAAOX,KAAKG,Q","ignoreList":[]}

package/dist/components/p-DRP4Xxiu.js

@@ -1,2 +0,0 @@
-import{p as e,H as t,c as s,h as o,d as i,F as l,t as a}from"./p-yZBlG3YQ.js";import{i as d}from"./p-COaijEV0.js";import{VerdocsEndpoint as r,getTemplate as n,updateField as c,createField as p,integerSequence as m}from"@verdocs/js-sdk";import{g as h,h as v,i as f,j as g,d as u,k as x}from"./p-BCwFpXpV.js";import{D as w}from"./p-C7k2AOsW.js";import{V as b}from"./p-D97GxsI-.js";import{S as k}from"./p-C1sRVZWv.js";import{S as E}from"./p-C7hFgM52.js";import{d as q}from"./p-Bb5V9TQx.js";import{d as C}from"./p-DGNIsXfr.js";import{d as Z}from"./p-C-v22G3g.js";import{d as V}from"./p-C90lxyUX.js";import{d as M}from"./p-BKLlc2r0.js";import{d as y}from"./p-1FjgijEi.js";import{d as H}from"./p-D0MFs2Dv.js";import{d as j}from"./p-9kEZy9MP.js";import{d as S}from"./p-B1AE2j97.js";import{d as L}from"./p-ek0LNMtb.js";import{d as D}from"./p-CQzPkAVQ.js";import{d as I}from"./p-B4tpmyon.js";import{d as Q}from"./p-CFacV7mg.js";import{d as F}from"./p-CEcG_ay-.js";import{d as B}from"./p-C8yiLtCJ.js";import{d as z}from"./p-DHzSlpJw.js";import{d as N}from"./p-DqzFuSNN.js";import{d as T}from"./p-5FU3bYQ3.js";import{d as P}from"./p-DhOuB4nS.js";import{d as _}from"./p-Bodw4NVB.js";import{d as R}from"./p-BhG0HGg6.js";import{d as $}from"./p-Bxvw_LqR.js";import{d as O}from"./p-PfdIkMoz.js";import{d as U}from"./p-B-ul_Soj.js";import{d as Y}from"./p-DM3wePVp.js";const A=()=>`verdocs-template-fields{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);position:relative;display:block;min-height:600px}verdocs-template-fields .page-0{padding:65px 15px 0 15px;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .page-0 .user-placed-fields{height:100px;position:relative;background:#ffffff;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-fields .page-0 .user-placed-fields .title{top:0;left:0;color:#ffffff;font-size:12px;padding:3px 6px;font-weight:bold;position:absolute;background:#46497d}verdocs-template-fields .pages{display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-template-fields .pages div,verdocs-template-fields .pages canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-fields .pages .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-template-fields .pages .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-template-fields .pages .document-separator:first-child{margin-top:0}verdocs-template-fields #verdocs-template-fields-toolbar{width:100%;height:50px;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;font-weight:700;padding:0 20px 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#f5f5fa;-ms-flex-pack:center;justify-content:center;background:#46497d}verdocs-template-fields #verdocs-template-fields-toolbar>verdocs-select-input{margin:0}verdocs-template-fields #verdocs-template-fields-toolbar svg{width:24px;height:24px}verdocs-template-fields #verdocs-template-fields-toolbar .add-for{margin:0;font-weight:500;color:#f5f5fa}verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{margin:0 20px 0 0}@media all and (max-width: 1000px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;padding:0 10px 0 0}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.8);transform:scale(0.8)}verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}@media all and (max-width: 600px){verdocs-template-fields #verdocs-template-fields-toolbar{-webkit-column-gap:6px;-moz-column-gap:6px;column-gap:6px}verdocs-template-fields #verdocs-template-fields-toolbar svg{-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-template-fields #verdocs-template-fields-toolbar .separator,verdocs-template-fields #verdocs-template-fields-toolbar .add-for,verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input{display:none}}verdocs-template-fields.placing-attachment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-checkbox{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-date{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-dropdown{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-initial{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-payment{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-radio{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-signature{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textarea{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E") 16 16, pointer}verdocs-template-fields.placing-textbox{cursor:url("data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A") 0 14, pointer}verdocs-template-fields.placing-timestamp{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z'%3E%3C/path%3E%3C/svg%3E") 16 16, pointer}`;const G='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';const W='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';const X='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z"/></svg>';const J='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';const K='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';const ee='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';const te='<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" stroke-width="1.5" stroke="currentColor"><path stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" /></svg>';const se='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" /></svg>';const oe='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.707 14.707"><g><rect x="6.275" y="0" fill="#ffffff7f" width="1" height="15"/></g></svg>';const ie=[{id:"signature",tooltip:"Signature",icon:K,class:"signature"},{id:"initial",tooltip:"Initials",icon:ee,class:"initial"},{id:"sep1",tooltip:"",icon:oe,class:"separator"},{id:"textbox",tooltip:"Text Box",icon:G,class:"textbox"},{id:"checkbox",tooltip:"Check Box",icon:W,class:"checkbox"},{id:"radio",tooltip:"Radio Button",icon:X,class:"radio"},{id:"dropdown",tooltip:"Dropdown",icon:te,class:"dropdown"},{id:"sep2",tooltip:"",icon:oe,class:"separator"},{id:"date",tooltip:"Date",icon:J,class:"date"},{id:"attachment",tooltip:"Attachment",icon:se,class:"attachment"}];const le=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.sdkError=s(this,"sdkError");this.templateUpdated=s(this,"templateUpdated");this.templateListenerId=null;this.endpoint=r.getDefault();this.templateId=null;this.toolbarTargetId=null;this.placing=null;this.showMustSelectRole=false;this.selectedRoleName="";this.loading=true;this.template=null;this.pageHeights={};this.cachedPageInfo={}}onTemplateIdChanged(){this.listenToTemplate()}handleKeyDown(e){if(e.key==="Escape"){this.placing=null}}handleFieldSettingsChanged(){var e;(e=this.templateUpdated)===null||e===void 0?void 0:e.emit({endpoint:this.endpoint,template:this.template,event:"updated-field"})}handleFieldDeleted(){var e;(e=this.templateUpdated)===null||e===void 0?void 0:e.emit({endpoint:this.endpoint,template:this.template,event:"deleted-field"})}async componentWillLoad(){var e,t,s;try{this.endpoint.loadSession();if(!this.templateId){console.log(`[FIELDS] Missing required template ID ${this.templateId}`);return}if(!this.endpoint.session){console.log("[FIELDS] Unable to start builder session, must be authenticated");return}this.listenToTemplate()}catch(o){console.log("[FIELDS] Error with fields session",o);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new k(o.message,(t=o.response)===null||t===void 0?void 0:t.status,(s=o.response)===null||s===void 0?void 0:s.data))}}componentDidRender(){d.dynamicDrop(true);document.querySelectorAll(".verdocs-field").forEach((e=>{this.makeDraggable(e)}));const e=this.toolbarTargetId?document.getElementById(this.toolbarTargetId):null;const t=document.getElementById("verdocs-template-fields-toolbar");if(e&&t){t.remove();e.append(t)}}componentWillUpdate(){var e,t;const s=[...((e=this.template)===null||e===void 0?void 0:e.roles)||[]].sort(((e,t)=>{var s,o;return((s=e.sequence)!==null&&s!==void 0?s:0)-((o=t.sequence)!==null&&o!==void 0?o:0)}));if(!this.selectedRoleName||!s.find((e=>e&&e.name===this.selectedRoleName))){this.selectedRoleName=((t=s[0])===null||t===void 0?void 0:t.name)||"";console.log("[FIELDS] Selected new role",this.selectedRoleName)}}disconnectedCallback(){this.unlistenToTemplate()}async listenToTemplate(){this.unlistenToTemplate();E.subscribe("templates",this.templateId,(()=>n(this.endpoint,this.templateId)),false,(e=>{var t;console.log("Template updated");this.template=e;this.loading=false;if(!this.selectedRoleName){const s=[...e.roles||[]].sort(((e,t)=>{var s,o;return((s=e.sequence)!==null&&s!==void 0?s:0)-((o=t.sequence)!==null&&o!==void 0?o:0)}));this.selectedRoleName=((t=s[0])===null||t===void 0?void 0:t.name)||""}}))}unlistenToTemplate(){if(this.templateListenerId){E.store.delListener(this.templateListenerId);this.templateListenerId=null}}handlePageRendered(e){var t,s;var o,i;const l=e.detail;console.log("[FIELDS] Page rendered",l.documentId,l.pageNumber,l.xScale,l.yScale);(t=(o=this.cachedPageInfo)[i=l.documentId])!==null&&t!==void 0?t:o[i]={};this.cachedPageInfo[l.documentId][l.pageNumber]=l;this.pageHeights[l.pageNumber]=l.naturalHeight;(((s=this.template)===null||s===void 0?void 0:s.fields)||[]).filter((e=>e&&e.page===l.pageNumber)).forEach((e=>{const t=h(e);const s=document.getElementById(t);if(s){s.setAttribute("templateid",this.templateId);s.setAttribute("fieldname",e.name);s.setAttribute("documentid",String(e.document_id));s.setAttribute("pagenumber",String(e.page));s.setAttribute("xScale",String(l.xScale));s.setAttribute("yScale",String(l.yScale));this.makeDraggable(s)}}))}makeDraggable(e){d(e).draggable({listeners:{move:this.handleMoveField.bind(this),end:this.handleMoveEnd.bind(this)}})}async handleMoveField(e){const t=+(e.target.getAttribute("posX")||0);const s=+(e.target.getAttribute("posY")||0);const o=+(e.target.getAttribute("xScale")||1);const i=+(e.target.getAttribute("yScale")||1);const l=e.dx/o+t;const a=e.dy/i+s;e.target.setAttribute("posX",l);e.target.setAttribute("posy",a);v(e.target,"translate",`${l}px, ${a}px`)}async handleMoveEnd(e){var t,s,o,i,l,a,d,r;const n=e.target.getAttribute("fieldname");const p=(((t=this.template)===null||t===void 0?void 0:t.fields)||[]).find((e=>e.name===n));if(!p){console.log("[FIELDS] Unable to find field",n,e.target);return}const m=e.target.getAttribute("pagenumber");const h=e.target.getAttribute("documentid");let{naturalWidth:v=612,naturalHeight:w=792,renderedHeight:q=792}=this.cachedPageInfo[h][m];const C=e.target.getBoundingClientRect();const Z=e.target.parentElement;const V=Z.getBoundingClientRect();const M=p.width||x(p.type);const y=p.height||u(p.type);const H=Math.max(C.left-V.left,0);let j=Math.max(q-(V.bottom-C.bottom),0);let S=parseInt(m);if(j>q){S=Math.min(S+1,((i=(o=((s=this.template)===null||s===void 0?void 0:s.documents)||[])===null||o===void 0?void 0:o[0])===null||i===void 0?void 0:i.pages)||1);j-=q;q=this.cachedPageInfo[h][S].renderedHeight;console.log("Next page",{newPageNumber:S,newY:j,renderedHeight:q})}else if(j<0){S=Math.max(S-1,1);q=this.cachedPageInfo[h][S].renderedHeight;j+=q;console.log("[FIELDS] Next page",{newPageNumber:S,newY:j,renderedHeight:q})}const{x:L,y:D}=this.viewCoordinatesToPageCoordinates(H,j,h,m,v-M,w-y);try{const t={x:L,y:D,page:S};const s=await c(this.endpoint,this.templateId,n,t);console.log("[FIELDS] Updated",s);const o=JSON.parse(JSON.stringify(this.template));const i=o.fields.findIndex((e=>e.name===n));if(i>-1){o.fields[i]=s}E.updateTemplate(this.templateId,o);e.target.removeAttribute("posX");e.target.removeAttribute("posY");f(e.target);const{xScale:a=1,yScale:d=1}=this.cachedPageInfo[h][m];g(e.target,s,a,d);(l=this.templateUpdated)===null||l===void 0?void 0:l.emit({endpoint:this.endpoint,template:o,event:"updated-field"})}catch(t){b("Error updating field, please try again later",{style:"error"});console.log("[FIELDS] Error updating field",t);(a=this.sdkError)===null||a===void 0?void 0:a.emit(new k(t.message,(d=t.response)===null||d===void 0?void 0:d.status,(r=t.response)===null||r===void 0?void 0:r.data));e.target.removeAttribute("posX");e.target.removeAttribute("posY");f(e.target)}}generateFieldName(e,t){var s;let o=1;let i;do{i=`${e}P${t}-${o}`;o++}while((((s=this.template)===null||s===void 0?void 0:s.fields)||[]).some((e=>e&&e.name===i)));return i}viewCoordinatesToPageCoordinates(e,t,s,o,i,l){const{xScale:a=1,yScale:d=1,renderedHeight:r=792}=this.cachedPageInfo[s][o];const n=Math.floor(Math.min(e/a,i));const c=Math.floor(Math.min(Math.max(r-t,0)/d,l));return{x:n,y:c}}async handleClickPage(e,t,s){var o;if(this.placing){const i=e.offsetX;const l=e.offsetY;const a=x(this.placing);const d=u(this.placing);const r=this.cachedPageInfo[t][s];const{naturalWidth:n=612,naturalHeight:c=792}=r;const m=this.viewCoordinatesToPageCoordinates(i,l,t,s,n-a,c-d);const h=Math.floor(m.x);const v=Math.floor(m.y);const f={name:this.generateFieldName(this.placing,s),role_name:this.selectedRoleName,template_id:this.templateId,document_id:r.documentId,type:this.placing,required:this.placing!=="radio"&&this.placing!=="attachment"&&this.placing!=="checkbox",page:s,validator:null,label:null,default:null,placeholder:null,group:null,settings:{},x:h,y:v,width:a,height:d,multiline:false,readonly:false,options:this.placing==="radio"?[{id:"option-1",label:"Option 1"}]:[]};const g=await p(this.endpoint,this.templateId,f);console.log("[FIELDS] Created field",g);const w=JSON.parse(JSON.stringify(this.template));w.fields.push(g);E.updateTemplate(this.templateId,w);(o=this.templateUpdated)===null||o===void 0?void 0:o.emit({endpoint:this.endpoint,template:w,event:"added-field"});this.placing=null}}render(){var e,t,s;console.log("Rendering");if(this.loading){return o(i,null,o("verdocs-loader",null))}if(!this.endpoint.session){return o(i,null,o("verdocs-component-error",{message:"You must be authenticated to use this module."}))}const a=[...((e=this.template)===null||e===void 0?void 0:e.roles)||[]].sort(((e,t)=>{var s,o;return((s=e.sequence)!==null&&s!==void 0?s:0)-((o=t.sequence)!==null&&o!==void 0?o:0)}));const d=a.map((e=>({value:e.name,label:e.full_name?`${e.name}: ${e.full_name}`:e.name})));return o(i,{class:this.placing?{[`placing-${this.placing}`]:true}:{},onSubmit:()=>{}},o("div",{id:"verdocs-template-fields-toolbar"},o("div",{class:"add-for"},"Add field:"),o("verdocs-select-input",{value:this.selectedRoleName,options:d,onInput:e=>this.selectedRoleName=e.target.value}),ie.map((e=>o("verdocs-toolbar-icon",{text:e.tooltip,icon:e.icon,class:e.class,onClick:()=>{if(e.tooltip){if(this.selectedRoleName){this.placing=e.id}else{this.showMustSelectRole=true}}}})))),o("div",{class:"pages"},(((t=this.template)===null||t===void 0?void 0:t.documents)||[]).map((e=>{const t=m(1,e.pages);return t.map((t=>{var s;const i=e.page_sizes[t];return o(l,null,((s=this.template)===null||s===void 0?void 0:s.documents.length)>1&&o("div",{class:"document-separator"},o("div",{innerHTML:w}),o("span",null,e.name)),o("verdocs-template-document-page",{templateId:this.templateId,documentId:e.id,pageNumber:t,virtualWidth:(i===null||i===void 0?void 0:i.width)||612,virtualHeight:(i===null||i===void 0?void 0:i.height)||792,disabled:true,editable:true,done:false,onClick:s=>this.handleClickPage(s,e.id,t),onPageRendered:e=>this.handlePageRendered(e),layers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]}))}))}))),this.showMustSelectRole&&o("verdocs-ok-dialog",{heading:"Unable to add field",message:(((s=this.template)===null||s===void 0?void 0:s.roles)||[]).length>0?"Please select a role before adding fields.":"Please add at least one role before adding fields.",onNext:()=>this.showMustSelectRole=false}))}static get watchers(){return{templateId:[{onTemplateIdChanged:0}]}}static get style(){return A()}},[0,"verdocs-template-fields",{endpoint:[16],templateId:[1537,"template-id"],toolbarTargetId:[1,"toolbar-target-id"],placing:[32],showMustSelectRole:[32],selectedRoleName:[32],loading:[32],template:[32]},[[4,"keydown","handleKeyDown"],[0,"settingsChanged","handleFieldSettingsChanged"],[0,"deleted","handleFieldDeleted"]],{templateId:[{onTemplateIdChanged:0}]}]);function ae(){if(typeof customElements==="undefined"){return}const e=["verdocs-template-fields","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-dialog","verdocs-field-attachment","verdocs-field-checkbox","verdocs-field-date","verdocs-field-dropdown","verdocs-field-initial","verdocs-field-radio","verdocs-field-signature","verdocs-field-textarea","verdocs-field-textbox","verdocs-field-timestamp","verdocs-flag","verdocs-help-icon","verdocs-loader","verdocs-ok-dialog","verdocs-portal","verdocs-select-input","verdocs-template-document-page","verdocs-template-field-properties","verdocs-text-input","verdocs-toolbar-icon","verdocs-upload-dialog"];e.forEach((e=>{switch(e){case"verdocs-template-fields":if(!customElements.get(a(e))){customElements.define(a(e),le)}break;case"verdocs-button":if(!customElements.get(a(e))){q()}break;case"verdocs-checkbox":if(!customElements.get(a(e))){C()}break;case"verdocs-component-error":if(!customElements.get(a(e))){Z()}break;case"verdocs-dialog":if(!customElements.get(a(e))){V()}break;case"verdocs-field-attachment":if(!customElements.get(a(e))){M()}break;case"verdocs-field-checkbox":if(!customElements.get(a(e))){y()}break;case"verdocs-field-date":if(!customElements.get(a(e))){H()}break;case"verdocs-field-dropdown":if(!customElements.get(a(e))){j()}break;case"verdocs-field-initial":if(!customElements.get(a(e))){S()}break;case"verdocs-field-radio":if(!customElements.get(a(e))){L()}break;case"verdocs-field-signature":if(!customElements.get(a(e))){D()}break;case"verdocs-field-textarea":if(!customElements.get(a(e))){I()}break;case"verdocs-field-textbox":if(!customElements.get(a(e))){Q()}break;case"verdocs-field-timestamp":if(!customElements.get(a(e))){F()}break;case"verdocs-flag":if(!customElements.get(a(e))){B()}break;case"verdocs-help-icon":if(!customElements.get(a(e))){z()}break;case"verdocs-loader":if(!customElements.get(a(e))){N()}break;case"verdocs-ok-dialog":if(!customElements.get(a(e))){T()}break;case"verdocs-portal":if(!customElements.get(a(e))){P()}break;case"verdocs-select-input":if(!customElements.get(a(e))){_()}break;case"verdocs-template-document-page":if(!customElements.get(a(e))){R()}break;case"verdocs-template-field-properties":if(!customElements.get(a(e))){$()}break;case"verdocs-text-input":if(!customElements.get(a(e))){O()}break;case"verdocs-toolbar-icon":if(!customElements.get(a(e))){U()}break;case"verdocs-upload-dialog":if(!customElements.get(a(e))){Y()}break}}))}export{le as V,ae as d};
-//# sourceMappingURL=p-DRP4Xxiu.js.map

package/dist/components/p-DRP4Xxiu.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["verdocsTemplateFieldsCss","iconTextbox","iconCheck","iconRadio","iconDatepicker","iconSignature","iconInitial","iconDropdown","iconAttachment","separator","menuOptions","id","tooltip","icon","class","VerdocsTemplateFields","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","templateListenerId","endpoint","VerdocsEndpoint","getDefault","templateId","toolbarTargetId","placing","showMustSelectRole","selectedRoleName","loading","template","pageHeights","cachedPageInfo","onTemplateIdChanged","listenToTemplate","handleKeyDown","ev","key","handleFieldSettingsChanged","_a","templateUpdated","emit","event","handleFieldDeleted","componentWillLoad","loadSession","console","log","session","e","sdkError","SDKError","message","_b","response","status","_c","data","componentDidRender","interact","dynamicDrop","document","querySelectorAll","forEach","el","makeDraggable","toolbarTarget","getElementById","toolbarEl","remove","append","componentWillUpdate","roles","sort","a","b","sequence","find","role","name","disconnectedCallback","unlistenToTemplate","Store","subscribe","getTemplate","sorted","store","delListener","handlePageRendered","pageInfo","detail","documentId","pageNumber","xScale","yScale","_d","naturalHeight","fields","filter","field","page","getFieldId","setAttribute","String","document_id","draggable","listeners","move","handleMoveField","bind","end","handleMoveEnd","oldX","target","getAttribute","oldY","newX","dx","newY","dy","updateCssTransform","naturalWidth","renderedHeight","clientRect","getBoundingClientRect","parent","parentElement","parentRect","width","defaultWidth","type","height","defaultHeight","Math","max","left","bottom","newPageNumber","parseInt","min","documents","pages","x","y","viewCoordinatesToPageCoordinates","params","updatedField","updateField","newTemplate","JSON","parse","stringify","fieldIndex","findIndex","updateTemplate","removeAttribute","removeCssTransform","setControlStyles","_e","VerdocsToast","style","_f","_g","_h","generateFieldName","i","fieldName","some","viewX","viewY","xMax","yMax","floor","handleClickPage","clickedX","offsetX","clickedY","offsetY","cachedPage","coords","role_name","template_id","required","validator","label","default","placeholder","group","settings","multiline","readonly","options","newField","createField","push","render","h","Host","sortedRoles","selectableRoles","map","value","full_name","onSubmit","onInput","option","text","onClick","pageNumbers","integerSequence","pageSize","page_sizes","Fragment","length","innerHTML","DocumentPageIcon","virtualWidth","virtualHeight","disabled","editable","done","onPageRendered","layers","heading","onNext"],"sources":["src/components/templates/verdocs-template-fields/verdocs-template-fields.scss?tag=verdocs-template-fields","src/components/templates/verdocs-template-fields/verdocs-template-fields.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-template-fields {\n  font-family: $verdocs-primary-font;\n  position: relative;\n  display: block;\n  min-height: 600px;\n\n  .page-0 {\n    padding: 65px 15px 0 15px;\n    box-sizing: border-box;\n\n    .user-placed-fields {\n      height: 100px;\n      position: relative;\n      background: #ffffff;\n      box-shadow: 0 0 10px 5px #0000000f;\n\n      .title {\n        top: 0;\n        left: 0;\n        color: #ffffff;\n        font-size: 12px;\n        padding: 3px 6px;\n        font-weight: bold;\n        position: absolute;\n        background: $verdocs-grey-blue;\n      }\n    }\n  }\n\n  .pages {\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n\n    div,\n    canvas {\n      box-sizing: border-box;\n    }\n\n    .document-separator {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 12px 20px;\n      width: 100%;\n      box-sizing: border-box;\n      background-color: $verdocs-grey-1;\n      color: white;\n      border-radius: 6px;\n      font-size: 16px;\n      font-weight: 500;\n      margin-top: 20px;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n      svg {\n        flex-shrink: 0;\n      }\n\n      // Remove margin for the very first one if desired, but 20px spacing is probably good even for the first one\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  #verdocs-template-fields-toolbar {\n    width: 100%;\n    height: 50px;\n    display: flex;\n    column-gap: 15px;\n    font-weight: 700;\n    padding: 0 20px 0 0; // Right-only to better balance the visual\n    align-items: center;\n    flex-direction: row;\n    color: $verdocs-grey-3;\n    justify-content: center;\n    background: $verdocs-grey-blue;\n\n    > verdocs-select-input {\n      margin: 0;\n    }\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    .add-for {\n      margin: 0;\n      font-weight: 500;\n      color: $verdocs-grey-3;\n    }\n\n    verdocs-select-input {\n      margin: 0 20px 0 0;\n    }\n\n    @media all and (max-width: 1000px) {\n      column-gap: 8px;\n      padding: 0 10px 0 0; // Right-only to better balance the visual\n\n      svg {\n        transform: scale(0.8);\n      }\n\n      .add-for,\n      verdocs-select-input {\n        display: none;\n      }\n    }\n\n    @media all and (max-width: 600px) {\n      column-gap: 6px;\n\n      svg {\n        transform: scale(0.6);\n      }\n\n      .separator,\n      .add-for,\n      verdocs-select-input {\n        display: none;\n      }\n    }\n  }\n\n  &.placing-attachment {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-checkbox {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-date {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-dropdown {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25' /%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-initial {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-payment {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-radio {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-signature {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-textarea {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n\n  &.placing-textbox {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg width='32' height='15' viewBox='0 0 32 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1401_24' fill='white'%3E%3Cpath d='M0 0H32V15H0V0Z'/%3E%3C/mask%3E%3Cpath d='M0 0H32V15H0V0Z' fill='%234C56CB' fill-opacity='0.1'/%3E%3Cpath d='M0 0V-1H-1V0H0ZM0 15H-1V16H0V15ZM0 1H32V-1H0V1ZM32 14H0V16H32V14ZM1 15V0H-1V15H1Z' fill='%234C56CB' mask='url(%23path-1-inside-1_1401_24)'/%3E%3Cpath d='M3 11.8V8.65H14.15V11.8H3ZM3 6.65V3.5H20.15V6.65H3Z' fill='%234C56CB'/%3E%3Cline x1='31.5' y1='1' x2='31.5' y2='14' stroke='%234C56CB' stroke-opacity='0.32' stroke-dasharray='1 1'/%3E%3C/svg%3E%0A\")\n        0 14,\n      pointer;\n  }\n\n  &.placing-timestamp {\n    cursor:\n      url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath fill='%23000000' d='M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z'%3E%3C/path%3E%3C/svg%3E\")\n        16 16,\n      pointer;\n  }\n}\n","import interact from 'interactjs';\nimport {Component, h, Event, EventEmitter, Fragment, Prop, Host, State, Listen, Watch} from '@stencil/core';\nimport {createField, getTemplate, integerSequence, ITemplate, ITemplateField, TFieldType, updateField, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {defaultHeight, defaultWidth, getFieldId, removeCssTransform, setControlStyles, updateCssTransform} from '../../../utils/utils';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {DocumentPageIcon} from '../../../utils/Icons';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst iconTextbox = '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z\"/></svg>';\n\nconst iconCheck =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z\"/></svg>';\n\nconst iconRadio =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z\"/></svg>';\n\nconst iconDatepicker =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z\"/></svg>';\n\nconst iconSignature =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z\"/></svg>';\n\nconst iconInitial =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z\"/></svg>';\n\n// const iconTimestamp =\n//   '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path fill=\"#ffffff\" d=\"M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61zM13 14h-2V8h2v6z\"></path></svg>';\n\nconst iconDropdown =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke=\"#ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25\" /></svg>';\n\nconst iconAttachment =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13\" /></svg>';\n\nconst separator = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 14.707 14.707\"><g><rect x=\"6.275\" y=\"0\" fill=\"#ffffff7f\" width=\"1\" height=\"15\"/></g></svg>';\n\nconst menuOptions = [\n  {id: 'signature', tooltip: 'Signature', icon: iconSignature, class: 'signature'},\n  {id: 'initial', tooltip: 'Initials', icon: iconInitial, class: 'initial'},\n  {id: 'sep1', tooltip: '', icon: separator, class: 'separator'},\n  {id: 'textbox', tooltip: 'Text Box', icon: iconTextbox, class: 'textbox'},\n  {id: 'checkbox', tooltip: 'Check Box', icon: iconCheck, class: 'checkbox'},\n  {id: 'radio', tooltip: 'Radio Button', icon: iconRadio, class: 'radio'},\n  {id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown, class: 'dropdown'},\n  {id: 'sep2', tooltip: '', icon: separator, class: 'separator'},\n  {id: 'date', tooltip: 'Date', icon: iconDatepicker, class: 'date'},\n  // {id: 'timestamp', tooltip: 'Timestamp', icon: iconTimestamp, class: 'timestamp'},\n  // {id: 'sep3', tooltip: '', icon: separator},\n  {id: 'attachment', tooltip: 'Attachment', icon: iconAttachment, class: 'attachment'},\n  // {id: 'payment', tooltip: 'Payment', icon: 'P'},\n];\n\n/**\n * Displays a builder experience for laying out fields in a template. Note that this experience requires a large display area to\n * present all of the required controls, so it is primarily intended to be used in desktop environments.\n */\n@Component({\n  tag: 'verdocs-template-fields',\n  styleUrl: 'verdocs-template-fields.scss',\n  shadow: false,\n})\nexport class VerdocsTemplateFields {\n  private templateListenerId = null;\n\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({reflect: true, mutable: true}) templateId: string | null = null;\n\n  /**\n   * If set, (recommended), the host application should create a <DIV> element with a unique ID. When this\n   * component renders, the toolbar will be removed from its default location and placed in the target element.\n   * This allows the parent application to more easily control its placement and scroll effects.\n   *\n   * The movement of the toolbar to the target container is not dynamic - it is performed only on the initial\n   * render. Host applications should not conditionally render this container. If the toolbar's visibility must\n   * be externally controlled, use CSS display options to hide/show it instead.\n   */\n  @Prop() toolbarTargetId: 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 template is updated in any way. May be used for tasks such as cache invalidation or reporting to other systems.\n   */\n  @Event({composed: true}) templateUpdated: EventEmitter<{endpoint: VerdocsEndpoint; template: ITemplate; event: 'added-field' | 'updated-field' | 'deleted-field'}>;\n\n  @State() placing: TFieldType | null = null;\n  @State() showMustSelectRole = false;\n  @State() selectedRoleName = '';\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  pageHeights: Record<number, number> = {};\n\n  @Watch('templateId')\n  onTemplateIdChanged() {\n    this.listenToTemplate();\n  }\n\n  // Stop field-placement mode if ESC is pressed\n  @Listen('keydown', {target: 'document'})\n  handleKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.placing = null;\n    }\n  }\n\n  @Listen('settingsChanged')\n  handleFieldSettingsChanged() {\n    this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'updated-field'});\n  }\n\n  @Listen('deleted')\n  handleFieldDeleted() {\n    this.templateUpdated?.emit({endpoint: this.endpoint, template: this.template, event: 'deleted-field'});\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n\n      if (!this.templateId) {\n        console.log(`[FIELDS] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      if (!this.endpoint.session) {\n        console.log('[FIELDS] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[FIELDS] Error with fields session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    interact.dynamicDrop(true);\n\n    // Defensive re-attach: when returning to the Fields tab from Preview, the preview component\n    // may have unset interact bindings on shared field DOM elements. pageRendered doesn't always\n    // refire in that case, so ensure every .verdocs-field in the document has a drag handler.\n    // makeDraggable is idempotent (interact re-configures the same Interactable).\n    document.querySelectorAll('.verdocs-field').forEach(el => {\n      this.makeDraggable(el as HTMLElement);\n    });\n\n    const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;\n    const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');\n    if (toolbarTarget && toolbarEl) {\n      toolbarEl.remove();\n      toolbarTarget.append(toolbarEl);\n    }\n  }\n\n  componentWillUpdate() {\n    // If a new role was added and there were none yet so far, or the \"selected\" role was deleted, reset our selection\n    const roles = [...(this.template?.roles || [])].sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));\n    if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {\n      this.selectedRoleName = roles[0]?.name || '';\n      console.log('[FIELDS] Selected new role', this.selectedRoleName);\n    }\n  }\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        console.log('Template updated');\n        this.template = template;\n        this.loading = false;\n\n        if (!this.selectedRoleName) {\n          const sorted = [...(template.roles || [])].sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));\n          this.selectedRoleName = sorted[0]?.name || '';\n        }\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  cachedPageInfo: Record<string, Record<number, IDocumentPageInfo>> = {};\n  handlePageRendered(e: any) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[FIELDS] Page rendered', pageInfo.documentId, pageInfo.pageNumber, pageInfo.xScale, pageInfo.yScale);\n    this.cachedPageInfo[pageInfo.documentId] ??= {};\n    this.cachedPageInfo[pageInfo.documentId][pageInfo.pageNumber] = pageInfo;\n\n    this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;\n\n    (this.template?.fields || [])\n      .filter(field => field && field.page === pageInfo.pageNumber)\n      .forEach(field => {\n        const id = getFieldId(field);\n        const el = document.getElementById(id);\n        if (el) {\n          el.setAttribute('templateid', this.templateId);\n          el.setAttribute('fieldname', field.name);\n          el.setAttribute('documentid', String(field.document_id));\n          el.setAttribute('pagenumber', String(field.page));\n          el.setAttribute('xScale', String(pageInfo.xScale));\n          el.setAttribute('yScale', String(pageInfo.yScale));\n          this.makeDraggable(el);\n        }\n      });\n  }\n\n  makeDraggable(el: HTMLElement) {\n    interact(el).draggable({\n      listeners: {\n        move: this.handleMoveField.bind(this),\n        end: this.handleMoveEnd.bind(this),\n      },\n    });\n  }\n\n  async handleMoveField(event: any) {\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\n  async handleMoveEnd(event: any) {\n    const name = event.target.getAttribute('fieldname');\n    const field = (this.template?.fields || []).find(field => field.name === name);\n    if (!field) {\n      console.log('[FIELDS] Unable to find field', name, event.target);\n      return;\n    }\n\n    const pageNumber = event.target.getAttribute('pagenumber');\n    const documentId = event.target.getAttribute('documentid');\n    let {naturalWidth = 612, naturalHeight = 792, renderedHeight = 792} = this.cachedPageInfo[documentId][pageNumber];\n    const clientRect = event.target.getBoundingClientRect();\n    const parent = event.target.parentElement;\n    const parentRect = parent.getBoundingClientRect();\n\n    const width = field.width || defaultWidth(field.type);\n    const height = field.height || defaultHeight(field.type);\n\n    // These two being backwards is not a mistake. Left measures \"over\" from the left\n    // (positive displacement) while bottom measures \"up\" from the bottom (negative displacement).\n    const newX = Math.max(clientRect.left - parentRect.left, 0);\n    let newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);\n\n    let newPageNumber = parseInt(pageNumber);\n    if (newY > renderedHeight) {\n      newPageNumber = Math.min(newPageNumber + 1, (this.template?.documents || [])?.[0]?.pages || 1);\n      newY -= renderedHeight;\n      renderedHeight = this.cachedPageInfo[documentId][newPageNumber].renderedHeight;\n\n      console.log('Next page', {newPageNumber, newY, renderedHeight});\n    } else if (newY < 0) {\n      newPageNumber = Math.max(newPageNumber - 1, 1);\n      renderedHeight = this.cachedPageInfo[documentId][newPageNumber].renderedHeight;\n      newY += renderedHeight;\n      console.log('[FIELDS] Next page', {newPageNumber, newY, renderedHeight});\n    }\n\n    const {x, y} = this.viewCoordinatesToPageCoordinates(newX, newY, documentId, pageNumber, naturalWidth - width, naturalHeight - height);\n    try {\n      const params = {x, y, page: newPageNumber};\n      const updatedField = await updateField(this.endpoint, this.templateId, name, params);\n      console.log('[FIELDS] Updated', updatedField);\n\n      const newTemplate = JSON.parse(JSON.stringify(this.template));\n      const fieldIndex = newTemplate.fields.findIndex(field => field.name === name);\n      if (fieldIndex > -1) {\n        newTemplate.fields[fieldIndex] = updatedField;\n      }\n\n      Store.updateTemplate(this.templateId, newTemplate);\n      event.target.removeAttribute('posX');\n      event.target.removeAttribute('posY');\n      removeCssTransform(event.target);\n      const {xScale = 1, yScale = 1} = this.cachedPageInfo[documentId][pageNumber];\n      setControlStyles(event.target, updatedField, xScale, yScale);\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: newTemplate, event: 'updated-field'});\n    } catch (e) {\n      VerdocsToast('Error updating field, please try again later', {style: 'error'});\n      console.log('[FIELDS] Error updating field', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n      event.target.removeAttribute('posX');\n      event.target.removeAttribute('posY');\n      removeCssTransform(event.target);\n    }\n  }\n\n  generateFieldName(type: string, pageNumber: number) {\n    let i = 1;\n    let fieldName: string;\n    do {\n      fieldName = `${type}P${pageNumber}-${i}`;\n      i++;\n    } while ((this.template?.fields || []).some(field => field && field.name === fieldName));\n\n    return fieldName;\n  }\n\n  // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.\n  viewCoordinatesToPageCoordinates(viewX: number, viewY: number, documentId: string, pageNumber: number, xMax: number, yMax: number) {\n    const {xScale = 1, yScale = 1, renderedHeight = 792} = this.cachedPageInfo[documentId][pageNumber];\n    const x = Math.floor(Math.min(viewX / xScale, xMax));\n    const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));\n    return {x, y};\n  }\n\n  async handleClickPage(e: any, documentId: string, pageNumber: number) {\n    if (this.placing) {\n      // console.log('Placing field', {documentId, pageNumber});\n      const clickedX = e.offsetX;\n      const clickedY = e.offsetY;\n\n      const width = defaultWidth(this.placing);\n      const height = defaultHeight(this.placing);\n\n      const cachedPage = this.cachedPageInfo[documentId][pageNumber];\n      const {naturalWidth = 612, naturalHeight = 792} = cachedPage;\n\n      const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, documentId, pageNumber, naturalWidth - width, naturalHeight - height);\n      const x = Math.floor(coords.x);\n      const y = Math.floor(coords.y);\n\n      const field: ITemplateField = {\n        name: this.generateFieldName(this.placing, pageNumber), //  'textboxP1-22',\n        role_name: this.selectedRoleName,\n        template_id: this.templateId,\n        document_id: cachedPage.documentId,\n        type: this.placing,\n        required: this.placing !== 'radio' && this.placing !== 'attachment' && this.placing !== 'checkbox',\n        page: pageNumber,\n        validator: null,\n        label: null,\n        default: null,\n        placeholder: null,\n        group: null,\n        settings: {},\n        x,\n        y,\n        width,\n        height,\n        multiline: false,\n        readonly: false,\n        options: this.placing === 'radio' ? [{id: 'option-1', label: 'Option 1'}] : [],\n      };\n\n      const newField = await createField(this.endpoint, this.templateId, field);\n      console.log('[FIELDS] Created field', newField);\n\n      const newTemplate = JSON.parse(JSON.stringify(this.template));\n      newTemplate.fields.push(newField);\n\n      Store.updateTemplate(this.templateId, newTemplate);\n      this.templateUpdated?.emit({endpoint: this.endpoint, template: newTemplate, event: 'added-field'});\n\n      this.placing = null;\n    }\n  }\n\n  render() {\n    console.log('Rendering');\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const sortedRoles = [...(this.template?.roles || [])].sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0));\n    const selectableRoles = sortedRoles.map(role => ({value: role.name, label: role.full_name ? `${role.name}: ${role.full_name}` : role.name}));\n\n    return (\n      <Host class={this.placing ? {[`placing-${this.placing}`]: true} : {}} onSubmit={() => {}}>\n        <div id=\"verdocs-template-fields-toolbar\">\n          <div class=\"add-for\">Add field:</div>\n          <verdocs-select-input value={this.selectedRoleName} options={selectableRoles} onInput={(e: any) => (this.selectedRoleName = e.target.value)} />\n\n          {menuOptions.map(option => (\n            <verdocs-toolbar-icon\n              text={option.tooltip}\n              icon={option.icon}\n              class={option.class}\n              onClick={() => {\n                // We ignore empty-tooltip entries because they're separators\n                if (option.tooltip) {\n                  // We require a role to be selected first\n                  if (this.selectedRoleName) {\n                    this.placing = option.id as TFieldType;\n                  } else {\n                    this.showMustSelectRole = true;\n                  }\n                }\n              }}\n            />\n          ))}\n        </div>\n\n        {/* <div class=\"page-0\" ref={el => (this.page0El = el as HTMLDivElement)}>*/}\n        {/*  <div class=\"user-placed-fields\">*/}\n        {/*    <div class=\"title\">User-Placed Fields</div>*/}\n        {/*    <verdocs-field-signature*/}\n        {/*      field={testField}*/}\n        {/*      style={{width: '82px', height: '41px', left: '20px', top: '40px', transform: 'scale(1,1)', backgroundColor: getRGBA(0)}}*/}\n        {/*      moveable={true}*/}\n        {/*      editable={true}*/}\n        {/*    />*/}\n        {/*  </div>*/}\n        {/*</div>*/}\n\n        <div class=\"pages\">\n          {(this.template?.documents || []).map(document => {\n            const pageNumbers = integerSequence(1, document.pages);\n\n            return pageNumbers.map(page => {\n              const pageSize = document.page_sizes[page];\n\n              return (\n                <Fragment>\n                  {this.template?.documents.length > 1 && (\n                    <div class=\"document-separator\">\n                      <div innerHTML={DocumentPageIcon} />\n                      <span>{document.name}</span>\n                    </div>\n                  )}\n\n                  <verdocs-template-document-page\n                    templateId={this.templateId}\n                    documentId={document.id}\n                    pageNumber={page}\n                    virtualWidth={pageSize?.width || 612}\n                    virtualHeight={pageSize?.height || 792}\n                    disabled={true}\n                    editable={true}\n                    done={false}\n                    onClick={(e: PointerEvent) => this.handleClickPage(e, document.id, page)}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                </Fragment>\n              );\n            });\n          })}\n        </div>\n        {this.showMustSelectRole && (\n          <verdocs-ok-dialog\n            heading=\"Unable to add field\"\n            message={(this.template?.roles || []).length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.'}\n            onNext={() => (this.showMustSelectRole = false)}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-K-sDaUxS.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as i,h as n,d as t,t as o}from"./p-yZBlG3YQ.js";import{getTemplate as r,getBrands as d,getOrganization as a,formatFullName as l,getOrganizationContacts as c,isValidEmail as p,createEnvelope as h,getRGBA as f}from"@verdocs/js-sdk";import{D as v,g as x}from"./p-Cq60Emo_.js";import{u as m,d as u}from"./p-lCn8WPSe.js";import{V as b}from"./p-D97GxsI-.js";import{S as g}from"./p-C1sRVZWv.js";import{S as w}from"./p-C7hFgM52.js";import{d as k}from"./p-Bb5V9TQx.js";import{d as y}from"./p-DGNIsXfr.js";import{d as S}from"./p-C-v22G3g.js";import{d as z}from"./p-C8yiLtCJ.js";import{d as E}from"./p-DqzFuSNN.js";import{d as C}from"./p-DreV6Npp.js";const D=e=>((e===null||e===void 0?void 0:e.roles)||[]).map((e=>e.name));const N=(e,s)=>Math.max(D(e).findIndex((e=>e===s)),0);const M=()=>`verdocs-send{--send-ink:var(--verdocs-body-color, #111827);--send-ink-2:#374151;--send-muted:#6b7280;--send-faint:#9ca3af;--send-rule:#e5e7eb;--send-control-border:#d1d5db;--send-accent:var(--verdocs-link-color, #4c56cb);--send-accent-tint:#f4f5fc;--send-accent-tint-2:#e6e7f8;--send-warning-bg:#fffbeb;--send-warning-border:#fde68a;--send-warning-icon:#d97706;--send-warning-text:#78350f;--send-radius:var(--verdocs-dialog-radius, 8px);--send-min-height:480px;--send-max-width:480px;display:none;position:relative;overflow:hidden;width:100%;min-width:0;max-width:var(--verdocs-send-max-width, var(--send-max-width));-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;color:var(--send-ink);font-size:14px;border-radius:var(--send-radius);border:1px solid var(--send-rule);font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif)}verdocs-send *{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-send.sendable{display:block}verdocs-send .track{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--send-min-height);-webkit-transition:-webkit-transform 220ms ease-out;transition:-webkit-transform 220ms ease-out;transition:transform 220ms ease-out;transition:transform 220ms ease-out, -webkit-transform 220ms ease-out}verdocs-send.detail-open .track{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@media (prefers-reduced-motion: reduce){verdocs-send .track{-webkit-transition:none;transition:none}}verdocs-send .pane{padding:16px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .main-pane{-ms-flex:1;flex:1}verdocs-send .detail-pane{position:absolute;top:0;left:100%;bottom:0;width:100%;overflow:hidden}verdocs-send .detail{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body-wrap{position:relative;-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .detail-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto}verdocs-send .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:36px;opacity:0;pointer-events:none;-webkit-transition:opacity 150ms ease-out;transition:opacity 150ms ease-out;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#ffffff));background:linear-gradient(rgba(255, 255, 255, 0), #ffffff)}verdocs-send .scrollable:not(.at-end)>.scroll-fade{opacity:1}verdocs-send .recipient-detail verdocs-contact-picker{-ms-flex:1;flex:1;min-height:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .section-title{font-size:12px;font-weight:600;color:var(--send-ink-2);margin:0 0 6px 0}verdocs-send .delivery-title{margin-top:16px}verdocs-send .step{font-size:11px;color:var(--send-muted);padding:10px 0 4px 0}verdocs-send .recipient,verdocs-send .kv{all:unset;display:-ms-flexbox;display:flex;width:100%;min-width:0;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;border-top:1px solid var(--send-rule);color:var(--send-ink);font-family:inherit}verdocs-send .recipient:focus-visible,verdocs-send .kv:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .recipient .chevron,verdocs-send .kv .chevron{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;color:var(--send-faint)}verdocs-send .recipient .chevron svg,verdocs-send .kv .chevron svg{width:16px;height:16px;display:block}verdocs-send .recipient{padding:8px 6px 8px 0}verdocs-send .recipient:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .recipient .who{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .recipient .role-name{font-size:13px;font-weight:600}verdocs-send .recipient .who-detail{font-size:12px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .recipient .who-detail.configure{color:var(--send-accent);font-weight:500}verdocs-send .recipient .options{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:3px}verdocs-send .recipient .pill{height:18px;padding:0 6px;border-radius:999px;font-size:10px;font-weight:500;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;background:var(--send-accent-tint);color:var(--send-ink-2)}verdocs-send .role-dot{-ms-flex:0 0 10px;flex:0 0 10px;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0, 0, 0, 0.1)}verdocs-send .kv{height:40px;padding:0 6px 0 0;font-size:13px}verdocs-send .kv:last-child{border-bottom:1px solid var(--send-rule)}verdocs-send .kv:disabled{cursor:default;color:var(--send-muted)}verdocs-send .kv .key{-ms-flex:0 0 84px;flex:0 0 84px;color:var(--send-muted)}verdocs-send .kv .value{-ms-flex:1;flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value small{font-size:inherit;font-weight:400;color:var(--send-muted)}verdocs-send .kv .value.stacked{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1px;white-space:normal}verdocs-send .kv .value.stacked .line{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .kv .value.stacked small.line{font-size:12px}verdocs-send .kv .value.off{color:var(--send-warning-icon)}verdocs-send .kv:has(.value.stacked){height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}verdocs-send .main-spacer,verdocs-send .detail-spacer{-ms-flex:1;flex:1}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:14px;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}verdocs-send .buttons .error-message{width:100%;color:#cc0000;font-size:13px;margin-bottom:10px}verdocs-send .detail-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin:-2px 0 14px 0}verdocs-send .detail-header .back{all:unset;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--send-accent);font-family:inherit;-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-header .back .icon,verdocs-send .detail-header .back .icon svg{width:16px;height:16px;display:block}verdocs-send .detail-header .back:focus-visible{outline:2px solid var(--send-accent);outline-offset:2px;border-radius:4px}verdocs-send .detail-header .detail-title{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;font-weight:600;text-align:center}verdocs-send .detail-header .detail-header-spacer{-ms-flex:0 0 52px;flex:0 0 52px}verdocs-send .detail-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--send-rule)}verdocs-send .detail-footer verdocs-button,verdocs-send .detail-footer verdocs-button button{width:100%}verdocs-send .hint{font-size:12px;line-height:1.5;color:var(--send-muted);margin:10px 0 0 0}verdocs-send .option-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option{all:unset;display:-ms-flexbox;display:flex;width:100%;cursor:pointer;-ms-flex-align:center;align-items:center;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;padding:10px 0;font-size:13px;font-family:inherit;color:var(--send-ink);border-top:1px solid var(--send-rule)}verdocs-send .option:first-child{border-top:0}verdocs-send .option:focus-visible{outline:2px solid var(--send-accent);outline-offset:-2px;border-radius:4px}verdocs-send .option .radio{-ms-flex:0 0 16px;flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid var(--send-control-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-send .option.selected .radio{border-color:var(--send-accent)}verdocs-send .option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--send-accent)}verdocs-send .option .swatch{-ms-flex:0 0 22px;flex:0 0 22px;width:22px;height:22px;border-radius:5px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;color:#ffffff;overflow:hidden}verdocs-send .option .swatch.logo{background:#ffffff;border:1px solid var(--send-rule)}verdocs-send .option .swatch img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}verdocs-send .option .option-label{-ms-flex:1;flex:1;min-width:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-send .option .option-label small{font-size:11px;color:var(--send-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}verdocs-send .option-divider{height:0;margin:2px 0;border-top:1px solid var(--send-control-border)}verdocs-send .option-divider+.option{border-top:0}verdocs-send .hint a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .hint a .icon,verdocs-send .hint a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send .expires-field{position:relative}verdocs-send .expires-field input{width:100%;height:36px;padding:0 52px 0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .expires-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .expires-field input::-webkit-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-moz-placeholder{color:var(--send-faint)}verdocs-send .expires-field input:-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::-ms-input-placeholder{color:var(--send-faint)}verdocs-send .expires-field input::placeholder{color:var(--send-faint)}verdocs-send .expires-field .suffix{position:absolute;right:10px;top:0;height:36px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:13px;color:var(--send-muted);pointer-events:none}verdocs-send .sender-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:4px;margin:0 0 10px 0}verdocs-send .sender-field label{font-size:12px;font-weight:500;color:var(--send-ink-2)}verdocs-send .sender-field input{width:100%;height:36px;padding:0 10px;font-size:14px;font-family:inherit;color:var(--send-ink);background:#ffffff;border:1px solid var(--send-control-border);border-radius:6px;outline:none}verdocs-send .sender-field input:focus{border-color:var(--send-accent);-webkit-box-shadow:0 0 0 2px var(--send-accent-tint-2);box-shadow:0 0 0 2px var(--send-accent-tint-2)}verdocs-send .sender-field .field-error{font-size:12px;color:#cc0000}verdocs-send .notice{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:4px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-ink-2);background:var(--send-accent-tint);border:1px solid var(--send-accent-tint-2)}verdocs-send .notice>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-accent)}verdocs-send .notice>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-top:12px;padding:10px 12px;font-size:12px;line-height:1.5;border-radius:6px;color:var(--send-warning-text);background:var(--send-warning-bg);border:1px solid var(--send-warning-border)}verdocs-send .warning>.icon{-ms-flex:0 0 18px;flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--send-warning-icon)}verdocs-send .warning>.icon svg{width:18px;height:18px;display:block}verdocs-send .warning a{color:var(--send-accent);font-weight:500;text-decoration:none;border-bottom:1px solid var(--send-accent-tint-2)}verdocs-send .warning a .icon,verdocs-send .warning a .icon svg{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-left:2px}verdocs-send verdocs-checkbox{display:block;padding:4px 0;font-size:13px}`;const j='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>';const B='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>';const I='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/></svg>';const _='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>';const T='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M10 14 21 3M21 14v7H3V3h7"/></svg>';const L="https://app.verdocs.com/assets/blue-logo.svg";const $=.25;const V=60;const H=500;const R=1;const O=120;const A=120;const G={email:"Email",passcode:"Passcode",sms:"SMS",kba:"KBA",id:"ID check"};const P=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.beforeSend=i(this,"beforeSend");this.send=i(this,"send");this.exit=i(this,"exit");this.sdkError=i(this,"sdkError");this.searchContacts=i(this,"searchContacts");this.templateListenerId=null;this.endpoint=v;this.templateId=null;this.environment="";this.showCancel=true;this.brandKey="";this.swipeStart=null;this.swallowNextClick=false;this.loadedOrganizationId="";this.containerId=`verdocs-send-${Math.random().toString(36).substring(2,11)}`;this.view="main";this.editingRoleId="";this.sessionContacts=[];this.sending=false;this.brands=[];this.organization=null;this.expiresInDays="";this.noContact=false;this.senderDefaults={name:"",email:""};this.senderName="";this.senderEmail="";this.rolesCompleted={};this.loading=true;this.template=null}disconnectedCallback(){this.unlistenToTemplate()}componentDidLoad(){this.el.addEventListener("click",(e=>{if(this.swallowNextClick){this.swallowNextClick=false;e.stopPropagation();e.preventDefault()}}),true)}componentDidRender(){var e,s;m(this.el.querySelector(".detail-body"));(e=this.el.querySelector(".main-pane"))===null||e===void 0?void 0:e.toggleAttribute("inert",this.view!=="main");(s=this.el.querySelector(".detail-pane"))===null||s===void 0?void 0:s.toggleAttribute("inert",this.view==="main")}async listenToTemplate(){console.log("[SEND] Loading template",this.templateId);this.unlistenToTemplate();w.subscribe("templates",this.templateId,(()=>r(this.endpoint,this.templateId)),true,(e=>{console.log("[SEND] Got new template",e);this.template=e;this.loading=false;this.rolesCompleted={};this.view="main";this.editingRoleId="";this.recomputeRolesCompleted();this.loadBrands()}))}loadBrands(){var e;const s=(e=this.template)===null||e===void 0?void 0:e.organization_id;if(!s||s===this.loadedOrganizationId){return}const i=!!this.loadedOrganizationId;this.loadedOrganizationId=s;this.brands=[];this.organization=null;if(i){this.brandKey=""}const n=()=>{var e;return((e=this.template)===null||e===void 0?void 0:e.organization_id)===s};d(this.endpoint,s).then((e=>{if(n()){this.brands=e||[]}})).catch((e=>console.log("[SEND] Unable to load brands",e)));a(this.endpoint,s).then((e=>{if(n()){this.organization=e}})).catch((e=>console.log("[SEND] Unable to load organization",e)))}handleExpiryInput(e){const s=(e.target.value||"").replace(/[^0-9]/g,"");this.expiresInDays=s?String(Math.min(Math.max(Number(s),R),O)):"";e.target.value=this.expiresInDays}effectiveExpiryDays(){const e=Number(this.expiresInDays);return e>=R?e:A}expiresAt(){return new Date(Date.now()+this.effectiveExpiryDays()*24*60*60*1e3)}unlistenToTemplate(){if(this.templateListenerId){w.store.delListener(this.templateListenerId);this.templateListenerId=null}}async reset(){this.rolesCompleted={};this.view="main";this.editingRoleId="";this.brandKey="";this.expiresInDays="";this.noContact=false;this.senderName="";this.senderEmail=""}effectiveSenderName(){return this.senderName||this.senderDefaults.name}effectiveSenderEmail(){return this.senderEmail||this.senderDefaults.email}senderOverrides(){const e=this.senderName.trim();const s=this.senderEmail.trim();return{sender_name:e&&e!==this.senderDefaults.name?e:undefined,sender_email:s&&s!==this.senderDefaults.email?s:undefined}}onTemplateIdChanged(e){console.log("[SEND] Template ID changed",e);this.listenToTemplate()}async componentWillLoad(){var e,s,i;try{this.endpoint.onSessionChanged(((e,s,i)=>{if(!i){return}const n={id:i.id,first_name:i.first_name,last_name:i.last_name,email:i.email,phone:i.phone};if(i){this.senderDefaults={name:l(i),email:i.email||""};this.sessionContacts=[n];c(this.endpoint).then((e=>{console.log("[SEND] Got contacts",e);this.sessionContacts=[...e,n]})).catch((e=>{console.log("[SEND] Error getting contacts",e)}))}}));this.endpoint.loadSession();if(!this.endpoint.session){console.log("[SEND] Unable to start Send operation, must be authenticated");return}if(!this.templateId){console.log(`[SEND] Missing required template ID ${this.templateId}`);return}this.listenToTemplate()}catch(n){console.log("[SEND] Error with send session",n);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new g(n.message,(s=n.response)===null||s===void 0?void 0:s.status,(i=n.response)===null||i===void 0?void 0:i.data))}}recomputeRolesCompleted(){var e;this.rolesCompleted={};const s={};(((e=this.template)===null||e===void 0?void 0:e.roles)||[]).forEach((e=>{const i=e.sequence;s[i]||(s[i]=[]);const n=`r-${i}-${s[i].length}`;s[i].push({...e,id:n,role_name:e.name,first_name:e.first_name,last_name:e.last_name});if(e.first_name&&p(e.email)){this.rolesCompleted[n]={...e,id:n,role_name:e.name,first_name:e.first_name,last_name:e.last_name}}}))}getSequenceNumbers(){var e;const s={};(((e=this.template)===null||e===void 0?void 0:e.roles)||[]).forEach((e=>{s[e.sequence]=true}));return Object.keys(s).map((e=>+e)).sort(((e,s)=>e-s))}getRolesAtLevel(e){var s;const i=(((s=this.template)===null||s===void 0?void 0:s.roles)||[]).filter((s=>s.sequence===e)).map(((s,i)=>({...s,id:`r-${e}-${i}`,role_name:s.name,first_name:s.first_name,last_name:s.last_name})));return i}getRoleById(e){for(const s of this.getSequenceNumbers()){const i=this.getRolesAtLevel(s).find((s=>s.id===e));if(i){return i}}return null}getRecipientOptionLabels(e){if(!e){return[]}const s=(e.auth_methods||[]).filter((e=>e!=="email")).map((e=>G[e]||e));if(e.delegator){s.push("May delegate")}if(e.name_locked){s.push("Name locked")}return s}getDefaultBrand(){var e;const s=(e=this.organization)===null||e===void 0?void 0:e.default_brand_id;return s&&this.brands.find((e=>e.id===s))||null}getDefaultBrandLabel(){var e;const s=(e=this.getDefaultBrand())===null||e===void 0?void 0:e.name;return`Default (${s||"Verdocs"})`}getSelectedBrandLabel(){if(!this.brandKey){return this.getDefaultBrandLabel()}const e=this.brands.find((e=>e.key===this.brandKey));return(e===null||e===void 0?void 0:e.name)||(e===null||e===void 0?void 0:e.key)||this.brandKey}showView(e){this.view=e}handleSelectContact(e,s){e.preventDefault();this.rolesCompleted={...this.rolesCompleted,[s.id]:{...s,...e.detail}};this.editingRoleId="";this.view="main"}handleClickRole(e,s){e.stopPropagation();this.editingRoleId=s.id;this.view="recipient"}handleSend(e){var s;if(this.sending){console.log("[SEND] Skipping duplicate send",e);return}console.log("[SEND] Sending",e);e.preventDefault();e.stopPropagation();this.sending=true;const i=Intl.DateTimeFormat().resolvedOptions();const n={template_id:this.templateId,name:((s=this.template)===null||s===void 0?void 0:s.name)||"New Envelope",environment:this.environment,initial_reminder:0,followup_reminders:0,recipients:Object.values(this.rolesCompleted),timezone:i.timeZone,locale:i.locale,expires_at:this.expiresAt().toISOString()};n.no_contact=this.noContact;const{sender_name:t,sender_email:o}=this.senderOverrides();if(t){n.sender_name=t}if(o){n.sender_email=o}if(this.brandKey){n.brand_key=this.brandKey}const r=this.beforeSend.emit({...n,name:n.name,template:this.template});if(r.defaultPrevented){console.log("[SEND] Send cancelled by parent",n);this.sending=false;return}console.log("[SEND] Creating envelope",n);h(this.endpoint,n).then((e=>{var s;console.log("[SEND] Send envelope",e);this.reset().catch((e=>console.log("Unknown Error",e)));this.sending=false;(s=this.send)===null||s===void 0?void 0:s.emit({...n,name:n.name,envelope_id:e.id,envelope:e})})).catch((e=>{var s,i,n;console.log("[SEND] Send error",e);b(((i=(s=e.response)===null||s===void 0?void 0:s.data)===null||i===void 0?void 0:i.error)||"Error creating envelope, please try again later.");this.sending=false;(n=this.sdkError)===null||n===void 0?void 0:n.emit(e)}))}handleCancel(e){var s;e.stopPropagation();(s=this.exit)===null||s===void 0?void 0:s.emit()}handleSwipeStart(e){var s,i;this.swallowNextClick=false;const n=e.currentTarget;const t=n.getBoundingClientRect();const o=!!((i=(s=e.target)===null||s===void 0?void 0:s.closest)===null||i===void 0?void 0:i.call(s,"input, textarea, select, [contenteditable]"));if(this.view==="main"||o||e.clientX-t.left>t.width*$){this.swipeStart=null;return}this.swipeStart={x:e.clientX,y:e.clientY,time:Date.now()}}handleSwipeEnd(e){const s=this.swipeStart;this.swipeStart=null;if(!s){return}const i=e.clientX-s.x;const n=Math.abs(e.clientY-s.y);if(i>=V&&i>n&&Date.now()-s.time<=H){this.swallowNextClick=true;this.showView("main")}}renderDetailHeader(e){return n("div",{class:"detail-header"},n("button",{type:"button",class:"back",onClick:()=>this.showView("main")},n("span",{class:"icon",innerHTML:B}),"Back"),n("div",{class:"detail-title"},e),n("div",{class:"detail-header-spacer"}))}renderDetailBody(e){return n("div",{class:"detail-body-wrap"},n("div",{class:"detail-body",onScroll:e=>m(e.target)},e),n("div",{class:"scroll-fade"}))}renderDoneButton(){return n("div",{class:"detail-footer"},n("verdocs-button",{label:"Done",size:"small",onClick:()=>this.showView("main")}))}renderRecipientView(){var e;const s=this.getRoleById(this.editingRoleId);if(!s){return n("div",{class:"detail recipient-detail"},this.renderDetailHeader("Recipient"))}const i=N(this.template,s.role_name);return n("div",{class:"detail recipient-detail"},this.renderDetailHeader([n("span",{class:"role-dot",style:{backgroundColor:f(i)}}),s.role_name]),n("verdocs-contact-picker",{key:s.id,showCancel:false,onExit:()=>this.showView("main"),onNext:e=>this.handleSelectContact(e,s),contactSuggestions:this.sessionContacts,templateRole:(e=this.rolesCompleted[s.id])!==null&&e!==void 0?e:s,onSearchContacts:e=>{var s;return(s=this.searchContacts)===null||s===void 0?void 0:s.emit(e.detail)}}))}renderBrandSwatch(e,s){const i=(e===null||e===void 0?void 0:e.favicon_url)||(e===null||e===void 0?void 0:e.thumbnail_url)||(e?null:L);if(i){return n("span",{class:"swatch logo"},n("img",{src:i,alt:""}))}return n("span",{class:"swatch",style:{backgroundColor:(e===null||e===void 0?void 0:e.primary_color)||"#4c56cb"}},s.substring(0,2).toUpperCase())}renderBrandOption(e,s,i,t){return n("button",{type:"button",class:{option:true,selected:this.brandKey===e},onClick:()=>this.brandKey=e},n("span",{class:"radio"}),t,n("span",{class:"option-label"},s,n("small",null,i)))}renderBrandView(){const e=this.getDefaultBrand();const s=this.brands.filter((s=>s.id!==(e===null||e===void 0?void 0:e.id))).sort(((e,s)=>(e.name||e.key).localeCompare(s.name||s.key)));const i=this.brands.length>0;return n("div",{class:"detail"},this.renderDetailHeader("Brand"),this.renderDetailBody([n("div",{class:"option-list"},this.renderBrandOption("",this.getDefaultBrandLabel(),"Organization default",this.renderBrandSwatch(e,(e===null||e===void 0?void 0:e.name)||"V")),s.length>0&&n("div",{class:"option-divider"}),s.map((e=>this.renderBrandOption(e.key,e.name||e.key,e.key,this.renderBrandSwatch(e,e.name||e.key))))),!i&&n("p",{class:"hint"},"Configure the look and feel of the signing experience by"," ",n("a",{href:`${x(this.endpoint)}/settings/branding`,target:"_blank",rel:"noopener"},"Creating a Brand",n("span",{class:"icon",innerHTML:T})),".")]),this.renderDoneButton())}renderExpiresView(){const e=this.expiresAt();const s=`${e.toLocaleDateString(undefined,{month:"short",day:"numeric",year:"numeric"})} at ${e.toLocaleTimeString(undefined,{hour:"numeric",minute:"2-digit"})}`;return n("div",{class:"detail"},this.renderDetailHeader("Expiration"),this.renderDetailBody([n("div",{class:"expires-field"},n("input",{type:"text",inputMode:"numeric","aria-label":"Expires in (days)",placeholder:String(A),value:this.expiresInDays,disabled:this.sending,onInput:e=>this.handleExpiryInput(e)}),n("span",{class:"suffix"},"days")),n("p",{class:"hint"},"This envelope will expire on ",s,". Expirations may be set from ",R,"-",O," days. If left blank, this will default to ",A,".")]),this.renderDoneButton())}renderSenderView(){const e=!this.senderEmail.trim()||p(this.senderEmail.trim());return n("div",{class:"detail"},this.renderDetailHeader("Sender"),this.renderDetailBody([n("div",{class:"sender-field"},n("label",{htmlFor:`${this.containerId}-sender-name`},"Name"),n("input",{id:`${this.containerId}-sender-name`,type:"text",value:this.effectiveSenderName(),disabled:this.sending,onInput:e=>this.senderName=e.target.value})),n("div",{class:"sender-field"},n("label",{htmlFor:`${this.containerId}-sender-email`},"Email"),n("input",{id:`${this.containerId}-sender-email`,type:"email",value:this.effectiveSenderEmail(),disabled:this.sending,onInput:e=>this.senderEmail=e.target.value}),!e&&n("div",{class:"field-error"},"Enter a valid email address.")),n("div",{class:"notice"},n("span",{class:"icon",innerHTML:_}),n("div",null,'Specify where envelope-completed email notifications and "Ask a Question" submissions are delivered. To customize the "From" address for email notifications, please configure those in'," ",n("a",{href:`${x(this.endpoint)}/settings/brands`,target:"_blank",rel:"noopener"},"Brands",n("span",{class:"icon",innerHTML:T}))," ","."))]),this.renderDoneButton())}renderNotificationsView(){return n("div",{class:"detail"},this.renderDetailHeader("Notifications"),this.renderDetailBody([n("verdocs-checkbox",{size:"small",label:"Disable notifications",checked:this.noContact,onInput:e=>this.noContact=!!e.target.checked}),this.noContact&&n("div",{class:"warning"},n("span",{class:"icon",innerHTML:I}),n("div",null,"Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or via an API call. We strongly recommend enabling"," ",n("a",{href:`${x(this.endpoint)}/settings/webhooks`,target:"_blank",rel:"noopener"},"Webhooks",n("span",{class:"icon",innerHTML:T}))," ","to help automate this process."))]),this.renderDoneButton())}renderDetail(){switch(this.view){case"recipient":return this.renderRecipientView();case"brand":return this.renderBrandView();case"expires":return this.renderExpiresView();case"notifications":return this.renderNotificationsView();case"sender":return this.renderSenderView();default:return null}}render(){var e;if(this.loading){return n(t,null,n("verdocs-loader",null))}if(!this.endpoint.session){return n(t,{style:{display:"flex"}},n("verdocs-component-error",{message:"You must be authenticated to use this module."}))}const s=this.getSequenceNumbers();const i=Object.values(this.rolesCompleted).filter((e=>p(e.email)&&e.first_name&&e.last_name));const o=i.length>=D(this.template).length;const r=i.map((e=>e.email.toLowerCase()));const d=new Set(r).size<r.length;const a=this.expiresAt();const c=a.toLocaleDateString(undefined,{month:"short",day:"numeric"});return n(t,{class:{sendable:(e=this.template)===null||e===void 0?void 0:e.is_sendable,"detail-open":this.view!=="main"}},n("div",{class:"track"},n("div",{class:"pane main-pane","aria-hidden":this.view!=="main"?"true":"false"},n("div",{class:"section-title"},"Recipients"),n("div",{class:"recipients"},s.map((e=>[s.length>1&&n("div",{class:"step"},"Step ",e),this.getRolesAtLevel(e).map((e=>{const s=N(this.template,e.role_name);const t=this.rolesCompleted[e.id];const o=t&&i.findIndex((s=>s.role_name===e.role_name))>-1;const r=this.getRecipientOptionLabels(t);return n("button",{type:"button",class:"recipient","data-ri":s,"data-rn":e.role_name,onClick:s=>this.handleClickRole(s,e)},n("span",{class:"role-dot",style:{backgroundColor:f(s)}}),n("span",{class:"who"},n("span",{class:"role-name"},e.role_name),o?n("span",{class:"who-detail"},l(t)," · ",t.email):n("span",{class:"who-detail configure"},"Configure recipient"),r.length>0&&n("span",{class:"options"},r.map((e=>n("span",{class:"pill"},e))))),n("span",{class:"chevron",innerHTML:j}))}))]))),n("div",{class:"section-title delivery-title"},"Delivery"),n("div",{class:"delivery"},n("button",{type:"button",class:"kv",onClick:()=>this.showView("brand"),disabled:this.sending},n("span",{class:"key"},"Brand"),n("span",{class:"value"},this.getSelectedBrandLabel()),n("span",{class:"chevron",innerHTML:j})),n("button",{type:"button",class:"kv",onClick:()=>this.showView("expires"),disabled:this.sending},n("span",{class:"key"},"Expires"),n("span",{class:"value"},this.effectiveExpiryDays()," days ",n("small",null,"· ",c)),n("span",{class:"chevron",innerHTML:j})),n("button",{type:"button",class:"kv",onClick:()=>this.showView("sender"),disabled:this.sending},n("span",{class:"key"},"Sender"),n("span",{class:"value stacked"},n("span",{class:"line"},this.effectiveSenderName()||this.effectiveSenderEmail()),this.effectiveSenderName()&&this.effectiveSenderEmail()?n("small",{class:"line"},this.effectiveSenderEmail()):null),n("span",{class:"chevron",innerHTML:j})),n("button",{type:"button",class:"kv",onClick:()=>this.showView("notifications"),disabled:this.sending},n("span",{class:"key"},"Notifications"),n("span",{class:{value:true,off:this.noContact}},this.noContact?"Off":"On"),n("span",{class:"chevron",innerHTML:j}))),n("div",{class:"main-spacer"}),n("div",{class:"buttons"},d&&n("div",{class:"error-message"},"Recipients cannot share the same email."),this.sending&&n("verdocs-spinner",null),this.showCancel&&n("verdocs-button",{label:"Cancel",size:"small",variant:"outline",onClick:e=>this.handleCancel(e),disabled:this.sending}),n("verdocs-button",{label:"Send",size:"small",disabled:!o||this.sending||d,onClick:e=>this.handleSend(e)}))),n("div",{class:"pane detail-pane","aria-hidden":this.view==="main"?"true":"false",onPointerDown:e=>this.handleSwipeStart(e),onPointerUp:e=>this.handleSwipeEnd(e),onPointerCancel:()=>this.swipeStart=null},this.renderDetail())))}get el(){return this}static get watchers(){return{templateId:[{onTemplateIdChanged:0}]}}static get style(){return M()}},[0,"verdocs-send",{endpoint:[16],templateId:[513,"template-id"],environment:[1],showCancel:[4,"show-cancel"],brandKey:[1025,"brand-key"],containerId:[32],view:[32],editingRoleId:[32],sessionContacts:[32],sending:[32],brands:[32],organization:[32],expiresInDays:[32],noContact:[32],senderDefaults:[32],senderName:[32],senderEmail:[32],rolesCompleted:[32],loading:[32],template:[32],reset:[64]},undefined,{templateId:[{onTemplateIdChanged:0}]}]);function F(){if(typeof customElements==="undefined"){return}const e=["verdocs-send","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-contact-picker","verdocs-flag","verdocs-loader","verdocs-spinner"];e.forEach((e=>{switch(e){case"verdocs-send":if(!customElements.get(o(e))){customElements.define(o(e),P)}break;case"verdocs-button":if(!customElements.get(o(e))){k()}break;case"verdocs-checkbox":if(!customElements.get(o(e))){y()}break;case"verdocs-component-error":if(!customElements.get(o(e))){S()}break;case"verdocs-contact-picker":if(!customElements.get(o(e))){u()}break;case"verdocs-flag":if(!customElements.get(o(e))){z()}break;case"verdocs-loader":if(!customElements.get(o(e))){E()}break;case"verdocs-spinner":if(!customElements.get(o(e))){C()}break}}))}export{P as V,F as d};
-//# sourceMappingURL=p-K-sDaUxS.js.map

package/dist/components/p-K-sDaUxS.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getRoleNames","template","roles","map","role","name","getRoleIndex","role_name","Math","max","findIndex","verdocsSendCss","chevronRightIcon","chevronLeftIcon","warningIcon","infoIcon","externalLinkIcon","VERDOCS_LOGO_URL","SWIPE_START_FRACTION","SWIPE_MIN_DISTANCE","SWIPE_MAX_DURATION","MIN_EXPIRY_DAYS","MAX_EXPIRY_DAYS","DEFAULT_EXPIRY_DAYS","AUTH_METHOD_LABELS","email","passcode","sms","kba","id","VerdocsSend","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","templateListenerId","endpoint","DefaultEndpoint","templateId","environment","showCancel","brandKey","swipeStart","swallowNextClick","loadedOrganizationId","containerId","random","toString","substring","view","editingRoleId","sessionContacts","sending","brands","organization","expiresInDays","noContact","senderDefaults","senderName","senderEmail","rolesCompleted","loading","disconnectedCallback","unlistenToTemplate","componentDidLoad","el","addEventListener","e","stopPropagation","preventDefault","componentDidRender","updateScrollFade","querySelector","_a","toggleAttribute","_b","listenToTemplate","console","log","Store","subscribe","getTemplate","recomputeRolesCompleted","loadBrands","organizationId","organization_id","changedOrganization","stillCurrent","getBrands","then","catch","getOrganization","handleExpiryInput","digits","target","value","replace","String","min","Number","effectiveExpiryDays","days","expiresAt","Date","now","store","delListener","reset","effectiveSenderName","effectiveSenderEmail","senderOverrides","trim","sender_name","undefined","sender_email","onTemplateIdChanged","newTemplateId","componentWillLoad","onSessionChanged","_endpoint","_session","profile","me","first_name","last_name","phone","formatFullName","getOrganizationContacts","contacts","loadSession","session","sdkError","emit","SDKError","message","response","status","_c","data","rolesAtLevel","forEach","level","sequence","length","push","isValidEmail","getSequenceNumbers","sequences","Object","keys","s","sort","a","b","getRolesAtLevel","filter","index","getRoleById","match","find","getRecipientOptionLabels","recipient","labels","auth_methods","method","delegator","name_locked","getDefaultBrand","defaultId","default_brand_id","brand","getDefaultBrandLabel","getSelectedBrandLabel","key","showView","handleSelectContact","detail","handleClickRole","handleSend","localeData","Intl","DateTimeFormat","resolvedOptions","details","template_id","initial_reminder","followup_reminders","recipients","values","timezone","timeZone","locale","expires_at","toISOString","no_contact","brand_key","beforeSendResult","beforeSend","defaultPrevented","createEnvelope","r","send","envelope_id","envelope","VerdocsToast","error","handleCancel","exit","handleSwipeStart","pane","currentTarget","rect","getBoundingClientRect","onTextEntry","closest","call","clientX","left","width","x","y","clientY","time","handleSwipeEnd","start","dx","dy","abs","renderDetailHeader","title","h","class","type","onClick","innerHTML","renderDetailBody","content","onScroll","renderDoneButton","label","size","renderRecipientView","roleIndex","style","backgroundColor","getRGBA","onExit","onNext","contactSuggestions","templateRole","onSearchContacts","searchContacts","renderBrandSwatch","fallbackInitial","image","favicon_url","thumbnail_url","src","alt","primary_color","toUpperCase","renderBrandOption","sub","swatch","option","selected","renderBrandView","defaultBrand","others","localeCompare","hasBrands","href","getWebAppUrl","rel","renderExpiresView","when","toLocaleDateString","month","day","year","toLocaleTimeString","hour","minute","inputMode","placeholder","disabled","onInput","renderSenderView","validEmail","htmlFor","renderNotificationsView","checked","renderDetail","render","Host","display","levels","rolesAssigned","allRolesAssigned","assignedEmails","toLowerCase","hasDuplicateEmails","Set","expiresShort","sendable","is_sendable","completed","assigned","optionLabels","off","variant","onPointerDown","onPointerUp","onPointerCancel"],"sources":["src/utils/Templates.ts","src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"sourcesContent":["import {ITemplate} from '@verdocs/js-sdk';\n\nexport const getRoleNames = (template: ITemplate | null) => (template?.roles || []).map(role => role.name);\n\nexport const getRoleIndex = (template: ITemplate | null, role_name: string) =>\n  Math.max(\n    getRoleNames(template).findIndex(name => name === role_name),\n    0,\n  );\n","@import '../../../theme.scss';\n\nverdocs-send {\n  --send-ink: var(--verdocs-body-color, #111827);\n  --send-ink-2: #374151;\n  --send-muted: #6b7280;\n  --send-faint: #9ca3af;\n  --send-rule: #e5e7eb;\n  --send-control-border: #d1d5db;\n  --send-accent: var(--verdocs-link-color, #{$secondary-color});\n  --send-accent-tint: #f4f5fc;\n  --send-accent-tint-2: #e6e7f8;\n  --send-warning-bg: #fffbeb;\n  --send-warning-border: #fde68a;\n  --send-warning-icon: #d97706;\n  --send-warning-text: #78350f;\n  --send-radius: var(--verdocs-dialog-radius, 8px);\n  --send-min-height: 480px;\n  --send-max-width: 480px;\n\n  display: none;\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-width: 0;\n  max-width: var(--verdocs-send-max-width, var(--send-max-width));\n  box-sizing: border-box;\n  background: #ffffff;\n  color: var(--send-ink);\n  font-size: 14px;\n  border-radius: var(--send-radius);\n  border: 1px solid var(--send-rule);\n  font-family: $verdocs-primary-font;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  &.sendable {\n    display: block;\n  }\n\n  // The main pane sets the card's height. The detail pane sits beside it, off-canvas to the\n  // right, and the track slides one pane-width left when a detail view is open. Detail views\n  // taller than the card scroll inside it.\n  .track {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--send-min-height);\n    transition: transform 220ms ease-out;\n  }\n\n  &.detail-open .track {\n    transform: translateX(-100%);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .track {\n      transition: none;\n    }\n  }\n\n  .pane {\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .main-pane {\n    flex: 1;\n  }\n\n  .detail-pane {\n    position: absolute;\n    top: 0;\n    left: 100%;\n    bottom: 0;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .detail {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  // The body scrolls between a fixed header and a pinned Done button. The fade sits over the\n  // body's bottom edge and shows only while there is more below (classes set by updateScrollFade).\n  .detail-body-wrap {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .detail-body {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n  }\n\n  .scroll-fade {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 36px;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease-out;\n    background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);\n  }\n\n  .scrollable:not(.at-end) > .scroll-fade {\n    opacity: 1;\n  }\n\n  .recipient-detail verdocs-contact-picker {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .section-title {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--send-ink-2);\n    margin: 0 0 6px 0;\n  }\n\n  .delivery-title {\n    margin-top: 16px;\n  }\n\n  .step {\n    font-size: 11px;\n    color: var(--send-muted);\n    padding: 10px 0 4px 0;\n  }\n\n  .recipient,\n  .kv {\n    all: unset;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    max-width: 100%;\n    box-sizing: border-box;\n    cursor: pointer;\n    align-items: center;\n    column-gap: 10px;\n    border-top: 1px solid var(--send-rule);\n    color: var(--send-ink);\n    font-family: inherit;\n\n    &:focus-visible {\n      outline: 2px solid var(--send-accent);\n      outline-offset: -2px;\n      border-radius: 4px;\n    }\n\n    .chevron {\n      flex: 0 0 16px;\n      width: 16px;\n      height: 16px;\n      color: var(--send-faint);\n\n      svg {\n        width: 16px;\n        height: 16px;\n        display: block;\n      }\n    }\n  }\n\n  .recipient {\n    padding: 8px 6px 8px 0;\n\n    &:last-child {\n      border-bottom: 1px solid var(--send-rule);\n    }\n\n    .who {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .role-name {\n      font-size: 13px;\n      font-weight: 600;\n    }\n\n    .who-detail {\n      font-size: 12px;\n      color: var(--send-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      &.configure {\n        color: var(--send-accent);\n        font-weight: 500;\n      }\n    }\n\n    .options {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      margin-top: 3px;\n    }\n\n    .pill {\n      height: 18px;\n      padding: 0 6px;\n      border-radius: 999px;\n      font-size: 10px;\n      font-weight: 500;\n      display: inline-flex;\n      align-items: center;\n      background: var(--send-accent-tint);\n      color: var(--send-ink-2);\n    }\n  }\n\n  .role-dot {\n    flex: 0 0 10px;\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    border: 1px solid rgba(0, 0, 0, 0.1);\n  }\n\n  .kv {\n    height: 40px;\n    padding: 0 6px 0 0;\n    font-size: 13px;\n\n    &:last-child {\n      border-bottom: 1px solid var(--send-rule);\n    }\n\n    &:disabled {\n      cursor: default;\n      color: var(--send-muted);\n    }\n\n    .key {\n      flex: 0 0 84px;\n      color: var(--send-muted);\n    }\n\n    .value {\n      flex: 1;\n      min-width: 0;\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n\n      small {\n        font-size: inherit;\n        font-weight: 400;\n        color: var(--send-muted);\n      }\n\n      // Name on one line, email on the next: each line truncates on its own.\n      &.stacked {\n        display: flex;\n        flex-direction: column;\n        row-gap: 1px;\n        white-space: normal;\n\n        .line {\n          display: block;\n          min-width: 0;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        }\n\n        small.line {\n          font-size: 12px;\n        }\n      }\n\n      &.off {\n        color: var(--send-warning-icon);\n      }\n    }\n\n    &:has(.value.stacked) {\n      height: auto;\n      min-height: 40px;\n      padding-top: 6px;\n      padding-bottom: 6px;\n    }\n  }\n\n  .main-spacer,\n  .detail-spacer {\n    flex: 1;\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 14px;\n    column-gap: 10px;\n    flex-wrap: wrap;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    .error-message {\n      width: 100%;\n      color: $verdocs-red-1;\n      font-size: 13px;\n      margin-bottom: 10px;\n    }\n  }\n\n  // Detail views\n  .detail-header {\n    display: flex;\n    align-items: center;\n    column-gap: 8px;\n    margin: -2px 0 14px 0;\n\n    .back {\n      all: unset;\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--send-accent);\n      font-family: inherit;\n      flex: 0 0 52px;\n\n      .icon,\n      .icon svg {\n        width: 16px;\n        height: 16px;\n        display: block;\n      }\n\n      &:focus-visible {\n        outline: 2px solid var(--send-accent);\n        outline-offset: 2px;\n        border-radius: 4px;\n      }\n    }\n\n    .detail-title {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      column-gap: 8px;\n      font-size: 14px;\n      font-weight: 600;\n      text-align: center;\n    }\n\n    .detail-header-spacer {\n      flex: 0 0 52px;\n    }\n  }\n\n  .detail-footer {\n    margin-top: 10px;\n    padding-top: 12px;\n    border-top: 1px solid var(--send-rule);\n\n    verdocs-button,\n    verdocs-button button {\n      width: 100%;\n    }\n  }\n\n  .hint {\n    font-size: 12px;\n    line-height: 1.5;\n    color: var(--send-muted);\n    margin: 10px 0 0 0;\n  }\n\n  .option-list {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .option {\n    all: unset;\n    display: flex;\n    width: 100%;\n    cursor: pointer;\n    align-items: center;\n    column-gap: 10px;\n    padding: 10px 0;\n    font-size: 13px;\n    font-family: inherit;\n    color: var(--send-ink);\n    border-top: 1px solid var(--send-rule);\n\n    &:first-child {\n      border-top: 0;\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--send-accent);\n      outline-offset: -2px;\n      border-radius: 4px;\n    }\n\n    .radio {\n      flex: 0 0 16px;\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n      border: 1px solid var(--send-control-border);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &.selected .radio {\n      border-color: var(--send-accent);\n\n      &::after {\n        content: '';\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: var(--send-accent);\n      }\n    }\n\n    .swatch {\n      flex: 0 0 22px;\n      width: 22px;\n      height: 22px;\n      border-radius: 5px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 9px;\n      font-weight: 700;\n      color: #ffffff;\n      overflow: hidden;\n\n      &.logo {\n        background: #ffffff;\n        border: 1px solid var(--send-rule);\n      }\n\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n        display: block;\n      }\n    }\n\n    .option-label {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n\n      small {\n        font-size: 11px;\n        color: var(--send-muted);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n  }\n\n  .option-divider {\n    height: 0;\n    margin: 2px 0;\n    border-top: 1px solid var(--send-control-border);\n\n    + .option {\n      border-top: 0;\n    }\n  }\n\n  .hint a {\n    color: var(--send-accent);\n    font-weight: 500;\n    text-decoration: none;\n    border-bottom: 1px solid var(--send-accent-tint-2);\n\n    .icon,\n    .icon svg {\n      width: 11px;\n      height: 11px;\n      display: inline-block;\n      vertical-align: -1px;\n      margin-left: 2px;\n    }\n  }\n\n  .expires-field {\n    position: relative;\n\n    input {\n      width: 100%;\n      height: 36px;\n      padding: 0 52px 0 10px;\n      font-size: 14px;\n      font-family: inherit;\n      color: var(--send-ink);\n      background: #ffffff;\n      border: 1px solid var(--send-control-border);\n      border-radius: 6px;\n      outline: none;\n\n      &:focus {\n        border-color: var(--send-accent);\n        box-shadow: 0 0 0 2px var(--send-accent-tint-2);\n      }\n\n      &::placeholder {\n        color: var(--send-faint);\n      }\n    }\n\n    .suffix {\n      position: absolute;\n      right: 10px;\n      top: 0;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: var(--send-muted);\n      pointer-events: none;\n    }\n  }\n\n  .sender-field {\n    display: flex;\n    flex-direction: column;\n    row-gap: 4px;\n    margin: 0 0 10px 0;\n\n    label {\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--send-ink-2);\n    }\n\n    input {\n      width: 100%;\n      height: 36px;\n      padding: 0 10px;\n      font-size: 14px;\n      font-family: inherit;\n      color: var(--send-ink);\n      background: #ffffff;\n      border: 1px solid var(--send-control-border);\n      border-radius: 6px;\n      outline: none;\n\n      &:focus {\n        border-color: var(--send-accent);\n        box-shadow: 0 0 0 2px var(--send-accent-tint-2);\n      }\n    }\n\n    .field-error {\n      font-size: 12px;\n      color: $verdocs-red-1;\n    }\n  }\n\n  .notice {\n    display: flex;\n    column-gap: 10px;\n    margin-top: 4px;\n    padding: 10px 12px;\n    font-size: 12px;\n    line-height: 1.5;\n    border-radius: 6px;\n    color: var(--send-ink-2);\n    background: var(--send-accent-tint);\n    border: 1px solid var(--send-accent-tint-2);\n\n    > .icon {\n      flex: 0 0 18px;\n      width: 18px;\n      height: 18px;\n      margin-top: 1px;\n      color: var(--send-accent);\n\n      svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n      }\n    }\n  }\n\n  .warning {\n    display: flex;\n    column-gap: 10px;\n    margin-top: 12px;\n    padding: 10px 12px;\n    font-size: 12px;\n    line-height: 1.5;\n    border-radius: 6px;\n    color: var(--send-warning-text);\n    background: var(--send-warning-bg);\n    border: 1px solid var(--send-warning-border);\n\n    > .icon {\n      flex: 0 0 18px;\n      width: 18px;\n      height: 18px;\n      margin-top: 1px;\n      color: var(--send-warning-icon);\n\n      svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n      }\n    }\n\n    a {\n      color: var(--send-accent);\n      font-weight: 500;\n      text-decoration: none;\n      border-bottom: 1px solid var(--send-accent-tint-2);\n\n      .icon,\n      .icon svg {\n        width: 11px;\n        height: 11px;\n        display: inline-block;\n        vertical-align: -1px;\n        margin-left: 2px;\n      }\n    }\n  }\n\n  verdocs-checkbox {\n    display: block;\n    padding: 4px 0;\n    font-size: 13px;\n  }\n}\n","import type {IBrand, IOrganization, TRecipientAuthMethod} from '@verdocs/js-sdk';\nimport {Component, Element, Prop, State, h, Event, EventEmitter, Host, Method, Watch} from '@stencil/core';\nimport type {ICreateEnvelopeFromTemplateRequest, ICreateEnvelopeRecipientFromTemplate, IEnvelope, IRecipient, ITemplate} from '@verdocs/js-sdk';\nimport {createEnvelope, formatFullName, getBrands, getOrganization, getTemplate, getOrganizationContacts, getRGBA, isValidEmail, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {IContactSearchEvent} from '../../envelopes/verdocs-contact-picker/verdocs-contact-picker';\nimport {DefaultEndpoint, getWebAppUrl} from '../../../utils/Environment';\nimport {getRoleIndex, getRoleNames} from '../../../utils/Templates';\nimport {updateScrollFade} from '../../../utils/ScrollFade';\nimport {VerdocsToast} from '../../../utils/Toast';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\nconst chevronRightIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 6 6 6-6 6\"/></svg>';\n\nconst chevronLeftIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>';\n\nconst warningIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"/><path d=\"M12 9v4M12 17h.01\"/></svg>';\n\nconst infoIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/></svg>';\n\nconst externalLinkIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 3h6v6M10 14 21 3M21 14v7H3V3h7\"/></svg>';\n\nconst VERDOCS_LOGO_URL = 'https://app.verdocs.com/assets/blue-logo.svg';\n\n// Swipe mechanics for mobile users in detail views\nconst SWIPE_START_FRACTION = 0.25;\nconst SWIPE_MIN_DISTANCE = 60;\nconst SWIPE_MAX_DURATION = 500;\n\n// Expiration controls. The API is less strict, but Web users prefer a simpler setup so we just range-limit it 1..120 here.\nconst MIN_EXPIRY_DAYS = 1;\nconst MAX_EXPIRY_DAYS = 120;\nconst DEFAULT_EXPIRY_DAYS = 120;\n\nconst AUTH_METHOD_LABELS: Record<TRecipientAuthMethod, string> = {\n  email: 'Email',\n  passcode: 'Passcode',\n  sms: 'SMS',\n  kba: 'KBA',\n  id: 'ID check',\n};\n\ntype TSendView = 'main' | 'recipient' | 'brand' | 'expires' | 'notifications' | 'sender';\n\nexport interface ISendEventDetail extends ICreateEnvelopeFromTemplateRequest {\n  name: string;\n  template_id: string;\n  recipients: ICreateEnvelopeRecipientFromTemplate[];\n  template: ITemplate;\n}\n\nexport interface ISentEventDetail extends ICreateEnvelopeFromTemplateRequest {\n  name: string;\n  template_id: string;\n  recipients: ICreateEnvelopeRecipientFromTemplate[];\n  envelope_id: string;\n  envelope: IEnvelope;\n}\n\n/**\n * Display a form to send a template to one or more recipients in an envelope for signing.\n * Host applications should ensure the template is \"sendable\" before displaying this component.\n * To be sendable, a template must have at least one document attached, at least one participant\n * defined, and at least one field assigned to every \"signer\" participant. This component will\n * hide itself if the template is not sendable.\n *\n * ```ts\n * <verdocs-send\n *   templateId={TEMPLATE_ID}\n *   onBeforeSend={({ detail })) => { console.log('Sending... Show a spinner...', detail) }\n *   onSend={({ detail }) => { console.log('Sent! Hide the spinner...', detail) }\n *   onExit={({ detail }) => { console.log('Send cancelled.', detail) }\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\n  private templateListenerId = null;\n\n  @Element() el: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = DefaultEndpoint;\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop({reflect: true}) templateId: string | null = null;\n\n  /**\n   * The environment the control is being called from, e.g. 'web'. This has an impact on how certain\n   * operations such as email communications are handled to ensure users receive the correct URLs for\n   * their invitations. Setting this to unknown values may produce unexpected/incorrect behaviors.\n   * If environment is not known, do this set this property.\n   */\n  @Prop() environment: string = '';\n\n  /**\n   * Whether to show the cancel button. It may be useful to disable this in environments where\n   * the embed is shown in a non-wizard flow with its own navigation for the user to exit.\n   */\n  @Prop() showCancel = true;\n\n  /**\n   * Preselect a brand by key, overriding the organization default.\n   */\n  @Prop({mutable: true}) brandKey = '';\n\n  /**\n   * The user is sending an envelope the form and clicked send.\n   */\n  @Event({composed: true}) beforeSend: EventEmitter<ISendEventDetail>;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<ISentEventDetail>;\n\n  /**\n   * Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name.\n   */\n  @Event({composed: true}) exit: EventEmitter;\n\n  /**\n   * Event fired 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 user enters text in a search field. The parent application may use this to update\n   * the `contactSuggestions` property.\n   */\n  @Event({composed: true}) searchContacts: EventEmitter<IContactSearchEvent>;\n\n  private swipeStart: {x: number; y: number; time: number} | null = null;\n  private swallowNextClick = false;\n  private loadedOrganizationId = '';\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n  @State() view: TSendView = 'main';\n  @State() editingRoleId = '';\n  @State() sessionContacts: {id: string; first_name: string; last_name: string; email: string; phone: string}[] = [];\n  @State() sending = false;\n  @State() brands: IBrand[] = [];\n  @State() organization: IOrganization | null = null;\n  @State() expiresInDays = '';\n  @State() noContact = false;\n  @State() senderDefaults = {name: '', email: ''};\n  @State() senderName = '';\n  @State() senderEmail = '';\n  @State() rolesCompleted: Record<string, Partial<IRecipient>> = {};\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  componentDidLoad() {\n    this.el.addEventListener(\n      'click',\n      e => {\n        if (this.swallowNextClick) {\n          this.swallowNextClick = false;\n          e.stopPropagation();\n          e.preventDefault();\n        }\n      },\n      true,\n    );\n  }\n\n  // Make off-canvas controls leave the tab order\n  componentDidRender() {\n    updateScrollFade(this.el.querySelector('.detail-body'));\n    this.el.querySelector('.main-pane')?.toggleAttribute('inert', this.view !== 'main');\n    this.el.querySelector('.detail-pane')?.toggleAttribute('inert', this.view === 'main');\n  }\n\n  async listenToTemplate() {\n    console.log('[SEND] Loading template', this.templateId);\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      true,\n      (template: ITemplate) => {\n        console.log('[SEND] Got new template', template);\n        this.template = template;\n        this.loading = false;\n        this.rolesCompleted = {};\n        this.view = 'main';\n        this.editingRoleId = '';\n        this.recomputeRolesCompleted();\n        this.loadBrands();\n      },\n    );\n  }\n\n  loadBrands() {\n    const organizationId = this.template?.organization_id;\n    if (!organizationId || organizationId === this.loadedOrganizationId) {\n      return;\n    }\n\n    const changedOrganization = !!this.loadedOrganizationId;\n    this.loadedOrganizationId = organizationId;\n    this.brands = [];\n    this.organization = null;\n    if (changedOrganization) {\n      this.brandKey = '';\n    }\n\n    const stillCurrent = () => this.template?.organization_id === organizationId;\n\n    getBrands(this.endpoint, organizationId)\n      .then(brands => {\n        if (stillCurrent()) {\n          this.brands = brands || [];\n        }\n      })\n      .catch(e => console.log('[SEND] Unable to load brands', e));\n\n    getOrganization(this.endpoint, organizationId)\n      .then(organization => {\n        if (stillCurrent()) {\n          this.organization = organization;\n        }\n      })\n      .catch(e => console.log('[SEND] Unable to load organization', e));\n  }\n\n  handleExpiryInput(e: any) {\n    const digits = (e.target.value || '').replace(/[^0-9]/g, '');\n    this.expiresInDays = digits ? String(Math.min(Math.max(Number(digits), MIN_EXPIRY_DAYS), MAX_EXPIRY_DAYS)) : '';\n    e.target.value = this.expiresInDays;\n  }\n\n  effectiveExpiryDays(): number {\n    const days = Number(this.expiresInDays);\n    return days >= MIN_EXPIRY_DAYS ? days : DEFAULT_EXPIRY_DAYS;\n  }\n\n  expiresAt(): Date {\n    return new Date(Date.now() + this.effectiveExpiryDays() * 24 * 60 * 60 * 1000);\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Method()\n  async reset() {\n    this.rolesCompleted = {};\n    this.view = 'main';\n    this.editingRoleId = '';\n    this.brandKey = '';\n    this.expiresInDays = '';\n    this.noContact = false;\n    this.senderName = '';\n    this.senderEmail = '';\n  }\n\n  // sender_name and sender_email are the contact for recipient questions and the completion\n  // notice. They default to the signed-in user and are only sent when edited away from that.\n  // The From line of the invitation email is the brand's (then the org's) and is not set here.\n  effectiveSenderName() {\n    return this.senderName || this.senderDefaults.name;\n  }\n\n  effectiveSenderEmail() {\n    return this.senderEmail || this.senderDefaults.email;\n  }\n\n  senderOverrides() {\n    const name = this.senderName.trim();\n    const email = this.senderEmail.trim();\n    return {\n      sender_name: name && name !== this.senderDefaults.name ? name : undefined,\n      sender_email: email && email !== this.senderDefaults.email ? email : undefined,\n    };\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[SEND] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.onSessionChanged((_endpoint, _session, profile) => {\n        if (!profile) {\n          return;\n        }\n\n        const me = {\n          id: profile.id,\n          first_name: profile.first_name,\n          last_name: profile.last_name,\n          email: profile.email,\n          phone: profile.phone,\n        };\n\n        if (profile) {\n          this.senderDefaults = {name: formatFullName(profile), email: profile.email || ''};\n          this.sessionContacts = [me];\n\n          getOrganizationContacts(this.endpoint)\n            .then(contacts => {\n              console.log('[SEND] Got contacts', contacts);\n              this.sessionContacts = [...contacts, me];\n            })\n            .catch(e => {\n              console.log('[SEND] Error getting contacts', e);\n            });\n        }\n      });\n\n      this.endpoint.loadSession();\n\n      if (!this.endpoint.session) {\n        console.log('[SEND] Unable to start Send operation, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[SEND] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[SEND] Error with send session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  recomputeRolesCompleted() {\n    this.rolesCompleted = {};\n\n    const rolesAtLevel: Record<number, Partial<IRecipient>[]> = {};\n    (this.template?.roles || []).forEach(role => {\n      const level = role.sequence;\n      rolesAtLevel[level] ||= [];\n      const id = `r-${level}-${rolesAtLevel[level].length}`;\n      rolesAtLevel[level].push({...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name});\n\n      // if (role.first_name && (isValidEmail(role.email) || isValidPhone(role.phone))) {\n      if (role.first_name && isValidEmail(role.email)) {\n        this.rolesCompleted[id] = {...role, id, role_name: role.name, first_name: role.first_name, last_name: role.last_name};\n      }\n    });\n  }\n\n  getSequenceNumbers() {\n    // This is cleaner with a Set but we found a regression in some target environments where\n    // this breaks down. Reverting to an older technique while we diagnose it.\n    const sequences: Record<number, boolean> = {};\n    (this.template?.roles || []).forEach(role => {\n      sequences[role.sequence] = true;\n    });\n    return Object.keys(sequences)\n      .map(s => +s)\n      .sort((a, b) => a - b);\n  }\n\n  getRolesAtLevel(level: number) {\n    const rolesAtLevel = (this.template?.roles || [])\n      .filter(role => role.sequence === level)\n      .map((role, index) => ({\n        ...role,\n        id: `r-${level}-${index}`,\n        role_name: role.name,\n        first_name: role.first_name,\n        last_name: role.last_name,\n      }));\n    return rolesAtLevel as Partial<IRecipient>[];\n  }\n\n  getRoleById(id: string): Partial<IRecipient> | null {\n    for (const level of this.getSequenceNumbers()) {\n      const match = this.getRolesAtLevel(level).find(role => role.id === id);\n      if (match) {\n        return match;\n      }\n    }\n\n    return null;\n  }\n\n  // We only show options the sender switched on.\n  getRecipientOptionLabels(recipient: Partial<IRecipient> | undefined): string[] {\n    if (!recipient) {\n      return [];\n    }\n\n    const labels = (recipient.auth_methods || []).filter(method => method !== 'email').map(method => AUTH_METHOD_LABELS[method] || method);\n    if (recipient.delegator) {\n      labels.push('May delegate');\n    }\n\n    if (recipient.name_locked) {\n      labels.push('Name locked');\n    }\n\n    return labels;\n  }\n\n  getDefaultBrand(): IBrand | null {\n    const defaultId = this.organization?.default_brand_id;\n    return (defaultId && this.brands.find(brand => brand.id === defaultId)) || null;\n  }\n\n  getDefaultBrandLabel() {\n    const name = this.getDefaultBrand()?.name;\n    return `Default (${name || 'Verdocs'})`;\n  }\n\n  getSelectedBrandLabel() {\n    if (!this.brandKey) {\n      return this.getDefaultBrandLabel();\n    }\n\n    const brand = this.brands.find(b => b.key === this.brandKey);\n    return brand?.name || brand?.key || this.brandKey;\n  }\n\n  showView(view: TSendView) {\n    this.view = view;\n  }\n\n  handleSelectContact(e: any, role: Partial<IRecipient>) {\n    e.preventDefault();\n    this.rolesCompleted = {...this.rolesCompleted, [role.id]: {...role, ...e.detail}};\n    this.editingRoleId = '';\n    this.view = 'main';\n  }\n\n  handleClickRole(e: any, role: Partial<IRecipient>) {\n    e.stopPropagation();\n    this.editingRoleId = role.id;\n    this.view = 'recipient';\n  }\n\n  handleSend(e: any) {\n    if (this.sending) {\n      console.log('[SEND] Skipping duplicate send', e);\n      return;\n    }\n\n    console.log('[SEND] Sending', e);\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.sending = true;\n    const localeData = Intl.DateTimeFormat().resolvedOptions();\n\n    const details: ICreateEnvelopeFromTemplateRequest = {\n      template_id: this.templateId,\n      name: this.template?.name || 'New Envelope',\n      environment: this.environment,\n      initial_reminder: 0,\n      followup_reminders: 0,\n      recipients: Object.values(this.rolesCompleted) as ICreateEnvelopeRecipientFromTemplate[],\n      timezone: localeData.timeZone,\n      locale: localeData.locale,\n      expires_at: this.expiresAt().toISOString(),\n    };\n\n    details.no_contact = this.noContact;\n    const {sender_name, sender_email} = this.senderOverrides();\n    if (sender_name) {\n      details.sender_name = sender_name;\n    }\n    if (sender_email) {\n      details.sender_email = sender_email;\n    }\n    if (this.brandKey) {\n      details.brand_key = this.brandKey;\n    }\n\n    const beforeSendResult = this.beforeSend.emit({...details, name: details.name!, template: this.template});\n    if (beforeSendResult.defaultPrevented) {\n      console.log('[SEND] Send cancelled by parent', details);\n      this.sending = false;\n      return;\n    }\n\n    console.log('[SEND] Creating envelope', details);\n    createEnvelope(this.endpoint, details)\n      .then(r => {\n        console.log('[SEND] Send envelope', r);\n        this.reset().catch((e: any) => console.log('Unknown Error', e));\n        this.sending = false;\n        this.send?.emit({...details, name: details.name!, envelope_id: r.id, envelope: r});\n      })\n      .catch(e => {\n        console.log('[SEND] Send error', e);\n        VerdocsToast(e.response?.data?.error || 'Error creating envelope, please try again later.');\n        this.sending = false;\n        this.sdkError?.emit(e);\n      });\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    this.exit?.emit();\n  }\n\n  handleSwipeStart(e: PointerEvent) {\n    this.swallowNextClick = false;\n    const pane = e.currentTarget as HTMLElement;\n    const rect = pane.getBoundingClientRect();\n    const onTextEntry = !!(e.target as HTMLElement)?.closest?.('input, textarea, select, [contenteditable]');\n    if (this.view === 'main' || onTextEntry || e.clientX - rect.left > rect.width * SWIPE_START_FRACTION) {\n      this.swipeStart = null;\n      return;\n    }\n\n    this.swipeStart = {x: e.clientX, y: e.clientY, time: Date.now()};\n  }\n\n  handleSwipeEnd(e: PointerEvent) {\n    const start = this.swipeStart;\n    this.swipeStart = null;\n    if (!start) {\n      return;\n    }\n\n    const dx = e.clientX - start.x;\n    const dy = Math.abs(e.clientY - start.y);\n    if (dx >= SWIPE_MIN_DISTANCE && dx > dy && Date.now() - start.time <= SWIPE_MAX_DURATION) {\n      this.swallowNextClick = true;\n      this.showView('main');\n    }\n  }\n\n  renderDetailHeader(title: any) {\n    return (\n      <div class=\"detail-header\">\n        <button type=\"button\" class=\"back\" onClick={() => this.showView('main')}>\n          <span class=\"icon\" innerHTML={chevronLeftIcon} />\n          Back\n        </button>\n        <div class=\"detail-title\">{title}</div>\n        <div class=\"detail-header-spacer\" />\n      </div>\n    );\n  }\n\n  renderDetailBody(content: any) {\n    return (\n      <div class=\"detail-body-wrap\">\n        <div class=\"detail-body\" onScroll={(e: any) => updateScrollFade(e.target)}>\n          {content}\n        </div>\n        <div class=\"scroll-fade\" />\n      </div>\n    );\n  }\n\n  renderDoneButton() {\n    return (\n      <div class=\"detail-footer\">\n        <verdocs-button label=\"Done\" size=\"small\" onClick={() => this.showView('main')} />\n      </div>\n    );\n  }\n\n  renderRecipientView() {\n    const role = this.getRoleById(this.editingRoleId);\n    if (!role) {\n      return <div class=\"detail recipient-detail\">{this.renderDetailHeader('Recipient')}</div>;\n    }\n\n    const roleIndex = getRoleIndex(this.template, role.role_name);\n    return (\n      <div class=\"detail recipient-detail\">\n        {this.renderDetailHeader([<span class=\"role-dot\" style={{backgroundColor: getRGBA(roleIndex)}} />, role.role_name])}\n        <verdocs-contact-picker\n          key={role.id}\n          showCancel={false}\n          onExit={() => this.showView('main')}\n          onNext={e => this.handleSelectContact(e, role)}\n          contactSuggestions={this.sessionContacts}\n          templateRole={(this.rolesCompleted[role.id] ?? role) as IRecipient}\n          onSearchContacts={e => this.searchContacts?.emit(e.detail)}\n        />\n      </div>\n    );\n  }\n\n  renderBrandSwatch(brand: IBrand | null, fallbackInitial: string) {\n    const image = brand?.favicon_url || brand?.thumbnail_url || (brand ? null : VERDOCS_LOGO_URL);\n    if (image) {\n      return (\n        <span class=\"swatch logo\">\n          <img src={image} alt=\"\" />\n        </span>\n      );\n    }\n\n    return (\n      <span class=\"swatch\" style={{backgroundColor: brand?.primary_color || '#4c56cb'}}>\n        {fallbackInitial.substring(0, 2).toUpperCase()}\n      </span>\n    );\n  }\n\n  renderBrandOption(key: string, label: string, sub: string, swatch: any) {\n    return (\n      <button type=\"button\" class={{option: true, selected: this.brandKey === key}} onClick={() => (this.brandKey = key)}>\n        <span class=\"radio\" />\n        {swatch}\n        <span class=\"option-label\">\n          {label}\n          <small>{sub}</small>\n        </span>\n      </button>\n    );\n  }\n\n  renderBrandView() {\n    const defaultBrand = this.getDefaultBrand();\n    const others = this.brands.filter(brand => brand.id !== defaultBrand?.id).sort((a, b) => (a.name || a.key).localeCompare(b.name || b.key));\n    const hasBrands = this.brands.length > 0;\n\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Brand')}\n        {this.renderDetailBody([\n          <div class=\"option-list\">\n            {this.renderBrandOption('', this.getDefaultBrandLabel(), 'Organization default', this.renderBrandSwatch(defaultBrand, defaultBrand?.name || 'V'))}\n            {others.length > 0 && <div class=\"option-divider\" />}\n            {others.map(brand => this.renderBrandOption(brand.key, brand.name || brand.key, brand.key, this.renderBrandSwatch(brand, brand.name || brand.key)))}\n          </div>,\n          !hasBrands && (\n            <p class=\"hint\">\n              Configure the look and feel of the signing experience by{' '}\n              <a href={`${getWebAppUrl(this.endpoint)}/settings/branding`} target=\"_blank\" rel=\"noopener\">\n                Creating a Brand\n                <span class=\"icon\" innerHTML={externalLinkIcon} />\n              </a>\n              .\n            </p>\n          ),\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderExpiresView() {\n    const expiresAt = this.expiresAt();\n    const when = `${expiresAt.toLocaleDateString(undefined, {month: 'short', day: 'numeric', year: 'numeric'})} at ${expiresAt.toLocaleTimeString(undefined, {hour: 'numeric', minute: '2-digit'})}`;\n\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Expiration')}\n        {this.renderDetailBody([\n          <div class=\"expires-field\">\n            <input\n              type=\"text\"\n              inputMode=\"numeric\"\n              aria-label=\"Expires in (days)\"\n              placeholder={String(DEFAULT_EXPIRY_DAYS)}\n              value={this.expiresInDays}\n              disabled={this.sending}\n              onInput={(e: any) => this.handleExpiryInput(e)}\n            />\n            <span class=\"suffix\">days</span>\n          </div>,\n          <p class=\"hint\">\n            This envelope will expire on {when}. Expirations may be set from {MIN_EXPIRY_DAYS}-{MAX_EXPIRY_DAYS} days. If left blank, this will default to {DEFAULT_EXPIRY_DAYS}.\n          </p>,\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderSenderView() {\n    const validEmail = !this.senderEmail.trim() || isValidEmail(this.senderEmail.trim());\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Sender')}\n        {this.renderDetailBody([\n          <div class=\"sender-field\">\n            <label htmlFor={`${this.containerId}-sender-name`}>Name</label>\n            <input\n              id={`${this.containerId}-sender-name`}\n              type=\"text\"\n              value={this.effectiveSenderName()}\n              disabled={this.sending}\n              onInput={(e: any) => (this.senderName = e.target.value)}\n            />\n          </div>,\n          <div class=\"sender-field\">\n            <label htmlFor={`${this.containerId}-sender-email`}>Email</label>\n            <input\n              id={`${this.containerId}-sender-email`}\n              type=\"email\"\n              value={this.effectiveSenderEmail()}\n              disabled={this.sending}\n              onInput={(e: any) => (this.senderEmail = e.target.value)}\n            />\n            {!validEmail && <div class=\"field-error\">Enter a valid email address.</div>}\n          </div>,\n          <div class=\"notice\">\n            <span class=\"icon\" innerHTML={infoIcon} />\n              <div>\n                Specify where envelope-completed email notifications and \"Ask a Question\" submissions are delivered.\n                To customize the \"From\" address for email notifications, please configure those in{' '}\n                <a href={`${getWebAppUrl(this.endpoint)}/settings/brands`} target=\"_blank\" rel=\"noopener\">\n                  Brands\n                  <span class=\"icon\" innerHTML={externalLinkIcon} />\n                </a>{' '}\n                .\n              </div>\n          </div>,\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderNotificationsView() {\n    return (\n      <div class=\"detail\">\n        {this.renderDetailHeader('Notifications')}\n        {this.renderDetailBody([\n          <verdocs-checkbox size=\"small\" label=\"Disable notifications\" checked={this.noContact} onInput={(e: any) => (this.noContact = !!e.target.checked)} />,\n          this.noContact && (\n            <div class=\"warning\">\n              <span class=\"icon\" innerHTML={warningIcon} />\n              <div>\n                Disabling notifications turns off invitations and reminders to recipients as well as status updates to you. You may obtain invite links in the recipient summary or\n                via an API call. We strongly recommend enabling{' '}\n                <a href={`${getWebAppUrl(this.endpoint)}/settings/webhooks`} target=\"_blank\" rel=\"noopener\">\n                  Webhooks\n                  <span class=\"icon\" innerHTML={externalLinkIcon} />\n                </a>{' '}\n                to help automate this process.\n              </div>\n            </div>\n          ),\n        ])}\n        {this.renderDoneButton()}\n      </div>\n    );\n  }\n\n  renderDetail() {\n    switch (this.view) {\n      case 'recipient':\n        return this.renderRecipientView();\n      case 'brand':\n        return this.renderBrandView();\n      case 'expires':\n        return this.renderExpiresView();\n      case 'notifications':\n        return this.renderNotificationsView();\n      case 'sender':\n        return this.renderSenderView();\n      default:\n        return null;\n    }\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (!this.endpoint.session) {\n      return (\n        <Host style={{display: 'flex'}}>\n          <verdocs-component-error message=\"You must be authenticated to use this module.\" />\n        </Host>\n      );\n    }\n\n    const levels = this.getSequenceNumbers();\n    const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);\n    const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;\n    const assignedEmails = rolesAssigned.map(r => r.email.toLowerCase());\n    const hasDuplicateEmails = new Set(assignedEmails).size < assignedEmails.length;\n    const expiresAt = this.expiresAt();\n    const expiresShort = expiresAt.toLocaleDateString(undefined, {month: 'short', day: 'numeric'});\n\n    return (\n      <Host class={{'sendable': this.template?.is_sendable, 'detail-open': this.view !== 'main'}}>\n        <div class=\"track\">\n          <div class=\"pane main-pane\" aria-hidden={this.view !== 'main' ? 'true' : 'false'}>\n            <div class=\"section-title\">Recipients</div>\n            <div class=\"recipients\">\n              {levels.map(level => [\n                levels.length > 1 && <div class=\"step\">Step {level}</div>,\n                this.getRolesAtLevel(level).map(role => {\n                  const roleIndex = getRoleIndex(this.template, role.role_name);\n                  const completed = this.rolesCompleted[role.id];\n                  const assigned = completed && rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;\n                  const optionLabels = this.getRecipientOptionLabels(completed);\n\n                  return (\n                    <button type=\"button\" class=\"recipient\" data-ri={roleIndex} data-rn={role.role_name} onClick={e => this.handleClickRole(e, role)}>\n                      <span class=\"role-dot\" style={{backgroundColor: getRGBA(roleIndex)}} />\n                      <span class=\"who\">\n                        <span class=\"role-name\">{role.role_name}</span>\n                        {assigned ? (\n                          <span class=\"who-detail\">\n                            {formatFullName(completed)} · {completed.email}\n                          </span>\n                        ) : (\n                          <span class=\"who-detail configure\">Configure recipient</span>\n                        )}\n                        {optionLabels.length > 0 && (\n                          <span class=\"options\">\n                            {optionLabels.map(label => (\n                              <span class=\"pill\">{label}</span>\n                            ))}\n                          </span>\n                        )}\n                      </span>\n                      <span class=\"chevron\" innerHTML={chevronRightIcon} />\n                    </button>\n                  );\n                }),\n              ])}\n            </div>\n\n            <div class=\"section-title delivery-title\">Delivery</div>\n            <div class=\"delivery\">\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('brand')} disabled={this.sending}>\n                <span class=\"key\">Brand</span>\n                <span class=\"value\">{this.getSelectedBrandLabel()}</span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('expires')} disabled={this.sending}>\n                <span class=\"key\">Expires</span>\n                <span class=\"value\">\n                  {this.effectiveExpiryDays()} days <small>· {expiresShort}</small>\n                </span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('sender')} disabled={this.sending}>\n                <span class=\"key\">Sender</span>\n                <span class=\"value stacked\">\n                  <span class=\"line\">{this.effectiveSenderName() || this.effectiveSenderEmail()}</span>\n                  {this.effectiveSenderName() && this.effectiveSenderEmail() ? <small class=\"line\">{this.effectiveSenderEmail()}</small> : null}\n                </span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n              <button type=\"button\" class=\"kv\" onClick={() => this.showView('notifications')} disabled={this.sending}>\n                <span class=\"key\">Notifications</span>\n                <span class={{value: true, off: this.noContact}}>{this.noContact ? 'Off' : 'On'}</span>\n                <span class=\"chevron\" innerHTML={chevronRightIcon} />\n              </button>\n            </div>\n\n            <div class=\"main-spacer\" />\n\n            <div class=\"buttons\">\n              {hasDuplicateEmails && <div class=\"error-message\">Recipients cannot share the same email.</div>}\n              {this.sending && <verdocs-spinner />}\n              {this.showCancel && <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} disabled={this.sending} />}\n              <verdocs-button label=\"Send\" size=\"small\" disabled={!allRolesAssigned || this.sending || hasDuplicateEmails} onClick={e => this.handleSend(e)} />\n            </div>\n          </div>\n\n          <div\n            class=\"pane detail-pane\"\n            aria-hidden={this.view === 'main' ? 'true' : 'false'}\n            onPointerDown={e => this.handleSwipeStart(e)}\n            onPointerUp={e => this.handleSwipeEnd(e)}\n            onPointerCancel={() => (this.swipeStart = null)}\n          >\n            {this.renderDetail()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-ek0LNMtb.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as o,h as i,d as t,F as r,t as d}from"./p-yZBlG3YQ.js";import{i as a}from"./p-COaijEV0.js";import{S as l}from"./p-C7k2AOsW.js";import{S as n}from"./p-C7hFgM52.js";import{d as c}from"./p-Bb5V9TQx.js";import{d as p}from"./p-DGNIsXfr.js";import{d as f}from"./p-C-v22G3g.js";import{d as u}from"./p-DHzSlpJw.js";import{d as h}from"./p-DqzFuSNN.js";import{d as b}from"./p-DhOuB4nS.js";import{d as m}from"./p-Bodw4NVB.js";import{d as v}from"./p-Bxvw_LqR.js";import{d as g}from"./p-PfdIkMoz.js";const x=()=>`verdocs-field-radio{font-family:var(--verdocs-primary-font, "Inter", "Barlow", sans-serif);width:14px;height:14px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:"";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:12px;height:12px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio: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:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio: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:#f3f3fc;background:#f3f3fc}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid var(--verdocs-required-field-border)}verdocs-field-radio.hide{display:none}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .settings-icon:hover{opacity:1}`;const k=`<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>`;const y=`<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>`;const w=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.settingsChanged=o(this,"settingsChanged");this.deleted=o(this,"deleted");this.source="template";this.sourceid="";this.fieldname="";this.field=null;this.disabled=false;this.required=false;this.done=false;this.editable=false;this.moveable=false;this.xscale=1;this.yscale=1;this.pagenumber=1;this.showingProperties=false;this.focused=false}handleBlur(){this.focused=false}async focusField(){this.el.focus();this.focused=true}async showSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.showPanel){e.showPanel()}}async hideSettingsPanel(){const e=document.getElementById(`verdocs-settings-panel-${this.fieldname}`);if(e&&e.hidePanel){e.hidePanel()}}onEditableChanged(e,s){if(s&&!e){a(this.el).unset()}}disconnectedCallback(){a(this.el).unset()}render(){const{source:e,sourceid:s,fieldname:o,editable:d=false,done:a=false,disabled:c=false,focused:p,xscale:f=1,yscale:u=1}=this;const{index:h,field:b}=n.getField(e,s,o,this.field);const{name:m,required:v=false,label:g="",group:x="",value:w=false,readonly:E=false}=b||{};const j=`signer-${h%10+1}`;const C=w==="true";if(a){return i(t,{class:{"verdocs-field":true,done:a},style:{maxWidth:"10px"}},i("span",{innerHTML:C?y:k}))}return i(t,{class:{"verdocs-field":true,required:this.required||v,disabled:c,done:a,focused:p,[j]:true}},g&&i("div",{class:"label"},g),d&&x&&i("div",{class:"group"},x),i("input",{id:o,type:"radio",name:x||o,value:m,checked:!!C,disabled:E||c,required:v}),i("label",{htmlFor:o}),d&&i(r,null,i("div",{id:`verdocs-settings-panel-trigger-${o}`,style:{transform:`scale(${Math.floor(1/f*1e3)/1e3}, ${Math.floor(1/u*1e3)/1e3})`},class:"settings-icon",innerHTML:l,onClick:e=>{e.stopPropagation();this.showingProperties=!this.showingProperties}}),this.showingProperties&&i("verdocs-portal",{anchor:`verdocs-settings-panel-trigger-${o}`,onClickAway:()=>this.showingProperties=false},i("verdocs-template-field-properties",{templateId:s,fieldName:o,onClose:()=>this.showingProperties=false,onDelete:()=>{var e;(e=this.deleted)===null||e===void 0?void 0:e.emit({fieldName:o});return this.hideSettingsPanel()},onSettingsChanged:e=>{var s;(s=this.settingsChanged)===null||s===void 0?void 0:s.emit(e.detail);return this.hideSettingsPanel()},helpText:"Radio buttons capture the recipient's selection of just one of several related (exclusive) options."}))))}get el(){return this}static get watchers(){return{editable:[{onEditableChanged:0}]}}static get style(){return x()}},[0,"verdocs-field-radio",{source:[513],sourceid:[513],fieldname:[513],field:[16],isPreview:[516,"is-preview"],disabled:[516],required:[516],done:[516],editable:[516],moveable:[516],xscale:[514],yscale:[514],pagenumber:[514],showingProperties:[32],focused:[32],focusField:[64],showSettingsPanel:[64],hideSettingsPanel:[64]},[[0,"blur","handleBlur"]],{editable:[{onEditableChanged:0}]}]);function E(){if(typeof customElements==="undefined"){return}const e=["verdocs-field-radio","verdocs-button","verdocs-checkbox","verdocs-component-error","verdocs-help-icon","verdocs-loader","verdocs-portal","verdocs-select-input","verdocs-template-field-properties","verdocs-text-input"];e.forEach((e=>{switch(e){case"verdocs-field-radio":if(!customElements.get(d(e))){customElements.define(d(e),w)}break;case"verdocs-button":if(!customElements.get(d(e))){c()}break;case"verdocs-checkbox":if(!customElements.get(d(e))){p()}break;case"verdocs-component-error":if(!customElements.get(d(e))){f()}break;case"verdocs-help-icon":if(!customElements.get(d(e))){u()}break;case"verdocs-loader":if(!customElements.get(d(e))){h()}break;case"verdocs-portal":if(!customElements.get(d(e))){b()}break;case"verdocs-select-input":if(!customElements.get(d(e))){m()}break;case"verdocs-template-field-properties":if(!customElements.get(d(e))){v()}break;case"verdocs-text-input":if(!customElements.get(d(e))){g()}break}}))}export{w as V,E as d};
-//# sourceMappingURL=p-ek0LNMtb.js.map

package/dist/components/p-ek0LNMtb.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["verdocsFieldRadioCss","RadioIconUnselected","RadioIconSelected","VerdocsFieldRadio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","source","sourceid","fieldname","field","disabled","required","done","editable","moveable","xscale","yscale","pagenumber","showingProperties","focused","handleBlur","focusField","el","focus","showSettingsPanel","settingsPanel","document","getElementById","showPanel","hideSettingsPanel","hidePanel","onEditableChanged","newVal","oldVal","interact","unset","disconnectedCallback","render","index","Store","getField","name","label","group","value","readonly","signerClass","selected","h","Host","class","style","maxWidth","innerHTML","id","type","checked","htmlFor","Fragment","transform","Math","floor","SettingsIcon","onClick","e","stopPropagation","anchor","onClickAway","templateId","fieldName","onClose","onDelete","_a","deleted","emit","onSettingsChanged","settingsChanged","detail","helpText"],"sources":["src/components/fields/verdocs-field-radio/verdocs-field-radio.scss?tag=verdocs-field-radio","src/components/fields/verdocs-field-radio/verdocs-field-radio.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  scroll-margin: 20px 0;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  svg {\n    margin-top: 4px;\n  }\n\n  &.disabled.done {\n    opacity: 1;\n  }\n\n  // To avoid conflicting with the use of a label for the checkbox itself\n  div.label {\n    top: -14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #4a4a99;\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n  }\n\n  div.group {\n    top: 14px;\n    left: -1px;\n    height: 14px;\n    color: white;\n    padding: 0 4px;\n    font-size: 9px;\n    line-height: 13px;\n    position: absolute;\n    background: #bb0589;\n    border-bottom-left-radius: 2px;\n    border-bottom-right-radius: 2px;\n  }\n\n  input {\n    // This is needed to bring down the cursor from the parent element, which is where interactjs applies it\n    cursor: inherit;\n  }\n\n  &.disabled input {\n    opacity: 0.5;\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: 12px;\n        height: 12px;\n        position: absolute;\n        // This looks off in Storybook but correct in apps.\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: #f3f3fc;\n          background: #f3f3fc;\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    border: 1px solid var(--verdocs-required-field-border);\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  verdocs-button-panel {\n    margin-left: -20px;\n    margin-top: -7px;\n    transform: scale(0.7);\n  }\n\n  .settings-icon {\n    position: absolute;\n    top: -6px;\n    left: -20px;\n    display: inline-block;\n    cursor: pointer;\n    opacity: 0.3;\n\n    svg {\n      fill: $border-color;\n    }\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n}\n","import interact from 'interactjs';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, Event, EventEmitter, h, Host, Method, Prop, Fragment, State, Element, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\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',\n  styleUrl: 'verdocs-field-radio.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadio {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, overrides the field's required object. Primarily used in Storybook mode.\n   */\n  @Prop({reflect: true}) required?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: 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({reflect: true}) 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({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  @State() showingProperties?: boolean = false;\n  @State() focused = false;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when the field is deleted.\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @Listen('blur')\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.el.focus();\n    this.focused = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {name, required = false, label = '', group = '', value = false, readonly = false} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const selected = value === 'true';\n\n    if (done) {\n      return (\n        <Host class={{'verdocs-field': true,done}} style={{maxWidth: '10px'}}>\n          <span innerHTML={selected ? RadioIconSelected : RadioIconUnselected} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required: this.required || required, disabled, done, focused, [signerClass]: true}}>\n        {label && <div class=\"label\">{label}</div>}\n        {editable && group && <div class=\"group\">{group}</div>}\n\n        <input id={fieldname} type=\"radio\" name={group || fieldname} value={name} checked={!!selected} disabled={readonly || disabled} required={required} />\n        <label htmlFor={fieldname} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={\"Radio buttons capture the recipient's selection of just one of several related (exclusive) options.\"}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}