dhre-component-lib 0.6.2 → 0.6.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.esm.js +5 -5
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -157,7 +157,7 @@ const Typography = ({ variant = 'B1', weight = 'MEDIUM', children, className, ..
|
|
|
157
157
|
return React__default.createElement("div", { className: classNames, ...props }, children);
|
|
158
158
|
};
|
|
159
159
|
|
|
160
|
-
var css$h = ".
|
|
160
|
+
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}";
|
|
161
161
|
n(css$h,{});
|
|
162
162
|
|
|
163
163
|
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
|
|
|
180
180
|
setShowLabelOnBorder(!!value);
|
|
181
181
|
}, [value]);
|
|
182
182
|
return (React__default.createElement("div", { className: `${className} ${'inputContainer'}` },
|
|
183
|
-
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: '
|
|
183
|
+
((placeholder && showLabelOnBorder) || (placeholder && value)) && React__default.createElement("label", { className: 'inputLabel' },
|
|
184
184
|
placeholder.replace("*", ""),
|
|
185
185
|
placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*")),
|
|
186
186
|
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
@@ -9590,7 +9590,7 @@ const Tabs = ({ tabs, onTabChange, selectedTabValue, dot }) => {
|
|
|
9590
9590
|
React__default.createElement("div", { className: "counts" }, tab?.count))))))));
|
|
9591
9591
|
};
|
|
9592
9592
|
|
|
9593
|
-
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.
|
|
9593
|
+
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}";
|
|
9594
9594
|
n(css$9,{});
|
|
9595
9595
|
|
|
9596
9596
|
function Dropdown(props) {
|
|
@@ -9610,7 +9610,7 @@ function Dropdown(props) {
|
|
|
9610
9610
|
return (React__default.createElement(React__default.Fragment, null,
|
|
9611
9611
|
openDropdown && (React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: "backdropDropdown" })),
|
|
9612
9612
|
React__default.createElement("div", { className: "dropPosition" },
|
|
9613
|
-
placeholder && selectedValue && (React__default.createElement("label", { className: "
|
|
9613
|
+
placeholder && selectedValue && (React__default.createElement("label", { className: "dropdownLabel" },
|
|
9614
9614
|
placeholder.replace("*", ""),
|
|
9615
9615
|
placeholder.includes("*") && React__default.createElement("label", { className: 'astreik' }, "*"))),
|
|
9616
9616
|
React__default.createElement("div", { onClick: () => setOpenDropdown(!openDropdown), className: `${"dropdown"} ${className}` },
|
|
@@ -9884,7 +9884,7 @@ const Carousel = ({ items }) => {
|
|
|
9884
9884
|
React__default.createElement("div", { className: "carousel-dots" }, items?.map((_, index) => (React__default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
|
|
9885
9885
|
};
|
|
9886
9886
|
|
|
9887
|
-
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}\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: 88%;\n border: 2px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n width: 88%;\n border: 2px solid #000000;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\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: 50%;\n border-left: 2px dashed #898989;\n min-height: 1rem;\n max-height: 100%;\n margin-left: 0.7rem;\n padding-left: 2rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n width: 50%;\n border-left: 2px solid #00b578;\n min-height: 1rem;\n max-height: 100%;\n margin-left: 0.7rem;\n padding-left: 2rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\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}";
|
|
9887
|
+
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: 88%;\n border: 2px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n width: 88%;\n border: 2px solid #000000;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\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: 50%;\n border-left: 2px dashed #898989;\n min-height: 1rem;\n max-height: 100%;\n margin-left: 0.7rem;\n padding-left: 2rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.stepperVerticalPlainDivider {\n width: 50%;\n border-left: 2px solid #00b578;\n min-height: 1rem;\n max-height: 100%;\n margin-left: 0.7rem;\n padding-left: 2rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\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}";
|
|
9888
9888
|
n(css,{});
|
|
9889
9889
|
|
|
9890
9890
|
const common = {
|