dhre-component-lib 0.8.18 → 0.8.19

package/dist/index.js

@@ -180,7 +180,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
     return React__namespace.default.createElement("div", { className: classNames, ...props }, children);
 };
 
-var css$i = ".inputLabel {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  inset-inline-start: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputLabelTooltip {\n  position: absolute;\n  z-index: 1;\n  top: 17px;\n  inset-inline-start: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n  position: relative;\n  z-index: 0;\n}\n\n.inputError:focus-visible {\n  outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::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}\n\n.astreik {\n  color: #eb0542;\n}\n\ninput::-webkit-contacts-auto-fill-button {\n  box-shadow: 0 0 0px 1000px white inset !important;\n  -webkit-text-fill-color: inherit !important;\n  background-image: none !important;\n  mask-image: none;\n}\n\n.ToolTipImage {\n  position: relative;\n  inset-inline-start: 87.5%;\n  z-index: 2;\n  top: 2.75rem;\n  cursor: pointer;\n}\n\n.tooltipwrapper {\n  display: flex;\n  flex-direction: row !important;\n  gap: 1rem;\n}\n\n.tooltipText {\n  font-family: Meraas Aktiv;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: start;\n  text-underline-position: from-font;\n  text-decoration-skip-ink: none;\n  color: #000000;\n  max-width: 17.1875rem;\n}\n\n.tooltip {\n  cursor: pointer;\n}\n\n.linkWrapper {\n  display: flex;\n  gap: 1;\n}\n\n.linkClassName {\n  text-decoration: underline;\n  cursor: pointer;\n  color: #eb0542;\n}";
+var css$i = ".inputLabel {\n  position: absolute;\n  z-index: 1;\n  top: -10px;\n  inset-inline-start: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputLabelTooltip {\n  position: absolute;\n  z-index: 1;\n  top: 17px;\n  inset-inline-start: 11px;\n  background: #ffffff;\n  padding: 0 6px;\n  transition: all 0.3s ease-out;\n}\n\n.inputContainer {\n  position: relative;\n  z-index: 0;\n}\n\n.inputError:focus-visible {\n  outline: 1px solid #eb0542 !important;\n}\n\n.inputContainer::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}\n\n.astreik {\n  color: #eb0542;\n}\n\ninput::-webkit-contacts-auto-fill-button {\n  box-shadow: 0 0 0px 1000px white inset !important;\n  -webkit-text-fill-color: inherit !important;\n  background-image: none !important;\n  mask-image: none;\n}\n\n.ToolTipImage {\n  position: relative;\n  inset-inline-start: 87.5%;\n  z-index: 2;\n  top: 2.75rem;\n  cursor: pointer;\n}\n\n.tooltipwrapper {\n  display: flex;\n  flex-direction: row !important;\n  gap: 1rem;\n}\n\n.tooltipText {\n  font-family: Meraas Aktiv;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 22.4px;\n  text-align: start;\n  text-underline-position: from-font;\n  text-decoration-skip-ink: none;\n  color: #000000;\n  max-width: 17.1875rem;\n}\n\n.tooltip {\n  cursor: pointer;\n}\n\n.linkWrapper {\n  display: flex;\n  gap: 1;\n}\n\n.linkClassName {\n  text-decoration: underline;\n  cursor: pointer;\n  color: #eb0542;\n}\n\n.emailField {\n  direction: ltr;\n}\n\n.emailField:placeholder-shown {\n  direction: inherit;\n}";
 n(css$i,{});
 
 const common = {
@@ -12446,16 +12446,14 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
     React$1.useEffect(() => {
         setShowLabelOnBorder(!!value);
     }, [value]);
-    return (React__namespace.default.createElement("div", { className: `${className} ${"inputContainer"}` },
+    return (React__namespace.default.createElement("div", { className: `${className} inputContainer` },
         istoolTip && (React__namespace.default.createElement(TcodeToolTip, { className: "Tooltip", title: React__namespace.default.createElement(Grid, { className: "tooltipwrapper" },
                 React__namespace.default.createElement(Typography, { className: "tooltipText" }, toolTipText)), placement: "bottom-end" },
             React__namespace.default.createElement("img", { src: "/assets/svg-images/Info.svg", alt: "Info1", className: "ToolTipImage" }))),
         ((placeholder && showLabelOnBorder) || (placeholder && value)) && (React__namespace.default.createElement("label", { className: istoolTip ? "inputLabelTooltip" : "inputLabel" },
             placeholder.replace("*", ""),
             placeholder.includes("*") && React__namespace.default.createElement("label", { className: "astreik" }, "*"))),
-        React__namespace.default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, 
-            // className={inputClassName}
-            className: `${inputClassName} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
+        React__namespace.default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, className: `${inputClassName} ${type === INPUT_TYPES.EMAIL ? "emailField" : ""} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
         error && !link && (React__namespace.default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error)),
         error && link && (React__namespace.default.createElement("div", { className: linkWrapper },
             React__namespace.default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName },
@@ -21622,7 +21620,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 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:focus-visible {\n  outline: none;\n  border: 1px solid #000000 !important;\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}";
+var css$e = ".otpMainContainer {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin: 10px 0;\n  width: 343px;\n  direction: ltr;\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:focus-visible {\n  outline: none;\n  border: 1px solid #000000 !important;\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}";
 n(css$e,{});
 
 const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText, secondText = "secs", patternRegex = null, }) => {
@@ -22026,7 +22024,7 @@ const ToggleSwitch = ({ initialState = false, onToggle }) => {
             React__namespace.default.createElement("div", { className: `slider ${isToggled ? 'slider-on' : 'slider-off'}` }))));
 };
 
-var css$5 = ".swipe-action-wrapper {\n  position: relative;\n  width: 100%;\n}\n.swipe-action-wrapper .swipe-actions {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n.swipe-action-wrapper .swipe-actions.active {\n  opacity: 1;\n  pointer-events: all;\n}\n.swipe-action-wrapper .swipe-actions.active::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 125%;\n  height: 100%;\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.735) 0%, #ffffff 50%);\n  pointer-events: none;\n}\n.swipe-action-wrapper .swipe-actions button {\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n  background: none;\n  transition: transform 0.2s, box-shadow 0.2s ease-in-out;\n  z-index: 2;\n}\n.swipe-action-wrapper .swipe-actions button:hover {\n  transform: translateY(-2px);\n}\n.swipe-action-wrapper:hover .swipe-actions {\n  opacity: 1;\n  pointer-events: all;\n}";
+var css$5 = ".swipe-action-wrapper {\n  position: relative;\n  width: 100%;\n}\n.swipe-action-wrapper .swipe-actions {\n  position: absolute;\n  top: 0;\n  inset-inline-end: 0;\n  height: 100%;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s ease-in-out;\n}\n.swipe-action-wrapper .swipe-actions.active {\n  opacity: 1;\n  pointer-events: all;\n}\n.swipe-action-wrapper .swipe-actions.active::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  inset-inline-end: 0;\n  width: 125%;\n  height: 100%;\n  background: linear-gradient(90deg, rgba(255, 255, 255, 0.735) 0%, #ffffff 50%);\n  pointer-events: none;\n}\n.swipe-action-wrapper .swipe-actions button {\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n  background: none;\n  transition: transform 0.2s, box-shadow 0.2s ease-in-out;\n  z-index: 2;\n}\n.swipe-action-wrapper .swipe-actions button:hover {\n  transform: translateY(-2px);\n}\n.swipe-action-wrapper:hover .swipe-actions {\n  opacity: 1;\n  pointer-events: all;\n}";
 n(css$5,{});
 
 const HoverOptionsWrapper = ({ children, onPin, onRead, onDelete, pinIcon, readIcon, deleteIcon, swipeThreshold = 50 }) => {