@smileid/web-components 10.0.2 → 10.0.5

package/dist/esm/{DocumentCaptureScreens-ChpBVvNE.js → DocumentCaptureScreens-BIJUlWLB.js}

@@ -1,6 +1,6 @@
-import { S as c, p as M, I as C } from "./package-D_4zJ9ck.js";
-import { s as w } from "./styles-D2i3GFLK.js";
-import "./Navigation-juBE4qOw.js";
+import { S as c, p as M, I as w } from "./package-PZvRbm5J.js";
+import { s as C } from "./styles-BOEZtbuc.js";
+import "./Navigation-CTjK6tLU.js";
 function A(l, e = 16) {
   const t = /* @__PURE__ */ new Set();
   for (let i = 0; i < Math.min(l.length, 1e4); i += 4)
@@ -54,11 +54,11 @@ function H() {
 
       #document-capture-screen,
       #back-of-document-capture-screen {
-        block-size: 45rem;
         display: flex;
         flex-direction: column;
         max-block-size: 100%;
         max-inline-size: 40ch;
+        padding: 1rem;
       }
 
       #document-capture-screen header p {
@@ -115,6 +115,7 @@ function H() {
         inset: -1px;
       }
       canvas {
+        width: 100%;
         border-width: 0.25rem;
         border-color: #9394ab;
         border-style: solid;
@@ -153,7 +154,7 @@ function H() {
         padding-top: 10px;
       }
   </style>
-  ${w(this.themeColor)}
+  ${C(this.themeColor)}
   <div id='document-capture-screen' class='flow center flex-column'>
   <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? "show-navigation" : ""} ${this.hideBack ? "hide-back" : ""}></smileid-navigation>
     <h2 class='text-base font-bold title-color'>${this.documentName}</h2>
@@ -225,9 +226,9 @@ class L extends HTMLElement {
     const t = document.createElement("canvas");
     if (this.isPortraitCaptureView) {
       t.width = e.videoWidth, t.height = t.width * 16 / 9;
-      const r = document.createElement("canvas");
-      r.width = t.width, r.height = t.height, this.updatePortraitId(t, e, 1, 1), this.updatePortraitId(r, e);
-      const n = t.toDataURL("image/jpeg"), h = r.toDataURL("image/jpeg");
+      const s = document.createElement("canvas");
+      s.width = t.width, s.height = t.height, this.updatePortraitId(t, e, 1, 1), this.updatePortraitId(s, e);
+      const n = t.toDataURL("image/jpeg"), h = s.toDataURL("image/jpeg");
       return {
         image: n,
         originalHeight: t.height,
@@ -241,13 +242,13 @@ class L extends HTMLElement {
     t.height = i;
     const o = document.createElement("canvas");
     if (o.height = t.height, o.width = t.width, e.videoWidth < e.videoHeight) {
-      const r = document.createElement("canvas");
-      o.height = t.width / 1.75, t.width = 2240, t.height = t.width / 1.77, this._capturePortraitToLandscapeImage(r, e), this._drawLandscapeImageFromCanvas(t, r, 1, 1), this._drawLandscapeImageFromCanvas(o, r);
+      const s = document.createElement("canvas");
+      o.height = t.width / 1.75, t.width = 2240, t.height = t.width / 1.77, this._capturePortraitToLandscapeImage(s, e), this._drawLandscapeImageFromCanvas(t, s, 1, 1), this._drawLandscapeImageFromCanvas(o, s);
     } else
       this._drawLandscapeImage(t, e, 1, 1), this._drawLandscapeImage(o, e);
-    const s = t.toDataURL("image/jpeg"), d = o.toDataURL("image/jpeg");
+    const r = t.toDataURL("image/jpeg"), d = o.toDataURL("image/jpeg");
     return {
-      image: s,
+      image: r,
       originalHeight: t.height,
       originalWidth: t.width,
       previewImage: d,
@@ -289,23 +290,23 @@ class L extends HTMLElement {
       i.muted = !0, i.setAttribute("muted", "true"), i.autoplay = !0, i.playsInline = !0, "srcObject" in i ? i.srcObject = e : i.src = window.URL.createObjectURL(e), o.width = a.clientWidth, o.height = a.clientWidth * 9 / 16, this.isPortraitCaptureView && (o.height = a.clientWidth * 16 / 9), i.onloadedmetadata = () => {
         i.play(), this.shadowRoot.querySelector("#loader").hidden = !0, this.shadowRoot.querySelector(".id-video").hidden = !1, this.shadowRoot.querySelector(".actions").hidden = !1, t || a.prepend(o);
       };
-      const s = () => {
+      const r = () => {
         if (i.paused || i.ended) return;
-        i.removeEventListener("playing", s);
-        const r = i.videoWidth / i.videoHeight < 1;
+        i.removeEventListener("playing", r);
+        const s = i.videoWidth / i.videoHeight < 1;
         if (this.isPortraitCaptureView) {
-          this.updatePortraitId(o, i), requestAnimationFrame(s);
+          this.updatePortraitId(o, i), requestAnimationFrame(r);
           return;
         }
-        if (r) {
+        if (s) {
           a.classList.add("mobile-camera-screen");
           const n = document.createElement("canvas");
           this._capturePortraitToLandscapeImage(n, i), this._drawLandscapeImageFromCanvas(o, n);
         } else
           this._drawLandscapeImage(o, i);
-        requestAnimationFrame(s);
+        requestAnimationFrame(r);
       };
-      i.addEventListener("playing", s), this._IDStream = e, this._IDVideo = i;
+      i.addEventListener("playing", r), this._IDStream = e, this._IDVideo = i;
     } catch (t) {
       this.setAttribute(
         "data-camera-error",
@@ -314,7 +315,7 @@ class L extends HTMLElement {
     }
   }
   _drawLandscapeImage(e, t = this._IDVideo, i = v, o = v) {
-    const a = this.height ? this.height / t.videoHeight : i, s = this.width ? this.width / t.videoWidth : o, d = (1 - i) / 2, r = (1 - o) / 2, n = t.videoWidth * s, h = t.videoHeight * a, m = t.videoWidth * r, g = t.videoHeight * d;
+    const a = this.height ? this.height / t.videoHeight : i, r = this.width ? this.width / t.videoWidth : o, d = (1 - i) / 2, s = (1 - o) / 2, n = t.videoWidth * r, h = t.videoHeight * a, m = t.videoWidth * s, g = t.videoHeight * d;
     e.getContext("2d").drawImage(
       t,
       m,
@@ -328,13 +329,13 @@ class L extends HTMLElement {
     );
   }
   _capturePortraitToLandscapeImage(e, t = this._IDVideo) {
-    const { videoHeight: i, videoWidth: o } = t, a = o, s = o * 9 / 16, d = 0, r = (i - s) / 2;
-    e.width = a, e.height = s, e.getContext("2d").drawImage(
+    const { videoHeight: i, videoWidth: o } = t, a = o, r = o * 9 / 16, d = 0, s = (i - r) / 2;
+    e.width = a, e.height = r, e.getContext("2d").drawImage(
       t,
       d,
-      r,
-      a,
       s,
+      a,
+      r,
       0,
       0,
       e.width,
@@ -342,7 +343,7 @@ class L extends HTMLElement {
     );
   }
   _drawLandscapeImageFromCanvas(e, t, i = v, o = v) {
-    const a = this.height ? this.height / t.height : i, s = this.width ? this.width / t.width : o, d = (1 - i) / 2, r = (1 - o) / 2, n = t.width * s, h = t.height * a, m = t.width * r, g = t.height * d;
+    const a = this.height ? this.height / t.height : i, r = this.width ? this.width / t.width : o, d = (1 - i) / 2, s = (1 - o) / 2, n = t.width * r, h = t.height * a, m = t.width * s, g = t.height * d;
     e.getContext("2d").drawImage(
       t,
       m,
@@ -356,15 +357,15 @@ class L extends HTMLElement {
     );
   }
   _drawPortraitToLandscapeImage(e, t = this._IDVideo) {
-    const { videoHeight: i, videoWidth: o } = t, a = 600, s = 400;
-    e.width = a, e.height = s;
-    const d = (o - a) / 2, r = (i - s) / 2;
+    const { videoHeight: i, videoWidth: o } = t, a = 600, r = 400;
+    e.width = a, e.height = r;
+    const d = (o - a) / 2, s = (i - r) / 2;
     e.getContext("2d").drawImage(
       t,
       d,
-      r,
-      a,
       s,
+      a,
+      r,
       0,
       0,
       e.width,
@@ -372,11 +373,11 @@ class L extends HTMLElement {
     );
   }
   updatePortraitId(e, t = this._IDVideo, i = v, o = v) {
-    const { videoWidth: a, videoHeight: s } = t;
-    if (a && s) {
-      const d = document.createElement("canvas"), r = 9 / 16;
+    const { videoWidth: a, videoHeight: r } = t;
+    if (a && r) {
+      const d = document.createElement("canvas"), s = 9 / 16;
       let n, h, m, g;
-      a / s > r ? (h = s, n = h * r, m = (a - n) / 2, g = 0) : (n = a, h = n, m = 0, g = 0), d.height = h, d.width = n, d.getContext("2d").drawImage(
+      a / r > s ? (h = r, n = h * s, m = (a - n) / 2, g = 0) : (n = a, h = n, m = 0, g = 0), d.height = h, d.width = n, d.getContext("2d").drawImage(
         t,
         m,
         g,
@@ -387,12 +388,12 @@ class L extends HTMLElement {
         d.width,
         d.height
       );
-      const b = this.height ? this.height / n : i, y = this.width ? this.width / h : o, x = (1 - i) / 2, k = (1 - o) / 2, E = n * y, _ = h * b, I = n * k, B = h * x;
+      const b = this.height ? this.height / n : i, y = this.width ? this.width / h : o, x = (1 - i) / 2, E = (1 - o) / 2, k = n * y, _ = h * b, I = n * E, B = h * x;
       e.getContext("2d").drawImage(
         d,
         I,
         B,
-        E,
+        k,
         _,
         0,
         0,
@@ -513,7 +514,6 @@ function S() {
     
       .section {
         width: 100%;
-        height: 100vh;
         justify-content: center;
       }
     }
@@ -621,11 +621,11 @@ function S() {
     }
     
     #document-capture-review-screen {
-      block-size: 45rem;
       display: flex;
       flex-direction: column;
       max-block-size: 100%;
       max-inline-size: 40ch;
+      padding: 1rem;
     }
 
     #document-capture-review-screen .id-image-container.landscape {
@@ -690,7 +690,7 @@ function S() {
       text-align: center;
 
       /* h1 */
-      font-size: 1.5rem;
+      font-size: 1.25rem;
       font-style: normal;
       font-weight: 700;
       line-height: 36px; /* 150% */
@@ -714,7 +714,7 @@ function S() {
       line-height: 1.5rem;
     }
   </style>
-  ${w(this.themeColor)}
+  ${C(this.themeColor)}
   <div id='document-capture-review-screen' class='flow center'>
   <smileid-navigation ${this.showNavigation ? "show-navigation" : ""} hide-back></smileid-navigation>
     <h1 class="header-title title-color">
@@ -1002,12 +1002,51 @@ function $() {
 }
 function V() {
   return `
+  <style>
+    h1 {
+      font-size: 1.25rem;
+    }
+
+    .controls {
+      width: 100%;
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .content-root {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .content-header, .content-body, .content-footer {
+      width: 100%;
+    }
+
+    .content-body {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    .content-body header {
+      margin-top: 1rem;
+    }
+  </style>
     <div id="document-capture-instructions-screen" class="flow center">
-        <section className="main">
+        <div class="content-root">
+            <div class="content-header">
         <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? "show-navigation" : ""} ${this.hideBack ? "hide-back" : ""}></smileid-navigation>
+        </div>
+        <div class="content-body">
         <header>
         ${this.isFrontOfId ? F() : $()}
-            <h1 class='text-2xl title-color font-bold'>${this.title}</h1>
+            <h1 class='title-color font-bold'>${this.title}</h1>
         <p class="description text-sm font-normal">
             We'll use it to verify your identity.
           </p>
@@ -1015,7 +1054,7 @@ function V() {
           Please follow the instructions below.
           </p>
         </header>
-        <div class="flow instructions-wrapper">
+        <div class="instructions-wrapper">
             <div class="instructions">
                 <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -1189,9 +1228,7 @@ function V() {
         <div id="error" class='color-red'>
         </div>
         </div>
-        </section>
-    <section className="footer">
-    <div class='flow'>
+    <div class='controls'>
     ${this.supportBothCaptureModes || this.documentCaptureModes === "camera" ? `
     <button data-variant='solid full-width' class='button' type='button' id='take-photo'>
         Take Photo
@@ -1204,10 +1241,15 @@ function V() {
     </label>
     ` : ""}
 </div>
-${this.hideAttribution ? "" : "<powered-by-smile-id></powered-by-smile-id>"}
-    </section>
+${this.hideAttribution ? "" : `
+  <div class="content-footer">
+    <powered-by-smile-id></powered-by-smile-id>
+  </div>
+  `}
+    </div>
   </div>
-  ${w(this.themeColor)}
+</div>
+  ${C(this.themeColor)}
   `;
 }
 class Z extends HTMLElement {
@@ -1312,8 +1354,8 @@ class O extends HTMLElement {
   }
   connectedCallback() {
     this.innerHTML = `
-      ${w(this.themeColor)}
-      <div>
+      ${C(this.themeColor)}
+      <div style="height: 100%;">
       <document-capture-instructions theme-color='${this.themeColor}' id='document-capture-instructions-front' ${this.title}
       ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? "hidden" : ""}
       ${this.hideAttribution}
@@ -1374,7 +1416,7 @@ class O extends HTMLElement {
           })
         ), this.idReview.setAttribute("data-image", t.detail.previewImage), this._data.images.push({
           image: t.detail.image.split(",")[1],
-          image_type_id: C.ID_CARD_IMAGE_BASE64
+          image_type_id: w.ID_CARD_IMAGE_BASE64
         }), this.setActiveScreen(this.idReview);
       }
     ), this.idCapture.addEventListener("document-capture.publish", (t) => {
@@ -1382,7 +1424,7 @@ class O extends HTMLElement {
         new CustomEvent("metadata.document-front-capture-end")
       ), this.idReview.setAttribute("data-image", t.detail.previewImage), this._data.images.push({
         image: t.detail.image.split(",")[1],
-        image_type_id: C.ID_CARD_IMAGE_BASE64
+        image_type_id: w.ID_CARD_IMAGE_BASE64
       }), c.stopMedia(), this.setActiveScreen(this.idReview);
     }), this.idCapture.addEventListener("document-capture.cancelled", () => {
       this.hideInstructions ? this.handleBackEvents() : this.setActiveScreen(this.documentInstruction);
@@ -1423,7 +1465,7 @@ class O extends HTMLElement {
           })
         ), this.backOfIdReview.setAttribute("data-image", t.detail.image), this._data.images.push({
           image: t.detail.image.split(",")[1],
-          image_type_id: C.ID_CARD_BACK_IMAGE_BASE64
+          image_type_id: w.ID_CARD_BACK_IMAGE_BASE64
         }), this.setActiveScreen(this.backOfIdReview);
       }
     ), this.idCaptureBack.addEventListener("document-capture.publish", (t) => {
@@ -1431,7 +1473,7 @@ class O extends HTMLElement {
         new CustomEvent("metadata.document-back-capture-end")
       ), this.backOfIdReview.setAttribute("data-image", t.detail.previewImage), this._data.images.push({
         image: t.detail.image.split(",")[1],
-        image_type_id: C.ID_CARD_BACK_IMAGE_BASE64
+        image_type_id: w.ID_CARD_BACK_IMAGE_BASE64
       }), this.setActiveScreen(this.backOfIdReview), c.stopMedia();
     }), this.idCaptureBack.addEventListener(
       "document-capture.cancelled",
@@ -1529,4 +1571,4 @@ class O extends HTMLElement {
 export {
   O as D
 };
-//# sourceMappingURL=DocumentCaptureScreens-ChpBVvNE.js.map
+//# sourceMappingURL=DocumentCaptureScreens-BIJUlWLB.js.map