idmission-web-sdk 2.3.25 → 2.3.26

package/dist/sdk2.esm.js

@@ -204,7 +204,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   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
@@ -7916,10 +7916,12 @@ function resetCanvasDimensions(canvas) {
   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;' : '';
@@ -8449,10 +8451,16 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
   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 = useCallback(function (e) {
     var _a, _b;
     guideOrientationOnImageLoaded(e);
@@ -8502,7 +8510,8 @@ var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
     progress: progress,
     borderWidth: idCardBorderWidth,
     borderColor: idCardBorderColor,
-    "$isVisible": requestedAction !== 'FLIP_ID'
+    "$isVisible": requestedAction !== 'FLIP_ID',
+    "$aspectRatio": cardAspectRatio
   }, /*#__PURE__*/React__default.createElement(IdCardGuideImage, {
     alt: "",
     src: currentImage.url,
@@ -8564,7 +8573,7 @@ var GuideCenterBorder = styled.div(templateObject_7$4 || (templateObject_7$4 = _
   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"])));
@@ -15700,7 +15709,7 @@ var defaultTheme = {
       borderWidth: 4,
       desktopPadding: 50,
       mobilePadding: 0,
-      imagePadding: 50,
+      imagePadding: '0 50px',
       wavesDisabled: false,
       wavesColor: '#287ec6',
       progressBarColor: 'white',