dhre-component-lib 0.4.1 → 0.4.2
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/index.esm.js +27 -20
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +27 -20
- package/dist/index.js.map +1 -1
- package/dist/theme/colors/colors.scss +3 -2
- package/package.json +1 -1
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,7 +156,7 @@ 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
162
|
const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placeholder = '', onChange, className = '', inputClassName = '', labelClassName = '', error, errorClassName = '', maxLength = 0, minLength = 0, checkValidation, name, min, ...rest }) => {
|
|
@@ -166,14 +166,20 @@ const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placehol
|
|
|
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
|
+
}, []);
|
|
174
178
|
return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
|
|
175
179
|
(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,
|
|
180
|
+
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
181
|
+
// className={inputClassName}
|
|
182
|
+
className: `${inputClassName} ${error ? "inputError" : ''}`, maxLength: maxLength, minLength: minLength, min: min, ...rest }),
|
|
177
183
|
error && React__default.createElement(Typography, { variant: 'L1', weight: 'SEMI_BOLD', className: errorClassName }, error)));
|
|
178
184
|
};
|
|
179
185
|
|
|
@@ -9408,7 +9414,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9408
9414
|
React__default.createElement("div", { className: "resendText" }, resendText)))))));
|
|
9409
9415
|
};
|
|
9410
9416
|
|
|
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 #
|
|
9417
|
+
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
9418
|
n(css$d,{});
|
|
9413
9419
|
|
|
9414
9420
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9545,7 +9551,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9545
9551
|
isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
|
|
9546
9552
|
};
|
|
9547
9553
|
|
|
9548
|
-
var css$a = ".tabs {\n display: flex;\n
|
|
9554
|
+
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
9555
|
n(css$a,{});
|
|
9550
9556
|
|
|
9551
9557
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
@@ -9575,11 +9581,11 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, }) => {
|
|
|
9575
9581
|
dot && haveDots.includes(tab.value.toLowerCase()) && (React__default.createElement("span", { className: "dot" })))))))));
|
|
9576
9582
|
};
|
|
9577
9583
|
|
|
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: #
|
|
9584
|
+
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
9585
|
n(css$9,{});
|
|
9580
9586
|
|
|
9581
9587
|
function Dropdown(props) {
|
|
9582
|
-
const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className } = props;
|
|
9588
|
+
const { placeholder, getSelectedValue, dropdownList, arrowUp, arrowDown, value, className, } = props;
|
|
9583
9589
|
const [openDropdown, setOpenDropdown] = useState(false);
|
|
9584
9590
|
const [selectedValue, setSelectedValue] = useState(value);
|
|
9585
9591
|
const selectedDropdwonValue = (value) => {
|
|
@@ -9588,26 +9594,27 @@ function Dropdown(props) {
|
|
|
9588
9594
|
setOpenDropdown(!openDropdown);
|
|
9589
9595
|
};
|
|
9590
9596
|
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
|
-
|
|
9597
|
+
openDropdown && (React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
|
|
9598
|
+
React__default.createElement("div", { className: "dropPosition" },
|
|
9599
|
+
placeholder && selectedValue && (React__default.createElement("label", { className: "label" }, placeholder)),
|
|
9594
9600
|
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:
|
|
9601
|
+
!selectedValue && (React__default.createElement(Typography, { className: "placeholder", variant: "B3", weight: "SEMI_BOLD" }, placeholder)),
|
|
9602
|
+
selectedValue && (React__default.createElement(Typography, { className: "value", variant: "B3", weight: "BOLD" }, selectedValue.name)),
|
|
9597
9603
|
!openDropdown && React__default.createElement("div", null, arrowDown),
|
|
9598
9604
|
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:
|
|
9605
|
+
openDropdown && (React__default.createElement("div", { className: "dropdownValues" }, dropdownList.map((val) => (React__default.createElement("div", { onClick: () => selectedDropdwonValue(val), className: "unselectedText" },
|
|
9606
|
+
React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
|
|
9601
9607
|
}
|
|
9602
9608
|
|
|
9603
|
-
var css$8 = ".textArea {\n
|
|
9609
|
+
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
9610
|
n(css$8,{});
|
|
9605
9611
|
|
|
9606
9612
|
function TextArea(props) {
|
|
9607
9613
|
const { value, onChange, requiredLimit, placeholder, charText } = props;
|
|
9608
|
-
return (React__default.createElement(
|
|
9609
|
-
React__default.createElement("
|
|
9610
|
-
|
|
9614
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
9615
|
+
React__default.createElement("div", { className: "textArea100" },
|
|
9616
|
+
React__default.createElement("textarea", { value: value, onChange: onChange, maxLength: Number(requiredLimit), className: `textArea ${value?.length === Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
|
|
9617
|
+
React__default.createElement(Typography, { className: `characters ${value?.length === Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
|
|
9611
9618
|
value?.length ?? 0,
|
|
9612
9619
|
"/",
|
|
9613
9620
|
requiredLimit,
|
|
@@ -9751,7 +9758,7 @@ const Menu = (props) => {
|
|
|
9751
9758
|
" "))));
|
|
9752
9759
|
};
|
|
9753
9760
|
|
|
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: #
|
|
9761
|
+
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
9762
|
n(css$3,{});
|
|
9756
9763
|
|
|
9757
9764
|
const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, duration, showCrossIcon, crossIcon }) => {
|