dhre-component-lib 0.6.8 → 0.7.0

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: 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}";
 n(css$e,{});
 
-const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon }) => {
+const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText }) => {
     const [otp, setOtp] = React.useState(Array(length).fill(""));
     const [timer, setTimer] = React.useState(resendDelay);
     const [isComplete, setIsComplete] = React.useState(false);
@@ -9432,6 +9432,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
             .map((_, index) => (React__namespace.default.createElement("input", { key: index, type: "text", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), maxLength: 1, style: { border: `1px solid ${getReadableStatus()}` }, className: `${'otpInput'} ${inputClassName ? inputClassName : ''}`, autoFocus: autoFocus && index === 0 })))),
         React__namespace.default.createElement("div", { className: "resendContainer" },
             error && (React__namespace.default.createElement("div", { className: "errorText" }, errorText)),
+            !showResendButton && !error && React__namespace.default.createElement("div", { className: "errorText" }, noResendButtonText),
             (showResendButton && !error) && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
                 React__namespace.default.createElement("div", { className: "timerText" },
                     timer ? icon : "",
@@ -9613,11 +9614,11 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
                     React__namespace.default.createElement("div", { className: "counts" }, tab?.count))))))));
 };
 
-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: 1;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.dropdownLabel {\n  position: absolute;\n  z-index: 2;\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: 1;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.dropdownLabel {\n  position: absolute;\n  z-index: 2;\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.zIndexProp {\n  z-index: 0;\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  z-index: 4;\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) {
-    const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className, } = props;
+    const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className, onDropdownOpen } = props;
     const [openDropdown, setOpenDropdown] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(value);
     const selectedDropdwonValue = (value) => {
@@ -9625,6 +9626,14 @@ function Dropdown(props) {
         getSelectedValue(value);
         setOpenDropdown(!openDropdown);
     };
+    React.useEffect(() => {
+        if (openDropdown) {
+            onDropdownOpen && onDropdownOpen(true);
+        }
+        else {
+            onDropdownOpen && onDropdownOpen(false);
+        }
+    }, [openDropdown]);
     React.useEffect(() => {
         if (!value) {
             setSelectedValue(undefined);
@@ -9632,7 +9641,7 @@ function Dropdown(props) {
     }, [value]);
     return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
         openDropdown && (React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
-        React__namespace.default.createElement("div", { className: "dropPosition" },
+        React__namespace.default.createElement("div", { className: `dropPosition ${!openDropdown ? 'zIndexProp' : ''}` },
             placeholder && selectedValue && (React__namespace.default.createElement("label", { className: "dropdownLabel" },
                 placeholder.replace("*", ""),
                 placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*"))),
@@ -9645,20 +9654,32 @@ function Dropdown(props) {
                 React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
 }
 
-var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\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.astreik {\n  color: #eb0542;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
+var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-size: 1rem;\n  font-family: Meraas Aktiv;\n  font-weight: 400;\n  line-height: 1.4rem;\n  text-align: left;\n  outline: none;\n  resize: none;\n  overflow: auto;\n  max-width: 100%;\n  max-height: 100%;\n}\n.inputTextAreaLabel {\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.astreik {\n  color: #eb0542;\n}\n\n.characters {\n  color: #686868;\n}\n\n.textArea100 {\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.positionRel {\n  position: relative;\n  z-index: 0;\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.astreik {\n  color: #eb0542;\n}\n\n.textArea::placeholder {\n  font-family: Meraas Aktiv, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: left;\n  color: #686868;\n}\n\n.maxLimit {\n  color: #eb0542 !important;\n}\n\n.maxLimitArea {\n  border: 1px solid #eb0542 !important;\n}";
 n(css$8,{});
 
 function TextArea(props) {
     const { value, onChange, requiredLimit, placeholder, charText, property } = props;
+    const [showLabelOnBorder, setShowLabelOnBorder] = React.useState(false);
     const checkSpecialChar = (e) => {
         if (!/[0-9a-zA-Z ]/.test(e.key)) {
             e.preventDefault();
         }
         console.log('textAraea');
     };
-    return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
+    const checkFieldValue = (e) => {
+        if (!e.key) {
+            setShowLabelOnBorder(false);
+        }
+    };
+    React.useEffect(() => {
+        setShowLabelOnBorder(!!value);
+    }, [value]);
+    return (React__namespace.default.createElement("div", { className: "positionRel" },
         React__namespace.default.createElement("div", { className: "textArea100" },
-            React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
+            ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: 'inputTextAreaLabel' },
+                placeholder.replace("*", ""),
+                placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*")),
+            React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
         React__namespace.default.createElement(Typography, { className: `characters ${value &&
                 value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,