@verdocs/web-sdk 1.9.6 → 1.9.9

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

@@ -0,0 +1,2 @@
+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-2f4c5964.system.entry.js.map → p-a8699c5d.system.entry.js.map}

@@ -1 +1 @@
-{"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":"m7DAAA,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"]}
+{"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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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-b8e6a9b6.system.entry.js.map

@@ -1 +1 @@
-{"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/Documents/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/Documents/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"]}
+{"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"]}