idmission-web-sdk 2.3.111 → 2.3.113

package/dist/sdk2.esm.js

@@ -205,7 +205,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var webSdkVersion = '2.3.111';
+var webSdkVersion = '2.3.113';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -14250,7 +14250,7 @@ var SignaturePaperBacking = styled.div(templateObject_1$d || (templateObject_1$d
   return ((_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.backgroundPosition) ? "background-position: ".concat((_b = props.theme.signatureCapture) === null || _b === void 0 ? void 0 : _b.backgroundPosition, ";") : "";
 });
 var SignatureCanvasContainer$1 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"], ["\n  position: absolute;\n  top: 25%;\n  left: 15%;\n  width: 70%;\n  height: 50%;\n\n  @media (max-width: 800px) {\n    top: 15%;\n    left: 2%;\n    width: 96%;\n    height: 70%;\n  }\n"])));
-var SignaturePad = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n\n  &.empty {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  &.head-tracking-unsatisfied {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n"], ["\n  position: relative;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n\n  &.empty {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  &.head-tracking-unsatisfied {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+var SignaturePad = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n\n  &.empty {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  &.head-tracking-unsatisfied {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  flex-grow: 1;\n  z-index: 100;\n  height: 100%;\n\n  &.empty {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  &.head-tracking-unsatisfied {\n    background: ", ";\n    border: ", ";\n    color: ", ";\n  }\n"])), function (props) {
   var _a, _b, _c;
   return (_c = (_b = (_a = props.theme.signatureCapture) === null || _a === void 0 ? void 0 : _a.canvas) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : 'rgba(255, 255, 255, 0.5)';
 }, function (props) {
@@ -14686,16 +14686,34 @@ function VideoSignaturePad(_a) {
       signaturePad: signaturePad
     });
   }, []);
+  // We discovered that react-signature-canvas clears the canvas when the width and height are changed.
+  // On some devices, the width and height appear to be occilating, so we lock them to the first observed width and height.
+  // Consequently, the signature canvas is also locked to the first observed width and height, so resize behavior can be a little bit weird.
+  var _j = useState(undefined),
+    lockedWidth = _j[0],
+    setLockedWidth = _j[1];
+  var _k = useState(undefined),
+    lockedHeight = _k[0],
+    setLockedHeight = _k[1];
+  useEffect(function () {
+    if (!width || width < 10 || !height || height < 10) return;
+    setLockedWidth(function (lockedWidth) {
+      return lockedWidth !== null && lockedWidth !== void 0 ? lockedWidth : width;
+    });
+    setLockedHeight(function (lockedHeight) {
+      return lockedHeight !== null && lockedHeight !== void 0 ? lockedHeight : height;
+    });
+  }, [width, height]);
   var canvasProps = useMemo(function () {
     return {
-      width: width,
-      height: height,
+      width: lockedWidth,
+      height: lockedHeight,
       className: classNames.signatureCanvas
     };
-  }, [classNames.signatureCanvas, height, width]);
-  var _j = useState(false),
-    emptyContentDismissed = _j[0],
-    setEmptyContentDismissed = _j[1];
+  }, [classNames.signatureCanvas, lockedHeight, lockedWidth]);
+  var _l = useState(false),
+    emptyContentDismissed = _l[0],
+    setEmptyContentDismissed = _l[1];
   useEffect(function () {
     if (signaturePadEmpty) setEmptyContentDismissed(false);
   }, [signaturePadEmpty]);
@@ -15011,6 +15029,9 @@ var templateObject_1$8, templateObject_2$8, templateObject_3$7, templateObject_4
 var assetSelectorOpts$1 = [{
   value: 'signatureVideo',
   label: 'Signature Video'
+}, {
+  value: 'signatureImage',
+  label: 'Signature Image'
 }, {
   value: 'selfieImage',
   label: 'Selfie Image'
@@ -15070,6 +15091,9 @@ var VideoSignatureSuccess = function VideoSignatureSuccess(_a) {
     controls: true,
     preload: "metadata",
     autoPlay: true
+  })), displayedAsset === 'signatureImage' && ctx.signatureData && ( /*#__PURE__*/React__default.createElement("img", {
+    src: "data:image/jpeg;base64,".concat(ctx.signatureData.fileContent),
+    alt: ""
   })), displayedAsset === 'selfieImage' && ctx.selfieImage && ( /*#__PURE__*/React__default.createElement("img", {
     src: ctx.selfieImage,
     alt: ""