fix: input text validation issue

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -1059,7 +1059,9 @@ function PdfRequestFiles() {
         }}
       >
         <div style={{ height: "100%", padding: 20 }}>
-          <p>Please input a properly validated input value.</p>
+          <p>
+            The input does not meet the criteria set by the regular expression.
+          </p>
 
           <div
             style={{

microfrontends/SignDocuments/src/Component/SignYourselfPdf.js

@@ -361,9 +361,7 @@ function SignYourSelf() {
     let filterDropPos = xyPostion.filter(
       (data) => data.pageNumber === pageNumber
     );
-
     const dragTypeValue = item?.text ? item.text : monitor.type;
-
     const widgetValue = getWidgetValue(dragTypeValue);
     const widgetWidth = defaultWidthHeight(dragTypeValue).width;
     const widgetHeight = defaultWidthHeight(dragTypeValue).height;
@@ -437,9 +435,7 @@ function SignYourSelf() {
           dragTypeValue === "job title" ||
           dragTypeValue === "email"
             ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
-            : dragTypeValue === "initials"
-              ? defaultWidthHeight(dragTypeValue).height
-              : ""
+            : defaultWidthHeight(dragTypeValue).height
       };
 
       dropData.push(dropObj);

microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js

@@ -35,6 +35,7 @@ import PlaceholderCopy from "./component/PlaceholderCopy";
 import ModalComponent from "./component/modalComponent";
 import TourContentWithBtn from "../premitives/TourContentWithBtn";
 import DropdownWidgetOption from "./WidgetComponent/dropdownWidgetOption";
+import InputValidation from "./WidgetComponent/inputValidation";
 const TemplatePlaceholder = () => {
   const navigate = useNavigate();
   const { templateId } = useParams();
@@ -1028,7 +1029,7 @@ const TemplatePlaceholder = () => {
         const getXYdata = getPageNumer[0].pos;
 
         const getPosData = getXYdata;
-        const addSignPos = getPosData.map((position, ind) => {
+        const addSignPos = getPosData.map((position) => {
           if (position.key === signKey) {
             if (widgetType === "checkbox") {
               if (selectRequiredType === "Read only") {
@@ -1053,13 +1054,13 @@ const TemplatePlaceholder = () => {
           return position;
         });
 
-        const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+        const newUpdateSignPos = getPlaceHolder.map((obj) => {
           if (obj.pageNumber === pageNumber) {
             return { ...obj, pos: addSignPos };
           }
           return obj;
         });
-        const newUpdateSigner = signerPos.map((obj, ind) => {
+        const newUpdateSigner = signerPos.map((obj) => {
           if (obj.Id === uniqueId) {
             return { ...obj, placeHolder: newUpdateSignPos };
           }
@@ -1147,19 +1148,8 @@ const TemplatePlaceholder = () => {
   };
 
   const handleValidateInput = (e) => {
-    if (
-      textValidate === "email" ||
-      textValidate === "number" ||
-      textValidate === "text"
-    ) {
-      handleApplyWidgetsStatus(textValidate);
-      setIsValidate(false);
-    } else {
-      setValidateError("please enter accurate validation.");
-      setTimeout(() => {
-        setValidateError("");
-      }, 1500);
-    }
+    handleApplyWidgetsStatus(textValidate);
+    setIsValidate(false);
   };
   return (
     <div>
@@ -1331,62 +1321,13 @@ const TemplatePlaceholder = () => {
                   </button>
                 </div>
               </ModalUi>
-              <ModalUi
-                //isValidate
-                isOpen={isValidate}
-                handleClose={() => {
-                  setIsValidate(false);
-                }}
-                title={"Validation"}
-              >
-                <div style={{ height: "100%", padding: 20 }}>
-                  <div className="validateText">
-                    <label
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        fontWeight: "500"
-                      }}
-                    >
-                      Regular expression:
-                    </label>
-
-                    <input
-                      placeholder="email, number, text"
-                      className="drodown-input validateInputText"
-                      onChange={(e) => setTextValidate(e.target.value)}
-                    />
-                    {validateError && (
-                      <p style={{ color: "red", fontSize: "12px" }}>
-                        {validateError}
-                      </p>
-                    )}
-                  </div>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
-                  <button
-                    onClick={() => {
-                      handleValidateInput();
-                    }}
-                    style={{
-                      background: themeColor()
-                    }}
-                    type="button"
-                    // disabled={!selectCopyType}
-                    className="finishBtn"
-                  >
-                    Apply
-                  </button>
-                </div>
-              </ModalUi>
+              <InputValidation
+                setIsValidate={setIsValidate}
+                handleValidateInput={handleValidateInput}
+                isValidate={isValidate}
+                setTextValidate={setTextValidate}
+                textValidate={textValidate}
+              />
               <DropdownWidgetOption
                 type="radio"
                 title="RadioGroup"
@@ -1512,6 +1453,7 @@ const TemplatePlaceholder = () => {
                   initial={true}
                   setIsDraggingEnable={setIsDraggingEnable}
                   isdraggingEnable={isdraggingEnable}
+                  isTemplateFlow={true}
                 />
               </div>
             ) : (
@@ -1554,6 +1496,7 @@ const TemplatePlaceholder = () => {
                         initial={true}
                         setIsDraggingEnable={setIsDraggingEnable}
                         isdraggingEnable={isdraggingEnable}
+                        isTemplateFlow={true}
                       />
                     </div>
                   </div>

microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js

@@ -0,0 +1,84 @@
+import React from "react";
+import { themeColor } from "../../utils/ThemeColor/backColor";
+import ModalUi from "../../premitives/ModalUi";
+
+function InputValidation(props) {
+  const options = ["email", "number", "text"];
+  return (
+    <ModalUi
+      isOpen={props.isValidate}
+      handleClose={() => {
+        props.setIsValidate(false);
+      }}
+      title={"Validation"}
+    >
+      <div style={{ height: "100%", padding: 20 }}>
+        <div className="validateText">
+          <label
+            style={{
+              marginRight: "5px",
+              fontSize: "14px",
+              fontWeight: "500"
+            }}
+          >
+            Regular expression:
+          </label>
+
+          <div style={{ position: "relative" }}>
+            <input
+              value={props.textValidate}
+              style={{
+                position: "absolute",
+                top: "0",
+                left: "0",
+                height: "100%"
+              }}
+              placeholder="Enter custom regular expression"
+              className="drodown-input validateInputText"
+              onChange={(e) => props.setTextValidate(e.target.value)}
+            />
+            <select
+              value=""
+              className="regxSelect"
+              onChange={(e) => props.setTextValidate(e.target.value)}
+            >
+              {options.map((data) => {
+                return <option value={data}>{data}</option>;
+              })}
+            </select>
+          </div>
+          {/* {validateError && (
+            <p style={{ color: "red", fontSize: "12px" }}>{validateError}</p>
+          )} */}
+
+          {/* <CustomSelect/> */}
+        </div>
+
+        <div
+          style={{
+            height: "1px",
+            backgroundColor: "#9f9f9f",
+            width: "100%",
+            marginTop: "15px",
+            marginBottom: "15px"
+          }}
+        ></div>
+        <button
+          onClick={() => {
+            props.handleValidateInput();
+          }}
+          style={{
+            background: themeColor()
+          }}
+          type="button"
+          // disabled={!selectCopyType}
+          className="finishBtn"
+        >
+          Apply
+        </button>
+      </div>
+    </ModalUi>
+  );
+}
+
+export default InputValidation;

microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js

@@ -169,16 +169,9 @@ function Placeholder(props) {
         <>
           {props.isPlaceholder && (
             <>
-              {[
-                "checkbox",
-                "text",
-                "email",
-                "name",
-                "company",
-                "job title",
-                "dropdown",
-                "radio"
-              ].includes(props.pos.type) && (
+              {["checkbox", "text", "dropdown", "radio"].includes(
+                props.pos.type
+              ) && (
                 <i
                   onClick={(e) => {
                     e.stopPropagation();
@@ -217,21 +210,11 @@ function Placeholder(props) {
                   style={{
                     color: "#188ae2",
                     right:
-                      props.pos.type === "text" ||
-                      props.pos.type === "email" ||
-                      props.pos.type === "name" ||
-                      props.pos.type === "company" ||
-                      props.pos.type === "job title" ||
-                      props.pos.type === "dropdown"
+                      props.pos.type === "text" || props.pos.type === "dropdown"
                         ? "49px"
                         : "23px",
                     top:
-                      props.pos.type === "text" ||
-                      props.pos.type === "email" ||
-                      props.pos.type === "name" ||
-                      props.pos.type === "company" ||
-                      props.pos.type === "job title" ||
-                      props.pos.type === "dropdown"
+                      props.pos.type === "text" || props.pos.type === "dropdown"
                         ? "-17px"
                         : "-28px"
                   }}
@@ -334,6 +317,7 @@ function Placeholder(props) {
             onClick={(e) => {
               if (props.data) {
                 props.setSignerObjId(props.data.signerObjId);
+                props.setUniqueId(props.data.Id);
               }
               e.stopPropagation();
               props.setIsPageCopy(true);
@@ -342,6 +326,7 @@ function Placeholder(props) {
             onTouchEnd={(e) => {
               if (props.data) {
                 props.setSignerObjId(props.data.signerObjId);
+                props.setUniqueId(props.data.Id);
               }
               e.stopPropagation();
               props.setIsPageCopy(true);
@@ -430,9 +415,6 @@ function Placeholder(props) {
       bounds="parent"
       className="signYourselfBlock"
       style={{
-        // borderRadius:"50%",
-        // display:"flex",
-        // alignItem:"center",
         border: "1px solid #007bff",
         borderRadius: "2px",
         textAlign:
@@ -446,7 +428,12 @@ function Placeholder(props) {
               ? "pointer"
               : "not-allowed"
             : "all-scroll",
-        zIndex: "1",
+        zIndex:
+          props.pos.type === "date"
+            ? "99"
+            : props?.pos?.zIndex
+              ? props.pos.zIndex
+              : "5",
         background: props.data ? props.data.blockColor : "rgb(203 233 237)"
       }}
       onDrag={() => {

microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js

@@ -10,6 +10,7 @@ function PlaceholderType(props) {
   const [startDate, setStartDate] = useState(new Date());
   const [validatePlaceholder, setValidatePlaceholder] = useState("");
   const inputRef = useRef(null);
+  const [textValue, setTextValue] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [isCheckedRadio, setIsCheckedRadio] = useState({
     isChecked: false,
@@ -17,7 +18,8 @@ function PlaceholderType(props) {
   });
 
   const validateExpression = (regexValidation) => {
-    let isValidate = regexValidation.test(inputValue);
+    const regexObject = new RegExp(regexValidation);
+    let isValidate = regexObject.test(inputValue);
     if (!isValidate) {
       props.setValidateAlert(true);
       inputRef.current.focus();
@@ -42,10 +44,18 @@ function PlaceholderType(props) {
           regexValidation = /^[a-zA-Z\s]+$/;
           validateExpression(regexValidation);
           break;
+        default:
+          regexValidation = validateType;
+          validateExpression(regexValidation);
       }
     }
   };
 
+  const handleTextValid = (e, regx) => {
+    const textInput = e.target.value;
+    const sanitizedValue = textInput.replace(regx, "");
+    setTextValue(sanitizedValue);
+  };
   function checkRegularExpress(validateType) {
     switch (validateType) {
       case "email":
@@ -56,6 +66,8 @@ function PlaceholderType(props) {
         break;
       case "text":
         setValidatePlaceholder("enter text");
+      default:
+        setValidatePlaceholder(validateType);
     }
   }
   useEffect(() => {
@@ -125,7 +137,7 @@ function PlaceholderType(props) {
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
       className="inputPlaceholder"
-      style={{ overflow: "hidden" }}
+      style={{ overflow: "hidden", fontSize: calculateFontSize() }}
       onClick={onClick}
       ref={ref}
     >
@@ -153,6 +165,11 @@ function PlaceholderType(props) {
     }
   }, [type]);
 
+  const calculateFontSize = () => {
+    const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1;
+    const size = fontSize ? fontSize : 12;
+    return size + "px";
+  };
   switch (props.pos.type) {
     case "signature":
       return props.pos.SignUrl ? (
@@ -169,6 +186,7 @@ function PlaceholderType(props) {
         <div
           style={{
             fontSize: "10px",
+
             color: "black",
             justifyContent: "center"
           }}
@@ -241,6 +259,12 @@ function PlaceholderType(props) {
           className="inputPlaceholder"
           ref={inputRef}
           placeholder={validatePlaceholder}
+          style={{ fontSize: calculateFontSize() }}
+          value={
+            textValue
+              ? textValue
+              : props.pos.widgetValue && props.pos.widgetValue
+          }
           type="text"
           tabIndex="0"
           disabled={
@@ -250,6 +274,7 @@ function PlaceholderType(props) {
           }
           onBlur={handleInputBlur}
           onChange={(e) => {
+            // props.pos?.validation && handleTextValid(e, props.pos?.validation);
             setInputValue(e.target.value);
             onChangeInput(
               e.target.value,
@@ -292,7 +317,10 @@ function PlaceholderType(props) {
           })}
         </select>
       ) : (
-        <div className="inputPlaceholder">
+        <div
+          className="inputPlaceholder"
+          style={{ fontSize: calculateFontSize() }}
+        >
           {props.pos.widgetName ? props.pos.widgetName : props.pos.type}
         </div>
       );
@@ -329,11 +357,17 @@ function PlaceholderType(props) {
           tabIndex="0"
           ref={inputRef}
           placeholder={"name"}
+          style={{ fontSize: calculateFontSize() }}
           className="inputPlaceholder"
           type="text"
-          value={props.pos.widgetValue}
+          value={
+            textValue
+              ? textValue
+              : props.pos.widgetValue && props.pos.widgetValue
+          }
           onBlur={handleInputBlur}
-          onChange={(e) =>
+          onChange={(e) => {
+            handleTextValid(e, /[^a-zA-Z\s]/g);
             onChangeInput(
               e.target.value,
               props.pos.key,
@@ -342,14 +376,14 @@ function PlaceholderType(props) {
               props.setXyPostion,
               props.data && props.data?.Id,
               false
-            )
-          }
+            );
+          }}
         />
       ) : (
         <div
           style={{
             color: "black",
-            fontSize: "14px"
+            fontSize: calculateFontSize()
           }}
         >
           <span>{props.pos.type}</span>
@@ -364,9 +398,15 @@ function PlaceholderType(props) {
           type="text"
           ref={inputRef}
           placeholder={"company"}
-          value={props.pos.widgetValue && props.pos.widgetValue}
+          style={{ fontSize: calculateFontSize() }}
+          value={
+            textValue
+              ? textValue
+              : props.pos.widgetValue && props.pos.widgetValue
+          }
           onBlur={handleInputBlur}
-          onChange={(e) =>
+          onChange={(e) => {
+            handleTextValid(e, /[^a-zA-Z\s]/g);
             onChangeInput(
               e.target.value,
               props.pos.key,
@@ -375,14 +415,14 @@ function PlaceholderType(props) {
               props.setXyPostion,
               props.data && props.data?.Id,
               false
-            )
-          }
+            );
+          }}
         />
       ) : (
         <div
           style={{
             color: "black",
-            fontSize: "14px"
+            fontSize: calculateFontSize()
           }}
         >
           <span>{props.pos.type}</span>
@@ -397,9 +437,15 @@ function PlaceholderType(props) {
           type="text"
           ref={inputRef}
           placeholder={"job title"}
-          value={props.pos.widgetValue && props.pos.widgetValue}
+          style={{ fontSize: calculateFontSize() }}
+          value={
+            textValue
+              ? textValue
+              : props.pos.widgetValue && props.pos.widgetValue
+          }
           onBlur={handleInputBlur}
-          onChange={(e) =>
+          onChange={(e) => {
+            handleTextValid(e, /[^a-zA-Z\s]/g);
             onChangeInput(
               e.target.value,
               props.pos.key,
@@ -408,14 +454,14 @@ function PlaceholderType(props) {
               props.setXyPostion,
               props.data && props.data?.Id,
               false
-            )
-          }
+            );
+          }}
         />
       ) : (
         <div
           style={{
             color: "black",
-            fontSize: "14px"
+            fontSize: calculateFontSize()
           }}
         >
           <span>{props.pos.type}</span>
@@ -452,7 +498,6 @@ function PlaceholderType(props) {
                   : "dd MMMM, YYYY"
             }
           />
-          {/* <div style={{ position: "absolute" }}>{props.selectDate}</div> */}
         </div>
       );
 
@@ -489,9 +534,15 @@ function PlaceholderType(props) {
           type="text"
           ref={inputRef}
           placeholder={"email"}
-          value={props.pos.widgetValue && props.pos.widgetValue}
+          style={{ fontSize: calculateFontSize() }}
+          value={
+            textValue
+              ? textValue
+              : props.pos.widgetValue && props.pos.widgetValue
+          }
           onBlur={handleInputBlur}
-          onChange={(e) =>
+          onChange={(e) => {
+            handleTextValid(e, /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/);
             onChangeInput(
               e.target.value,
               props.pos.key,
@@ -500,14 +551,14 @@ function PlaceholderType(props) {
               props.setXyPostion,
               props.data && props.data?.Id,
               false
-            )
-          }
+            );
+          }}
         />
       ) : (
         <div
           style={{
             color: "black",
-            fontSize: "14px"
+            fontSize: calculateFontSize()
           }}
         >
           <span>{props.pos.type}</span>

microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js

@@ -66,6 +66,7 @@ function PlaceholderCopy(props) {
     let newPageNumber = 1;
     const signerPosition = props.xyPostion;
     const signerId = props.signerObjId ? props.signerObjId : props.Id;
+
     //handle placeholder array and copy for multiple signers placeholder at requested location
     if (signerId) {
       //get current signers data

microfrontends/SignDocuments/src/Component/component/fieldsComponent.js

@@ -21,7 +21,6 @@ function FieldsComponent({
   setContractName,
   isSigners,
   dataTut,
-  dataTut2,
   isMailSend,
   handleAddSigner,
   setUniqueId,
@@ -31,7 +30,8 @@ function FieldsComponent({
   handleRoleChange,
   handleOnBlur,
   title,
-  isdraggingEnable
+  isdraggingEnable,
+  isTemplateFlow
 }) {
   const [isSignersModal, setIsSignersModal] = useState(false);
 
@@ -230,7 +230,12 @@ function FieldsComponent({
     (data) =>
       data.type !== "dropdown" && data.type !== "radio" && data.type !== "label"
   );
-  const updateWidgets = isSignYourself ? filterWidgets : widget;
+  const labelWidget = widget.filter((data) => data.type !== "label");
+  const updateWidgets = isSignYourself
+    ? filterWidgets
+    : isTemplateFlow
+      ? labelWidget
+      : widget;
 
   return (
     <>

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -36,6 +36,7 @@ import Title from "./component/Title";
 import TourContentWithBtn from "../premitives/TourContentWithBtn";
 import ModalUi from "../premitives/ModalUi";
 import DropdownWidgetOption from "../Component/WidgetComponent/dropdownWidgetOption";
+import InputValidation from "./WidgetComponent/inputValidation";
 
 function PlaceHolderSign() {
   const navigate = useNavigate();
@@ -1176,6 +1177,7 @@ function PlaceHolderSign() {
   //function for base on condition to add checkbox widget status and input text validation in signerPos array
   const handleApplyWidgetsStatus = (textValidate) => {
     let regularExpression = textValidate;
+
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
       const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -1228,25 +1230,14 @@ function PlaceHolderSign() {
 
         setSignerPos(newUpdateSigner);
         setIsCheckboxRequired(false);
-
+        setTextValidate("");
         setSelectRequiredType("Optional");
       }
     }
   };
   const handleValidateInput = (e) => {
-    if (
-      textValidate === "email" ||
-      textValidate === "number" ||
-      textValidate === "text"
-    ) {
-      handleApplyWidgetsStatus(textValidate);
-      setIsValidate(false);
-    } else {
-      setValidateError("please enter accurate validation.");
-      setTimeout(() => {
-        setValidateError("");
-      }, 1500);
-    }
+    handleApplyWidgetsStatus(textValidate);
+    setIsValidate(false);
   };
 
   return (
@@ -1523,63 +1514,13 @@ function PlaceHolderSign() {
                   </button>
                 </div>
               </ModalUi>
-              <ModalUi
-                //isValidate
-                isOpen={isValidate}
-                handleClose={() => {
-                  setIsValidate(false);
-                }}
-                title={"Validation"}
-              >
-                <div style={{ height: "100%", padding: 20 }}>
-                  <div className="validateText">
-                    <label
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        fontWeight: "500"
-                      }}
-                    >
-                      Regular expression:
-                    </label>
-
-                    <input
-                      placeholder="email, number, text"
-                      className="drodown-input validateInputText"
-                      onChange={(e) => setTextValidate(e.target.value)}
-                    />
-                    {validateError && (
-                      <p style={{ color: "red", fontSize: "12px" }}>
-                        {validateError}
-                      </p>
-                    )}
-                  </div>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
-                  <button
-                    onClick={() => {
-                      handleValidateInput();
-                    }}
-                    style={{
-                      background: themeColor()
-                    }}
-                    type="button"
-                    // disabled={!selectCopyType}
-                    className="finishBtn"
-                  >
-                    Apply
-                  </button>
-                </div>
-              </ModalUi>
-
+              <InputValidation
+                setIsValidate={setIsValidate}
+                handleValidateInput={handleValidateInput}
+                isValidate={isValidate}
+                setTextValidate={setTextValidate}
+                textValidate={textValidate}
+              />
               <PlaceholderCopy
                 isPageCopy={isPageCopy}
                 setIsPageCopy={setIsPageCopy}

microfrontends/SignDocuments/src/css/signature.css

@@ -45,12 +45,13 @@
   position: absolute;
   left: 0px;
   top: 0px;
-  font-size: 12px;
+  /* font-size: 12px; */
   border: 1px solid #007bff;
   border-radius: 2px;
 
 }
-.radioButton{
+
+.radioButton {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -60,6 +61,7 @@
   border: 1px solid #007bff;
   border-radius: 50px;
 }
+
 .inputPlaceholder:focus {
   outline: none;
   border: 1px solid #188ae2;
@@ -146,6 +148,10 @@
 
 }
 
+.borderResize :hover {
+  cursor: sw-resize;
+}
+
 .dropdown-date-menu {
   min-width: 7rem;
 }
@@ -834,18 +840,29 @@ option {
 }
 
 .validateInputText {
-  width: 60%;
+  width: 76%;
 }
 
-.radioGroupInput{
+.regxSelect {
+  border: 1px solid #8ad5ce;
+  width: 80%;
+}
+
+.regxSelect:focus {
+  outline: none;
+  border: 1px solid #8ad5ce;
+}
+
+.radioGroupInput {
   width: 100%;
 }
-.radioGroup{
+
+.radioGroup {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }
- 
+
 .labelTextArea {
   font-size: 0.8rem;
   letter-spacing: 1px;
@@ -859,9 +876,13 @@ option {
   border: 1px solid #ccc;
   box-shadow: 1px 1px 1px #999;
 }
+
 @media screen and (max-width:766px) {
 
   .validateInputText {
+    width: 93%;
+  }
+  .regxSelect{
     width: 100%;
   }
 

microfrontends/SignDocuments/src/utils/Utils.js

@@ -357,7 +357,7 @@ export const defaultWidthHeight = (type) => {
       return obj;
     case "date":
       obj = {
-        width: 120,
+        width: 100,
         height: 20
       };
       return obj;
@@ -939,6 +939,7 @@ export const multiSignEmbed = async (
         imgData.type === "initials" ||
         imgData.type === "image"
       ) {
+        console.log(images[id]);
         if (
           (imgData.ImageType && imgData.ImageType === "image/png") ||
           imgData.ImageType === "image/jpeg"