dhre-component-lib 0.6.1 → 0.6.3

package/dist/components/Tabs/Tabs.d.ts

@@ -3,15 +3,13 @@ import "./Tabs.module.scss";
 type Tab = {
     name: string;
     value: string;
+    count?: number;
 };
 interface TabsProps {
     tabs: Tab[];
     onTabChange: (selectedTab: Tab) => void;
     selectedTabValue?: string;
     dot?: boolean;
-    installmentsOverdue?: boolean;
-    otherchargesOverdue?: boolean;
-    OverdueDotImg?: any;
 }
 declare const Tabs: React.FC<TabsProps>;
 export default Tabs;

package/dist/index.d.ts

@@ -270,15 +270,13 @@ declare const Accordion: React.FC<AccordionProps>;
 type Tab = {
     name: string;
     value: string;
+    count?: number;
 };
 interface TabsProps {
     tabs: Tab[];
     onTabChange: (selectedTab: Tab) => void;
     selectedTabValue?: string;
     dot?: boolean;
-    installmentsOverdue?: boolean;
-    otherchargesOverdue?: boolean;
-    OverdueDotImg?: any;
 }
 declare const Tabs: React.FC<TabsProps>;
 

package/dist/index.esm.js

@@ -157,7 +157,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
     return React__default.createElement("div", { className: classNames, ...props }, children);
 };
 
-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}\n\n.astreik {\n  color: #eb0542;\n}\n\ninput::-webkit-contacts-auto-fill-button {\n  box-shadow: 0 0 0px 1000px white inset !important;\n  -webkit-text-fill-color: inherit !important;\n  background-image: none !important;\n  mask-image: none;\n}";
+var css$h = ".inputLabel {\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}\n\n.astreik {\n  color: #eb0542;\n}\n\ninput::-webkit-contacts-auto-fill-button {\n  box-shadow: 0 0 0px 1000px white inset !important;\n  -webkit-text-fill-color: inherit !important;\n  background-image: none !important;\n  mask-image: none;\n}";
 n(css$h,{});
 
 const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, ...rest }) => {
@@ -180,7 +180,7 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
         setShowLabelOnBorder(!!value);
     }, [value]);
     return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
-        ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'label' },
+        ((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputLabel' },
             placeholder.replace("*", ""),
             placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
         React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, 
@@ -9558,10 +9558,10 @@ 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}";
+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}";
 n(css$a,{});
 
-const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, installmentsOverdue, otherchargesOverdue, OverdueDotImg }) => {
+const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
     const [selectedTab, setSelectedTab] = useState();
     const haveDots = ["identification", "", ""];
     useEffect(() => {
@@ -9586,11 +9586,11 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, installmentsOverdue, o
             React__default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
                 tab?.name,
                 dot && haveDots.includes(tab.value.toLowerCase()) && (React__default.createElement("span", { className: "dot" })),
-                tab?.value == "Installments" && installmentsOverdue && React__default.createElement(OverdueDotImg, null),
-                tab?.value == "Other charges" && otherchargesOverdue && React__default.createElement(OverdueDotImg, null))))))));
+                tab?.count && tab?.count > 0 &&
+                    React__default.createElement("div", { className: "counts" }, tab?.count))))))));
 };
 
-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  z-index: 1;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.label {\n  position: absolute;\n  z-index: 2;\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}";
+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  z-index: 1;\n}\n\n.astreik {\n  color: #eb0542;\n}\n\n.dropdownLabel {\n  position: absolute;\n  z-index: 2;\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}";
 n(css$9,{});
 
 function Dropdown(props) {
@@ -9610,7 +9610,7 @@ function Dropdown(props) {
     return (React__default.createElement(React__default.Fragment, null,
         openDropdown && (React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
         React__default.createElement("div", { className: "dropPosition" },
-            placeholder && selectedValue && (React__default.createElement("label", { className: "label" },
+            placeholder && selectedValue && (React__default.createElement("label", { className: "dropdownLabel" },
                 placeholder.replace("*", ""),
                 placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*"))),
             React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },