@verdocs/web-sdk 1.9.9 → 1.9.14

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

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r["throw"](e))}catch(e){i(e)}}function l(e){e.done?n(e.value):o(e.value).then(a,s)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(i=a[0]&2?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;if(o=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){n.label=a[1];break}if(a[0]===6&&n.label<i[1]){n.label=i[1];i=a;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(a);break}if(i[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];o=0}finally{r=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-a7433630.system.js","./p-6e1ada33.system.js","./p-a4041773.system.js","./p-3035b6c5.system.js","./p-03677b65.system.js","./p-187b20b7.system.js","./p-df878df9.system.js"],(function(e){"use strict";var t,n,r,o,i,a,s,l,u,c;return{setters:[function(e){t=e.r;n=e.c;r=e.h;o=e.H},function(){},function(e){i=e.V},function(e){a=e.r;s=e.a},function(e){l=e.s},function(e){u=e.l},function(e){c=e.S},function(){}],execute:function(){var d="";var p=e("verdocs_preview",function(){function e(e){t(this,e);this.sdkError=n(this,"sdkError",7);this.endpoint=i.getDefault();this.templateId=null}e.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,r;return __generator(this,(function(o){switch(o.label){case 0:this.endpoint.loadSession();if(!this.templateId){console.log("[PREVIEW] Missing required template ID ".concat(this.templateId));return[2]}o.label=1;case 1:o.trys.push([1,3,,4]);console.log("[PREVIEW] Loading template ".concat(this.templateId));return[4,u(this.endpoint,this.templateId)];case 2:o.sent();return[3,4];case 3:r=o.sent();console.log("[PREVIEW] Error loading template",r);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new c(r.message,(t=r.response)===null||t===void 0?void 0:t.status,(n=r.response)===null||n===void 0?void 0:n.data));return[3,4];case 4:return[2]}}))}))};e.prototype.handleFieldChange=function(e,t,n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){console.log("[PREVIEW] handleFieldChange",e,t,n);return[2]}))}))};e.prototype.handlePageRendered=function(e){var t=this;var n=e.detail;console.log("[PREVIEW] Page rendered",n);var r=l.fields.filter((function(e){return e.page_sequence===n.renderedPage.pageNumber}));console.log("[PREVIEW] Fields on page",r);r.forEach((function(e){return a(e,n.renderedPage,s(l.roleNames,e.role_name),t.handleFieldChange,true)}))};e.prototype.render=function(){var e=this;if(l.loading){return r(o,null,r("verdocs-loader",null))}return r(o,null,l.template?r("div",{class:"inner"},r("verdocs-view",{templateId:this.templateId,endpoint:this.endpoint,onPageRendered:function(t){return e.handlePageRendered(t)},pageLayers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]})):r("div",null,"Error loading Template. Please try again later."))};return e}());p.style=d}}}));
-//# sourceMappingURL=p-a8699c5d.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/embeds/verdocs-preview/verdocs-preview.scss?tag=verdocs-preview","src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"names":["verdocsPreviewCss","VerdocsPreview","exports","VerdocsEndpoint","getDefault","class_1","prototype","componentDidLoad","this","endpoint","loadSession","templateId","console","log","concat","loadTemplate","_d","sent","e_1","_a","sdkError","emit","SDKError","message","_b","response","status","_c","data","handleFieldChange","field","e","optionId","handlePageRendered","_this","pageInfo","detail","fields","TemplateStore","filter","page_sequence","renderedPage","pageNumber","forEach","renderDocumentField","getRoleIndex","roleNames","role_name","render","loading","h","Host","template","class","onPageRendered","pageLayers","name","type"],"mappings":"64DAAA,IAAMA,EAAoB,OCkBbC,EAAcC,EAAA,kBAAA,oFAIWC,EAAgBC,6BAKhB,KAS9BC,EAAAC,UAAAC,iBAAN,mIACEC,KAAKC,SAASC,cAEd,IAAKF,KAAKG,WAAY,CACpBC,QAAQC,IAAI,0CAAAC,OAA0CN,KAAKG,aAC3D,MAAA,CAAA,0CAIAC,QAAQC,IAAI,8BAAAC,OAA8BN,KAAKG,aAC/C,MAAA,CAAA,EAAMI,EAAaP,KAAKC,SAAUD,KAAKG,oBAAvCK,EAAAC,qCAEAL,QAAQC,IAAI,mCAAoCK,IAChDC,EAAAX,KAAKY,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,KAAK,IAAIC,EAASJ,EAAEK,SAASC,EAAAN,EAAEO,YAAQ,MAAAD,SAAA,OAAA,EAAAA,EAAEE,QAAQC,EAAAT,EAAEO,YAAQ,MAAAE,SAAA,OAAA,EAAAA,EAAEC,4CAI1EvB,EAAAC,UAAAuB,kBAAN,SAAwBC,EAAuBC,EAAQC,wFACrDpB,QAAQC,IAAI,8BAA+BiB,EAAOC,EAAGC,oBAGvD3B,EAAAC,UAAA2B,mBAAA,SAAmBF,GAAnB,IAAAG,EAAA1B,KACE,IAAM2B,EAAWJ,EAAEK,OACnBxB,QAAQC,IAAI,0BAA2BsB,GAEvC,IAAME,EAASC,EAAcD,OAAOE,QAAO,SAAAT,GAAS,OAAAA,EAAMU,gBAAkBL,EAASM,aAAaC,cAClG9B,QAAQC,IAAI,2BAA4BwB,GACxCA,EAAOM,SAAQ,SAAAb,GAAS,OAAAc,EAAoBd,EAAOK,EAASM,aAAcI,EAAaP,EAAcQ,UAAWhB,EAAMiB,WAAYb,EAAKL,kBAAmB,UAG5JxB,EAAAC,UAAA0C,OAAA,WAAA,IAAAd,EAAA1B,KACE,GAAI8B,EAAcW,QAAS,CACzB,OACEC,EAACC,EAAI,KACHD,EAAA,iBAAA,OAMN,OACEA,EAACC,EAAI,KACFb,EAAcc,SACbF,EAAA,MAAA,CAAKG,MAAM,SACTH,EAAA,eAAA,CACEvC,WAAYH,KAAKG,WACjBF,SAAUD,KAAKC,SACf6C,eAAgB,SAAAvB,GAAK,OAAAG,EAAKD,mBAAmBF,IAC7CwB,WAAY,CACV,CAACC,KAAM,OAAQC,KAAM,UACrB,CAACD,KAAM,WAAYC,KAAM,WAK/BP,EAAA,MAAA,KAAA,8DAzEiB","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-preview {\n  //display: flex;\n  //overflow: hidden;\n  //position: relative;\n  //min-height: 600px;\n  //flex-direction: column;\n  //box-sizing: border-box;\n  //font-family: $verdocs-primary-font;\n  //\n  //div {\n  //  box-sizing: border-box;\n  //}\n  //\n  //.toolbar {\n  //  width: 100%;\n  //  margin: 0 auto;\n  //  padding: 0 14px;\n  //  position: relative;\n  //}\n  //\n  //.tools {\n  //  width: 100%;\n  //  color: #fff;\n  //  height: 56px;\n  //  display: flex;\n  //  font-size: 12px;\n  //  align-items: center;\n  //  flex-direction: row;\n  //  background-color: $medium-bg;\n  //}\n  //\n  //.cover {\n  //  top: 0;\n  //  left: 0;\n  //  right: 0;\n  //  bottom: 0;\n  //  z-index: 999;\n  //  position: absolute;\n  //  background: rgba(0, 0, 0, 0.5);\n  //}\n  //\n  //.document {\n  //  flex: 1;\n  //  height: 100%;\n  //  display: flex;\n  //  position: relative;\n  //  overflow-y: scroll;\n  //  align-items: center;\n  //  flex-direction: column;\n  //  justify-content: center;\n  //\n  //  .inner {\n  //    width: 100%;\n  //    max-width: 1028px;\n  //  }\n  //}\n  //\n  //.agree {\n  //  flex: 1;\n  //  flex-direction: row;\n  //  display: flex;\n  //  align-items: center;\n  //  margin-right: 10px;\n  //\n  //  .intro {\n  //    display: none;\n  //  }\n  //\n  //  .header {\n  //    flex: 0 0 56px;\n  //  }\n  //\n  //  .agree-checkbox {\n  //    background: #ccc;\n  //    flex: 0 0 20px;\n  //    display: flex;\n  //    width: 20px;\n  //    height: 20px;\n  //    border-radius: 3px;\n  //    position: relative;\n  //    margin: 0 10px 0 14px;\n  //\n  //    input[type='checkbox']:checked + label:after {\n  //      filter: alpha(opacity=100);\n  //      opacity: 1;\n  //    }\n  //\n  //    label {\n  //      left: 2px;\n  //      top: 2px;\n  //      width: 16px;\n  //      height: 16px;\n  //      cursor: pointer;\n  //      position: absolute;\n  //      background: #33354c;\n  //      box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.8);\n  //\n  //      .agree-checkbox label:hover::after {\n  //        filter: alpha(opacity=30);\n  //        opacity: 0.3;\n  //      }\n  //\n  //      &:after {\n  //        top: 2px;\n  //        left: 3px;\n  //        width: 8px;\n  //        opacity: 0;\n  //        height: 5px;\n  //        content: '';\n  //        position: absolute;\n  //        background: transparent;\n  //        filter: alpha(opacity=0);\n  //        transform: rotate(-45deg);\n  //        border: 2px solid #fcfff4;\n  //        border-top: none;\n  //        border-right: none;\n  //      }\n  //    }\n  //  }\n  //}\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, Prop, h} from '@stencil/core';\nimport {Event, EventEmitter, Host} from '@stencil/core';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {getRoleIndex, renderDocumentField} from '../../../utils/utils';\nimport {IPageRenderEvent} from '../verdocs-view/verdocs-view';\nimport TemplateStore from '../../../utils/templateStore';\nimport {loadTemplate} from '../../../utils/Templates';\nimport {SDKError} from '../../../utils/errors';\n\n/**\n * Display a template preview experience.\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * 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  // TODO: Move to state store so we can load this one time\n  async componentDidLoad() {\n    this.endpoint.loadSession();\n\n    if (!this.templateId) {\n      console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n      return;\n    }\n\n    try {\n      console.log(`[PREVIEW] Loading template ${this.templateId}`);\n      await loadTemplate(this.endpoint, this.templateId);\n    } catch (e) {\n      console.log('[PREVIEW] Error loading template', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {\n    console.log('[PREVIEW] handleFieldChange', field, e, optionId);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IPageRenderEvent;\n    console.log('[PREVIEW] Page rendered', pageInfo);\n\n    const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n    console.log('[PREVIEW] Fields on page', fields);\n    fields.forEach(field => renderDocumentField(field, pageInfo.renderedPage, getRoleIndex(TemplateStore.roleNames, field.role_name), this.handleFieldChange, true));\n  }\n\n  render() {\n    if (TemplateStore.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    // TODO: Render a better error\n    return (\n      <Host>\n        {TemplateStore.template ? (\n          <div class=\"inner\">\n            <verdocs-view\n              templateId={this.templateId}\n              endpoint={this.endpoint}\n              onPageRendered={e => this.handlePageRendered(e)}\n              pageLayers={[\n                {name: 'page', type: 'canvas'},\n                {name: 'controls', type: 'div'},\n              ]}\n            />\n          </div>\n        ) : (\n          <div>Error loading Template. Please try again later.</div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-b348e0ee.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,H as e,a as h}from"./p-ff1278ed.js";const o="verdocs-document-page{width:100%;position:relative}verdocs-document-page .verdocs-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-document-page .verdocs-document-page-layer.img{max-width:100%}";const a=class{constructor(s){t(this,s);this.pageRendered=i(this,"pageRendered",7);this.pageImageUri="";this.pageNumber=1;this.virtualWidth=612;this.virtualHeight=792;this.layers=[{name:"page",type:"canvas"}];this.containerId=`verdocs-document-page-${Math.random().toString(36).substring(2,11)}`;this.renderedWidth=this.virtualWidth;this.renderedHeight=this.virtualHeight;this.naturalWidth=this.virtualWidth;this.naturalHeight=this.virtualHeight;this.aspectRatio=this.virtualWidth/this.virtualHeight;this.skipFirstNotification=true}componentDidLoad(){this.resizeObserver=new ResizeObserver((t=>{for(const i of t){const t=i.contentRect.width;this.renderedWidth=t;this.renderedHeight=this.virtualHeight*(t/this.virtualWidth)}this.notifyRenderedSize()}));this.resizeObserver.observe(this.container)}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}notifyRenderedSize(){if(this.skipFirstNotification){this.skipFirstNotification=false;return}this.pageRendered.emit({container:this.container,containerId:this.containerId,pageNumber:this.pageNumber,virtualWidth:this.virtualWidth,virtualHeight:this.virtualHeight,renderedWidth:this.renderedWidth,renderedHeight:this.renderedHeight,naturalWidth:this.naturalWidth,naturalHeight:this.naturalHeight,xScale:this.renderedWidth/this.naturalWidth,yScale:this.renderedHeight/this.naturalHeight})}render(){const t=`${this.renderedHeight}px`;return s(e,{id:`${this.containerId}`,style:{height:t}},this.layers.map((i=>i.type==="div"?s("div",{class:"verdocs-document-page-layer",id:`${this.containerId}-${i.name}`,style:{height:t}}):s("img",{class:"verdocs-document-page-layer img",id:`${this.containerId}-${i.name}`,src:this.pageImageUri,alt:`Page ${this.pageNumber}`,"aria-hidden":true,onLoad:t=>{this.naturalWidth=t.target.naturalWidth;this.naturalHeight=t.target.naturalHeight;this.aspectRatio=this.naturalWidth/this.naturalHeight;console.log("[DOCPAGE] Loaded dimensions",{width:this.naturalWidth,height:this.naturalHeight,aspectRatio:this.aspectRatio})}}))))}get container(){return h(this)}};a.style=o;export{a as verdocs_document_page};
-//# sourceMappingURL=p-b348e0ee.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/elements/verdocs-document-page/verdocs-document-page.scss?tag=verdocs-document-page","src/components/elements/verdocs-document-page/verdocs-document-page.tsx"],"names":["verdocsDocumentPageCss","VerdocsDocumentPage","name","type","Math","random","toString","substring","this","virtualWidth","virtualHeight","[object Object]","resizeObserver","ResizeObserver","entries","entry","renderedWidth","contentRect","width","renderedHeight","notifyRenderedSize","observe","container","_a","disconnect","skipFirstNotification","pageRendered","emit","containerId","pageNumber","naturalWidth","naturalHeight","xScale","yScale","height","h","Host","id","style","layers","map","layer","class","src","pageImageUri","alt","aria-hidden","onLoad","e","target","aspectRatio","console","log"],"mappings":"gEAAA,MAAMA,EAAyB,iTCelBC,EAAmB,4FAOC,mBAMF,oBAME,uBAMC,gBAcD,CAAC,CAACC,KAAM,OAAQC,KAAM,4BAO9B,yBAAyBC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,yBAEvDC,KAAKC,iCACJD,KAAKE,gCACPF,KAAKC,gCACJD,KAAKE,+BACPF,KAAKC,aAAeD,KAAKE,yCAEvB,KAEjCC,mBACEH,KAAKI,eAAiB,IAAIC,gBAAeC,IACvC,IAAK,MAAMC,KAASD,EAAS,CAC3B,MAAME,EAAgBD,EAAME,YAAYC,MACxCV,KAAKQ,cAAgBA,EACrBR,KAAKW,eAAiBX,KAAKE,eAAiBM,EAAgBR,KAAKC,cAGnED,KAAKY,wBAGPZ,KAAKI,eAAeS,QAAQb,KAAKc,WAGnCX,8BACEY,EAAAf,KAAKI,kBAAc,MAAAW,SAAA,OAAA,EAAAA,EAAEC,aASvBb,qBAGE,GAAIH,KAAKiB,sBAAuB,CAC9BjB,KAAKiB,sBAAwB,MAC7B,OAGFjB,KAAKkB,aAAaC,KAAK,CACrBL,UAAWd,KAAKc,UAChBM,YAAapB,KAAKoB,YAClBC,WAAYrB,KAAKqB,WACjBpB,aAAcD,KAAKC,aACnBC,cAAeF,KAAKE,cACpBM,cAAeR,KAAKQ,cACpBG,eAAgBX,KAAKW,eACrBW,aAActB,KAAKsB,aACnBC,cAAevB,KAAKuB,cACpBC,OAAQxB,KAAKQ,cAAgBR,KAAKsB,aAClCG,OAAQzB,KAAKW,eAAiBX,KAAKuB,gBAIvCpB,SACE,MAAMuB,EAAS,GAAG1B,KAAKW,mBAEvB,OACEgB,EAACC,EAAI,CAACC,GAAI,GAAG7B,KAAKoB,cAAeU,MAAO,CAACJ,OAAAA,IACtC1B,KAAK+B,OAAOC,KAAIC,GACfA,EAAMtC,OAAS,MACbgC,EAAA,MAAA,CAAKO,MAAM,8BAA8BL,GAAI,GAAG7B,KAAKoB,eAAea,EAAMvC,OAAQoC,MAAO,CAACJ,OAAAA,KAE1FC,EAAA,MAAA,CACEO,MAAM,kCACNL,GAAI,GAAG7B,KAAKoB,eAAea,EAAMvC,OAEjCyC,IAAKnC,KAAKoC,aACVC,IAAK,QAAQrC,KAAKqB,aAAYiB,cACjB,KACbC,OAASC,IACPxC,KAAKsB,aAAekB,EAAEC,OAAOnB,aAC7BtB,KAAKuB,cAAgBiB,EAAEC,OAAOlB,cAC9BvB,KAAK0C,YAAc1C,KAAKsB,aAAetB,KAAKuB,cAC5CoB,QAAQC,IAAI,8BAA+B,CAAClC,MAAOV,KAAKsB,aAAcI,OAAQ1B,KAAKuB,cAAemB,YAAa1C,KAAK0C","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-document-page {\n  width: 100%;\n  position: relative;\n\n  .verdocs-document-page-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    box-shadow: 0 0 10px 5px #0000000f;\n\n    &.img {\n      max-width: 100%;\n    }\n  }\n}\n","// NOTE: This component does not have a story because it's not intended for external use.\n\nimport {Component, h, Host, Prop, Event, EventEmitter, State, Element} from '@stencil/core';\nimport {IDocumentPageInfo, IPageLayer} from '../../../utils/Types';\n\n/**\n * Represents one document page. This is primarily a layout container used to coordinate positions of\n * page-related layers such as the page itself, signature fields, etc. It is not intended to be used\n * on its own as an individual component.\n */\n@Component({\n  tag: 'verdocs-document-page',\n  styleUrl: 'verdocs-document-page.scss',\n  shadow: false,\n})\nexport class VerdocsDocumentPage {\n  @Element() container: HTMLElement;\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The URL of the image to render as the page background.\n   */\n  @Prop() pageImageUri: string = '';\n\n  /**\n   * The page number being rendered. Not used internally, but included in callbacks/events beacuse page numbers\n   * are used everywhere in document handling. (Reminder: page numbers are 1-based.)\n   */\n  @Prop() pageNumber: number = 1;\n\n  /**\n   * The \"virtual\" width of the page canvas. Defaults to 612 which at 72dpi is 8.5\" wide. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualWidth: number = 612;\n\n  /**\n   * The \"virtual\" height of the page canvas.  Defaults to 792 which at 72dpi is 11\" tall. This is used to compute\n   * the aspect ratio of the final rendered element when scaling up/down.\n   */\n  @Prop() virtualHeight: number = 792;\n\n  /**\n   * The layers that will be rendered. The DOM structure will be a DIV container with one child DIV for each layer.\n   * The parent DIV will have a unique ID, and each child DIV will have that ID with the layer name appended, e.g.\n   * if `pages` was ['page', 'fields'] the structure will be:\n   *\n   * ```\n   *     <div id=\"verdocs-document-page-ker2fr1p9\">\n   *       <div id=\"verdocs-document-page-ker2fr1p9-page\"></div>\n   *       <div id=\"verdocs-document-page-ker2fr1p9-fields\"></div>\n   *     </div>\n   * ```\n   */\n  @Prop() layers: IPageLayer[] = [{name: 'page', type: 'canvas'}];\n\n  /**\n   * Fired when a page has been rendered. This is also fired when the page is resized.\n   */\n  @Event() pageRendered: EventEmitter<IDocumentPageInfo>;\n\n  @State() containerId = `verdocs-document-page-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() renderedWidth: number = this.virtualWidth;\n  @State() renderedHeight: number = this.virtualHeight;\n  @State() naturalWidth: number = this.virtualWidth;\n  @State() naturalHeight: number = this.virtualHeight;\n  @State() aspectRatio: number = this.virtualWidth / this.virtualHeight;\n\n  @State() skipFirstNotification = true;\n\n  componentDidLoad(): void {\n    this.resizeObserver = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        const renderedWidth = entry.contentRect.width;\n        this.renderedWidth = renderedWidth;\n        this.renderedHeight = this.virtualHeight * (renderedWidth / this.virtualWidth);\n      }\n\n      this.notifyRenderedSize();\n    });\n\n    this.resizeObserver.observe(this.container);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.\n  // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.\n  // componentDidRender() {\n  //   this.notifyRenderedSize();\n  // }\n\n  notifyRenderedSize() {\n    // We skip one notification because by default we will always get at least two, one when rendering the initial size\n    // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.\n    if (this.skipFirstNotification) {\n      this.skipFirstNotification = false;\n      return;\n    }\n\n    this.pageRendered.emit({\n      container: this.container,\n      containerId: this.containerId,\n      pageNumber: this.pageNumber,\n      virtualWidth: this.virtualWidth,\n      virtualHeight: this.virtualHeight,\n      renderedWidth: this.renderedWidth,\n      renderedHeight: this.renderedHeight,\n      naturalWidth: this.naturalWidth,\n      naturalHeight: this.naturalHeight,\n      xScale: this.renderedWidth / this.naturalWidth,\n      yScale: this.renderedHeight / this.naturalHeight,\n    });\n  }\n\n  render() {\n    const height = `${this.renderedHeight}px`;\n\n    return (\n      <Host id={`${this.containerId}`} style={{height}}>\n        {this.layers.map(layer =>\n          layer.type === 'div' ? (\n            <div class=\"verdocs-document-page-layer\" id={`${this.containerId}-${layer.name}`} style={{height}} />\n          ) : (\n            <img\n              class=\"verdocs-document-page-layer img\"\n              id={`${this.containerId}-${layer.name}`}\n              // style={{height}}\n              src={this.pageImageUri}\n              alt={`Page ${this.pageNumber}`}\n              aria-hidden={true}\n              onLoad={(e: any) => {\n                this.naturalWidth = e.target.naturalWidth;\n                this.naturalHeight = e.target.naturalHeight;\n                this.aspectRatio = this.naturalWidth / this.naturalHeight;\n                console.log('[DOCPAGE] Loaded dimensions', {width: this.naturalWidth, height: this.naturalHeight, aspectRatio: this.aspectRatio});\n              }}\n            />\n          ),\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.scss?tag=verdocs-kba-dialog","src/components/dialogs/verdocs-kba-dialog/verdocs-kba-dialog.tsx"],"names":["verdocsKbaDialogCss","VerdocsKbaDialog","[object Object]","this","cancel","emit","open","e","target","className","preventDefault","handleCancel","done","response","h","Host","style","display","class","onClick","handleDismiss","steps","step","Fragment","innerHTML","Question","helptitle","helptext","mode","choices","map","choice","htmlFor","label","type","id","name","placeholder","variant","onPress","handleDone","disabled"],"mappings":"+qCAAA,MAAMA,EAAsB,ukECYfC,EAAgB,mGAIJ,aAKC,iBAKI,8BAKD,2FAKO,oBAKV,uBAKM,iCAKF,CAAC,eAAgB,cAAe,cAAe,oBAAqB,YAAa,4BAKrF,oBAYJ,GAEpBC,eACEC,KAAKC,OAAOC,OACZF,KAAKG,KAAO,MAIdJ,cAAcK,GACZ,GAAIA,EAAEC,OAAOC,YAAc,qBAAsB,CAC/CF,EAAEG,iBACFP,KAAKQ,gBAITT,aACEC,KAAKS,KAAKP,KAAKF,KAAKU,UACpBV,KAAKG,KAAO,MAGdJ,SACE,OACEY,EAACC,EAAI,CAACC,MAAO,CAACC,QAASd,KAAKG,KAAO,QAAU,SAC3CQ,EAAA,MAAA,CAAKI,MAAM,qBAAqBC,QAASZ,GAAKJ,KAAKiB,cAAcb,IAC/DO,EAAA,MAAA,CAAKI,MAAM,UACTJ,EAAA,MAAA,CAAKI,MAAM,WAAS,wBAEjBf,KAAKkB,MAAQ,EACZP,EAAA,OAAA,CAAMI,MAAM,QAAM,IACdf,KAAKmB,KAAI,IAAGnB,KAAKkB,MAAK,KAG1BP,EAACS,EAAQ,OAIbT,EAAA,MAAA,CAAKI,MAAM,YACTJ,EAAA,MAAA,CAAKI,MAAM,YAAYM,UAAWC,IAClCX,EAAA,MAAA,CAAKI,MAAM,gBACTJ,EAAA,MAAA,CAAKI,MAAM,cAAcf,KAAKuB,WAC9BZ,EAAA,MAAA,CAAKI,MAAM,aAAaf,KAAKwB,YAIhCxB,KAAKyB,OAAS,SACbd,EAAA,MAAA,CAAKI,MAAM,WACRf,KAAK0B,QAAQC,KAAIC,GAChBjB,EAAA,MAAA,CACEI,MAAO,UAAUa,IAAW5B,KAAKU,SAAW,WAAa,KACzDM,QAAS,KACPhB,KAAKU,SAAWkB,IAGjBA,MAKPjB,EAAA,MAAA,CAAKI,MAAM,SACTJ,EAAA,QAAA,CAAOkB,QAAQ,qBAAqB7B,KAAK8B,OACzCnB,EAAA,QAAA,CAAOoB,KAAK,OAAOC,GAAG,oBAAoBC,KAAK,oBAAoBC,YAAalC,KAAKkC,eAIzFvB,EAAA,MAAA,CAAKI,MAAM,WACTJ,EAAA,iBAAA,CAAgBmB,MAAM,SAASK,QAAQ,UAAUC,QAAS,IAAMpC,KAAKQ,iBACrEG,EAAA,iBAAA,CAAgBmB,MAAM,OAAOM,QAAS,IAAMpC,KAAKqC,aAAcC,UAAWtC,KAAKU","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-kba-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    width: 440px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .step {\n    margin-left: 6px;\n    color: #666;\n  }\n\n  .help-box {\n    background-color: $border-color;\n    display: flex;\n    flex-direction: row;\n    margin: 14px 0;\n    padding: 14px;\n    align-items: center;\n    color: white;\n  }\n\n  .help-details {\n    display: flex;\n    flex-direction: column;\n    margin-left: 15px;\n    font-size: 14px;\n  }\n\n  .help-icon {\n    width: 40px;\n    height: 40px;\n  }\n\n  .help-title {\n    font-weight: 600;\n    margin-bottom: 4px;\n  }\n\n  .help-text {\n    font-weight: 400;\n  }\n\n  .choices {\n    display: grid;\n    gap: 15px;\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    margin: 0 0 15px 0;\n  }\n\n  .choice {\n    border: 1px solid $border-color;\n    border-radius: 5px;\n    display: flex;\n    height: 60px;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    color: $choice-available-color;\n    cursor: pointer;\n\n    &.selected {\n      background-color: $border-color;\n      color: $verdocs-grey-4;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Fragment, Host, State} from '@stencil/core';\nimport Question from './question.svg';\n\n/**\n * Display a text input field. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-kba-dialog',\n  styleUrl: 'verdocs-kba-dialog.scss',\n})\nexport class VerdocsKbaDialog {\n  /**\n   * Which step this confirmation is for, in a multi-step process. Ignored if `steps` is < 2.\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * How many steps exist in a multi-step process. Set to 1 for a single-step process (hides the indicator).\n   */\n  @Prop() steps: number = 3;\n\n  /**\n   * If set, a help/instructions box will be displayed with this title\n   */\n  @Prop() helptitle: string = 'One Time Code';\n\n  /**\n   * If set, a help/instructions box will be displayed with this text\n   */\n  @Prop() helptext: string = 'Please check your text messages for a security code, and enter the code below.';\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() mode: 'text' | 'choice' = 'choice';\n\n  /**\n   * For text input challenges, the label to display next to the input field.\n   */\n  @Prop() label: string = 'PIN';\n\n  /**\n   * For text input challenges, the placeholder to display inside the input field.\n   */\n  @Prop() placeholder: string = 'Enter your PIN...';\n\n  /**\n   * For choice challenges, a set of choices to choose from. 6 choices is recommended to fit most screen sizes.\n   */\n  @Prop() choices: string[] = ['553 Arbor Dr', '18 Lacey Ln', '23A Ball Ct', '2375 Cavallo Blvd', '23-1 RR-7', '151 Boulder Rd'];\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) done: EventEmitter<string>;\n\n  @State() response = '';\n\n  handleCancel() {\n    this.cancel.emit();\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.done.emit(this.response);\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">\n              Confirm Your Identity\n              {this.steps > 1 ? (\n                <span class=\"step\">\n                  ({this.step}/{this.steps})\n                </span>\n              ) : (\n                <Fragment />\n              )}\n            </div>\n\n            <div class=\"help-box\">\n              <div class=\"help-icon\" innerHTML={Question} />\n              <div class=\"help-details\">\n                <div class=\"help-title\">{this.helptitle}</div>\n                <div class=\"help-text\">{this.helptext}</div>\n              </div>\n            </div>\n\n            {this.mode === 'choice' ? (\n              <div class=\"choices\">\n                {this.choices.map(choice => (\n                  <div\n                    class={`choice ${choice === this.response ? 'selected' : ''}`}\n                    onClick={() => {\n                      this.response = choice;\n                    }}\n                  >\n                    {choice}\n                  </div>\n                ))}\n              </div>\n            ) : (\n              <div class=\"input\">\n                <label htmlFor=\"verdocs-kba-input\">{this.label}</label>\n                <input type=\"text\" id=\"verdocs-kba-input\" name=\"verdocs-kba-input\" placeholder={this.placeholder} />\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onPress={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onPress={() => this.handleDone()} disabled={!this.response} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.scss?tag=verdocs-ok-dialog","src/components/dialogs/verdocs-ok-dialog/verdocs-ok-dialog.tsx"],"names":["verdocsOkDialogCss","VerdocsOkDialog","[object Object]","reason","this","closed","emit","open","e","target","className","preventDefault","handleClose","h","Host","style","display","class","onClick","handleDismiss","heading","message","cancel","label","variant","onPress"],"mappings":"yDAAA,MAAMA,EAAqB,4lCCWdC,EAAe,2EAIA,gBAKA,aAKF,kBAME,MAO1BC,YAAYC,GACVC,KAAKC,OAAOC,KAAKH,GACjBC,KAAKG,KAAO,MAIdL,cAAcM,GACZ,GAAIA,EAAEC,OAAOC,YAAc,qBAAsB,CAC/CF,EAAEG,iBACFP,KAAKQ,YAAY,WAIrBV,SACE,OACEW,EAACC,EAAI,CAACC,MAAO,CAACC,QAASZ,KAAKG,KAAO,QAAU,SAC3CM,EAAA,MAAA,CAAKI,MAAM,qBAAqBC,QAASV,GAAKJ,KAAKe,cAAcX,IAC/DK,EAAA,MAAA,CAAKI,MAAM,UACTJ,EAAA,MAAA,CAAKI,MAAM,WAAWb,KAAKgB,SAC3BP,EAAA,MAAA,CAAKI,MAAM,WACRb,KAAKiB,QAENR,EAAA,MAAA,CAAKI,MAAM,WACRb,KAAKkB,OAAST,EAAA,iBAAA,CAAgBU,MAAM,SAASC,QAAQ,UAAUC,QAAS,IAAMrB,KAAKQ,YAAY,YAAgBC,EAAA,MAAA,CAAKE,MAAO,CAACC,QAAS,UACtIH,EAAA,iBAAA,CAAgBU,MAAM,KAAKE,QAAS,IAAMrB,KAAKQ,YAAY","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-ok-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  .background-overlay {\n    position: absolute;\n    z-index: 10000;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #0000007f;\n  }\n\n  .dialog {\n    max-width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    font-size: 16px;\n    flex-direction: row;\n    background: #444444;\n    padding: 8px 16px;\n    color: $verdocs-grey-4;\n  }\n\n  .content {\n    font-size: 16px;\n    background: $verdocs-grey-4;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, Host} from '@stencil/core';\n\n/**\n * Display a simple text dialog box with an Ok button. This adds a partially-transparent overlay and screen-centered dialog\n * box with a message and optional header/title. An OK button is shown that will dismiss the message.\n * It can also be dismissed by clicking the background overlay.\n */\n@Component({\n  tag: 'verdocs-ok-dialog',\n  styleUrl: 'verdocs-ok-dialog.scss',\n})\nexport class VerdocsOkDialog {\n  /**\n   * The title of the dialog. \"title\" is a reserved word, so we use heading.\n   */\n  @Prop() heading: string = '';\n\n  /**\n   * The message content to display.\n   */\n  @Prop() message: string = '';\n\n  /**\n   * Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed.\n   */\n  @Prop() open: boolean = false;\n\n  /**\n   * If set, a cancel button will also be displayed. Note that the dialog is always cancelable by clicking the background\n   * overlay to dismiss it.\n   */\n  @Prop() cancel: boolean = false;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the closure reason.\n   */\n  @Event({composed: true}) closed: EventEmitter<'cancel' | 'ok'>;\n\n  handleClose(reason: 'cancel' | 'ok') {\n    this.closed.emit(reason);\n    this.open = false;\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleClose('cancel');\n    }\n  }\n\n  render() {\n    return (\n      <Host style={{display: this.open ? 'block' : 'none'}}>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">{this.heading}</div>\n            <div class=\"content\">\n              {this.message}\n\n              <div class=\"buttons\">\n                {this.cancel ? <verdocs-button label=\"CANCEL\" variant=\"outline\" onPress={() => this.handleClose('cancel')} /> : <div style={{display: 'none'}} />}\n                <verdocs-button label=\"OK\" onPress={() => this.handleClose('ok')} />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,2 +0,0 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var o,i=1,t=arguments.length;i<t;i++){o=arguments[i];for(var n in o)if(Object.prototype.hasOwnProperty.call(o,n))e[n]=o[n]}return e};return __assign.apply(this,arguments)};var __spreadArray=this&&this.__spreadArray||function(e,o,i){if(i||arguments.length===2)for(var t=0,n=o.length,r;t<n;t++){if(r||!(t in o)){if(!r)r=Array.prototype.slice.call(o,0,t);r[t]=o[t]}}return e.concat(r||Array.prototype.slice.call(o))};System.register(["./p-97329951.system.js","./p-e12b7fbc.system.js","./p-a4041773.system.js"],(function(e){"use strict";var o,i,t,n,r,d;return{setters:[function(e){o=e.r;i=e.c;t=e.h;n=e.H},function(e){r=e.c},function(e){d=e.g}],execute:function(){var s='<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>\n';var a='verdocs-dropdown{font-family:"Barlow", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}';var l=e("verdocs_dropdown",function(){function e(e){o(this,e);this.optionSelected=i(this,"optionSelected",7);this.options=[];this.open=undefined;this.isOpen=undefined}e.prototype.componentWillLoad=function(){this.isOpen=!!this.open};e.prototype.componentDidLoad=function(){this.popper=r(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,6]}}]})};e.prototype.handleSelectOption=function(e,o){e.stopPropagation();this.isOpen=false;this.optionSelected.emit(o);this.hide()};e.prototype.showDropdown=function(){var e,o;this.isOpen=true;this.dropdownMenu.setAttribute("data-show","");this.dropdownMenu.removeAttribute("aria-hidden");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:true}],false)})}));(o=this.popper)===null||o===void 0?void 0:o.update()};e.prototype.handleHideDropdown=function(e){var o,i;if(((o=e===null||e===void 0?void 0:e.target)===null||o===void 0?void 0:o.localName)==="button"&&((i=e===null||e===void 0?void 0:e.target)===null||i===void 0?void 0:i.className)==="arrow"){return}this.hide()};e.prototype.toggleDropdown=function(e){e.stopPropagation();if(this.isOpen){this.hide()}else{this.showDropdown()}};e.prototype.hide=function(){var e;this.isOpen=false;this.dropdownMenu.removeAttribute("data-show");this.dropdownMenu.setAttribute("aria-hidden","true");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:false}],false)})}))};e.prototype.render=function(){var e=this;var o;return t(n,{class:{storybook:!!(window===null||window===void 0?void 0:window["STORYBOOK_ENV"]),open:!!this.isOpen}},t("button",{class:"arrow",innerHTML:s,"aria-label":"Open Menu",onClick:function(o){return e.toggleDropdown(o)},onBlur:function(o){return e.handleHideDropdown(o)},ref:function(o){return e.dropdownButton=o}}),t("div",{class:"items","aria-hidden":!this.open,ref:function(o){return e.dropdownMenu=o}},(o=this.options)===null||o===void 0?void 0:o.map((function(o){return t("button",{onClick:function(i){return e.handleSelectOption(i,o)},class:"option",disabled:o.disabled},o.label)}))))};return e}());l.style=a;var c='@charset "UTF-8";verdocs-field-checkbox{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:"";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;background:#f5f5fa;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:"✓";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required label>input[type=checkbox]+*::before{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var p=e("verdocs_field_checkbox",function(){function e(e){o(this,e);this.fieldChange=i(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,i,r,s;var a=d(this.field);var l=(i=(o=a.options)===null||o===void 0?void 0:o[this.option])!==null&&i!==void 0?i:{checked:false};var c=(s=(r=this.disabled)!==null&&r!==void 0?r:a.disabled)!==null&&s!==void 0?s:false;return t(n,{class:{required:a.required,disabled:c}},t("label",null,t("input",{type:"checkbox",tabIndex:a.order,checked:l.checked,disabled:c,required:a.required,onChange:function(o){return e.handleChange(o)}}),t("span",null)))};return e}());p.style=c;var u='verdocs-field-radio-button{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:14px;height:14px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button input[type=radio]+label:before{content:"";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';var f=e("verdocs_field_radio_button",function(){function e(e){o(this,e);this.fieldChange=i(this,"fieldChange",7);this.field=null;this.recipient=undefined;this.option=0;this.disabled=false}e.prototype.handleChange=function(e){console.log("changed",e);this.fieldChange.emit({option:this.option,value:e.target.checked})};e.prototype.render=function(){var e=this;var o,i;var r=d(this.field);var s=(i=(o=this.disabled)!==null&&o!==void 0?o:r.disabled)!==null&&i!==void 0?i:false;return t(n,{class:{required:r.required,disabled:s}},t("input",{type:"radio",tabIndex:r.order,value:r.value,name:r.name,id:"".concat(r.name,"=").concat(r.value),checked:r.checked,disabled:s,required:r.required,onChange:function(o){return e.handleChange(o)}}),t("label",{htmlFor:"".concat(r.name,"=").concat(r.value)}))};return e}());f.style=u}}}));
-//# sourceMappingURL=p-b8e6a9b6.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/controls/verdocs-dropdown/verdocs-dropdown.scss?tag=verdocs-dropdown","src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.scss?tag=verdocs-field-checkbox","src/components/elements/verdocs-field-checkbox-group/verdocs-field-checkbox.tsx","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.scss?tag=verdocs-field-radio-button","src/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.tsx"],"names":["verdocsDropdownCss","VerdocsDropdown","exports","class_1","prototype","componentWillLoad","this","isOpen","open","componentDidLoad","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","handleSelectOption","e","option","stopPropagation","optionSelected","emit","hide","showDropdown","setAttribute","removeAttribute","_a","setOptions","__assign","__spreadArray","enabled","_b","update","handleHideDropdown","target","localName","className","toggleDropdown","render","_this","h","Host","class","storybook","window","innerHTML","SortDown","aria-label","onClick","onBlur","ref","el","aria-hidden","map","disabled","label","verdocsFieldCheckboxCss","VerdocsFieldCheckbox","class_2","handleChange","fieldChange","value","checked","settings","getFieldSettings","field","_d","_c","required","type","tabIndex","order","onChange","verdocsFieldRadioButtonCss","VerdocsFieldRadioButton","class_3","console","log","id","concat","htmlFor"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-dropdown {\n  font-family: $primary-font;\n  display: block;\n\n  .arrow {\n    width: 32px;\n    height: 26px;\n    background: #fff;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    display: inline-flex;\n    border: 1px solid $light-border-color;\n    justify-content: center;\n  }\n\n  .arrow svg {\n    fill: $primary-color;\n    transition: 0.3s;\n  }\n\n  .items {\n    width: 200px;\n    display: none;\n    z-index: 10000;\n    border-radius: 5px;\n    background: $medium-bg;\n    border: 1px solid $item-border-color;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    color: #fff;\n    border: none;\n    display: block;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: $primary-color;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    color: $light-disabled-color;\n    cursor: inherit;\n    background: transparent;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow {\n      background: $secondary-color;\n      border: 1px solid $border-color;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n      fill: #fff;\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.kallmanation.com/styling-a-checkbox-with-only-css\nverdocs-field-checkbox {\n  font-family: $verdocs-primary-font;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  label > input[type='checkbox'] {\n    display: none;\n  }\n\n  label > input[type='checkbox'] + *::before {\n    content: '';\n    position: absolute;\n    display: block;\n    top: 1px;\n    left: 1px;\n    width: 10px;\n    height: 10px;\n    border-radius: 2px;\n    background: $verdocs-grey-3;\n    border: 1px solid rgba(0, 0, 0, 0.7);\n  }\n\n  label > input[type='checkbox']:checked + * {\n    color: $verdocs-green;\n  }\n\n  label > input[type='checkbox']:checked + *::before {\n    content: '✓';\n    color: white;\n    text-align: center;\n    background: $verdocs-green;\n    border-color: $verdocs-green;\n  }\n\n  &.required {\n    label > input[type='checkbox'] + *::before {\n      border: 1px solid $verdocs-red-1;\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-checkbox',\n  styleUrl: 'verdocs-field-checkbox.scss',\n  shadow: false,\n})\nexport class VerdocsFieldCheckbox {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const option = settings.options?.[this.option] ?? {checked: false};\n\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <label>\n          <input type=\"checkbox\" tabIndex={settings.order} checked={option.checked} disabled={disabled} required={settings.required} onChange={e => this.handleChange(e)} />\n          <span />\n        </label>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\n// See https://www.sliderrevolution.com/resources/styling-radio-buttons/\nverdocs-field-radio-button {\n  font-family: $verdocs-primary-font;\n  width: 14px;\n  height: 14px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border-radius: 100%;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n\n    + label {\n      &:before {\n        content: '';\n        background: $verdocs-grey-3;\n        border-radius: 100%;\n        border: 1px solid rgba(0, 0, 0, 0.6);\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        position: absolute;\n        left: 1px;\n        top: 1px;\n        cursor: pointer;\n        text-align: center;\n        transition: all 250ms ease;\n      }\n    }\n\n    &:checked {\n      + label {\n        &:before {\n          background-color: $verdocs-green;\n          box-shadow: inset 0 0 0 2px $verdocs-grey-3;\n        }\n      }\n    }\n\n    &:focus {\n      + label {\n        &:before {\n          outline: none;\n          border-color: $verdocs-green;\n        }\n      }\n    }\n\n    &:disabled {\n      + label {\n        &:before {\n          box-shadow: inset 0 0 0 4px $verdocs-grey-3;\n          border-color: darken($verdocs-grey-3, 25%);\n          background: darken($verdocs-grey-3, 25%);\n        }\n      }\n    }\n\n    + label {\n      &:empty {\n        &:before {\n          margin-right: 0;\n        }\n      }\n    }\n  }\n\n  &.required {\n    input[type='radio'] {\n      + label {\n        &:before {\n          border: 1px solid $verdocs-red-1;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n}\n","import {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField, IRecipient} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a radio button.\n */\n@Component({\n  tag: 'verdocs-field-radio-button',\n  styleUrl: 'verdocs-field-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsFieldRadioButton {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * The recipient completing the form, if known.\n   */\n  @Prop() recipient?: IRecipient;\n\n  /**\n   * The index of the settings option this particular checkbox is for\n   */\n  @Prop() option: number = 0;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<{option: number; value: boolean}>;\n\n  handleChange(e: any) {\n    console.log('changed', e);\n    this.fieldChange.emit({option: this.option, value: e.target.checked});\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    return (\n      <Host class={{required: settings.required, disabled}}>\n        <input\n          type=\"radio\"\n          tabIndex={settings.order}\n          value={settings.value}\n          name={settings.name}\n          id={`${settings.name}=${settings.value}`}\n          checked={settings.checked}\n          disabled={disabled}\n          required={settings.required}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`${settings.name}=${settings.value}`} />\n      </Host>\n    );\n  }\n}\n"]}