dhre-component-lib 0.7.0 → 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 +3 -3
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -9422,7 +9422,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
|
|
|
9422
9422
|
React__default.createElement("div", { className: (timer > 0 || disableResend) ? "resendText" : "enabledResendText" }, resendText)))))));
|
|
9423
9423
|
};
|
|
9424
9424
|
|
|
9425
|
-
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:
|
|
9425
|
+
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}";
|
|
9426
9426
|
n(css$d,{});
|
|
9427
9427
|
|
|
9428
9428
|
const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSuggestion, suggestions, placeholder, className = {}, onSearchIconClick, onHandleClear, isWhiteBackgound = false }) => {
|
|
@@ -9506,7 +9506,7 @@ const Search = ({ searchIcon, crossIcon, disabled = false, onSearch, onSelectSug
|
|
|
9506
9506
|
query && !disabled && (React__default.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon))),
|
|
9507
9507
|
showSuggestions && (React__default.createElement("div", { className: "suggestions-dropdown" }, filteredSuggestions.length > 0 ? (filteredSuggestions.map((suggestion) => (React__default.createElement(React__default.Fragment, { key: suggestion.id },
|
|
9508
9508
|
React__default.createElement("button", { onClick: () => handleSelectSuggestion(suggestion), className: "row" },
|
|
9509
|
-
searchIcon,
|
|
9509
|
+
React__default.createElement("div", null, searchIcon),
|
|
9510
9510
|
React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "suggestion-item" }, suggestion.title)),
|
|
9511
9511
|
React__default.createElement("div", { className: "underline" }))))) : (React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
|
|
9512
9512
|
};
|
|
@@ -9559,7 +9559,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9559
9559
|
isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
|
|
9560
9560
|
};
|
|
9561
9561
|
|
|
9562
|
-
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: #
|
|
9562
|
+
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}";
|
|
9563
9563
|
n(css$a,{});
|
|
9564
9564
|
|
|
9565
9565
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|