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
|
@@ -6,9 +6,10 @@ interface rangeSlider {
|
|
|
6
6
|
maxRange: number;
|
|
7
7
|
text1: string;
|
|
8
8
|
text2: string;
|
|
9
|
-
getSliderValue?:
|
|
9
|
+
getSliderValue?: (event: any, property?: any) => void;
|
|
10
10
|
value?: string;
|
|
11
11
|
rangeMultiples?: number;
|
|
12
|
+
property?: any;
|
|
12
13
|
}
|
|
13
14
|
declare const RangeSlider: (props: rangeSlider) => React.JSX.Element;
|
|
14
15
|
export default RangeSlider;
|
|
@@ -6,9 +6,10 @@ declare function TextArea(props: {
|
|
|
6
6
|
target: {
|
|
7
7
|
value: string;
|
|
8
8
|
};
|
|
9
|
-
}) => void;
|
|
9
|
+
}, property?: any) => void;
|
|
10
10
|
requiredLimit: string;
|
|
11
11
|
placeholder: string;
|
|
12
12
|
charText: string;
|
|
13
|
+
property?: any;
|
|
13
14
|
}): React.JSX.Element;
|
|
14
15
|
export default TextArea;
|
package/dist/index.d.ts
CHANGED
|
@@ -297,10 +297,11 @@ declare function TextArea(props: {
|
|
|
297
297
|
target: {
|
|
298
298
|
value: string;
|
|
299
299
|
};
|
|
300
|
-
}) => void;
|
|
300
|
+
}, property?: any) => void;
|
|
301
301
|
requiredLimit: string;
|
|
302
302
|
placeholder: string;
|
|
303
303
|
charText: string;
|
|
304
|
+
property?: any;
|
|
304
305
|
}): React.JSX.Element;
|
|
305
306
|
|
|
306
307
|
interface DrawerProps {
|
|
@@ -359,9 +360,10 @@ interface rangeSlider {
|
|
|
359
360
|
maxRange: number;
|
|
360
361
|
text1: string;
|
|
361
362
|
text2: string;
|
|
362
|
-
getSliderValue?:
|
|
363
|
+
getSliderValue?: (event: any, property?: any) => void;
|
|
363
364
|
value?: string;
|
|
364
365
|
rangeMultiples?: number;
|
|
366
|
+
property?: any;
|
|
365
367
|
}
|
|
366
368
|
declare const RangeSlider: (props: rangeSlider) => React.JSX.Element;
|
|
367
369
|
|
package/dist/index.esm.js
CHANGED
|
@@ -116,7 +116,7 @@ const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/"
|
|
|
116
116
|
index < items.length - 1 && (React__default.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
|
|
117
117
|
};
|
|
118
118
|
|
|
119
|
-
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:
|
|
119
|
+
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}";
|
|
120
120
|
n(css$j,{});
|
|
121
121
|
|
|
122
122
|
const Checkbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
|
|
@@ -156,25 +156,34 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
156
156
|
return React__default.createElement("div", { className: classNames, ...props }, children);
|
|
157
157
|
};
|
|
158
158
|
|
|
159
|
-
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}";
|
|
159
|
+
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}";
|
|
160
160
|
n(css$h,{});
|
|
161
161
|
|
|
162
|
-
const CustomInputField = ({ label, value =
|
|
162
|
+
const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
|
|
163
163
|
const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
|
|
164
164
|
const handleInputValues = (e) => {
|
|
165
165
|
onChange?.(e);
|
|
166
166
|
checkValidation?.();
|
|
167
167
|
};
|
|
168
168
|
const checkFieldValue = (e) => {
|
|
169
|
-
console.log('value', e.target.value);
|
|
170
169
|
if (!e.target.value) {
|
|
171
170
|
setShowLabelOnBorder(false);
|
|
172
171
|
}
|
|
173
172
|
};
|
|
173
|
+
useEffect(() => {
|
|
174
|
+
if (error) {
|
|
175
|
+
setShowLabelOnBorder(true);
|
|
176
|
+
}
|
|
177
|
+
}, []);
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
setShowLabelOnBorder(!!value);
|
|
180
|
+
}, [value]);
|
|
174
181
|
return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
|
|
175
182
|
(placeholder && showLabelOnBorder) && React__default.createElement("label", { className: 'label' }, placeholder),
|
|
176
|
-
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
177
|
-
|
|
183
|
+
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
184
|
+
// className={inputClassName}
|
|
185
|
+
className: `${inputClassName} ${error ? "inputError" : ''}`, maxLength: maxLength, minLength: minLength, min: min, ...rest }),
|
|
186
|
+
error && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error))));
|
|
178
187
|
};
|
|
179
188
|
|
|
180
189
|
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}";
|
|
@@ -9408,7 +9417,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9408
9417
|
React__default.createElement("div", { className: "resendText" }, resendText)))))));
|
|
9409
9418
|
};
|
|
9410
9419
|
|
|
9411
|
-
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 #
|
|
9420
|
+
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}";
|
|
9412
9421
|
n(css$d,{});
|
|
9413
9422
|
|
|
9414
9423
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9545,7 +9554,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9545
9554
|
isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
|
|
9546
9555
|
};
|
|
9547
9556
|
|
|
9548
|
-
var css$a = ".tabs {\n display: flex;\n
|
|
9557
|
+
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}";
|
|
9549
9558
|
n(css$a,{});
|
|
9550
9559
|
|
|
9551
9560
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
@@ -9575,11 +9584,11 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
|
9575
9584
|
dot && haveDots.includes(tab.value.toLowerCase()) && (React__default.createElement("span", { className: "dot" })))))))));
|
|
9576
9585
|
};
|
|
9577
9586
|
|
|
9578
|
-
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: #
|
|
9587
|
+
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}";
|
|
9579
9588
|
n(css$9,{});
|
|
9580
9589
|
|
|
9581
9590
|
function Dropdown(props) {
|
|
9582
|
-
const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className } = props;
|
|
9591
|
+
const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className, } = props;
|
|
9583
9592
|
const [openDropdown, setOpenDropdown] = useState(false);
|
|
9584
9593
|
const [selectedValue, setSelectedValue] = useState(value);
|
|
9585
9594
|
const selectedDropdwonValue = (value) => {
|
|
@@ -9588,26 +9597,27 @@ function Dropdown(props) {
|
|
|
9588
9597
|
setOpenDropdown(!openDropdown);
|
|
9589
9598
|
};
|
|
9590
9599
|
return (React__default.createElement(React__default.Fragment, null,
|
|
9591
|
-
openDropdown && React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className:
|
|
9592
|
-
React__default.createElement("div", { className:
|
|
9593
|
-
|
|
9600
|
+
openDropdown && (React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
|
|
9601
|
+
React__default.createElement("div", { className: "dropPosition" },
|
|
9602
|
+
placeholder && selectedValue && (React__default.createElement("label", { className: "label" }, placeholder)),
|
|
9594
9603
|
React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },
|
|
9595
|
-
!selectedValue && React__default.createElement(Typography, { className: "placeholder", variant:
|
|
9596
|
-
selectedValue && React__default.createElement(Typography, { className: "value", variant:
|
|
9604
|
+
!selectedValue && (React__default.createElement(Typography, { className: "placeholder", variant: "B3", weight: "SEMI_BOLD" }, placeholder)),
|
|
9605
|
+
selectedValue && (React__default.createElement(Typography, { className: "value", variant: "B3", weight: "BOLD" }, selectedValue.name)),
|
|
9597
9606
|
!openDropdown && React__default.createElement("div", null, arrowDown),
|
|
9598
9607
|
openDropdown && React__default.createElement("div", null, arrowUp)),
|
|
9599
|
-
openDropdown && React__default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
|
|
9600
|
-
React__default.createElement(Typography, { variant:
|
|
9608
|
+
openDropdown && (React__default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
|
|
9609
|
+
React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
|
|
9601
9610
|
}
|
|
9602
9611
|
|
|
9603
|
-
var css$8 = ".textArea {\n
|
|
9612
|
+
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}";
|
|
9604
9613
|
n(css$8,{});
|
|
9605
9614
|
|
|
9606
9615
|
function TextArea(props) {
|
|
9607
|
-
const { value, onChange, requiredLimit, placeholder, charText } = props;
|
|
9608
|
-
return (React__default.createElement(
|
|
9609
|
-
React__default.createElement("
|
|
9610
|
-
|
|
9616
|
+
const { value, onChange, requiredLimit, placeholder, charText, property } = props;
|
|
9617
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
9618
|
+
React__default.createElement("div", { className: "textArea100" },
|
|
9619
|
+
React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
|
|
9620
|
+
React__default.createElement(Typography, { className: `characters ${value?.length === Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
|
|
9611
9621
|
value?.length ?? 0,
|
|
9612
9622
|
"/",
|
|
9613
9623
|
requiredLimit,
|
|
@@ -9751,7 +9761,7 @@ const Menu = (props) => {
|
|
|
9751
9761
|
" "))));
|
|
9752
9762
|
};
|
|
9753
9763
|
|
|
9754
|
-
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: #
|
|
9764
|
+
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}";
|
|
9755
9765
|
n(css$3,{});
|
|
9756
9766
|
|
|
9757
9767
|
const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, duration, showCrossIcon, crossIcon }) => {
|
|
@@ -9804,13 +9814,13 @@ var css$2 = ".range {\n display: flex;\n flex-direction: row;\n justify-conte
|
|
|
9804
9814
|
n(css$2,{});
|
|
9805
9815
|
|
|
9806
9816
|
const RangeSlider = (props) => {
|
|
9807
|
-
const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1 } = props;
|
|
9817
|
+
const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1, property } = props;
|
|
9808
9818
|
return (React__default.createElement(React__default.Fragment, null,
|
|
9809
|
-
React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { className: "rangeLabels" },
|
|
9819
|
+
React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { key: index, className: "rangeLabels" },
|
|
9810
9820
|
React__default.createElement(Typography, { className: Number(value) === index ? "rangeLabelColor" : "", variant: "B3", weight: Number(value) === index ? "BOLD" : "SEMI_BOLD" }, index % rangeMultiples === 0 ? index : " "),
|
|
9811
9821
|
React__default.createElement("div", { className: `${Number(value) === index ? "rangeSelectedBorder" : "rangeBorder"} ${index % rangeMultiples !== 0 ? "rangeMarginTop" : ""}` }))))),
|
|
9812
9822
|
React__default.createElement("div", { className: "slidecontainer" },
|
|
9813
|
-
React__default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: getSliderValue })),
|
|
9823
|
+
React__default.createElement("input", { type: "range", min: minRange, max: maxRange, value: value, className: "slider", id: "myRange", onChange: (event) => getSliderValue && getSliderValue(event, property) })),
|
|
9814
9824
|
React__default.createElement("div", { className: "satisfiedText" },
|
|
9815
9825
|
React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" },
|
|
9816
9826
|
" ",
|
|
@@ -9853,7 +9863,7 @@ const Carousel = ({ items }) => {
|
|
|
9853
9863
|
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) }))))));
|
|
9854
9864
|
};
|
|
9855
9865
|
|
|
9856
|
-
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}";
|
|
9866
|
+
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}";
|
|
9857
9867
|
n(css,{});
|
|
9858
9868
|
|
|
9859
9869
|
const common = {
|
|
@@ -15489,7 +15499,7 @@ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
|
|
|
15489
15499
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
15490
15500
|
} : void 0;
|
|
15491
15501
|
|
|
15492
|
-
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow }) => {
|
|
15502
|
+
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|
|
15493
15503
|
return (React__default.createElement(React__default.Fragment, null,
|
|
15494
15504
|
alignment !== "vertical" && (React__default.createElement(React__default.Fragment, null,
|
|
15495
15505
|
type === "static" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
|
|
@@ -15498,8 +15508,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15498
15508
|
: "",
|
|
15499
15509
|
} },
|
|
15500
15510
|
React__default.createElement("div", { className: "stepperItem" },
|
|
15501
|
-
React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : ""),
|
|
15502
|
-
val.id < stepperData.length && (React__default.createElement("div", { className: "stepperDivider" }, " "))),
|
|
15511
|
+
React__default.createElement("div", { className: "stepperCircle" }, showLabelIndex ? val.id : "")),
|
|
15503
15512
|
React__default.createElement(Typography, { variant: variant, weight: "SEMI_BOLD" }, val?.name)))))),
|
|
15504
15513
|
type === "dynamic" && (React__default.createElement("div", { className: "stepperAlignment" }, stepperData?.map((val) => (React__default.createElement("div", { key: val.id, style: {
|
|
15505
15514
|
width: val.id < stepperData.length
|
|
@@ -15522,8 +15531,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15522
15531
|
type === "dynamic" && (React__default.createElement("div", { className: "stepperVerticalAlignment" }, stepperData?.map((val) => (React__default.createElement(React__default.Fragment, null,
|
|
15523
15532
|
React__default.createElement("div", { className: "stepperVerticalItem" },
|
|
15524
15533
|
React__default.createElement("div", { className: "flex" },
|
|
15525
|
-
isPaymentPlanFlow && React__default.createElement(Box, { className: "marginRight" }, val?.img),
|
|
15526
|
-
!isPaymentPlanFlow &&
|
|
15534
|
+
isPaymentPlanFlow && (React__default.createElement(Box, { className: "marginRight" }, val?.img)),
|
|
15535
|
+
!isPaymentPlanFlow &&
|
|
15536
|
+
currentStep &&
|
|
15527
15537
|
(currentStep === val.id || currentStep < val.id) && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${currentStep === val.id && status === "Rejected"
|
|
15528
15538
|
? "stepperErrorCircle"
|
|
15529
15539
|
: currentStep === val.id &&
|
|
@@ -15532,7 +15542,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15532
15542
|
: ""} ${currentStep < val.id
|
|
15533
15543
|
? "stepperNotReachedBorder"
|
|
15534
15544
|
: ""}` }, showLabelIndex ? val.id : "")),
|
|
15535
|
-
!isPaymentPlanFlow &&
|
|
15545
|
+
!isPaymentPlanFlow &&
|
|
15546
|
+
currentStep &&
|
|
15547
|
+
currentStep > val.id && (React__default.createElement("div", { className: `${"stepperCircle"} ${"marginRight1"} ${"stepperSuccessBorder"}` }, successIcon)),
|
|
15536
15548
|
React__default.createElement(Typography, { className: currentStep &&
|
|
15537
15549
|
(currentStep === val.id || currentStep < val.id)
|
|
15538
15550
|
? "contentSecondary"
|
|
@@ -15540,7 +15552,7 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15540
15552
|
currentStep === val.id && (React__default.createElement("div", { className: `${"flex"} ${status === "Rejected" ? "error" : "warning"}` },
|
|
15541
15553
|
statusIcon,
|
|
15542
15554
|
status)),
|
|
15543
|
-
displayRightContent && React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value)),
|
|
15555
|
+
displayRightContent && (React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.value))),
|
|
15544
15556
|
React__default.createElement("div", null,
|
|
15545
15557
|
React__default.createElement("div", { className: val.id < stepperData.length
|
|
15546
15558
|
? currentStep && currentStep > val.id
|
|
@@ -15557,7 +15569,9 @@ const Stepper = ({ variant, dividerWidth, submittedDate, component, status, stat
|
|
|
15557
15569
|
React__default.createElement("div", { className: "stepperVerticalItem" },
|
|
15558
15570
|
React__default.createElement("div", { className: "flexCenter" },
|
|
15559
15571
|
React__default.createElement("div", { className: "stepperVerticalCircle" }, showLabelIndex ? val.id : ""),
|
|
15560
|
-
React__default.createElement(
|
|
15572
|
+
React__default.createElement("div", { className: "column" },
|
|
15573
|
+
React__default.createElement(Typography, { variant: "B2", weight: "SEMI_BOLD" }, val?.name),
|
|
15574
|
+
React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD", className: "typoClass" }, val?.value)))),
|
|
15561
15575
|
React__default.createElement("div", null, val.id < stepperData.length && (React__default.createElement("div", { className: "stepperVerticalDivider" }, " "))))))))))));
|
|
15562
15576
|
};
|
|
15563
15577
|
|