dhre-component-lib 0.6.9 → 0.7.1

package/dist/components/Search/Search.d.ts

@@ -4,7 +4,7 @@ interface Suggestion {
     id: string;
     title: string;
     faqAnswer: string;
-    faqQuestion: string;
+    faqQuestion: any;
     fieldFaqCategory: string;
     isBookmarked: boolean;
     images: string[];

package/dist/index.d.ts

@@ -223,7 +223,7 @@ interface Suggestion {
     id: string;
     title: string;
     faqAnswer: string;
-    faqQuestion: string;
+    faqQuestion: any;
     fieldFaqCategory: string;
     isBookmarked: boolean;
     images: string[];

package/dist/index.esm.js

@@ -9422,7 +9422,7 @@ const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDel
                     React__default.createElement("div", { className: (timer > 0 || disableResend) ? "resendText" : "enabledResendText" }, resendText)))))));
 };
 
-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: 91%;\n    top: 13rem;\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}";
+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}";
 n(css$d,{});
 
 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
             query && !disabled && (React__default.createElement("span", { onClick: handleClear, className: "cross-icon" }, crossIcon))),
         showSuggestions && (React__default.createElement("div", { className: "suggestions-dropdown" }, filteredSuggestions.length > 0 ? (filteredSuggestions.map((suggestion) => (React__default.createElement(React__default.Fragment, { key: suggestion.id },
             React__default.createElement("button", { onClick: () => handleSelectSuggestion(suggestion), className: "row" },
-                searchIcon,
+                React__default.createElement("div", null, searchIcon),
                 React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "suggestion-item" }, suggestion.title)),
             React__default.createElement("div", { className: "underline" }))))) : (React__default.createElement(Typography, { variant: "B4", weight: "SEMI_BOLD", className: "no-suggestions" }, "No results found"))))));
 };
@@ -9559,7 +9559,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
         isOpen && (React__default.createElement("div", { className: "accordion-content" }, children))));
 };
 
-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  gap: 0.5rem;\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}\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}";
+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}";
 n(css$a,{});
 
 const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
@@ -9631,20 +9631,32 @@ function Dropdown(props) {
                 React__default.createElement(Typography, { variant: "B3", weight: "SEMI_BOLD" }, val.name)))))))));
 }
 
-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.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}";
+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}";
 n(css$8,{});
 
 function TextArea(props) {
     const { value, onChange, requiredLimit, placeholder, charText, property } = props;
+    const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
     const checkSpecialChar = (e) => {
         if (!/[0-9a-zA-Z ]/.test(e.key)) {
             e.preventDefault();
         }
         console.log('textAraea');
     };
-    return (React__default.createElement(React__default.Fragment, null,
+    const checkFieldValue = (e) => {
+        if (!e.key) {
+            setShowLabelOnBorder(false);
+        }
+    };
+    useEffect(() => {
+        setShowLabelOnBorder(!!value);
+    }, [value]);
+    return (React__default.createElement("div", { className: "positionRel" },
         React__default.createElement("div", { className: "textArea100" },
-            React__default.createElement("textarea", { value: value, onChange: (event) => onChange(event, property), onKeyDown: checkSpecialChar, maxLength: Number(requiredLimit), className: `textArea ${value && value?.length > Number(requiredLimit) ? "maxLimitArea" : ""}`, placeholder: placeholder })),
+            ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputTextAreaLabel' },
+                placeholder.replace("*", ""),
+                placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
+            React__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 })),
         React__default.createElement(Typography, { className: `characters ${value &&
                 value?.length > Number(requiredLimit) ? "maxLimit" : ""}`, variant: "L1", weight: "SEMI_BOLD" },
             value?.length ?? 0,