Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@onefootprint/footprint-components-js

Package Overview
Dependencies
Maintainers
3
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@onefootprint/footprint-components-js - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

6

dist/footprint-components-js.d.ts

@@ -144,3 +144,3 @@ import * as CSS from 'csstype';

}
type SecureFormVariant = 'modal' | 'card';
type SecureFormVariant = 'modal' | 'card' | 'drawer';
type SecureFormProps = {

@@ -164,2 +164,4 @@ appearance?: FootprintAppearance;

appearance?: FootprintAppearance;
} & SecureRenderDataProps;
type SecureRenderDataProps = {
authToken: string;

@@ -202,2 +204,2 @@ id: string;

export { FootprintAppearance, FootprintAppearanceRules, FootprintAppearanceTheme, FootprintAppearanceVariables, FootprintComponent, FootprintComponentKind, FootprintComponentProps, FootprintComponentRenderProps, FootprintComponentsEvent, SecureFormCallbacks, SecureFormDataProps, SecureFormEvent, SecureFormProps, SecureFormType, SecureFormVariant, SecureRenderProps, footprintComponent as default };
export { FootprintAppearance, FootprintAppearanceRules, FootprintAppearanceTheme, FootprintAppearanceVariables, FootprintComponent, FootprintComponentKind, FootprintComponentProps, FootprintComponentRenderProps, FootprintComponentsEvent, SecureFormCallbacks, SecureFormDataProps, SecureFormEvent, SecureFormProps, SecureFormType, SecureFormVariant, SecureRenderDataProps, SecureRenderProps, footprintComponent as default };

4

dist/footprint-components-js.js

@@ -1,2 +0,2 @@

var f=(t=>(t.SecureForm="secure-form",t.SecureRender="secure-render",t))(f||{});var L=(n=>(n.secureFormClosed="secureFormClosed",n.secureFormSaved="secureFormSaved",n.secureFormCanceled="secureFormCanceled",n))(L||{}),b=(t=>(t.started="started",t.propsReceived="propsReceived",t))(b||{});var N=(e=>(e.cardOnly="cardOnly",e.cardAndName="cardAndName",e.cardAndNameAndAddress="cardAndNameAndAddress",e.cardAndZip="cardAndZip",e))(N||{});var l="application/x-postmate-v1+json",U=5,q=0,J=function(){return ++q};var Z=function(o){var t=document.createElement("a");t.href=o;var n=t.protocol.length>4?t.protocol:window.location.protocol,e=t.host.length?t.port==="80"||t.port==="443"?t.hostname:t.host:window.location.host;return t.origin||n+"//"+e},z={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1},y=function(o,t){return !(typeof t=="string"&&o.origin!==t||!o.data||typeof o.data=="object"&&!("postmate"in o.data)||o.data.type!==l||!z[o.data.postmate])},W=function(o,t){var n=typeof o[t]=="function"?o[t]():o[t];return m.Promise.resolve(n)},G=function(){function r(t){var n=this;this.parent=t.parent,this.frame=t.frame,this.child=t.child,this.childOrigin=t.childOrigin,this.events={},this.listener=function(e){if(!y(e,n.childOrigin))return !1;var i=((e||{}).data||{}).value||{},a=i.data,s=i.name;e.data.postmate==="emit"&&s in n.events&&n.events[s].forEach(function(d){d.call(n,a);});},this.parent.addEventListener("message",this.listener,!1);}var o=r.prototype;return o.get=function(n){var e=this;return new m.Promise(function(i){var a=J(),s=function d(p){p.data.uid===a&&p.data.postmate==="reply"&&(e.parent.removeEventListener("message",d,!1),i(p.data.value));};e.parent.addEventListener("message",s,!1),e.child.postMessage({postmate:"request",type:l,property:n,uid:a},e.childOrigin);})},o.call=function(n,e){this.child.postMessage({postmate:"call",type:l,property:n,data:e},this.childOrigin);},o.on=function(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e);},o.destroy=function(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame);},r}(),Y=function(){function r(t){var n=this;this.model=t.model,this.parent=t.parent,this.parentOrigin=t.parentOrigin,this.child=t.child,this.child.addEventListener("message",function(e){if(y(e,n.parentOrigin)){var i=e.data,a=i.property,s=i.uid,d=i.data;if(e.data.postmate==="call"){a in n.model&&typeof n.model[a]=="function"&&n.model[a](d);return}W(n.model,a).then(function(p){return e.source.postMessage({property:a,postmate:"reply",type:l,uid:s,value:p},e.origin)});}});}var o=r.prototype;return o.emit=function(n,e){this.parent.postMessage({postmate:"emit",type:l,value:{name:n,data:e}},this.parentOrigin);},r}(),m=function(){function r(t){var n=t.container,e=n===void 0?typeof e<"u"?e:document.body:n,i=t.model,a=t.url,s=t.name,d=s===void 0?"":s,p=t.allow,c=t.classListArray,u=c===void 0?[]:c;return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=d||"",this.frame.classList.add.apply(this.frame.classList,u),p&&(this.frame.allow=p),e.appendChild(this.frame),this.child=this.frame.contentWindow||this.frame.contentDocument.parentWindow,this.model=i||{},this.sendHandshake(a)}var o=r.prototype;return o.sendHandshake=function(n){var e=this,i=Z(n),a=0,s;return new r.Promise(function(d,p){var c=function v(g){return y(g,i)?g.data.postmate==="handshake-reply"?(clearInterval(s),e.parent.removeEventListener("message",v,!1),e.childOrigin=g.origin,d(new G(e))):p("Failed handshake"):!1};e.parent.addEventListener("message",c,!1);var u=function(){a++,e.child.postMessage({postmate:"handshake",type:l,model:e.model},i),a===U&&clearInterval(s);},A=function(){u(),s=setInterval(u,500);};e.frame.attachEvent?e.frame.attachEvent("onload",A):e.frame.addEventListener("load",A),e.frame.src=n;})},r}();m.debug=!1;m.Promise=function(){try{return window?window.Promise:Promise}catch{return null}}();m.Model=function(){function r(t){return this.child=window,this.model=t,this.parent=this.child.parent,this.sendHandshakeReply()}var o=r.prototype;return o.sendHandshakeReply=function(){var n=this;return new m.Promise(function(e,i){var a=function s(d){if(d.data.postmate){if(d.data.postmate==="handshake"){n.child.removeEventListener("message",s,!1),d.source.postMessage({postmate:"handshake-reply",type:l},d.origin),n.parentOrigin=d.origin;var p=d.data.model;return p&&Object.keys(p).forEach(function(c){n.model[c]=p[c];}),e(new Y(n))}return i("Handshake Reply Failed")}};n.child.addEventListener("message",a,!1);})},r}();var S=m;var I="footprint-components-container",k="footprint-components-overlay",_="footprint-components-loading-indicator",C="footprint-components-inline-loader",E=r=>{let o=Q(_);r.appendChild(o);},R=()=>{let r=document.getElementById(_);r&&r.remove();},x=r=>{let o=document.createElement("div");return o.classList.add(C),o.setAttribute("id",C),r.appendChild(o),o},P=()=>{let r=document.getElementById(C);r&&r.remove();},D=r=>{document.body.classList.add("footprint-components-body-locked");let o=document.createElement("div");return o.setAttribute("id",k),o.classList.add("footprint-components-overlay"),r.appendChild(o),o},M=()=>{document.body.classList.remove("footprint-components-body-locked");let r=document.getElementById(k);r&&r.remove();},V=()=>{let r=document.getElementById(I);if(r)return r;let o=document.createElement("div");return o.setAttribute("id",I),document.body.appendChild(o),o},Q=r=>{let o=document.createElement("div");o.setAttribute("id",r),o.classList.add("footprint-components-loading-indicator");let t=document.createElement("div");t.classList.add("footprint-components-loading-spin");let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","24px"),n.setAttribute("height","24px"),n.setAttribute("fill","none"),n.setAttribute("aria-hidden","true");let e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("d","M12 2a10 10 0 0 1 10 10h-2a7.999 7.999 0 0 0-8-8V2Z"),n.appendChild(e),t.appendChild(n),o.appendChild(t),o};var w=class{constructor(){this.child=null;}sendProps(o){var t;o&&((t=this.child)==null||t.call("propsReceived",o));}showLoading(o,t,n){if(n)if(t){let e=D(o);E(e);}else {let e=x(o);E(e);}else t?R():P();}isModal(o,t){if(o==="secure-form"){let n=t;return (n==null?void 0:n.variant)==="modal"}return !1}getOrCreateContainer(o,t){let n;if(o)n=V();else if(n=document.getElementById(t),!n)throw new Error("A valid containerId is required to create a Footprint button");return n}getIframeClassList(o){let t=[];return o?t.push("footprint-components-modal"):t.push("footprint-components-inline"),t}async render(o,t,n,e){let i=this.isModal(t,n),a=this.getOrCreateContainer(i,e);a&&(a.hasChildNodes()&&(this.destroy(),a.innerHTML=""),this.showLoading(a,i,!0),this.child=await new S({classListArray:this.getIframeClassList(i),container:a,name:"footprint-iframe",url:o,allow:"otp-credentials;"}),this.showLoading(a,i,!1),this.child.on("started",()=>{this.sendProps(n);}));}on(o,t){if(!this.child)throw new Error("Footprint should be open in order to listen events");return this.child.on(o,t)}destroy(){M(),P(),this.child&&this.child.destroy();}},H=w;var T=(r,o)=>{let t="https://components.onefootprint.com",{variables:n,rules:e,fontSrc:i}=o,a=new URLSearchParams;return n&&a.append("tokens",n),e&&a.append("rules",e),i&&a.append("font_src",i),a.toString()?`${t}/${r}?${a.toString()}`:`${t}/${r}`},$=({fontSrc:r,variables:o={},rules:t={}}={})=>{let n=()=>Object.keys(o).length?encodeURIComponent(JSON.stringify(o)):void 0,e=()=>Object.keys(t).length?encodeURIComponent(JSON.stringify(t)):void 0;return {fontSrc:r,variables:n(),rules:e()}};var h=new H,F=!1,X=()=>{let r=(n,e)=>{if(n==="secure-form"){let{onClose:i,onSave:a,onCancel:s}=e;i&&h.on("secureFormClosed",i),s&&h.on("secureFormCanceled",s),a&&h.on("secureFormSaved",a);}};return {render:async({kind:n,props:e,containerId:i})=>{if(F)return;F=!0;let{appearance:a}=e,{fontSrc:s,rules:d,variables:p}=$(a),c=T(n,{fontSrc:s,rules:d,variables:p});await h.render(c,n,e,i),r(n,e);},destroy:async()=>{h.destroy(),F=!1;}}},j=X;var ee=r=>{window.setTimeout(r,0);},O=r=>typeof r=="object"&&!!r,te=r=>{if(typeof window>"u")return;let o=()=>{let e=window.footprintComponentsAppearance;if(!(!e||!O(e)))return {fontSrc:e.fontSrc,rules:e.rules,theme:e.theme,variables:e.variables}},t=()=>{let e=window.footprintComponentsCallbacks;if(!e)return {};if(!O(e))throw Error("`window.footprintComponentsCallbacks` must be a valid mapping from callback names to functions.");return e},n=()=>{let e=document.getElementById("footprint-component");if(!e)return;let i=e.getAttribute("data-kind");if(!i)throw Error("Component kind must be passed as `data-kind` in the #footprint-component element");if(!i||Object.values(f).indexOf(i)===-1)throw Error(`Invalid component kind: ${i}. Must be one of ${Object.values(f).join(", ")}`);let a=e.getAttribute("data-props")??"",s;try{s=JSON.parse(a);}catch{throw Error("Could not parse `data-props` in the #footprint-component element.")}if(!O(s))throw Error("`data-props` in the #footprint-component element has to be a valid JSON object stringified.");let d=Math.floor(Math.random()*1e3),p=`footprint-component-${i}-${d}`;ee(()=>{typeof window>"u"||(e.id=p,r.render({kind:i,props:{...s,...t(),appearance:o()},containerId:p}));});};document.addEventListener("DOMContentLoaded",()=>n());},K=te;var B=j();K(B);var Fe=B;/*! Bundled license information:
var f=(e=>(e.SecureForm="secure-form",e.SecureRender="secure-render",e))(f||{});var F=(r=>(r.secureFormClosed="secureFormClosed",r.secureFormSaved="secureFormSaved",r.secureFormCanceled="secureFormCanceled",r))(F||{}),O=(e=>(e.started="started",e.propsReceived="propsReceived",e))(O||{});var S=(t=>(t.cardOnly="cardOnly",t.cardAndName="cardAndName",t.cardAndNameAndAddress="cardAndNameAndAddress",t.cardAndZip="cardAndZip",t))(S||{});var m="application/x-postmate-v1+json",B=5,U=0,q=function(){return ++U};var J=function(n){var e=document.createElement("a");e.href=n;var r=e.protocol.length>4?e.protocol:window.location.protocol,t=e.host.length?e.port==="80"||e.port==="443"?e.hostname:e.host:window.location.host;return e.origin||r+"//"+t},Y={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1},C=function(n,e){return !(typeof e=="string"&&n.origin!==e||!n.data||typeof n.data=="object"&&!("postmate"in n.data)||n.data.type!==m||!Y[n.data.postmate])},Z=function(n,e){var r=typeof n[e]=="function"?n[e]():n[e];return u.Promise.resolve(r)},z=function(){function o(e){var r=this;this.parent=e.parent,this.frame=e.frame,this.child=e.child,this.childOrigin=e.childOrigin,this.events={},this.listener=function(t){if(!C(t,r.childOrigin))return !1;var a=((t||{}).data||{}).value||{},i=a.data,s=a.name;t.data.postmate==="emit"&&s in r.events&&r.events[s].forEach(function(d){d.call(r,i);});},this.parent.addEventListener("message",this.listener,!1);}var n=o.prototype;return n.get=function(r){var t=this;return new u.Promise(function(a){var i=q(),s=function d(p){p.data.uid===i&&p.data.postmate==="reply"&&(t.parent.removeEventListener("message",d,!1),a(p.data.value));};t.parent.addEventListener("message",s,!1),t.child.postMessage({postmate:"request",type:m,property:r,uid:i},t.childOrigin);})},n.call=function(r,t){this.child.postMessage({postmate:"call",type:m,property:r,data:t},this.childOrigin);},n.on=function(r,t){this.events[r]||(this.events[r]=[]),this.events[r].push(t);},n.destroy=function(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame);},o}(),W=function(){function o(e){var r=this;this.model=e.model,this.parent=e.parent,this.parentOrigin=e.parentOrigin,this.child=e.child,this.child.addEventListener("message",function(t){if(C(t,r.parentOrigin)){var a=t.data,i=a.property,s=a.uid,d=a.data;if(t.data.postmate==="call"){i in r.model&&typeof r.model[i]=="function"&&r.model[i](d);return}Z(r.model,i).then(function(p){return t.source.postMessage({property:i,postmate:"reply",type:m,uid:s,value:p},t.origin)});}});}var n=o.prototype;return n.emit=function(r,t){this.parent.postMessage({postmate:"emit",type:m,value:{name:r,data:t}},this.parentOrigin);},o}(),u=function(){function o(e){var r=e.container,t=r===void 0?typeof t<"u"?t:document.body:r,a=e.model,i=e.url,s=e.name,d=s===void 0?"":s,p=e.allow,c=e.classListArray,l=c===void 0?[]:c;return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=d||"",this.frame.classList.add.apply(this.frame.classList,l),p&&(this.frame.allow=p),t.appendChild(this.frame),this.child=this.frame.contentWindow||this.frame.contentDocument.parentWindow,this.model=a||{},this.sendHandshake(i)}var n=o.prototype;return n.sendHandshake=function(r){var t=this,a=J(r),i=0,s;return new o.Promise(function(d,p){var c=function v(g){return C(g,a)?g.data.postmate==="handshake-reply"?(clearInterval(s),t.parent.removeEventListener("message",v,!1),t.childOrigin=g.origin,d(new z(t))):p("Failed handshake"):!1};t.parent.addEventListener("message",c,!1);var l=function(){i++,t.child.postMessage({postmate:"handshake",type:m,model:t.model},a),i===B&&clearInterval(s);},h=function(){l(),s=setInterval(l,500);};t.frame.attachEvent?t.frame.attachEvent("onload",h):t.frame.addEventListener("load",h),t.frame.src=r;})},o}();u.debug=!1;u.Promise=function(){try{return window?window.Promise:Promise}catch{return null}}();u.Model=function(){function o(e){return this.child=window,this.model=e,this.parent=this.child.parent,this.sendHandshakeReply()}var n=o.prototype;return n.sendHandshakeReply=function(){var r=this;return new u.Promise(function(t,a){var i=function s(d){if(d.data.postmate){if(d.data.postmate==="handshake"){r.child.removeEventListener("message",s,!1),d.source.postMessage({postmate:"handshake-reply",type:m},d.origin),r.parentOrigin=d.origin;var p=d.data.model;return p&&Object.keys(p).forEach(function(c){r.model[c]=p[c];}),t(new W(r))}return a("Handshake Reply Failed")}};r.child.addEventListener("message",i,!1);})},o}();var A=u;var L="footprint-components-overlay-container",y="footprint-components-inline-container",N="footprint-components-body-locked",b="footprint-components-overlay",I="footprint-components-loading-indicator",E=o=>{let n=G(I);o.appendChild(n);},_=()=>{let o=document.getElementById(I);o&&o.remove();},R=o=>{document.body.classList.add(N);let n=document.createElement("div");return n.setAttribute("id",b),n.classList.add("footprint-components-overlay"),o.appendChild(n),n},k=()=>{document.body.classList.remove(N);let o=document.getElementById(b);o&&o.remove();},x=()=>{let o=document.getElementById(L);if(o)return o;let n=document.createElement("div");return n.setAttribute("id",L),document.body.appendChild(n),n},V=o=>{let n=document.createElement("div");return n.classList.add(y),n.setAttribute("id",y),o.appendChild(n),n},D=()=>{let o=document.getElementById(y);o&&o.remove();},G=o=>{let n=document.createElement("div");n.setAttribute("id",o),n.classList.add("footprint-components-loading-indicator");let e=document.createElement("div");e.classList.add("footprint-components-loading-spin");let r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("width","24px"),r.setAttribute("height","24px"),r.setAttribute("fill","none"),r.setAttribute("aria-hidden","true");let t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("d","M12 2a10 10 0 0 1 10 10h-2a7.999 7.999 0 0 0-8-8V2Z"),r.appendChild(t),e.appendChild(r),n.appendChild(e),n};var P=class{constructor(){this.child=null;}sendProps(n,e){var r,t;if(e){if(n==="secure-form"){let{onClose:a,onSave:i,onCancel:s,appearance:d,...p}=e;(r=this.child)==null||r.call("propsReceived",p);}else if(n==="secure-render"){let{appearance:a,...i}=e;(t=this.child)==null||t.call("propsReceived",i);}}}showLoading(n,e,r){var a,i;let t=e==="modal"||e==="drawer";if(r){if(t){let s=R(n);E(s);}else E(n);return}_(),(a=this.child)==null||a.frame.classList.remove(`footprint-components-${e}-loading`),(i=this.child)==null||i.frame.classList.add(`footprint-components-${e}-loaded`);}getContainerVariant(n,e){if(n!=="secure-form")return "inline";let r=e;return r.variant==="drawer"?"drawer":r.variant==="card"?"inline":(r.variant==="modal","modal")}getOrCreateContainer(n,e){let r;if(n==="modal"||n==="drawer")r=x();else {let a=document.getElementById(e);if(!a)throw new Error("A valid containerId is required to create a Footprint button");r=V(a);}return r}getIframeClassList(n){return [`footprint-components-${n}`,`footprint-components-${n}-loading`]}async render(n,e,r,t){let a=this.getContainerVariant(e,r),i=this.getOrCreateContainer(a,t);i&&(i.hasChildNodes()&&(this.destroy(),i.innerHTML=""),this.showLoading(i,a,!0),this.child=await new A({classListArray:this.getIframeClassList(a),container:i,name:"footprint-iframe",url:n,allow:"otp-credentials;"}),this.showLoading(i,a,!1),this.child.on("started",()=>{this.sendProps(e,r);}));}on(n,e){if(!this.child)throw new Error("Footprint components should be open in order to listen events");return this.child.on(n,e)}destroy(){k(),D(),this.child&&this.child.destroy();}},M=P;var $=(o,n)=>{let e="https://components.onefootprint.com",{variables:r,rules:t,fontSrc:a}=n,i=new URLSearchParams;return r&&i.append("tokens",r),t&&i.append("rules",t),a&&i.append("font_src",a),i.toString()?`${e}/${o}?${i.toString()}`:`${e}/${o}`},H=({fontSrc:o,variables:n={},rules:e={}}={})=>{let r=()=>Object.keys(n).length?encodeURIComponent(JSON.stringify(n)):void 0,t=()=>Object.keys(e).length?encodeURIComponent(JSON.stringify(e)):void 0;return {fontSrc:o,variables:r(),rules:t()}};var Q=()=>{let o=new M,n=!1,e=(a,i)=>{if(a==="secure-form"){let{onClose:s,onSave:d,onCancel:p}=i;s&&o.on("secureFormClosed",s),p&&o.on("secureFormCanceled",p),d&&o.on("secureFormSaved",d);}};return {render:async({kind:a,props:i,containerId:s})=>{if(n)return;n=!0;let{appearance:d}=i,{fontSrc:p,rules:c,variables:l}=H(d),h=$(a,{fontSrc:p,rules:c,variables:l});await o.render(h,a,i,s),e(a,i);},destroy:async()=>{o.destroy(),n=!1;}}},T=Q;var X=o=>{window.setTimeout(o,0);},w=o=>typeof o=="object"&&!!o,ee=o=>{if(typeof window>"u")return;let n=()=>{let t=window.footprintComponentsAppearance;if(!(!t||!w(t)))return {fontSrc:t.fontSrc,rules:t.rules,theme:t.theme,variables:t.variables}},e=()=>{let t=window.footprintComponentsCallbacks;if(!t)return {};if(!w(t))throw Error("`window.footprintComponentsCallbacks` must be a valid mapping from callback names to functions.");return t},r=()=>{let t=document.getElementById("footprint-component");if(!t)return;let a=t.getAttribute("data-kind");if(!a)throw Error("Component kind must be passed as `data-kind` in the #footprint-component element");if(!a||Object.values(f).indexOf(a)===-1)throw Error(`Invalid component kind: ${a}. Must be one of ${Object.values(f).join(", ")}`);let i=t.getAttribute("data-props")??"",s;try{s=JSON.parse(i);}catch{throw Error("Could not parse `data-props` in the #footprint-component element.")}if(!w(s))throw Error("`data-props` in the #footprint-component element has to be a valid JSON object stringified.");let d=Math.floor(Math.random()*1e3),p=`footprint-component-${a}-${d}`;X(()=>{typeof window>"u"||(t.id=p,o.render({kind:a,props:{...s,...e(),appearance:n()},containerId:p}));});};document.addEventListener("DOMContentLoaded",()=>r());},K=ee;var j=T();K(j);var we=j;/*! Bundled license information:

@@ -13,2 +13,2 @@ @onefootprint/postmate/build/postmate.es.js:

export { f as FootprintComponentKind, b as FootprintComponentsEvent, L as SecureFormEvent, N as SecureFormType, Fe as default };
export { f as FootprintComponentKind, O as FootprintComponentsEvent, F as SecureFormEvent, S as SecureFormType, we as default };

10

dist/footprint-components-js.umd.js
(function (exports) {
'use strict';
var f=(t=>(t.SecureForm="secure-form",t.SecureRender="secure-render",t))(f||{});var L=(n=>(n.secureFormClosed="secureFormClosed",n.secureFormSaved="secureFormSaved",n.secureFormCanceled="secureFormCanceled",n))(L||{}),b=(t=>(t.started="started",t.propsReceived="propsReceived",t))(b||{});var N=(e=>(e.cardOnly="cardOnly",e.cardAndName="cardAndName",e.cardAndNameAndAddress="cardAndNameAndAddress",e.cardAndZip="cardAndZip",e))(N||{});var l="application/x-postmate-v1+json",U=5,q=0,J=function(){return ++q};var Z=function(o){var t=document.createElement("a");t.href=o;var n=t.protocol.length>4?t.protocol:window.location.protocol,e=t.host.length?t.port==="80"||t.port==="443"?t.hostname:t.host:window.location.host;return t.origin||n+"//"+e},z={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1},y=function(o,t){return !(typeof t=="string"&&o.origin!==t||!o.data||typeof o.data=="object"&&!("postmate"in o.data)||o.data.type!==l||!z[o.data.postmate])},W=function(o,t){var n=typeof o[t]=="function"?o[t]():o[t];return m.Promise.resolve(n)},G=function(){function r(t){var n=this;this.parent=t.parent,this.frame=t.frame,this.child=t.child,this.childOrigin=t.childOrigin,this.events={},this.listener=function(e){if(!y(e,n.childOrigin))return !1;var i=((e||{}).data||{}).value||{},a=i.data,s=i.name;e.data.postmate==="emit"&&s in n.events&&n.events[s].forEach(function(d){d.call(n,a);});},this.parent.addEventListener("message",this.listener,!1);}var o=r.prototype;return o.get=function(n){var e=this;return new m.Promise(function(i){var a=J(),s=function d(p){p.data.uid===a&&p.data.postmate==="reply"&&(e.parent.removeEventListener("message",d,!1),i(p.data.value));};e.parent.addEventListener("message",s,!1),e.child.postMessage({postmate:"request",type:l,property:n,uid:a},e.childOrigin);})},o.call=function(n,e){this.child.postMessage({postmate:"call",type:l,property:n,data:e},this.childOrigin);},o.on=function(n,e){this.events[n]||(this.events[n]=[]),this.events[n].push(e);},o.destroy=function(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame);},r}(),Y=function(){function r(t){var n=this;this.model=t.model,this.parent=t.parent,this.parentOrigin=t.parentOrigin,this.child=t.child,this.child.addEventListener("message",function(e){if(y(e,n.parentOrigin)){var i=e.data,a=i.property,s=i.uid,d=i.data;if(e.data.postmate==="call"){a in n.model&&typeof n.model[a]=="function"&&n.model[a](d);return}W(n.model,a).then(function(p){return e.source.postMessage({property:a,postmate:"reply",type:l,uid:s,value:p},e.origin)});}});}var o=r.prototype;return o.emit=function(n,e){this.parent.postMessage({postmate:"emit",type:l,value:{name:n,data:e}},this.parentOrigin);},r}(),m=function(){function r(t){var n=t.container,e=n===void 0?typeof e<"u"?e:document.body:n,i=t.model,a=t.url,s=t.name,d=s===void 0?"":s,p=t.allow,c=t.classListArray,u=c===void 0?[]:c;return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=d||"",this.frame.classList.add.apply(this.frame.classList,u),p&&(this.frame.allow=p),e.appendChild(this.frame),this.child=this.frame.contentWindow||this.frame.contentDocument.parentWindow,this.model=i||{},this.sendHandshake(a)}var o=r.prototype;return o.sendHandshake=function(n){var e=this,i=Z(n),a=0,s;return new r.Promise(function(d,p){var c=function v(g){return y(g,i)?g.data.postmate==="handshake-reply"?(clearInterval(s),e.parent.removeEventListener("message",v,!1),e.childOrigin=g.origin,d(new G(e))):p("Failed handshake"):!1};e.parent.addEventListener("message",c,!1);var u=function(){a++,e.child.postMessage({postmate:"handshake",type:l,model:e.model},i),a===U&&clearInterval(s);},A=function(){u(),s=setInterval(u,500);};e.frame.attachEvent?e.frame.attachEvent("onload",A):e.frame.addEventListener("load",A),e.frame.src=n;})},r}();m.debug=!1;m.Promise=function(){try{return window?window.Promise:Promise}catch{return null}}();m.Model=function(){function r(t){return this.child=window,this.model=t,this.parent=this.child.parent,this.sendHandshakeReply()}var o=r.prototype;return o.sendHandshakeReply=function(){var n=this;return new m.Promise(function(e,i){var a=function s(d){if(d.data.postmate){if(d.data.postmate==="handshake"){n.child.removeEventListener("message",s,!1),d.source.postMessage({postmate:"handshake-reply",type:l},d.origin),n.parentOrigin=d.origin;var p=d.data.model;return p&&Object.keys(p).forEach(function(c){n.model[c]=p[c];}),e(new Y(n))}return i("Handshake Reply Failed")}};n.child.addEventListener("message",a,!1);})},r}();var S=m;var I="footprint-components-container",k="footprint-components-overlay",_="footprint-components-loading-indicator",C="footprint-components-inline-loader",E=r=>{let o=Q(_);r.appendChild(o);},R=()=>{let r=document.getElementById(_);r&&r.remove();},x=r=>{let o=document.createElement("div");return o.classList.add(C),o.setAttribute("id",C),r.appendChild(o),o},P=()=>{let r=document.getElementById(C);r&&r.remove();},D=r=>{document.body.classList.add("footprint-components-body-locked");let o=document.createElement("div");return o.setAttribute("id",k),o.classList.add("footprint-components-overlay"),r.appendChild(o),o},M=()=>{document.body.classList.remove("footprint-components-body-locked");let r=document.getElementById(k);r&&r.remove();},V=()=>{let r=document.getElementById(I);if(r)return r;let o=document.createElement("div");return o.setAttribute("id",I),document.body.appendChild(o),o},Q=r=>{let o=document.createElement("div");o.setAttribute("id",r),o.classList.add("footprint-components-loading-indicator");let t=document.createElement("div");t.classList.add("footprint-components-loading-spin");let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","24px"),n.setAttribute("height","24px"),n.setAttribute("fill","none"),n.setAttribute("aria-hidden","true");let e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("d","M12 2a10 10 0 0 1 10 10h-2a7.999 7.999 0 0 0-8-8V2Z"),n.appendChild(e),t.appendChild(n),o.appendChild(t),o};var w=class{constructor(){this.child=null;}sendProps(o){var t;o&&((t=this.child)==null||t.call("propsReceived",o));}showLoading(o,t,n){if(n)if(t){let e=D(o);E(e);}else {let e=x(o);E(e);}else t?R():P();}isModal(o,t){if(o==="secure-form"){let n=t;return (n==null?void 0:n.variant)==="modal"}return !1}getOrCreateContainer(o,t){let n;if(o)n=V();else if(n=document.getElementById(t),!n)throw new Error("A valid containerId is required to create a Footprint button");return n}getIframeClassList(o){let t=[];return o?t.push("footprint-components-modal"):t.push("footprint-components-inline"),t}async render(o,t,n,e){let i=this.isModal(t,n),a=this.getOrCreateContainer(i,e);a&&(a.hasChildNodes()&&(this.destroy(),a.innerHTML=""),this.showLoading(a,i,!0),this.child=await new S({classListArray:this.getIframeClassList(i),container:a,name:"footprint-iframe",url:o,allow:"otp-credentials;"}),this.showLoading(a,i,!1),this.child.on("started",()=>{this.sendProps(n);}));}on(o,t){if(!this.child)throw new Error("Footprint should be open in order to listen events");return this.child.on(o,t)}destroy(){M(),P(),this.child&&this.child.destroy();}},H=w;var T=(r,o)=>{let t="https://components.onefootprint.com",{variables:n,rules:e,fontSrc:i}=o,a=new URLSearchParams;return n&&a.append("tokens",n),e&&a.append("rules",e),i&&a.append("font_src",i),a.toString()?`${t}/${r}?${a.toString()}`:`${t}/${r}`},$=({fontSrc:r,variables:o={},rules:t={}}={})=>{let n=()=>Object.keys(o).length?encodeURIComponent(JSON.stringify(o)):void 0,e=()=>Object.keys(t).length?encodeURIComponent(JSON.stringify(t)):void 0;return {fontSrc:r,variables:n(),rules:e()}};var h=new H,F=!1,X=()=>{let r=(n,e)=>{if(n==="secure-form"){let{onClose:i,onSave:a,onCancel:s}=e;i&&h.on("secureFormClosed",i),s&&h.on("secureFormCanceled",s),a&&h.on("secureFormSaved",a);}};return {render:async({kind:n,props:e,containerId:i})=>{if(F)return;F=!0;let{appearance:a}=e,{fontSrc:s,rules:d,variables:p}=$(a),c=T(n,{fontSrc:s,rules:d,variables:p});await h.render(c,n,e,i),r(n,e);},destroy:async()=>{h.destroy(),F=!1;}}},j=X;var ee=r=>{window.setTimeout(r,0);},O=r=>typeof r=="object"&&!!r,te=r=>{if(typeof window>"u")return;let o=()=>{let e=window.footprintComponentsAppearance;if(!(!e||!O(e)))return {fontSrc:e.fontSrc,rules:e.rules,theme:e.theme,variables:e.variables}},t=()=>{let e=window.footprintComponentsCallbacks;if(!e)return {};if(!O(e))throw Error("`window.footprintComponentsCallbacks` must be a valid mapping from callback names to functions.");return e},n=()=>{let e=document.getElementById("footprint-component");if(!e)return;let i=e.getAttribute("data-kind");if(!i)throw Error("Component kind must be passed as `data-kind` in the #footprint-component element");if(!i||Object.values(f).indexOf(i)===-1)throw Error(`Invalid component kind: ${i}. Must be one of ${Object.values(f).join(", ")}`);let a=e.getAttribute("data-props")??"",s;try{s=JSON.parse(a);}catch{throw Error("Could not parse `data-props` in the #footprint-component element.")}if(!O(s))throw Error("`data-props` in the #footprint-component element has to be a valid JSON object stringified.");let d=Math.floor(Math.random()*1e3),p=`footprint-component-${i}-${d}`;ee(()=>{typeof window>"u"||(e.id=p,r.render({kind:i,props:{...s,...t(),appearance:o()},containerId:p}));});};document.addEventListener("DOMContentLoaded",()=>n());},K=te;var B=j();K(B);var Fe=B;/*! Bundled license information:
var f=(e=>(e.SecureForm="secure-form",e.SecureRender="secure-render",e))(f||{});var F=(r=>(r.secureFormClosed="secureFormClosed",r.secureFormSaved="secureFormSaved",r.secureFormCanceled="secureFormCanceled",r))(F||{}),O=(e=>(e.started="started",e.propsReceived="propsReceived",e))(O||{});var S=(t=>(t.cardOnly="cardOnly",t.cardAndName="cardAndName",t.cardAndNameAndAddress="cardAndNameAndAddress",t.cardAndZip="cardAndZip",t))(S||{});var m="application/x-postmate-v1+json",B=5,U=0,q=function(){return ++U};var J=function(n){var e=document.createElement("a");e.href=n;var r=e.protocol.length>4?e.protocol:window.location.protocol,t=e.host.length?e.port==="80"||e.port==="443"?e.hostname:e.host:window.location.host;return e.origin||r+"//"+t},Y={handshake:1,"handshake-reply":1,call:1,emit:1,reply:1,request:1},C=function(n,e){return !(typeof e=="string"&&n.origin!==e||!n.data||typeof n.data=="object"&&!("postmate"in n.data)||n.data.type!==m||!Y[n.data.postmate])},Z=function(n,e){var r=typeof n[e]=="function"?n[e]():n[e];return u.Promise.resolve(r)},z=function(){function o(e){var r=this;this.parent=e.parent,this.frame=e.frame,this.child=e.child,this.childOrigin=e.childOrigin,this.events={},this.listener=function(t){if(!C(t,r.childOrigin))return !1;var a=((t||{}).data||{}).value||{},i=a.data,s=a.name;t.data.postmate==="emit"&&s in r.events&&r.events[s].forEach(function(d){d.call(r,i);});},this.parent.addEventListener("message",this.listener,!1);}var n=o.prototype;return n.get=function(r){var t=this;return new u.Promise(function(a){var i=q(),s=function d(p){p.data.uid===i&&p.data.postmate==="reply"&&(t.parent.removeEventListener("message",d,!1),a(p.data.value));};t.parent.addEventListener("message",s,!1),t.child.postMessage({postmate:"request",type:m,property:r,uid:i},t.childOrigin);})},n.call=function(r,t){this.child.postMessage({postmate:"call",type:m,property:r,data:t},this.childOrigin);},n.on=function(r,t){this.events[r]||(this.events[r]=[]),this.events[r].push(t);},n.destroy=function(){window.removeEventListener("message",this.listener,!1),this.frame.parentNode.removeChild(this.frame);},o}(),W=function(){function o(e){var r=this;this.model=e.model,this.parent=e.parent,this.parentOrigin=e.parentOrigin,this.child=e.child,this.child.addEventListener("message",function(t){if(C(t,r.parentOrigin)){var a=t.data,i=a.property,s=a.uid,d=a.data;if(t.data.postmate==="call"){i in r.model&&typeof r.model[i]=="function"&&r.model[i](d);return}Z(r.model,i).then(function(p){return t.source.postMessage({property:i,postmate:"reply",type:m,uid:s,value:p},t.origin)});}});}var n=o.prototype;return n.emit=function(r,t){this.parent.postMessage({postmate:"emit",type:m,value:{name:r,data:t}},this.parentOrigin);},o}(),u=function(){function o(e){var r=e.container,t=r===void 0?typeof t<"u"?t:document.body:r,a=e.model,i=e.url,s=e.name,d=s===void 0?"":s,p=e.allow,c=e.classListArray,l=c===void 0?[]:c;return this.parent=window,this.frame=document.createElement("iframe"),this.frame.name=d||"",this.frame.classList.add.apply(this.frame.classList,l),p&&(this.frame.allow=p),t.appendChild(this.frame),this.child=this.frame.contentWindow||this.frame.contentDocument.parentWindow,this.model=a||{},this.sendHandshake(i)}var n=o.prototype;return n.sendHandshake=function(r){var t=this,a=J(r),i=0,s;return new o.Promise(function(d,p){var c=function v(g){return C(g,a)?g.data.postmate==="handshake-reply"?(clearInterval(s),t.parent.removeEventListener("message",v,!1),t.childOrigin=g.origin,d(new z(t))):p("Failed handshake"):!1};t.parent.addEventListener("message",c,!1);var l=function(){i++,t.child.postMessage({postmate:"handshake",type:m,model:t.model},a),i===B&&clearInterval(s);},h=function(){l(),s=setInterval(l,500);};t.frame.attachEvent?t.frame.attachEvent("onload",h):t.frame.addEventListener("load",h),t.frame.src=r;})},o}();u.debug=!1;u.Promise=function(){try{return window?window.Promise:Promise}catch{return null}}();u.Model=function(){function o(e){return this.child=window,this.model=e,this.parent=this.child.parent,this.sendHandshakeReply()}var n=o.prototype;return n.sendHandshakeReply=function(){var r=this;return new u.Promise(function(t,a){var i=function s(d){if(d.data.postmate){if(d.data.postmate==="handshake"){r.child.removeEventListener("message",s,!1),d.source.postMessage({postmate:"handshake-reply",type:m},d.origin),r.parentOrigin=d.origin;var p=d.data.model;return p&&Object.keys(p).forEach(function(c){r.model[c]=p[c];}),t(new W(r))}return a("Handshake Reply Failed")}};r.child.addEventListener("message",i,!1);})},o}();var A=u;var L="footprint-components-overlay-container",y="footprint-components-inline-container",N="footprint-components-body-locked",b="footprint-components-overlay",I="footprint-components-loading-indicator",E=o=>{let n=G(I);o.appendChild(n);},_=()=>{let o=document.getElementById(I);o&&o.remove();},R=o=>{document.body.classList.add(N);let n=document.createElement("div");return n.setAttribute("id",b),n.classList.add("footprint-components-overlay"),o.appendChild(n),n},k=()=>{document.body.classList.remove(N);let o=document.getElementById(b);o&&o.remove();},x=()=>{let o=document.getElementById(L);if(o)return o;let n=document.createElement("div");return n.setAttribute("id",L),document.body.appendChild(n),n},V=o=>{let n=document.createElement("div");return n.classList.add(y),n.setAttribute("id",y),o.appendChild(n),n},D=()=>{let o=document.getElementById(y);o&&o.remove();},G=o=>{let n=document.createElement("div");n.setAttribute("id",o),n.classList.add("footprint-components-loading-indicator");let e=document.createElement("div");e.classList.add("footprint-components-loading-spin");let r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("width","24px"),r.setAttribute("height","24px"),r.setAttribute("fill","none"),r.setAttribute("aria-hidden","true");let t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("d","M12 2a10 10 0 0 1 10 10h-2a7.999 7.999 0 0 0-8-8V2Z"),r.appendChild(t),e.appendChild(r),n.appendChild(e),n};var P=class{constructor(){this.child=null;}sendProps(n,e){var r,t;if(e){if(n==="secure-form"){let{onClose:a,onSave:i,onCancel:s,appearance:d,...p}=e;(r=this.child)==null||r.call("propsReceived",p);}else if(n==="secure-render"){let{appearance:a,...i}=e;(t=this.child)==null||t.call("propsReceived",i);}}}showLoading(n,e,r){var a,i;let t=e==="modal"||e==="drawer";if(r){if(t){let s=R(n);E(s);}else E(n);return}_(),(a=this.child)==null||a.frame.classList.remove(`footprint-components-${e}-loading`),(i=this.child)==null||i.frame.classList.add(`footprint-components-${e}-loaded`);}getContainerVariant(n,e){if(n!=="secure-form")return "inline";let r=e;return r.variant==="drawer"?"drawer":r.variant==="card"?"inline":(r.variant==="modal","modal")}getOrCreateContainer(n,e){let r;if(n==="modal"||n==="drawer")r=x();else {let a=document.getElementById(e);if(!a)throw new Error("A valid containerId is required to create a Footprint button");r=V(a);}return r}getIframeClassList(n){return [`footprint-components-${n}`,`footprint-components-${n}-loading`]}async render(n,e,r,t){let a=this.getContainerVariant(e,r),i=this.getOrCreateContainer(a,t);i&&(i.hasChildNodes()&&(this.destroy(),i.innerHTML=""),this.showLoading(i,a,!0),this.child=await new A({classListArray:this.getIframeClassList(a),container:i,name:"footprint-iframe",url:n,allow:"otp-credentials;"}),this.showLoading(i,a,!1),this.child.on("started",()=>{this.sendProps(e,r);}));}on(n,e){if(!this.child)throw new Error("Footprint components should be open in order to listen events");return this.child.on(n,e)}destroy(){k(),D(),this.child&&this.child.destroy();}},M=P;var $=(o,n)=>{let e="https://components.onefootprint.com",{variables:r,rules:t,fontSrc:a}=n,i=new URLSearchParams;return r&&i.append("tokens",r),t&&i.append("rules",t),a&&i.append("font_src",a),i.toString()?`${e}/${o}?${i.toString()}`:`${e}/${o}`},H=({fontSrc:o,variables:n={},rules:e={}}={})=>{let r=()=>Object.keys(n).length?encodeURIComponent(JSON.stringify(n)):void 0,t=()=>Object.keys(e).length?encodeURIComponent(JSON.stringify(e)):void 0;return {fontSrc:o,variables:r(),rules:t()}};var Q=()=>{let o=new M,n=!1,e=(a,i)=>{if(a==="secure-form"){let{onClose:s,onSave:d,onCancel:p}=i;s&&o.on("secureFormClosed",s),p&&o.on("secureFormCanceled",p),d&&o.on("secureFormSaved",d);}};return {render:async({kind:a,props:i,containerId:s})=>{if(n)return;n=!0;let{appearance:d}=i,{fontSrc:p,rules:c,variables:l}=H(d),h=$(a,{fontSrc:p,rules:c,variables:l});await o.render(h,a,i,s),e(a,i);},destroy:async()=>{o.destroy(),n=!1;}}},T=Q;var X=o=>{window.setTimeout(o,0);},w=o=>typeof o=="object"&&!!o,ee=o=>{if(typeof window>"u")return;let n=()=>{let t=window.footprintComponentsAppearance;if(!(!t||!w(t)))return {fontSrc:t.fontSrc,rules:t.rules,theme:t.theme,variables:t.variables}},e=()=>{let t=window.footprintComponentsCallbacks;if(!t)return {};if(!w(t))throw Error("`window.footprintComponentsCallbacks` must be a valid mapping from callback names to functions.");return t},r=()=>{let t=document.getElementById("footprint-component");if(!t)return;let a=t.getAttribute("data-kind");if(!a)throw Error("Component kind must be passed as `data-kind` in the #footprint-component element");if(!a||Object.values(f).indexOf(a)===-1)throw Error(`Invalid component kind: ${a}. Must be one of ${Object.values(f).join(", ")}`);let i=t.getAttribute("data-props")??"",s;try{s=JSON.parse(i);}catch{throw Error("Could not parse `data-props` in the #footprint-component element.")}if(!w(s))throw Error("`data-props` in the #footprint-component element has to be a valid JSON object stringified.");let d=Math.floor(Math.random()*1e3),p=`footprint-component-${a}-${d}`;X(()=>{typeof window>"u"||(t.id=p,o.render({kind:a,props:{...s,...e(),appearance:n()},containerId:p}));});};document.addEventListener("DOMContentLoaded",()=>r());},K=ee;var j=T();K(j);var we=j;/*! Bundled license information:

@@ -17,6 +17,6 @@ @onefootprint/postmate/build/postmate.es.js:

exports.FootprintComponentKind = f;
exports.FootprintComponentsEvent = b;
exports.SecureFormEvent = L;
exports.SecureFormType = N;
exports.default = Fe;
exports.FootprintComponentsEvent = O;
exports.SecureFormEvent = F;
exports.SecureFormType = S;
exports.default = we;

@@ -23,0 +23,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

2

package.json

@@ -5,3 +5,3 @@ {

"type": "module",
"version": "0.0.1",
"version": "0.1.0",
"main": "./dist/footprint-components-js.umd.js",

@@ -8,0 +8,0 @@ "module": "./dist/footprint-components-js.js",

dist/footprint-components-js.cjs

Sorry, the diff of this file is not supported yet

dist/footprint-components-js.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc