dhre-component-lib 0.5.6 → 0.5.8

package/dist/index.js

@@ -9373,7 +9373,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
 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: 76px;\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    width: 50px;\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}";
 n(css$e,{});
 
-const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, icon }) => {
+const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon }) => {
     const [otp, setOtp] = React.useState(Array(length).fill(""));
     const [timer, setTimer] = React.useState(resendDelay);
     const [isComplete, setIsComplete] = React.useState(false);
@@ -9435,12 +9435,12 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
                 React__namespace.default.createElement("div", { className: "timerText" },
                     timer ? icon : "",
                     timer > 0 ? `00:${timer} secs` : ""),
-                React__namespace.default.createElement("button", { onClick: handleResendClick, disabled: timer > 0, style: {
+                React__namespace.default.createElement("button", { onClick: handleResendClick, disabled: timer > 0 || disableResend, style: {
                         border: "none",
                         background: "none",
-                        cursor: timer > 0 ? "not-allowed" : "pointer",
+                        cursor: timer > 0 || disableResend ? "not-allowed" : "pointer",
                     } },
-                    React__namespace.default.createElement("div", { className: timer > 0 ? "resendText" : "enabledResendText" }, resendText)))))));
+                    React__namespace.default.createElement("div", { className: (timer > 0 || disableResend) ? "resendText" : "enabledResendText" }, resendText)))))));
 };
 
 var css$d = ".search-field-container {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  border-radius: 10px;\n  background-color: #ffffff;\n  transition: border-color 0.3s ease;\n}\n.search-field-container.default-border {\n  border: 1px solid #a7a7a7;\n}\n.search-field-container.typing-border {\n  border: 1px solid #ffffff;\n}\n.search-field-container.typing-dark-border {\n  border: 1px solid #a7a7a7;\n}\n.search-field-container.stopped-border {\n  border: 1px solid #000000;\n}\n.search-field-container.disabled-border {\n  border: 1px solid #4f4f4f;\n  background-color: #e1e1e1;\n}\n\n.search-icon {\n  margin-right: 8px;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  background-color: transparent;\n  outline: none;\n  height: 2rem;\n}\n\n.cross-icon {\n  cursor: pointer;\n  margin: 4px 0 0 8px;\n}\n\n.suggestions-dropdown {\n  border: 1px solid #ccc;\n  background-color: white;\n  position: absolute;\n  width: 600px;\n  z-index: 10;\n  top: 69%;\n  border-radius: 10px;\n}\n@media (max-width: 767px) {\n  .suggestions-dropdown {\n    width: 84%;\n    top: 75%;\n  }\n}\n\n.suggestion-item {\n  padding: 16px 8px 16px 8px;\n  cursor: pointer;\n  text-align: left;\n}\n\n.underline {\n  height: 1px;\n  background-color: #cecece;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n\n.suggestion-item:hover {\n  background-color: none;\n}\n\n.row {\n  flex-direction: row;\n  display: flex;\n  background: none;\n  border: none;\n  align-items: center;\n  padding-left: 10px;\n}\n\n.no-suggestions {\n  padding: 20px;\n}\n\n.search-input::placeholder {\n  color: #686868;\n  font-size: 16px;\n  font-family: \"Meraas Aktiv\", sans-serif;\n  font-weight: 400;\n  line-height: 22.4px;\n}";
@@ -9580,10 +9580,10 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
         isOpen && (React__namespace.default.createElement("div", { className: "accordion-content" }, children))));
 };
 
-var css$a = ".tabs {\n  display: flex;\n}\n\n.tab {\n  padding: 12px;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  color: #a7a7a7;\n  border-bottom: 2px solid transparent;\n  transition: border-bottom 0.3s ease;\n  font-size: 18px;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab.active {\n  border-bottom: 2px solid #000000;\n  color: #000000;\n}\n\n.tab.inActive {\n  border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n  color: #000000;\n}\n\n.main {\n  display: flex;\n  gap: 8px;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.main::-webkit-scrollbar {\n  display: none;\n}\n\n@media (max-width: 767px) {\n  .tab {\n    font-size: 14px;\n  }\n  .main {\n    display: flex;\n    gap: 8px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  .main::-webkit-scrollbar {\n    display: none;\n  }\n}\n.dot {\n  display: inline-block !important;\n  width: 8px !important;\n  height: 8px !important;\n  background-color: red !important;\n  border-radius: 50% !important;\n  margin-left: 5px !important;\n}";
+var css$a = ".tabs {\n  display: flex;\n}\n\n.tab {\n  padding: 12px;\n  cursor: pointer;\n  background-color: transparent;\n  border: none;\n  color: #a7a7a7;\n  border-bottom: 2px solid transparent;\n  transition: border-bottom 0.3s ease;\n  font-size: 18px;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  gap: 0.5rem;\n}\n\n.tab.active {\n  border-bottom: 2px solid #000000;\n  color: #000000;\n}\n\n.tab.inActive {\n  border-bottom: 1px solid #e1e1e1;\n}\n\n.tab:hover {\n  color: #000000;\n}\n\n.main {\n  display: flex;\n  gap: 8px;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.main::-webkit-scrollbar {\n  display: none;\n}\n\n@media (max-width: 767px) {\n  .tab {\n    font-size: 14px;\n  }\n  .main {\n    display: flex;\n    gap: 8px;\n    overflow-x: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n  .main::-webkit-scrollbar {\n    display: none;\n  }\n}\n.dot {\n  display: inline-block !important;\n  width: 8px !important;\n  height: 8px !important;\n  background-color: red !important;\n  border-radius: 50% !important;\n  margin-left: 5px !important;\n}";
 n(css$a,{});
 
-const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
+const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, installmentsOverdue, otherchargesOverdue, OverdueDotImg }) => {
     const [selectedTab, setSelectedTab] = React.useState();
     const haveDots = ["identification", "", ""];
     React.useEffect(() => {
@@ -9607,10 +9607,12 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
         React__namespace.default.createElement("div", { className: "tabs" }, tabs?.map((tab) => (React__namespace.default.createElement(React__namespace.default.Fragment, null,
             React__namespace.default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
                 tab?.name,
-                dot && haveDots.includes(tab.value.toLowerCase()) && (React__namespace.default.createElement("span", { className: "dot" })))))))));
+                dot && haveDots.includes(tab.value.toLowerCase()) && (React__namespace.default.createElement("span", { className: "dot" })),
+                tab?.value == "Installments" && installmentsOverdue && React__namespace.default.createElement(OverdueDotImg, null),
+                tab?.value == "Other charges" && otherchargesOverdue && React__namespace.default.createElement(OverdueDotImg, null))))))));
 };
 
-var css$9 = ".dropdown {\n  width: 100%;\n  border: 0.0625rem solid #686868;\n  height: 3.5rem;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  cursor: pointer;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n  border-radius: 0.5rem;\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n}\n\n.unselectedText {\n  background: #ffffff;\n  height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: #000000;\n}\n\n.unselectedText:hover {\n  background: #e1e1e1;\n  color: #000000;\n  font-weight: 700 !important;\n}\n\n.backdropDropdown {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n.dropdown select {\n  background: transparent;\n  width: 10.625rem;\n  padding: 0.5rem;\n  border: 0;\n  border-radius: 0;\n  height: 2.1875rem;\n}";
+var css$9 = ".dropdown {\n  width: 100%;\n  border: 0.0625rem solid #686868;\n  height: 3.5rem;\n  border-radius: 0.5rem;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  position: relative;\n  cursor: pointer;\n  z-index: 11;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.label {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  left: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.placeholder {\n  color: #686868;\n}\n\n.dropPosition {\n  position: relative;\n}\n\n.dropdownValues {\n  border: 0.0625rem solid #e1e1e1;\n  box-shadow: 0px 0.25rem 0.5rem 0px rgba(0, 0, 0, 0.2509803922);\n  border-radius: 0.5rem;\n  margin-top: 0.3125rem;\n  position: absolute;\n  width: 100%;\n  z-index: 9;\n}\n\n.unselectedText {\n  background: #ffffff;\n  height: 3.24rem;\n  padding: 1rem;\n  color: #686868;\n  cursor: pointer;\n}\n\n.value {\n  color: #000000;\n}\n\n.unselectedText:hover {\n  background: #e1e1e1;\n  color: #000000;\n  font-weight: 700 !important;\n}\n\n.backdropDropdown {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n\n.dropdown select {\n  background: transparent;\n  width: 10.625rem;\n  padding: 0.5rem;\n  border: 0;\n  border-radius: 0;\n  height: 2.1875rem;\n}";
 n(css$9,{});
 
 function Dropdown(props) {