dhre-component-lib 0.7.2 → 0.7.4
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/index.js
CHANGED
|
@@ -183,7 +183,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
183
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 z-index: 0;\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
|
-
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 }) => {
|
|
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, toolTip, ...rest }) => {
|
|
187
187
|
const [showLabelOnBorder, setShowLabelOnBorder] = React.useState(false);
|
|
188
188
|
const handleInputValues = (e) => {
|
|
189
189
|
onChange?.(e);
|
|
@@ -203,6 +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
|
+
toolTip,
|
|
206
207
|
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__namespace.default.createElement("label", { className: 'inputLabel' },
|
|
207
208
|
placeholder.replace("*", ""),
|
|
208
209
|
placeholder.includes("*") && React__namespace.default.createElement("label", { className: 'astreik' }, "*")),
|
|
@@ -9582,7 +9583,7 @@ const Accordion = ({ icon, title, description, children, border = false, upArrow
|
|
|
9582
9583
|
isOpen && (React__namespace.default.createElement("div", { className: "accordion-content" }, children))));
|
|
9583
9584
|
};
|
|
9584
9585
|
|
|
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
|
+
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 !important;\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
9587
|
n(css$a,{});
|
|
9587
9588
|
|
|
9588
9589
|
const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|
|
@@ -9718,7 +9719,7 @@ className = {}, }) => {
|
|
|
9718
9719
|
variant === "permanent" && (React__namespace.default.createElement("div", { className: `${"sideDrawerContainer"} ${getPositionClass()} ${width} ${classNames}` }, component))));
|
|
9719
9720
|
};
|
|
9720
9721
|
|
|
9721
|
-
var css$6 = ".toggle-switch {\n width: 32.9px;\n height: 20px;\n display: inline-block;\n position: relative;\n cursor: pointer;\n outline: none;\n}\n\n.switch {\n width: 100%;\n height: 100%;\n background-color: #e1e1e1;\n border-radius: 16px;\n position: relative;\n transition: background-color 0.3s ease-in-out;\n}\n.switch.on {\n background-color: #00b578;\n}\n.switch.off {\n background-color: #e1e1e1;\n}\n.switch .slider {\n width: 17.42px;\n height: 17.42px;\n background-color: #ffffff;\n border-radius: 50%;\n position: absolute;\n top: 1px;\n transition: transform 0.3s ease-in-out;\n}\n.switch .slider.slider-on {\n transform: translateX(15px);\n}\n.switch .slider.slider-off {\n transform: translateX(1px);\n}";
|
|
9722
|
+
var css$6 = ".toggle-switch {\n width: 32.9px;\n height: 20px;\n display: inline-block;\n position: relative;\n cursor: pointer;\n outline: none;\n}\n\n.switch {\n width: 100%;\n height: 100%;\n background-color: #e1e1e1;\n border-radius: 16px;\n position: relative;\n transition: background-color 0.3s ease-in-out;\n}\n.switch.on {\n background-color: #00b578;\n}\n.switch.off {\n background-color: #e1e1e1;\n}\n.switch .slider {\n width: 17.42px;\n height: 17.42px;\n background-color: #ffffff;\n border-radius: 50%;\n position: absolute;\n top: 1px;\n opacity: 1 !important;\n transition: transform 0.3s ease-in-out;\n}\n.switch .slider.slider-on {\n transform: translateX(15px);\n}\n.switch .slider.slider-off {\n transform: translateX(1px);\n}";
|
|
9722
9723
|
n(css$6,{});
|
|
9723
9724
|
|
|
9724
9725
|
const ToggleSwitch = ({ initialState = false, onToggle }) => {
|
|
@@ -9928,7 +9929,7 @@ const Carousel = ({ items }) => {
|
|
|
9928
9929
|
React__namespace.default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__namespace.default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
|
|
9929
9930
|
};
|
|
9930
9931
|
|
|
9931
|
-
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border: 2px solid #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n aspect-ratio: 1;\n}\n\n.contentSecondary {\n color: #686868;\n}\n\n.stepperSuccessBorder {\n border: none;\n}\n\n.stepperNotReachedBorder {\n border: 2px solid #a7a7a7;\n}\n\n.stepperAlignment {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.stepperItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.marginRight1 {\n margin-right: 1rem;\n}\n\n.stepperVerticalItem {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n}\n\n.stepperDivider {\n width: 88%;\n border: 2px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n width:
|
|
9932
|
+
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border: 2px solid #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n aspect-ratio: 1;\n}\n\n.contentSecondary {\n color: #686868;\n}\n\n.stepperSuccessBorder {\n border: none;\n}\n\n.stepperNotReachedBorder {\n border: 2px solid #a7a7a7;\n}\n\n.stepperAlignment {\n display: flex;\n flex-direction: row;\n width: 100%;\n align-items: baseline;\n justify-content: space-between;\n}\n\n.stepperItem {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.marginRight1 {\n margin-right: 1rem;\n}\n\n.stepperVerticalItem {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: space-between;\n}\n\n.stepperDivider {\n width: 88%;\n border: 2px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n width: 100%;\n margin: 0 0.75rem;\n background-image: linear-gradient(to right, #686868 50%, rgba(255, 255, 255, 0) 0%);\n background-size: 10px 0.5px;\n background-repeat: repeat-x;\n height: 1px;\n}\n\n.stepperPlainDivider {\n width: 100%;\n border-top: 1px solid #000000;\n margin: 0 0.75rem;\n height: 1px;\n}\n\n.stepperVerticalDivider {\n border-left: 2px solid #000000;\n min-height: 2rem;\n max-height: 100%;\n margin-left: 1rem;\n padding-left: 2rem;\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.stepperVerticalCircle {\n min-width: 2.5rem;\n height: 2.5rem;\n border-radius: 50%;\n border: 2px solid #000000;\n color: #ffffff;\n background: #000000;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n margin-right: 1rem;\n}\n\n.stepperVerticalDisabledDivider {\n width: 1.75rem;\n min-height: 2rem;\n max-height: 100%;\n margin: 0.75rem 0;\n background-image: linear-gradient(#686868 50%, rgba(255, 255, 255, 0) 0%);\n background-position: center;\n background-size: 0.5px 10px;\n background-repeat: repeat-y;\n}\n\n.stepperVerticalPlainDivider {\n width: 2px;\n border-left: 1px solid #00b578;\n min-height: 2rem;\n max-height: 100%;\n margin: 0.75rem 0;\n margin-left: 0.875rem;\n}\n\n.paddingLeft2 {\n padding-left: 2.7rem;\n}\n\n.stepperVerticalAlignment {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.flex {\n display: flex;\n flex-direction: row;\n}\n\n.warning {\n color: #eb8425;\n}\n\n.error {\n color: #eb0542;\n}\n\n.stepperWarningCircle {\n border: 2px solid #eb8425;\n}\n\n.stepperErrorCircle {\n border: 2px solid #eb0542;\n}\n\n.flexCenter {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.marginRight {\n margin-right: 1rem;\n margin-top: -0.3rem;\n}\n\n.column {\n display: flex;\n flex-direction: column;\n}\n\n.typoClass {\n color: #686868;\n margin-top: 4px;\n}";
|
|
9932
9933
|
n(css,{});
|
|
9933
9934
|
|
|
9934
9935
|
const common = {
|