@dintero/checkout-web-sdk 0.5.9 → 0.6.0

package/README.md

@@ -56,7 +56,8 @@ _The checkout sdk will add a polyfill for promises if the browser does not suppo
         .embed({
             container,
             sid: "T11223344.<short-uuid>",
-            language: "no", \\ optional parameter, an ISO 639-1 two-letter language code
+            popOut: false, // optional parameter to enable pop out mode
+            language: "no", // optional parameter, an ISO 639-1 two-letter language code
             onSession: function(event, checkout) {
                 console.log("session", event.session);
             },
@@ -119,7 +120,8 @@ const container = document.getElementById("checkout-container");
 const checkout = await embed({
     container,
     sid: "T11223344.<short-uuid>",
-    language: "no", \\ optional parameter, an ISO 639-1 two-letter language code
+    popOut: false, // optional parameter to enable pop out mode
+    language: "no", // optional parameter, an ISO 639-1 two-letter language code
     onSession: (event: SessionLoaded | SessionUpdated) => {
         console.log("session", event.session);
     },

package/coverage/{Chrome Headless 115.0.5790.98 (Linux x86_64) → Chrome Headless 117.0.5938.92 (Linux x86_64)}/html/checkout.ts.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>16/16</span>
+                <span class='fraction'>18/18</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>16/16</span>
+                <span class='fraction'>18/18</span>
             </div>
         
             
@@ -159,7 +159,36 @@
 <a name='L100'></a><a href='#L100'>100</a>
 <a name='L101'></a><a href='#L101'>101</a>
 <a name='L102'></a><a href='#L102'>102</a>
-<a name='L103'></a><a href='#L103'>103</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a>
+<a name='L109'></a><a href='#L109'>109</a>
+<a name='L110'></a><a href='#L110'>110</a>
+<a name='L111'></a><a href='#L111'>111</a>
+<a name='L112'></a><a href='#L112'>112</a>
+<a name='L113'></a><a href='#L113'>113</a>
+<a name='L114'></a><a href='#L114'>114</a>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</a>
+<a name='L118'></a><a href='#L118'>118</a>
+<a name='L119'></a><a href='#L119'>119</a>
+<a name='L120'></a><a href='#L120'>120</a>
+<a name='L121'></a><a href='#L121'>121</a>
+<a name='L122'></a><a href='#L122'>122</a>
+<a name='L123'></a><a href='#L123'>123</a>
+<a name='L124'></a><a href='#L124'>124</a>
+<a name='L125'></a><a href='#L125'>125</a>
+<a name='L126'></a><a href='#L126'>126</a>
+<a name='L127'></a><a href='#L127'>127</a>
+<a name='L128'></a><a href='#L128'>128</a>
+<a name='L129'></a><a href='#L129'>129</a>
+<a name='L130'></a><a href='#L130'>130</a>
+<a name='L131'></a><a href='#L131'>131</a>
+<a name='L132'></a><a href='#L132'>132</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -178,6 +207,22 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -261,7 +306,20 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { Session } from "./session";
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type { Session } from "./session";
 &nbsp;
 export enum CheckoutEvents {
     SessionNotFound = "SessionNotFound",
@@ -280,6 +338,8 @@ export enum InternalCheckoutEvents {
     HeightChanged = "HeightChanged",
     LanguageChanged = "LanguageChanged",
     ScrollToTop = "ScrollToTop",
+    ShowPopOutButton = "ShowPopOutButton",
+    HidePopOutButton = "HidePopOutButton"
 }
 &nbsp;
 export type SessionNotFound = {
@@ -321,6 +381,33 @@ export type SessionLocked = {
     callback: () =&gt; void;
 };
 &nbsp;
+export type ShowPopOutButton = {
+    type: 'ShowPopOutButton';
+    styles: {
+        font: string;
+        height: string;
+        color: string;
+        background: string;
+        textAlign: string;
+        padding: string;
+        margin: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    openLabel: string;
+    focusLabel: string;
+    closeLabel: string;
+    descriptionLabel: string;
+    top: string;
+    left: string;
+    right: string;
+    language: string;
+    disabled: 'true' | 'false';
+}
+&nbsp;
 export type SessionLockFailed = {
     type: CheckoutEvents.SessionLockFailed;
 };
@@ -370,7 +457,7 @@ export type SessionEvent =
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Aug 03 2023 12:32:21 GMT+0000 (Coordinated Universal Time)
+                at Wed Oct 04 2023 07:34:20 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>

package/coverage/{Chrome Headless 115.0.5790.98 (Linux x86_64) → Chrome Headless 117.0.5938.92 (Linux x86_64)}/html/createIframeAsync.ts.html

@@ -129,15 +129,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -150,31 +150,31 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">31x</span>
 <span class="cline-any cline-yes">37x</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">31x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">44x</span>
+<span class="cline-any cline-yes">37x</span>
+<span class="cline-any cline-yes">37x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -247,7 +247,7 @@ export const createIframeAsync = (
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Aug 03 2023 12:32:21 GMT+0000 (Coordinated Universal Time)
+                at Wed Oct 04 2023 07:34:20 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>

package/coverage/{Chrome Headless 115.0.5790.98 (Linux x86_64) → Chrome Headless 117.0.5938.92 (Linux x86_64)}/html/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.26% </span>
+                <span class="strong">74.41% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>166/178</span>
+                <span class='fraction'>410/551</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.83% </span>
+                <span class="strong">54.4% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>63/82</span>
+                <span class='fraction'>105/193</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">87.23% </span>
+                <span class="strong">72.64% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>41/47</span>
+                <span class='fraction'>77/106</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.95% </span>
+                <span class="strong">73.63% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>145/156</span>
+                <span class='fraction'>363/493</span>
             </div>
         
             
@@ -55,7 +55,7 @@
             Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
         </p>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line medium'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -78,13 +78,13 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="16" class="abs high">16/16</td>
+	<td data-value="18" class="abs high">18/18</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="4" class="abs high">4/4</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="2" class="abs high">2/2</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="16" class="abs high">16/16</td>
+	<td data-value="18" class="abs high">18/18</td>
 	</tr>
 
 <tr>
@@ -104,47 +104,92 @@
 
 <tr>
 	<td class="file high" data-value="index.ts"><a href="index.ts.html">index.ts</a></td>
-	<td data-value="95.65" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 95%"></div><div class="cover-empty" style="width: 5%"></div></div>
+	<td data-value="81.96" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 81%"></div><div class="cover-empty" style="width: 19%"></div></div>
 	</td>
-	<td data-value="95.65" class="pct high">95.65%</td>
-	<td data-value="92" class="abs high">88/92</td>
-	<td data-value="82.5" class="pct high">82.5%</td>
-	<td data-value="40" class="abs high">33/40</td>
-	<td data-value="93.1" class="pct high">93.1%</td>
-	<td data-value="29" class="abs high">27/29</td>
-	<td data-value="95.06" class="pct high">95.06%</td>
-	<td data-value="81" class="abs high">77/81</td>
+	<td data-value="81.96" class="pct high">81.96%</td>
+	<td data-value="194" class="abs high">159/194</td>
+	<td data-value="65.82" class="pct medium">65.82%</td>
+	<td data-value="79" class="abs medium">52/79</td>
+	<td data-value="82.35" class="pct high">82.35%</td>
+	<td data-value="51" class="abs high">42/51</td>
+	<td data-value="80.34" class="pct high">80.34%</td>
+	<td data-value="178" class="abs high">143/178</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="subscribe.ts"><a href="subscribe.ts.html">subscribe.ts</a></td>
-	<td data-value="88.24" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 88%"></div><div class="cover-empty" style="width: 12%"></div></div>
+	<td class="file low" data-value="popOut.ts"><a href="popOut.ts.html">popOut.ts</a></td>
+	<td data-value="11.32" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 11%"></div><div class="cover-empty" style="width: 89%"></div></div>
 	</td>
-	<td data-value="88.24" class="pct high">88.24%</td>
-	<td data-value="34" class="abs high">30/34</td>
-	<td data-value="70.83" class="pct medium">70.83%</td>
-	<td data-value="24" class="abs medium">17/24</td>
-	<td data-value="75" class="pct medium">75%</td>
-	<td data-value="8" class="abs medium">6/8</td>
-	<td data-value="86.21" class="pct high">86.21%</td>
-	<td data-value="29" class="abs high">25/29</td>
+	<td data-value="11.32" class="pct low">11.32%</td>
+	<td data-value="53" class="abs low">6/53</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="16" class="abs low">0/16</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="10" class="abs low">0/10</td>
+	<td data-value="10" class="pct low">10%</td>
+	<td data-value="50" class="abs low">5/50</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="popOutBackdrop.ts"><a href="popOutBackdrop.ts.html">popOutBackdrop.ts</a></td>
+	<td data-value="84.96" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 84%"></div><div class="cover-empty" style="width: 16%"></div></div>
+	</td>
+	<td data-value="84.96" class="pct high">84.96%</td>
+	<td data-value="113" class="abs high">96/113</td>
+	<td data-value="46.15" class="pct low">46.15%</td>
+	<td data-value="26" class="abs low">12/26</td>
+	<td data-value="93.33" class="pct high">93.33%</td>
+	<td data-value="15" class="abs high">14/15</td>
+	<td data-value="84.55" class="pct high">84.55%</td>
+	<td data-value="110" class="abs high">93/110</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="url.ts"><a href="url.ts.html">url.ts</a></td>
-	<td data-value="87.5" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 87%"></div><div class="cover-empty" style="width: 13%"></div></div>
+	<td class="file high" data-value="popOutButton.ts"><a href="popOutButton.ts.html">popOutButton.ts</a></td>
+	<td data-value="85.96" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 85%"></div><div class="cover-empty" style="width: 15%"></div></div>
 	</td>
-	<td data-value="87.5" class="pct high">87.5%</td>
-	<td data-value="16" class="abs high">14/16</td>
-	<td data-value="60" class="pct medium">60%</td>
-	<td data-value="10" class="abs medium">6/10</td>
+	<td data-value="85.96" class="pct high">85.96%</td>
+	<td data-value="57" class="abs high">49/57</td>
 	<td data-value="66.67" class="pct medium">66.67%</td>
-	<td data-value="3" class="abs medium">2/3</td>
-	<td data-value="84.62" class="pct high">84.62%</td>
-	<td data-value="13" class="abs high">11/13</td>
+	<td data-value="12" class="abs medium">8/12</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="6" class="abs high">6/6</td>
+	<td data-value="88.1" class="pct high">88.1%</td>
+	<td data-value="42" class="abs high">37/42</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="subscribe.ts"><a href="subscribe.ts.html">subscribe.ts</a></td>
+	<td data-value="81.82" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 81%"></div><div class="cover-empty" style="width: 19%"></div></div>
+	</td>
+	<td data-value="81.82" class="pct high">81.82%</td>
+	<td data-value="55" class="abs high">45/55</td>
+	<td data-value="55.88" class="pct medium">55.88%</td>
+	<td data-value="34" class="abs medium">19/34</td>
+	<td data-value="61.54" class="pct medium">61.54%</td>
+	<td data-value="13" class="abs medium">8/13</td>
+	<td data-value="77.78" class="pct medium">77.78%</td>
+	<td data-value="45" class="abs medium">35/45</td>
+	</tr>
+
+<tr>
+	<td class="file low" data-value="url.ts"><a href="url.ts.html">url.ts</a></td>
+	<td data-value="46.34" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 46%"></div><div class="cover-empty" style="width: 54%"></div></div>
+	</td>
+	<td data-value="46.34" class="pct low">46.34%</td>
+	<td data-value="41" class="abs low">19/41</td>
+	<td data-value="38.89" class="pct low">38.89%</td>
+	<td data-value="18" class="abs low">7/18</td>
+	<td data-value="25" class="pct low">25%</td>
+	<td data-value="4" class="abs low">1/4</td>
+	<td data-value="48.48" class="pct low">48.48%</td>
+	<td data-value="33" class="abs low">16/33</td>
 	</tr>
 
 </tbody>
@@ -155,7 +200,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Thu Aug 03 2023 12:32:21 GMT+0000 (Coordinated Universal Time)
+                at Wed Oct 04 2023 07:34:20 GMT+0000 (Coordinated Universal Time)
             </div>
         </div>
         <script src="prettify.js"></script>