dhre-component-lib 0.4.1 → 0.4.3
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/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/InputTextField/InputTextField.d.ts +1 -1
- package/dist/components/RangeSlider/RangeSlider.d.ts +2 -1
- package/dist/components/TextArea/TextArea.d.ts +2 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.esm.js +49 -35
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +49 -35
- package/dist/index.js.map +1 -1
- package/dist/theme/colors/colors.scss +5 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -139,7 +139,7 @@ const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/"
|
|
|
139
139
|
index < items.length - 1 && (React__namespace.default.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
|
|
140
140
|
};
|
|
141
141
|
|
|
142
|
-
var css$j = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top:
|
|
142
|
+
var css$j = ".custom-checkbox {\n display: flex;\n align-items: center;\n}\n.custom-checkbox input[type=checkbox] {\n /* Hide the default checkbox */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 8px;\n border: 2px solid #000000;\n border-radius: 4px;\n background-color: #ffffff;\n cursor: pointer;\n position: relative;\n /* Create the white tick mark */\n}\n.custom-checkbox input[type=checkbox]:checked {\n background-color: #000000;\n}\n.custom-checkbox input[type=checkbox]:checked::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 5px;\n width: 5px;\n height: 10px;\n border: solid #ffffff;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n.custom-checkbox input[type=checkbox]:focus {\n outline: none;\n box-shadow: 0 0 3px #000000;\n}\n.custom-checkbox .checkbox-label {\n font-size: 14px;\n color: #000000; /* Adjust the text color if needed */\n}";
|
|
143
143
|
n(css$j,{});
|
|
144
144
|
|
|
145
145
|
const Checkbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
|
|
@@ -179,25 +179,34 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
179
179
|
return React__namespace.default.createElement("div", { className: classNames, ...props }, children);
|
|
180
180
|
};
|
|
181
181
|
|
|
182
|
-
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}";
|
|
182
|
+
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}";
|
|
183
183
|
n(css$h,{});
|
|
184
184
|
|
|
185
|
-
const CustomInputField = ({ label, value =
|
|
185
|
+
const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
|
|
186
186
|
const [showLabelOnBorder, setShowLabelOnBorder] = React.useState(false);
|
|
187
187
|
const handleInputValues = (e) => {
|
|
188
188
|
onChange?.(e);
|
|
189
189
|
checkValidation?.();
|
|
190
190
|
};
|
|
191
191
|
const checkFieldValue = (e) => {
|
|
192
|
-
console.log('value', e.target.value);
|
|
193
192
|
if (!e.target.value) {
|
|
194
193
|
setShowLabelOnBorder(false);
|
|
195
194
|
}
|
|
196
195
|
};
|
|
196
|
+
React.useEffect(() => {
|
|
197
|
+
if (error) {
|
|
198
|
+
setShowLabelOnBorder(true);
|
|
199
|
+
}
|
|
200
|
+
}, []);
|
|
201
|
+
React.useEffect(() => {
|
|
202
|
+
setShowLabelOnBorder(!!value);
|
|
203
|
+
}, [value]);
|
|
197
204
|
return (React__namespace.default.createElement("div", { className: `${className} ${'inputContainer'}` },
|
|
198
205
|
(placeholder && showLabelOnBorder) && React__namespace.default.createElement("label", { className: 'label' }, placeholder),
|
|
199
|
-
React__namespace.default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
200
|
-
|
|
206
|
+
React__namespace.default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
207
|
+
// className={inputClassName}
|
|
208
|
+
className: `${inputClassName} ${error ? "inputError" : ''}`, maxLength: maxLength, minLength: minLength, min: min, ...rest }),
|
|
209
|
+
error && (React__namespace.default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error))));
|
|
201
210
|
};
|
|
202
211
|
|
|
203
212
|
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}";
|
|
@@ -9431,7 +9440,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9431
9440
|
React__namespace.default.createElement("div", { className: "resendText" }, resendText)))))));
|
|
9432
9441
|
};
|
|
9433
9442
|
|
|
9434
|
-
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 #
|
|
9443
|
+
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}\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: 67%;\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}";
|
|
9435
9444
|
n(css$d,{});
|
|
9436
9445
|
|
|
9437
9446
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9568,7 +9577,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9568
9577
|
isOpen && (React__namespace.default.createElement("div", { className: "accordion-content" }, children))));
|
|
9569
9578
|
};
|
|
9570
9579
|
|
|
9571
|
-
var css$a = ".tabs {\n display: flex;\n
|
|
9580
|
+
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}";
|
|
9572
9581
|
n(css$a,{});
|
|
9573
9582
|
|
|
9574
9583
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
@@ -9598,11 +9607,11 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
|
9598
9607
|
dot && haveDots.includes(tab.value.toLowerCase()) && (React__namespace.default.createElement("span", { className: "dot" })))))))));
|
|
9599
9608
|
};
|
|
9600
9609
|
|
|
9601
|
-
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.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: #
|
|
9610
|
+
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.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}";
|
|
9602
9611
|
n(css$9,{});
|
|
9603
9612
|
|
|
9604
9613
|
function Dropdown(props) {
|
|
9605
|
-
const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className } = props;
|
|
9614
|
+
const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className, } = props;
|
|
9606
9615
|
const [openDropdown, setOpenDropdown] = React.useState(false);
|
|
9607
9616
|
const [selectedValue, setSelectedValue] = React.useState(value);
|
|
9608
9617
|
const selectedDropdwonValue = (value) => {
|
|
@@ -9611,26 +9620,27 @@ function Dropdown(props) {
|
|
|
9611
9620
|
setOpenDropdown(!openDropdown);
|
|
9612
9621
|
};
|
|
9613
9622
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
9614
|
-
openDropdown && React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className:
|
|
9615
|
-
React__namespace.default.createElement("div", { className:
|
|
9616
|
-
|
|
9623
|
+
openDropdown && (React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
|
|
9624
|
+
React__namespace.default.createElement("div", { className: "dropPosition" },
|
|
9625
|
+
placeholder && selectedValue && (React__namespace.default.createElement("label", { className: "label" }, placeholder)),
|
|
9617
9626
|
React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },
|
|
9618
|
-
!selectedValue && React__namespace.default.createElement(Typography, { className: "placeholder", variant:
|
|
9619
|
-
selectedValue && React__namespace.default.createElement(Typography, { className: "value", variant:
|
|
9627
|
+
!selectedValue && (React__namespace.default.createElement(Typography, { className: "placeholder", variant: "B3", weight: "SEMI_BOLD" }, placeholder)),
|
|
9628
|
+
selectedValue && (React__namespace.default.createElement(Typography, { className: "value", variant: "B3", weight: "BOLD" }, selectedValue.name)),
|
|
9620
9629
|
!openDropdown && React__namespace.default.createElement("div", null, arrowDown),
|
|
9621
9630
|
openDropdown && React__namespace.default.createElement("div", null, arrowUp)),
|
|
9622
|
-
openDropdown && React__namespace.default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__namespace.default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
|
|
9623
|
-
React__namespace.default.createElement(Typography, { variant:
|
|
9631
|
+
openDropdown && (React__namespace.default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__namespace.default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
|
|
9632
|
+
React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
|
|
9624
9633
|
}
|
|
9625
9634
|
|
|
9626
|
-
var css$8 = ".textArea {\n
|
|
9635
|
+
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.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}";
|
|
9627
9636
|
n(css$8,{});
|
|
9628
9637
|
|
|
9629
9638
|
function TextArea(props) {
|
|
9630
|
-
const { value, onChange, requiredLimit, placeholder, charText } = props;
|
|
9631
|
-
return (React__namespace.default.createElement(
|
|
9632
|
-
React__namespace.default.createElement("
|
|
9633
|
-
|
|
9639
|
+
const { value, onChange, requiredLimit, placeholder, charText, property } = props;
|
|
9640
|
+
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
9641
|
+
React__namespace.default.createElement("div", { className: "textArea100" },
|
|
9642
|
+
React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
|
|
9643
|
+
React__namespace.default.createElement(Typography, { className: `characters ${value?.length === Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
|
|
9634
9644
|
value?.length ?? 0,
|
|
9635
9645
|
"/",
|
|
9636
9646
|
requiredLimit,
|
|
@@ -9774,7 +9784,7 @@ const Menu = (props) => {
|
|
|
9774
9784
|
" "))));
|
|
9775
9785
|
};
|
|
9776
9786
|
|
|
9777
|
-
var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n color: #fff;\n border-radius: 8px;\n z-index: 1000;\n opacity: 1;\n}\n.toast .icon {\n margin-right: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-right: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: left;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-left: auto;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #
|
|
9787
|
+
var css$3 = ".toast {\n display: flex;\n align-items: center;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n color: #fff;\n border-radius: 8px;\n z-index: 1000;\n opacity: 1;\n top: 127px;\n padding: 0 1rem;\n}\n.toast .icon {\n margin-right: 10px;\n margin-top: 5px;\n}\n.toast .icon1 {\n margin-right: 10px;\n margin-top: 5px;\n background: none;\n border: none;\n}\n.toast .text {\n flex-grow: 1;\n text-align: left;\n}\n.toast .undo {\n color: #fff;\n background: none;\n border: none;\n text-decoration: underline;\n cursor: pointer;\n margin-left: auto; /* Pushes the undo button to the right */\n padding: 0;\n float: inline-end;\n}\n.toast .suggestion-item {\n padding: 20px 8px 16px 0;\n cursor: pointer;\n text-align: left;\n}\n.toast .progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 4px;\n transition: width 0.1s linear;\n}\n.toast.successMain {\n background-color: #008256;\n}\n.toast .successProgress {\n background-color: #024324;\n}\n.toast.errorMain {\n background-color: #dc3545;\n}\n.toast .errorProgress {\n background-color: #c82333;\n}";
|
|
9778
9788
|
n(css$3,{});
|
|
9779
9789
|
|
|
9780
9790
|
const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, duration, showCrossIcon, crossIcon }) => {
|
|
@@ -9827,13 +9837,13 @@ var css$2 = ".range {\n display: flex;\n flex-direction: row;\n justify-conte
|
|
|
9827
9837
|
n(css$2,{});
|
|
9828
9838
|
|
|
9829
9839
|
const RangeSlider = (props) => {
|
|
9830
|
-
const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1 } = props;
|
|
9840
|
+
const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1, property } = props;
|
|
9831
9841
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
9832
|
-
React__namespace.default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__namespace.default.createElement("div", { className: "rangeLabels" },
|
|
9842
|
+
React__namespace.default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__namespace.default.createElement("div", { key: index, className: "rangeLabels" },
|
|
9833
9843
|
React__namespace.default.createElement(Typography, { className: Number(value) === index ? "rangeLabelColor" : "", variant: "B3", weight: Number(value) === index ? "BOLD" : "SEMI_BOLD" }, index % rangeMultiples === 0 ? index : " "),
|
|
9834
9844
|
React__namespace.default.createElement("div", { className: `${Number(value) === index ? "rangeSelectedBorder" : "rangeBorder"} ${index % rangeMultiples !== 0 ? "rangeMarginTop" : ""}` }))))),
|
|
9835
9845
|
React__namespace.default.createElement("div", { className: "slidecontainer" },
|
|
9836
|
-
React__namespace.default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: getSliderValue })),
|
|
9846
|
+
React__namespace.default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: (event) => getSliderValue && getSliderValue(event, property) })),
|
|
9837
9847
|
React__namespace.default.createElement("div", { className: "satisfiedText" },
|
|
9838
9848
|
React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" },
|
|
9839
9849
|
" ",
|
|
@@ -9876,7 +9886,7 @@ const Carousel = ({ items }) => {
|
|
|
9876
9886
|
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) }))))));
|
|
9877
9887
|
};
|
|
9878
9888
|
|
|
9879
|
-
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}";
|
|
9889
|
+
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}";
|
|
9880
9890
|
n(css,{});
|
|
9881
9891
|
|
|
9882
9892
|
const common = {
|
|
@@ -15512,7 +15522,7 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
|
|
|
15512
15522
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
15513
15523
|
} : void 0;
|
|
15514
15524
|
|
|
15515
|
-
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow }) => {
|
|
15525
|
+
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|
|
15516
15526
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
15517
15527
|
alignment !== "vertical" && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
15518
15528
|
type === "static" && (React__namespace.default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__namespace.default.createElement("div", { key: val.id, style: {
|
|
@@ -15521,8 +15531,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15521
15531
|
: "",
|
|
15522
15532
|
} },
|
|
15523
15533
|
React__namespace.default.createElement("div", { className: "stepperItem" },
|
|
15524
|
-
React__namespace.default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : ""),
|
|
15525
|
-
val.id < stepperData.length && (React__namespace.default.createElement("div", { className: "stepperDivider" }, " "))),
|
|
15534
|
+
React__namespace.default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : "")),
|
|
15526
15535
|
React__namespace.default.createElement(Typography, { variant: variant, weight: "SEMI_BOLD" }, val?.name)))))),
|
|
15527
15536
|
type === "dynamic" && (React__namespace.default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__namespace.default.createElement("div", { key: val.id, style: {
|
|
15528
15537
|
width: val.id < stepperData.length
|
|
@@ -15545,8 +15554,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15545
15554
|
type === "dynamic" && (React__namespace.default.createElement("div", { className: "stepperVerticalAlignment" }, stepperData?.map((val) => (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
15546
15555
|
React__namespace.default.createElement("div", { className: "stepperVerticalItem" },
|
|
15547
15556
|
React__namespace.default.createElement("div", { className: "flex" },
|
|
15548
|
-
isPaymentPlanFlow && React__namespace.default.createElement(Box, { className: "marginRight" }, val?.img),
|
|
15549
|
-
!isPaymentPlanFlow &&
|
|
15557
|
+
isPaymentPlanFlow && (React__namespace.default.createElement(Box, { className: "marginRight" }, val?.img)),
|
|
15558
|
+
!isPaymentPlanFlow &&
|
|
15559
|
+
currentStep &&
|
|
15550
15560
|
(currentStep === val.id || currentStep < val.id) && (React__namespace.default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${currentStep === val.id && status === "Rejected"
|
|
15551
15561
|
? "stepperErrorCircle"
|
|
15552
15562
|
: currentStep === val.id &&
|
|
@@ -15555,7 +15565,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15555
15565
|
: ""} ${currentStep < val.id
|
|
15556
15566
|
? "stepperNotReachedBorder"
|
|
15557
15567
|
: ""}` }, showLabelIndex ? val.id : "")),
|
|
15558
|
-
!isPaymentPlanFlow &&
|
|
15568
|
+
!isPaymentPlanFlow &&
|
|
15569
|
+
currentStep &&
|
|
15570
|
+
currentStep > val.id && (React__namespace.default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${"stepperSuccessBorder"}` }, successIcon)),
|
|
15559
15571
|
React__namespace.default.createElement(Typography, { className: currentStep &&
|
|
15560
15572
|
(currentStep === val.id || currentStep < val.id)
|
|
15561
15573
|
? "contentSecondary"
|
|
@@ -15563,7 +15575,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15563
15575
|
currentStep === val.id && (React__namespace.default.createElement("div", { className: `${"flex"} ${status === "Rejected" ? "error" : "warning"}` },
|
|
15564
15576
|
statusIcon,
|
|
15565
15577
|
status)),
|
|
15566
|
-
displayRightContent && React__namespace.default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value)),
|
|
15578
|
+
displayRightContent && (React__namespace.default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value))),
|
|
15567
15579
|
React__namespace.default.createElement("div", null,
|
|
15568
15580
|
React__namespace.default.createElement("div", { className: val.id < stepperData.length
|
|
15569
15581
|
? currentStep && currentStep > val.id
|
|
@@ -15580,7 +15592,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15580
15592
|
React__namespace.default.createElement("div", { className: "stepperVerticalItem" },
|
|
15581
15593
|
React__namespace.default.createElement("div", { className: "flexCenter" },
|
|
15582
15594
|
React__namespace.default.createElement("div", { className: "stepperVerticalCircle" }, showLabelIndex ? val.id : ""),
|
|
15583
|
-
React__namespace.default.createElement(
|
|
15595
|
+
React__namespace.default.createElement("div", { className: "column" },
|
|
15596
|
+
React__namespace.default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.name),
|
|
15597
|
+
React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD", className: "typoClass" }, val?.value)))),
|
|
15584
15598
|
React__namespace.default.createElement("div", null, val.id < stepperData.length && (React__namespace.default.createElement("div", { className: "stepperVerticalDivider" }, " "))))))))))));
|
|
15585
15599
|
};
|
|
15586
15600
|
|