dhre-component-lib 0.7.9 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/OtpInput/OtpInput.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +11 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +11 -10
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21617,7 +21617,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
|
|
|
21617
21617
|
}
|
|
21618
21618
|
};
|
|
21619
21619
|
|
|
21620
|
-
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px;\n width: 343px;\n}\n\n.otpInputDiv {\n flex-direction: row;\n gap: 12px;\n display: flex;\n}\n\n.otpInput {\n width: calc(25% - 9px);\n height: 48px;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n border-radius: 8px;\n}\n@media (max-width: 600px) {\n .otpInput {\n height: 40px;\n }\n}\n\n.resendContainer {\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n justify-content: space-between;\n}\n\n.errorText {\n color: #EB0542;\n font-weight: 400;\n font-size: 14px;\n}\n\n.timerText {\n color: #0569C2;\n font-weight: 400;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n\n.resendText {\n color: #A7A7A7;\n font-weight: 700;\n font-size: 14px;\n}\n\n.enabledResendText {\n color: #000000;\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21620
|
+
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px 0;\n width: 343px;\n}\n\n.otpInputDiv {\n flex-direction: row;\n gap: 12px;\n display: flex;\n}\n\n.otpInput {\n width: calc(25% - 9px);\n height: 48px;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n border-radius: 8px;\n}\n@media (max-width: 600px) {\n .otpInput {\n height: 40px;\n }\n}\n\n.otpInput::-webkit-inner-spin-button {\n display: none;\n}\n\n.resendContainer {\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n justify-content: space-between;\n}\n\n.errorText {\n color: #EB0542;\n font-weight: 400;\n font-size: 14px;\n}\n\n.timerText {\n color: #0569C2;\n font-weight: 400;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n\n.resendText {\n color: #A7A7A7;\n font-weight: 700;\n font-size: 14px;\n}\n\n.enabledResendText {\n color: #000000;\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21621
21621
|
n(css$e,{});
|
|
21622
21622
|
|
|
21623
21623
|
const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText }) => {
|
|
@@ -21631,7 +21631,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21631
21631
|
return () => clearInterval(countdown);
|
|
21632
21632
|
}, []);
|
|
21633
21633
|
const handleChange = (value, index) => {
|
|
21634
|
-
if (isNaN(Number(value)))
|
|
21634
|
+
if (isNaN(Number(value)) || Number(value) > 9)
|
|
21635
21635
|
return;
|
|
21636
21636
|
const newOtp = [...otp];
|
|
21637
21637
|
newOtp[index] = value;
|
|
@@ -21652,11 +21652,12 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21652
21652
|
}
|
|
21653
21653
|
}
|
|
21654
21654
|
};
|
|
21655
|
-
const handleResendClick = () => {
|
|
21656
|
-
onResend()
|
|
21657
|
-
|
|
21658
|
-
|
|
21659
|
-
|
|
21655
|
+
const handleResendClick = async () => {
|
|
21656
|
+
onResend(() => {
|
|
21657
|
+
setOtp(Array(length).fill(""));
|
|
21658
|
+
setTimer(resendDelay);
|
|
21659
|
+
setIsComplete(false);
|
|
21660
|
+
});
|
|
21660
21661
|
};
|
|
21661
21662
|
React$1.useEffect(() => {
|
|
21662
21663
|
setIsComplete(otp.every((digit) => digit !== ""));
|
|
@@ -21676,11 +21677,11 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
21676
21677
|
return (React__namespace.default.createElement("div", { className: `${'otpMainContainer'} ${className ? className : ''}` },
|
|
21677
21678
|
React__namespace.default.createElement("div", { className: "otpInputDiv" }, Array(length)
|
|
21678
21679
|
.fill("")
|
|
21679
|
-
.map((_, index) => (React__namespace.default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index),
|
|
21680
|
+
.map((_, index) => (React__namespace.default.createElement("input", { key: index, type: "number", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), style: { border: `1px solid ${getReadableStatus()}` }, className: `${'otpInput'} ${inputClassName ? inputClassName : ''}`, autoFocus: autoFocus && index === 0 })))),
|
|
21680
21681
|
React__namespace.default.createElement("div", { className: "resendContainer" },
|
|
21681
21682
|
error && (React__namespace.default.createElement("div", { className: "errorText" }, errorText)),
|
|
21682
21683
|
!showResendButton && !error && React__namespace.default.createElement("div", { className: "errorText" }, noResendButtonText),
|
|
21683
|
-
|
|
21684
|
+
showResendButton && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
21684
21685
|
React__namespace.default.createElement("div", { className: "timerText" },
|
|
21685
21686
|
timer ? icon : "",
|
|
21686
21687
|
timer > 0 ? `00:${timer} secs` : ""),
|
|
@@ -22175,7 +22176,7 @@ const Carousel = ({ items }) => {
|
|
|
22175
22176
|
React__namespace.default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__namespace.default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
|
|
22176
22177
|
};
|
|
22177
22178
|
|
|
22178
|
-
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border:
|
|
22179
|
+
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border: 1px solid #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n}\n\n.contentSecondary {\n color: #686868;\n}\n\n.stepperSuccessBorder {\n border: none;\n}\n\n.stepperNotReachedBorder {\n border: 1px solid #a7a7a7;\n}\n\n.stepperAlignment {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.stepperItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.marginRight1 {\n margin-right: 1rem;\n}\n\n.stepperVerticalItem {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n}\n\n.stepperDivider {\n width: 88%;\n border: 1px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n width: 88%;\n border: 1px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n width: 88%;\n border: 1px solid #000000;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperVerticalDivider {\n border-left: 2px solid #000000;\n min-height: 2rem;\n max-height: 100%;\n margin-left: 1.25rem;\n padding-left: 2rem;\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.stepperVerticalCircle {\n min-width: 2.5rem;\n height: 2.5rem;\n border-radius: 50%;\n border: 2px solid #000000;\n color: #ffffff;\n background: #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n margin-right: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n width: 1.75rem;\n min-height: 2rem;\n max-height: 100%;\n margin: 0.75rem 0;\n background-image: linear-gradient(#686868 50%, rgba(255, 255, 255, 0) 0%);\n background-position: center;\n background-size: 0.5px 10px;\n background-repeat: repeat-y;\n}\n\n.stepperVerticalPlainDivider {\n width: 2px;\n border-left: 1px solid #00b578;\n min-height: 2rem;\n max-height: 100%;\n margin: 0.75rem 0;\n margin-left: 0.875rem;\n}\n\n.paddingLeft2 {\n padding-left: 2.7rem;\n}\n\n.stepperVerticalAlignment {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.flex {\n display: flex;\n flex-direction: row;\n}\n\n.warning {\n color: #eb8425;\n}\n\n.error {\n color: #eb0542;\n}\n\n.stepperWarningCircle {\n border: 2px solid #eb8425;\n}\n\n.stepperErrorCircle {\n border: 2px solid #eb0542;\n}\n\n.flexCenter {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.marginRight {\n margin-right: 1rem;\n margin-top: -0.3rem;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n}\n\n.typoClass {\n color: #686868;\n margin-top: 4px;\n}";
|
|
22179
22180
|
n(css,{});
|
|
22180
22181
|
|
|
22181
22182
|
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|