idmission-web-sdk 2.3.32 → 2.3.33

package/dist/sdk2.umd.development.js

@@ -211,7 +211,7 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var webSdkVersion = '2.3.32';
+  var webSdkVersion = '2.3.33';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -17054,12 +17054,10 @@
     canvas.style.height = '0';
   }
 
-  var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n  aspect-ratio: ", ";\n  display: flex;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n  aspect-ratio: ", ";\n  display: flex;\n"])), function (props) {
+  var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
     return props.$isVisible ? '' : 'opacity: 0;';
-  }, function (props) {
-    return props.$aspectRatio;
   });
-  var IdCardGuideImage = styled.img(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n  max-width: 100%;\n  max-height: 100%;\n"])), function (props) {
+  var IdCardGuideImage = styled.img(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"], ["\n  max-height: 100%;\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"])), function (props) {
     return props.$isMirrored ? 'transform: scaleX(-1);' : '';
   }, function (props) {
     return props.$isInvisible ? 'opacity: 0;' : '';
@@ -17075,19 +17073,20 @@
       borderRadius = _u === void 0 ? 25 : _u,
       _v = _a.borderColor,
       borderColor = _v === void 0 ? 'white' : _v,
-      aspectRatio = _a.aspectRatio,
-      _w = _a.progress,
-      progress = _w === void 0 ? 0 : _w,
+      _w = _a.aspectRatio,
+      aspectRatio = _w === void 0 ? 1 : _w,
+      _x = _a.progress,
+      progress = _x === void 0 ? 0 : _x,
       props = __rest(_a, ["children", "status", "borderWidth", "borderRadius", "borderColor", "aspectRatio", "progress"]);
-    var _x = useResizeObserver(),
-      ref = _x.ref,
-      _y = _x.width,
-      width = _y === void 0 ? 0 : _y,
-      _z = _x.height,
-      height = _z === void 0 ? 0 : _z;
-    var _0 = React.useState(0),
-      progressResets = _0[0],
-      setProgressResets = _0[1];
+    var _y = useResizeObserver(),
+      ref = _y.ref,
+      _z = _y.width,
+      width = _z === void 0 ? 0 : _z,
+      _0 = _y.height,
+      height = _0 === void 0 ? 0 : _0;
+    var _1 = React.useState(0),
+      progressResets = _1[0],
+      setProgressResets = _1[1];
     React.useEffect(function () {
       if (progress === 0 && status === 'capturing') {
         setProgressResets(function (n) {
@@ -17104,8 +17103,10 @@
     return /*#__PURE__*/React.createElement(IdCardBorderContainer, _assign({}, props), /*#__PURE__*/React.createElement("div", {
       ref: ref,
       style: {
-        aspectRatio: aspectRatio,
-        flex: 1
+        maxHeight: '100%',
+        maxWidth: '100%',
+        display: 'flex',
+        aspectRatio: aspectRatio
       }
     }, children), status === 'ready' && !wavesDisabled && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IdCardBorderSvg, {
       width: width,
@@ -17204,7 +17205,7 @@
       className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
     }));
   }
-  var IdCardBorderContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
+  var IdCardBorderContainer = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  max-width: 100%;\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"], ["\n  max-width: 100%;\n  & > .idmSdkWaves {\n    position: absolute;\n    animation: ", " 2s ease-out infinite;\n    transform-style: preserve-3d;\n\n    &:nth-child(2) {\n      animation-delay: 0.66s;\n    }\n\n    &:nth-child(3) {\n      animation-delay: 1.33s;\n    }\n  }\n"])), wavesAnimation);
   var SvgOverlay = styled.svg(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n"])));
   var IdCardBorderRect = styled.rect(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"], ["\n  &.idmSdkProgressBorder {\n    animation: ", " ", "\n      ", ";\n  }\n\n  &.idmSdkProgressPaused {\n    animation-play-state: paused;\n  }\n"])), progressBorderAnimation, function (props) {
     var _a;
@@ -17536,46 +17537,58 @@
   };
 
   var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var _p = _a.classNames,
-      classNames = _p === void 0 ? {} : _p,
-      _q = _a.images,
-      userSuppliedImages = _q === void 0 ? defaultIdCaptureGuideImages : _q,
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _u = _a.classNames,
+      classNames = _u === void 0 ? {} : _u,
+      _v = _a.images,
+      userSuppliedImages = _v === void 0 ? defaultIdCaptureGuideImages : _v,
       userSuppliedPadding = _a.padding,
       userSuppliedImagePadding = _a.imagePadding,
-      _r = _a.imageVisible,
-      imageVisible = _r === void 0 ? true : _r,
+      _w = _a.imageVisible,
+      imageVisible = _w === void 0 ? true : _w,
       borderWidth = _a.borderWidth,
       borderColor = _a.borderColor,
-      _s = _a.idCardBorderWidth,
-      idCardBorderWidth = _s === void 0 ? '2.5%' : _s,
-      _t = _a.idCardBorderColor,
-      idCardBorderColor = _t === void 0 ? 'white' : _t,
+      _x = _a.idCardBorderWidth,
+      idCardBorderWidth = _x === void 0 ? '2.5%' : _x,
+      _y = _a.idCardBorderColor,
+      idCardBorderColor = _y === void 0 ? 'white' : _y,
       maskColor = _a.maskColor,
-      _u = _a.isMirrored,
-      isMirrored = _u === void 0 ? false : _u,
-      _v = _a.isBackToFront,
-      isBackToFront = _v === void 0 ? false : _v,
-      _w = _a.portraitGuidesOnMobile,
-      portraitGuidesOnMobile = _w === void 0 ? true : _w,
-      _x = _a.instruction,
-      instruction = _x === void 0 ? '' : _x,
-      _y = _a.requestedAction,
-      requestedAction = _y === void 0 ? 'SHOW_ID_FRONT' : _y,
-      _z = _a.progress,
-      progress = _z === void 0 ? 0 : _z,
-      _0 = _a.status,
-      status = _0 === void 0 ? 'ready' : _0,
+      _z = _a.isMirrored,
+      isMirrored = _z === void 0 ? false : _z,
+      _0 = _a.isBackToFront,
+      isBackToFront = _0 === void 0 ? false : _0,
+      _1 = _a.portraitGuidesOnMobile,
+      portraitGuidesOnMobile = _1 === void 0 ? true : _1,
+      _2 = _a.instruction,
+      instruction = _2 === void 0 ? '' : _2,
+      _3 = _a.requestedAction,
+      requestedAction = _3 === void 0 ? 'SHOW_ID_FRONT' : _3,
+      _4 = _a.progress,
+      progress = _4 === void 0 ? 0 : _4,
+      _5 = _a.status,
+      status = _5 === void 0 ? 'ready' : _5,
       onClick = _a.onClick;
-    var _1 = useGuideOrientationContext(),
-      wrapperRef = _1.wrapperRef,
-      wrapperWidth = _1.wrapperWidth,
-      wrapperHeight = _1.wrapperHeight,
-      imageAspectRatio = _1.imageAspectRatio,
-      wrapperAspectRatio = _1.wrapperAspectRatio,
-      guideOrientationOnImageLoaded = _1.onImageLoaded,
-      setDimensions = _1.setDimensions;
-    var state = useIdCaptureStore();
+    var _6 = useGuideOrientationContext(),
+      wrapperRef = _6.wrapperRef,
+      wrapperWidth = _6.wrapperWidth,
+      wrapperHeight = _6.wrapperHeight,
+      imageAspectRatio = _6.imageAspectRatio,
+      wrapperAspectRatio = _6.wrapperAspectRatio,
+      guideOrientationOnImageLoaded = _6.onImageLoaded,
+      setDimensions = _6.setDimensions;
+    var containerRef = React.useRef(null);
+    var _7 = React.useState({
+        width: 0,
+        height: 0
+      }),
+      imageDimensions = _7[0],
+      setImageDimensions = _7[1];
+    var _8 = React.useState({
+        width: 0,
+        height: 0
+      }),
+      containerDimensions = _8[0],
+      setContainerDimensions = _8[1];
     var theme = styled.useTheme();
     if (borderWidth === undefined) borderWidth = (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.borderWidth) !== null && _d !== void 0 ? _d : 4;
     React.useEffect(function () {
@@ -17587,34 +17600,32 @@
     var padding = userSuppliedPadding !== null && userSuppliedPadding !== void 0 ? userSuppliedPadding : isMobile() ? (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.mobilePadding) !== null && _g !== void 0 ? _g : 0 : (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideBox) === null || _j === void 0 ? void 0 : _j.desktopPadding) !== null && _k !== void 0 ? _k : 50;
     var paddingAndBorderPx = padding * 2 + (borderWidth !== null && borderWidth !== void 0 ? borderWidth : 0) * 2;
     var images = useImagesWithBackToFront(userSuppliedImages, isBackToFront);
-    var imagesByUrl = useGuideImagesByUrl(images);
     var orientation = getOrientation(portraitGuidesOnMobile);
     var currentImage = images[orientation][requestedAction === 'FLIP_ID' ? 'SHOW_ID_FRONT' : requestedAction];
-    var imagePadding = (_o = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.imagePadding) !== null && _o !== void 0 ? _o : '0 50px';
-    if (typeof imagePadding === 'number') {
-      imagePadding = "".concat(imagePadding, "px");
-    }
-    var paddingForMath = imagePadding.replace(/[^0-9\s]/g, '').split(' ').map(Number);
-    var paddingForMathMax = Math.max.apply(Math, paddingForMath);
-    var imageWidth = state.guideRectWidth - paddingForMathMax * 2;
-    var imageHeight = state.guideRectHeight - paddingForMathMax * 2;
+    var imagePadding = userSuppliedImagePadding !== null && userSuppliedImagePadding !== void 0 ? userSuppliedImagePadding : isMobile() ? (_o = (_m = (_l = theme.idCapture) === null || _l === void 0 ? void 0 : _l.guideBox) === null || _m === void 0 ? void 0 : _m.mobileImagePadding) !== null && _o !== void 0 ? _o : 0 : (_r = (_q = (_p = theme.idCapture) === null || _p === void 0 ? void 0 : _p.guideBox) === null || _q === void 0 ? void 0 : _q.imagePadding) !== null && _r !== void 0 ? _r : 50;
     var centerRegionMinWidth = imageAspectRatio >= wrapperAspectRatio ? wrapperWidth - paddingAndBorderPx : undefined;
-    var cardAspectRatio = imageAspectRatio > 1 ? '1.6' : '0.625';
     var onImageLoaded = React.useCallback(function (e) {
-      var _a, _b;
       guideOrientationOnImageLoaded(e);
-      var img = e.currentTarget;
-      var imageByUrl = imagesByUrl[img.src];
-      var width = (_a = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.width) !== null && _a !== void 0 ? _a : img.naturalWidth;
-      var height = (_b = imageByUrl === null || imageByUrl === void 0 ? void 0 : imageByUrl.height) !== null && _b !== void 0 ? _b : img.naturalHeight;
-      dispatchIdCaptureAction({
-        type: 'guideImageLoaded',
-        payload: {
-          width: width,
-          height: height
-        }
+      setImageDimensions({
+        width: (currentImage === null || currentImage === void 0 ? void 0 : currentImage.width) || imageDimensions.width,
+        height: (currentImage === null || currentImage === void 0 ? void 0 : currentImage.height) || imageDimensions.height
       });
-    }, [guideOrientationOnImageLoaded, imagesByUrl]);
+    }, [guideOrientationOnImageLoaded, currentImage, imageDimensions.height, imageDimensions.width]);
+    React.useEffect(function () {
+      if (containerRef.current && containerRef.current.clientWidth && containerRef.current.clientHeight) {
+        setContainerDimensions({
+          width: containerRef.current.clientWidth,
+          height: containerRef.current.clientHeight
+        });
+        dispatchIdCaptureAction({
+          type: 'guideImageLoaded',
+          payload: {
+            width: imageDimensions.width,
+            height: imageDimensions.height
+          }
+        });
+      }
+    }, [setDimensions, setContainerDimensions, imageDimensions.height, imageDimensions.width]);
     return /*#__PURE__*/React.createElement(StyledPageContainer, {
       ref: wrapperRef,
       onClick: onClick,
@@ -17643,14 +17654,19 @@
       "$padding": imagePadding,
       className: classNames.centerRegionBorder
     }, /*#__PURE__*/React.createElement(GuideCenterInner, {
-      className: classNames.centerRegionInner
+      "$isLandscape": orientation === 'landscape',
+      ref: containerRef,
+      className: classNames.centerRegionInner,
+      style: {
+        aspectRatio: imageDimensions.width && imageDimensions.height ? imageDimensions.width / imageDimensions.height : 1
+      }
     }, /*#__PURE__*/React.createElement(IdCardGuideImageContainer, {
       status: status,
       progress: progress,
       borderWidth: idCardBorderWidth,
       borderColor: idCardBorderColor,
       "$isVisible": requestedAction !== 'FLIP_ID',
-      "$aspectRatio": cardAspectRatio
+      aspectRatio: imageDimensions.width && imageDimensions.height ? imageDimensions.width / imageDimensions.height : 1
     }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
       alt: "",
       src: currentImage.url,
@@ -17658,8 +17674,8 @@
       className: classNames.image,
       "$isInvisible": !imageVisible,
       "$isMirrored": isMirrored,
-      width: imageWidth,
-      height: imageHeight
+      width: containerDimensions.width ? containerDimensions.width : imageDimensions.width,
+      height: containerDimensions.height ? containerDimensions.height : imageDimensions.height
     })), requestedAction === 'FLIP_ID' && ( /*#__PURE__*/React.createElement(FlipIdPrompt, {
       images: images,
       borderWidth: idCardBorderWidth,
@@ -17667,8 +17683,8 @@
       portraitGuidesOnMobile: portraitGuidesOnMobile,
       isMirrored: isMirrored,
       classNames: classNames.flipIdPrompt,
-      width: imageWidth,
-      height: imageHeight
+      width: (_s = currentImage === null || currentImage === void 0 ? void 0 : currentImage.width) !== null && _s !== void 0 ? _s : imageDimensions.width,
+      height: (_t = currentImage === null || currentImage === void 0 ? void 0 : currentImage.width) !== null && _t !== void 0 ? _t : imageDimensions.height
     }))))), /*#__PURE__*/React.createElement(Spacer, {
       "$maskColor": maskColor,
       "$minWidth": padding,
@@ -17712,10 +17728,12 @@
     var _a, _b;
     return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
   }, function (props) {
-    return props.$padding ? "padding: ".concat(props.$padding, ";") : '';
+    return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
   });
   var GuideText = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"], ["\n  align-content: center;\n  margin-top: 12px;\n  margin-bottom: 12px;\n"])));
-  var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n"], ["\n  position: relative;\n  margin: auto;\n"])));
+  var GuideCenterInner = styled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n  position: relative;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n"], ["\n  position: relative;\n  margin: auto;\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  display: flex;\n"])), function (props) {
+    return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
+  });
   var templateObject_1$y, templateObject_2$s, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$6, templateObject_7$4, templateObject_8$2, templateObject_9$2;
 
   var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
@@ -25616,7 +25634,8 @@
         borderWidth: 4,
         desktopPadding: 50,
         mobilePadding: 0,
-        imagePadding: '0 50px',
+        imagePadding: 50,
+        mobileImagePadding: 0,
         wavesDisabled: false,
         wavesColor: '#287ec6',
         progressBarColor: 'white',