dhre-component-lib 0.6.9 → 0.7.1
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/Search/Search.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +18 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +18 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -9445,7 +9445,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9445
9445
|
React__namespace.default.createElement("div", { className: (timer > 0 || disableResend) ? "resendText" : "enabledResendText" }, resendText)))))));
|
|
9446
9446
|
};
|
|
9447
9447
|
|
|
9448
|
-
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 height: 2rem;\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: 13.5rem;\n border-radius: 10px;\n}\n@media (max-width: 767px) {\n .suggestions-dropdown {\n width:
|
|
9448
|
+
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 height: 2rem;\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: 13.5rem;\n border-radius: 10px;\n}\n@media (max-width: 767px) {\n .suggestions-dropdown {\n width: 94%;\n top: 10rem;\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}";
|
|
9449
9449
|
n(css$d,{});
|
|
9450
9450
|
|
|
9451
9451
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9529,7 +9529,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
|
|
|
9529
9529
|
query && !disabled && (React__namespace.default.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon))),
|
|
9530
9530
|
showSuggestions && (React__namespace.default.createElement("div", { className: "suggestions-dropdown" }, filteredSuggestions.length > 0 ? (filteredSuggestions.map((suggestion) => (React__namespace.default.createElement(React__namespace.default.Fragment, { key: suggestion.id },
|
|
9531
9531
|
React__namespace.default.createElement("button", { onClick: () => handleSelectSuggestion(suggestion), className: "row" },
|
|
9532
|
-
searchIcon,
|
|
9532
|
+
React__namespace.default.createElement("div", null, searchIcon),
|
|
9533
9533
|
React__namespace.default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "suggestion-item" }, suggestion.title)),
|
|
9534
9534
|
React__namespace.default.createElement("div", { className: "underline" }))))) : (React__namespace.default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
|
|
9535
9535
|
};
|
|
@@ -9582,7 +9582,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9582
9582
|
isOpen && (React__namespace.default.createElement("div", { className: "accordion-content" }, children))));
|
|
9583
9583
|
};
|
|
9584
9584
|
|
|
9585
|
-
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: #
|
|
9585
|
+
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: #686868;\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 gap: 0.5rem;\n line-height: 25.2px;\n font-family: \"Meraas Aktiv\", sans-serif;\n font-weight: 400;\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 .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}\n\n.counts {\n background-color: #d92d27;\n border-radius: 1.5rem;\n font-size: 18px;\n color: #ffffff;\n padding: 1px;\n width: 2rem;\n height: 1.5rem;\n}";
|
|
9586
9586
|
n(css$a,{});
|
|
9587
9587
|
|
|
9588
9588
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|
|
@@ -9654,20 +9654,32 @@ function Dropdown(props) {
|
|
|
9654
9654
|
React__namespace.default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
|
|
9655
9655
|
}
|
|
9656
9656
|
|
|
9657
|
-
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
|
|
9657
|
+
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.inputTextAreaLabel {\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.astreik {\n color: #eb0542;\n}\n\n.characters {\n color: #686868;\n}\n\n.textArea100 {\n height: 100%;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n}\n\n.positionRel {\n position: relative;\n z-index: 0;\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.astreik {\n color: #eb0542;\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}";
|
|
9658
9658
|
n(css$8,{});
|
|
9659
9659
|
|
|
9660
9660
|
function TextArea(props) {
|
|
9661
9661
|
const { value, onChange, requiredLimit, placeholder, charText, property } = props;
|
|
9662
|
+
const [showLabelOnBorder, setShowLabelOnBorder] = React.useState(false);
|
|
9662
9663
|
const checkSpecialChar = (e) => {
|
|
9663
9664
|
if (!/[0-9a-zA-Z ]/.test(e.key)) {
|
|
9664
9665
|
e.preventDefault();
|
|
9665
9666
|
}
|
|
9666
9667
|
console.log('textAraea');
|
|
9667
9668
|
};
|
|
9668
|
-
|
|
9669
|
+
const checkFieldValue = (e) => {
|
|
9670
|
+
if (!e.key) {
|
|
9671
|
+
setShowLabelOnBorder(false);
|
|
9672
|
+
}
|
|
9673
|
+
};
|
|
9674
|
+
React.useEffect(() => {
|
|
9675
|
+
setShowLabelOnBorder(!!value);
|
|
9676
|
+
}, [value]);
|
|
9677
|
+
return (React__namespace.default.createElement("div", { className: "positionRel" },
|
|
9669
9678
|
React__namespace.default.createElement("div", { className: "textArea100" },
|
|
9670
|
-
|
|
9679
|
+
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: 'inputTextAreaLabel' },
|
|
9680
|
+
placeholder.replace("*", ""),
|
|
9681
|
+
placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*")),
|
|
9682
|
+
React__namespace.default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: showLabelOnBorder ? "" : placeholder, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue })),
|
|
9671
9683
|
React__namespace.default.createElement(Typography, { className: `characters ${value &&
|
|
9672
9684
|
value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
|
|
9673
9685
|
value?.length ?? 0,
|