dhre-component-lib 0.4.2 → 0.4.3

package/dist/components/InputTextField/InputTextField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import "./InputTextField.module.scss";
 export interface CustomInputFieldProps {
     label?: string;

package/dist/components/RangeSlider/RangeSlider.d.ts

@@ -6,9 +6,10 @@ interface rangeSlider {
     maxRange: number;
     text1: string;
     text2: string;
-    getSliderValue?: React.ChangeEventHandler<HTMLInputElement>;
+    getSliderValue?: (event: any, property?: any) => void;
     value?: string;
     rangeMultiples?: number;
+    property?: any;
 }
 declare const RangeSlider: (props: rangeSlider) => React.JSX.Element;
 export default RangeSlider;

package/dist/components/TextArea/TextArea.d.ts

@@ -6,9 +6,10 @@ declare function TextArea(props: {
         target: {
             value: string;
         };
-    }) => void;
+    }, property?: any) => void;
     requiredLimit: string;
     placeholder: string;
     charText: string;
+    property?: any;
 }): React.JSX.Element;
 export default TextArea;

package/dist/index.d.ts

@@ -297,10 +297,11 @@ declare function TextArea(props: {
         target: {
             value: string;
         };
-    }) => void;
+    }, property?: any) => void;
     requiredLimit: string;
     placeholder: string;
     charText: string;
+    property?: any;
 }): React.JSX.Element;
 
 interface DrawerProps {
@@ -359,9 +360,10 @@ interface rangeSlider {
     maxRange: number;
     text1: string;
     text2: string;
-    getSliderValue?: React.ChangeEventHandler<HTMLInputElement>;
+    getSliderValue?: (event: any, property?: any) => void;
     value?: string;
     rangeMultiples?: number;
+    property?: any;
 }
 declare const RangeSlider: (props: rangeSlider) => React.JSX.Element;
 

package/dist/index.esm.js

@@ -159,7 +159,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
 var css$h = ".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.inputContainer {\n  position: relative;\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(css$h,{});
 
-const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placeholder = '', onChange, className = '', inputClassName = '', labelClassName = '', error, errorClassName = '', maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
+const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
     const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const handleInputValues = (e) => {
         onChange?.(e);
@@ -175,12 +175,15 @@ const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placehol
             setShowLabelOnBorder(true);
         }
     }, []);
+    useEffect(() => {
+        setShowLabelOnBorder(!!value);
+    }, [value]);
     return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
         (placeholder && showLabelOnBorder) && React__default.createElement("label", { className: 'label' }, placeholder),
         React__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, ...rest }),
-        error && React__default.createElement(Typography, { variant: 'L1', weight: 'SEMI_BOLD', className: errorClassName }, error)));
+        error && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error))));
 };
 
 var css$g = ".container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.spinner {\n  border: 2px solid transparent;\n  border-radius: 50%;\n  border-top: 2px solid currentColor;\n  animation: spin 1s linear infinite;\n}\n\n.spinnerInner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n\n.errorText {\n  color: red;\n}\n\n.button {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n}\n.button-text {\n  background: none;\n}\n.button-outlined {\n  border: 1px solid currentColor;\n}\n.button-contained {\n  background-color: currentColor;\n  color: white;\n}\n.button-primary {\n  color: blue;\n}\n.button-secondary {\n  color: gray;\n}\n.button-small {\n  font-size: 12px;\n}\n.button-medium {\n  font-size: 16px;\n}\n.button-large {\n  font-size: 20px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
@@ -9610,10 +9613,10 @@ var css$8 = ".textArea {\n  min-width: 70%;\n  width: 100%;\n  height: 8.875rem;
 n(css$8,{});
 
 function TextArea(props) {
-    const { value, onChange, requiredLimit, placeholder, charText } = props;
+    const { value, onChange, requiredLimit, placeholder, charText, property } = props;
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { className: "textArea100" },
-            React__default.createElement("textarea", { value: value, onChange: onChange, maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
+            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
         React__default.createElement(Typography, { className: `characters ${value?.length === Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,
             "/",
@@ -9811,13 +9814,13 @@ var css$2 = ".range {\n  display: flex;\n  flex-direction: row;\n  justify-conte
 n(css$2,{});
 
 const RangeSlider = (props) => {
-    const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1 } = props;
+    const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1, property } = props;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { className: "rangeLabels" },
+        React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { key: index, className: "rangeLabels" },
             React__default.createElement(Typography, { className: Number(value) === index ? "rangeLabelColor" : "", variant: "B3", weight: Number(value) === index ? "BOLD" : "SEMI_BOLD" }, index % rangeMultiples === 0 ? index : " "),
             React__default.createElement("div", { className: `${Number(value) === index ? "rangeSelectedBorder" : "rangeBorder"} ${index % rangeMultiples !== 0 ? "rangeMarginTop" : ""}` }))))),
         React__default.createElement("div", { className: "slidecontainer" },
-            React__default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: getSliderValue })),
+            React__default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: (event) => getSliderValue && getSliderValue(event, property) })),
         React__default.createElement("div", { className: "satisfiedText" },
             React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" },
                 " ",
@@ -9860,7 +9863,7 @@ const Carousel = ({ items }) => {
         React__default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
 };
 
-var css = ".stepperCircle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  border: 2px 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: 2px 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: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 2px 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: 1rem;\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: 50%;\n  border-left: 2px dashed #898989;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n  width: 50%;\n  border-left: 2px solid #00b578;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\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}";
+var css = ".stepperCircle {\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 50%;\n  border: 2px 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: 2px 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: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n  width: 88%;\n  border: 2px dashed #898989;\n  height: 0.125rem;\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n  width: 88%;\n  border: 2px 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: 1rem;\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: 50%;\n  border-left: 2px dashed #898989;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n  width: 50%;\n  border-left: 2px solid #00b578;\n  min-height: 1rem;\n  max-height: 100%;\n  margin-left: 0.7rem;\n  padding-left: 2rem;\n  margin-top: 1rem;\n  margin-bottom: 1rem;\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}";
 n(css,{});
 
 const common = {
@@ -15496,7 +15499,7 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 
-const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow }) => {
+const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         alignment !== "vertical" && (React__default.createElement(React__default.Fragment, null,
             type === "static" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
@@ -15505,8 +15508,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                         : "",
                 } },
                 React__default.createElement("div", { className: "stepperItem" },
-                    React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : ""),
-                    val.id < stepperData.length && (React__default.createElement("div", { className: "stepperDivider" }, " "))),
+                    React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : "")),
                 React__default.createElement(Typography, { variant: variant, weight: "SEMI_BOLD" }, val?.name)))))),
             type === "dynamic" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
                     width: val.id < stepperData.length
@@ -15529,8 +15531,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
             type === "dynamic" && (React__default.createElement("div", { className: "stepperVerticalAlignment" }, stepperData?.map((val) => (React__default.createElement(React__default.Fragment, null,
                 React__default.createElement("div", { className: "stepperVerticalItem" },
                     React__default.createElement("div", { className: "flex" },
-                        isPaymentPlanFlow && React__default.createElement(Box, { className: "marginRight" }, val?.img),
-                        !isPaymentPlanFlow && currentStep &&
+                        isPaymentPlanFlow && (React__default.createElement(Box, { className: "marginRight" }, val?.img)),
+                        !isPaymentPlanFlow &&
+                            currentStep &&
                             (currentStep === val.id || currentStep < val.id) && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${currentStep === val.id && status === "Rejected"
                                 ? "stepperErrorCircle"
                                 : currentStep === val.id &&
@@ -15539,7 +15542,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                                     : ""} ${currentStep < val.id
                                 ? "stepperNotReachedBorder"
                                 : ""}` }, showLabelIndex ? val.id : "")),
-                        !isPaymentPlanFlow && currentStep && currentStep > val.id && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${"stepperSuccessBorder"}` }, successIcon)),
+                        !isPaymentPlanFlow &&
+                            currentStep &&
+                            currentStep > val.id && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${"stepperSuccessBorder"}` }, successIcon)),
                         React__default.createElement(Typography, { className: currentStep &&
                                 (currentStep === val.id || currentStep < val.id)
                                 ? "contentSecondary"
@@ -15547,7 +15552,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                     currentStep === val.id && (React__default.createElement("div", { className: `${"flex"} ${status === "Rejected" ? "error" : "warning"}` },
                         statusIcon,
                         status)),
-                    displayRightContent && React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value)),
+                    displayRightContent && (React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value))),
                 React__default.createElement("div", null,
                     React__default.createElement("div", { className: val.id < stepperData.length
                             ? currentStep && currentStep > val.id
@@ -15564,7 +15569,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
                 React__default.createElement("div", { className: "stepperVerticalItem" },
                     React__default.createElement("div", { className: "flexCenter" },
                         React__default.createElement("div", { className: "stepperVerticalCircle" }, showLabelIndex ? val.id : ""),
-                        React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.name))),
+                        React__default.createElement("div", { className: "column" },
+                            React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.name),
+                            React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD", className: "typoClass" }, val?.value)))),
                 React__default.createElement("div", null, val.id < stepperData.length && (React__default.createElement("div", { className: "stepperVerticalDivider" }, " "))))))))))));
 };