idmission-web-sdk 2.3.25 → 2.3.26

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.25';
+  var webSdkVersion = '2.3.26';
 
   function getPlatform() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -17054,10 +17054,12 @@
     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"], ["\n  position: relative;\n  ", "\n  box-sizing: border-box;\n"])), function (props) {
+  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) {
     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"], ["\n  transform-style: preserve-3d;\n  ", "\n  ", "\n"])), function (props) {
+  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) {
     return props.$isMirrored ? 'transform: scaleX(-1);' : '';
   }, function (props) {
     return props.$isInvisible ? 'opacity: 0;' : '';
@@ -17587,10 +17589,16 @@
     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 : 50;
-    var imageWidth = state.guideRectWidth - imagePadding * 2;
-    var imageHeight = state.guideRectHeight - imagePadding * 2;
+    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 centerRegionMinWidth = imageAspectRatio >= wrapperAspectRatio ? wrapperWidth - paddingAndBorderPx : undefined;
+    var cardAspectRatio = orientation === 'landscape' ? '16/10' : '10/16';
     var onImageLoaded = React.useCallback(function (e) {
       var _a, _b;
       guideOrientationOnImageLoaded(e);
@@ -17640,7 +17648,8 @@
       progress: progress,
       borderWidth: idCardBorderWidth,
       borderColor: idCardBorderColor,
-      "$isVisible": requestedAction !== 'FLIP_ID'
+      "$isVisible": requestedAction !== 'FLIP_ID',
+      "$aspectRatio": cardAspectRatio
     }, /*#__PURE__*/React.createElement(IdCardGuideImage, {
       alt: "",
       src: currentImage.url,
@@ -17702,7 +17711,7 @@
     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, "px;") : '';
+    return props.$padding ? "padding: ".concat(props.$padding, ";") : '';
   });
   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"])));
@@ -25606,7 +25615,7 @@
         borderWidth: 4,
         desktopPadding: 50,
         mobilePadding: 0,
-        imagePadding: 50,
+        imagePadding: '0 50px',
         wavesDisabled: false,
         wavesColor: '#287ec6',
         progressBarColor: 'white',