@mastercard/connect-components-web-sdk/dist/web.js

The web SDK for the Connect Components project

var ConnectComponents;(()=>{var n={d:(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},e={};n.r(e),n.d(e,{appConfig:()=>t});let t=(e=>{let t=e.APP_SDK_BASE,r;return{setSDKBase:function(e){r=new URL(e)},getSDKBase:function(){let e=(r=r||new URL(t)).toString();return e="/"===e.charAt(e.length-1)?e.substring(0,e.length-1):e},getFrameOrigin:function(){return(r=r||new URL(t)).origin}}})({APP_SDK_BASE:"https://components.finicity.com/connect-components"});var r=(e=>{let{appConfig:r,HTMLElement:t,crypto:n,logger:s,document:i,MutationObserver:a}=e;return class extends t{constructor(){super(),this.eventStream=null,this.events=null}connectedCallback(){var e=this.querySelector("mastercard-event-stream");e?this.eventStream=e:this.getAttribute("event-stream-id")?.length&&(e=this.getAttribute("event-stream-id"),this.eventStream=i.createElement("mastercard-event-stream"),this.eventStream.setAttribute("event-stream-id",e),this.appendChild(this.eventStream),this.events=this.eventStream.events),this.observer=new a(()=>{Array.from(this.querySelectorAll("mastercard-input")).filter(e=>e.getAttribute("form-id")!==this.id).forEach(e=>{e.setAttribute("form-id",this.id)}),Array.from(this.querySelectorAll("mastercard-mfa-choice")).filter(e=>e.getAttribute("form-id")!==this.id).forEach(e=>{e.setAttribute("form-id",this.id)})}),this.observer.observe(this,{subtree:!0,childList:!0,characterData:!1})}onSubmit(e){e.preventDefault(),this.submit()}submit(){var e=n.randomUUID(),t=r.getSDKBase(),e={formId:this.getAttribute("id"),eventType:"submitRequest",requestId:e};this.eventStream?(e.eventStreamId=this.eventStream.getAttribute("event-stream-id"),this.eventStream.querySelector("iframe").contentWindow.postMessage(e,t)):s.warn("No event stream registered!")}}})({appConfig:t,crypto:crypto,HTMLElement:HTMLElement,document:document,MutationObserver:MutationObserver,logger:console});var s=(e=>{let r=e.Promise;return function(t=1){return new r(e=>{setTimeout(()=>{e(null)},t)})}})({Promise:Promise});var i=class{constructor(){this._emitter=new EventTarget,this._eventData=new WeakMap,this._callbacks=new Map}on(e,t){var r=e=>{t(this._eventData.get(e))};this._callbacks.has(e)||this._callbacks.set(e,new WeakMap),this._callbacks.get(e).has(t)||(this._callbacks.get(e).set(t,r),this._emitter.addEventListener(e,r))}off(e,t){var r=this._callbacks.get(e)?.get(t);r&&(this._emitter.removeEventListener(e,r),this._callbacks.get(e)?.delete(t))}emit(e,t){e=new Event(e);this._eventData.set(e,t),this._emitter.dispatchEvent(e)}},a=(e=>{let{HTMLElement:t,window:r,document:n,MastercardEventEmitter:s,appConfig:i,logger:a,sleep:o}=e;return class extends t{constructor(){super(),this.frameReady=!1,this.innerFrame=n.createElement("iframe"),this.emitter=new s,this.elemId=null,this.formId=null,this._hasChanged=!1,this.componentStyles=JSON.stringify({input:{},radio:{},image:{},label:{}})}static get observedAttributes(){return["id","form-id","component-styles"]}addEventListener(e,t){this.emitter.on(e,t)}removeEventListener(e,t){this.emitter.off(e,t)}async attributeChangedCallback(e,t,r){"component-styles"===e?(this.componentStyles=r,this._hasChanged=!0):"id"===e&&t!==r?(this.elemId=r,this._hasChanged=!0):"form-id"===e&&t!==r&&(this.formId=r,this._hasChanged=!0),this.elemId&&this.formId&&this._hasChanged&&(this._hasChanged=!1,this.render())}connectedCallback(){this.formId=this.getAttribute("form-id"),this.elemId=this.getAttribute("id"),this.componentStyles=this.getAttribute("component-styles"),this.appendChild(this.innerFrame);var e=this.generateIframeURL(this.formId,this.elemId);this.innerFrame.setAttribute("src",e),Object.assign(this.innerFrame.style,{width:"100%",height:"100%",border:"none"}),this.registerInputEvents()}async render(){for(;!1===this.isConnected||!1===this.frameReady;)await o();if("string"==typeof this.componentStyles)try{var e={eventType:"updateStyle",data:this.componentStyles};this.innerFrame.contentWindow.postMessage(e,i.getFrameOrigin())}catch(e){a.error("Unable to postMessage to inner frame")}}generateIframeURL(e,t){return""+e+t}registerInputEvents(){r.addEventListener("message",e=>{if(e.origin!==i.getFrameOrigin())a.warn("Ignoring message from unknown origin");else switch(e.data.eventType){case"inputReady":this.frameReady=!0,this.render(),this.emitter.emit("ready");break;case"inputBlur":if(e.data.elementId!==this.elemId)return;this.emitter.emit("blur",e.data);break;case"inputFocus":e.data.elementId===this.elemId&&this.emitter.emit("focus",e.data)}})}}})({appConfig:t,HTMLElement:HTMLElement,document:document,window:window,MastercardEventEmitter:i,logger:console,sleep:s});var o=(e=>{let{appConfig:r,BaseInputElement:t}=e;return class extends t{generateIframeURL(e,t){return r.getSDKBase()+`/frames/parent/login-forms/${e}/elements/${t}/contents.html`}}})({appConfig:t,BaseInputElement:a,sleep:s,window:window,document:document,logger:console});a=(e=>{let{appConfig:r,BaseInputElement:t}=e;return class extends t{generateIframeURL(e,t){return r.getSDKBase()+`/frames/parent/mfa/${e}/elements/${t}/contents.html`}}})({appConfig:t,BaseInputElement:a,sleep:s,document:document,window:window,logger:console,MastercardEventEmitter:i});s=(e=>{let{appConfig:r,HTMLElement:t,logger:n,document:s,window:i}=e;return class extends t{constructor(){super(),this.eventStreamId=null,this.formId=null,this.events=new EventTarget}static get observedAttributes(){return["event-stream-id","form-id"]}connectedCallback(){var e=this;if(this.eventStreamId||(this.eventStreamId=e.getAttribute("event-stream-id")),!this.formId&&e.getAttribute("form-id"))this.formId=e.getAttribute("form-id");else if(!this.formId)try{this.formId=e.closest("mastercard-form").getAttribute("id")}catch(e){this.formId="default"}this.iframe=s.createElement("iframe"),e.append(this.iframe),e.style.display="none",this.eventStreamId&&(this._bindFrameSource(),this._registerEventListener())}attributeChangedCallback(e,t,r){this.isConnected&&"event-stream-id"===e&&(this.eventStreamId=r,this._bindFrameSource(),this._registerEventListener())}_bindFrameSource(){var e=`${r.getSDKBase()}/frames/parent/forms/event-stream.html?event-stream-id=${this.eventStreamId}&form-id=`+this.formId;this.iframe.setAttribute("src",e)}_registerEventListener(){i.addEventListener("message",e=>{if(e.origin!==r.getFrameOrigin())n.warn("Skipping message from "+e.origin);else{var t=new Event(e.data.eventType);t.data=(e.data||{}).data,t.id=(e.data||{}).id;try{delete t.data.isPublic,delete t.data.eventType,delete t.data.id}catch(e){n.warn(e)}this.events.dispatchEvent(t)}})}_isValidEventStreamId(e){return/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(e)}}})({appConfig:t,HTMLElement:HTMLElement,document:document,window:window,logger:console});customElements.define("mastercard-form",r),customElements.define("mastercard-input",o),customElements.define("mastercard-mfa-choice",a),customElements.define("mastercard-event-stream",s),ConnectComponents=e})();
//# sourceMappingURL=web.js.map