dhre-component-lib 0.6.1 → 0.6.3
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/Tabs/Tabs.d.ts +1 -3
- package/dist/index.d.ts +1 -3
- package/dist/index.esm.js +8 -8
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -180,7 +180,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
180
180
|
return React__namespace.default.createElement("div", { className: classNames, ...props }, children);
|
|
181
181
|
};
|
|
182
182
|
|
|
183
|
-
var css$h = ".
|
|
183
|
+
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}";
|
|
184
184
|
n(css$h,{});
|
|
185
185
|
|
|
186
186
|
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 }) => {
|
|
@@ -203,7 +203,7 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
|
|
|
203
203
|
setShowLabelOnBorder(!!value);
|
|
204
204
|
}, [value]);
|
|
205
205
|
return (React__namespace.default.createElement("div", { className: `${className} ${'inputContainer'}` },
|
|
206
|
-
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: '
|
|
206
|
+
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: 'inputLabel' },
|
|
207
207
|
placeholder.replace("*", ""),
|
|
208
208
|
placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*")),
|
|
209
209
|
React__namespace.default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
@@ -9581,10 +9581,10 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9581
9581
|
isOpen && (React__namespace.default.createElement("div", { className: "accordion-content" }, children))));
|
|
9582
9582
|
};
|
|
9583
9583
|
|
|
9584
|
-
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}";
|
|
9584
|
+
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}";
|
|
9585
9585
|
n(css$a,{});
|
|
9586
9586
|
|
|
9587
|
-
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot
|
|
9587
|
+
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|
|
9588
9588
|
const [selectedTab, setSelectedTab] = React.useState();
|
|
9589
9589
|
const haveDots = ["identification", "", ""];
|
|
9590
9590
|
React.useEffect(() => {
|
|
@@ -9609,11 +9609,11 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot, installmentsOverdue, o
|
|
|
9609
9609
|
React__namespace.default.createElement("button", { key: tab?.value, className: `tab ${selectedTab?.value === tab?.value ? "active" : "inActive"}`, onClick: () => handleTabClick(tab) },
|
|
9610
9610
|
tab?.name,
|
|
9611
9611
|
dot && haveDots.includes(tab.value.toLowerCase()) && (React__namespace.default.createElement("span", { className: "dot" })),
|
|
9612
|
-
tab?.
|
|
9613
|
-
|
|
9612
|
+
tab?.count && tab?.count > 0 &&
|
|
9613
|
+
React__namespace.default.createElement("div", { className: "counts" }, tab?.count))))))));
|
|
9614
9614
|
};
|
|
9615
9615
|
|
|
9616
|
-
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.
|
|
9616
|
+
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}";
|
|
9617
9617
|
n(css$9,{});
|
|
9618
9618
|
|
|
9619
9619
|
function Dropdown(props) {
|
|
@@ -9633,7 +9633,7 @@ function Dropdown(props) {
|
|
|
9633
9633
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
9634
9634
|
openDropdown && (React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
|
|
9635
9635
|
React__namespace.default.createElement("div", { className: "dropPosition" },
|
|
9636
|
-
placeholder && selectedValue && (React__namespace.default.createElement("label", { className: "
|
|
9636
|
+
placeholder && selectedValue && (React__namespace.default.createElement("label", { className: "dropdownLabel" },
|
|
9637
9637
|
placeholder.replace("*", ""),
|
|
9638
9638
|
placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*"))),
|
|
9639
9639
|
React__namespace.default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },
|