dhre-component-lib 0.8.18 → 0.8.20
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 +12 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +12 -10
- 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$i = ".inputLabel {\n position: absolute;\n z-index: 1;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.inputLabelTooltip {\n position: absolute;\n z-index: 1;\n top: 17px;\n inset-inline-start: 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}\n\n.ToolTipImage {\n position: relative;\n inset-inline-start: 87.5%;\n z-index: 2;\n top: 2.75rem;\n cursor: pointer;\n}\n\n.tooltipwrapper {\n display: flex;\n flex-direction: row !important;\n gap: 1rem;\n}\n\n.tooltipText {\n font-family: Meraas Aktiv;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-align: start;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n color: #000000;\n max-width: 17.1875rem;\n}\n\n.tooltip {\n cursor: pointer;\n}\n\n.linkWrapper {\n display: flex;\n gap: 1;\n}\n\n.linkClassName {\n text-decoration: underline;\n cursor: pointer;\n color: #eb0542;\n}";
|
|
160
|
+
var css$i = ".inputLabel {\n position: absolute;\n z-index: 1;\n top: -10px;\n inset-inline-start: 11px;\n background: #ffffff;\n padding: 0 6px;\n transition: all 0.3s ease-out;\n}\n\n.inputLabelTooltip {\n position: absolute;\n z-index: 1;\n top: 17px;\n inset-inline-start: 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}\n\n.ToolTipImage {\n position: relative;\n inset-inline-start: 87.5%;\n z-index: 2;\n top: 2.75rem;\n cursor: pointer;\n}\n\n.tooltipwrapper {\n display: flex;\n flex-direction: row !important;\n gap: 1rem;\n}\n\n.tooltipText {\n font-family: Meraas Aktiv;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-align: start;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n color: #000000;\n max-width: 17.1875rem;\n}\n\n.tooltip {\n cursor: pointer;\n}\n\n.linkWrapper {\n display: flex;\n gap: 1;\n}\n\n.linkClassName {\n text-decoration: underline;\n cursor: pointer;\n color: #eb0542;\n}\n\n.emailField {\n direction: ltr;\n}\n\n.emailField:placeholder-shown {\n direction: inherit;\n}";
|
|
161
161
|
n(css$i,{});
|
|
162
162
|
|
|
163
163
|
const common = {
|
|
@@ -12423,16 +12423,14 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
|
|
|
12423
12423
|
useEffect(() => {
|
|
12424
12424
|
setShowLabelOnBorder(!!value);
|
|
12425
12425
|
}, [value]);
|
|
12426
|
-
return (React__default.createElement("div", { className: `${className}
|
|
12426
|
+
return (React__default.createElement("div", { className: `${className} inputContainer` },
|
|
12427
12427
|
istoolTip && (React__default.createElement(TcodeToolTip, { className: "Tooltip", title: React__default.createElement(Grid, { className: "tooltipwrapper" },
|
|
12428
12428
|
React__default.createElement(Typography, { className: "tooltipText" }, toolTipText)), placement: "bottom-end" },
|
|
12429
12429
|
React__default.createElement("img", { src: "/assets/svg-images/Info.svg", alt: "Info1", className: "ToolTipImage" }))),
|
|
12430
12430
|
((placeholder && showLabelOnBorder) || (placeholder && value)) && (React__default.createElement("label", { className: istoolTip ? "inputLabelTooltip" : "inputLabel" },
|
|
12431
12431
|
placeholder.replace("*", ""),
|
|
12432
12432
|
placeholder.includes("*") && React__default.createElement("label", { className: "astreik" }, "*"))),
|
|
12433
|
-
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
12434
|
-
// className={inputClassName}
|
|
12435
|
-
className: `${inputClassName} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
|
|
12433
|
+
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue, className: `${inputClassName} ${type === INPUT_TYPES.EMAIL ? "emailField" : ""} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
|
|
12436
12434
|
error && !link && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error)),
|
|
12437
12435
|
error && link && (React__default.createElement("div", { className: linkWrapper },
|
|
12438
12436
|
React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName },
|
|
@@ -21599,7 +21597,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
|
|
|
21599
21597
|
}
|
|
21600
21598
|
};
|
|
21601
21599
|
|
|
21602
|
-
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px 0;\n width: 343px;\n}\n\n.otpInputDiv {\n flex-direction: row;\n gap: 12px;\n display: flex;\n}\n\n.otpInput {\n width: calc(25% - 9px);\n height: 48px;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n border-radius: 8px;\n}\n@media (max-width: 600px) {\n .otpInput {\n height: 40px;\n }\n}\n\n.otpInput:focus-visible {\n outline: none;\n border: 1px solid #000000 !important;\n}\n\n.otpInput::-webkit-inner-spin-button {\n display: none;\n}\n\n.resendContainer {\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n justify-content: space-between;\n}\n\n.errorText {\n color: #EB0542;\n font-weight: 400;\n font-size: 14px;\n}\n\n.timerText {\n color: #0569C2;\n font-weight: 400;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n\n.resendText {\n color: #A7A7A7;\n font-weight: 700;\n font-size: 14px;\n}\n\n.enabledResendText {\n color: #000000;\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21600
|
+
var css$e = ".otpMainContainer {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 10px 0;\n width: 343px;\n direction: ltr;\n}\n\n.otpInputDiv {\n flex-direction: row;\n gap: 12px;\n display: flex;\n}\n\n.otpInput {\n width: calc(25% - 9px);\n height: 48px;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n border-radius: 8px;\n}\n@media (max-width: 600px) {\n .otpInput {\n height: 40px;\n }\n}\n\n.otpInput:focus-visible {\n outline: none;\n border: 1px solid #000000 !important;\n}\n\n.otpInput::-webkit-inner-spin-button {\n display: none;\n}\n\n.resendContainer {\n display: flex;\n flex-direction: row;\n margin-top: 10px;\n justify-content: space-between;\n}\n\n.errorText {\n color: #EB0542;\n font-weight: 400;\n font-size: 14px;\n}\n\n.timerText {\n color: #0569C2;\n font-weight: 400;\n font-size: 14px;\n display: flex;\n align-items: center;\n}\n\n.resendText {\n color: #A7A7A7;\n font-weight: 700;\n font-size: 14px;\n}\n\n.enabledResendText {\n color: #000000;\n font-weight: 700;\n font-size: 14px;\n}";
|
|
21603
21601
|
n(css$e,{});
|
|
21604
21602
|
|
|
21605
21603
|
const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, showResendButton = true, className, inputClassName, disableResend, icon, noResendButtonText, secondText = "secs", patternRegex = null, }) => {
|
|
@@ -22003,7 +22001,7 @@ const ToggleSwitch = ({ initialState = false, onToggle }) => {
|
|
|
22003
22001
|
React__default.createElement("div", { className: `slider ${isToggled ? 'slider-on' : 'slider-off'}` }))));
|
|
22004
22002
|
};
|
|
22005
22003
|
|
|
22006
|
-
var css$5 = ".swipe-action-wrapper {\n position: relative;\n width: 100%;\n}\n.swipe-action-wrapper .swipe-actions {\n position: absolute;\n top: 0;\n
|
|
22004
|
+
var css$5 = ".swipe-action-wrapper {\n position: relative;\n width: 100%;\n}\n.swipe-action-wrapper .swipe-actions {\n position: absolute;\n top: 0;\n inset-inline-end: 0;\n height: 100%;\n display: flex;\n gap: 10px;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease-in-out;\n}\n.swipe-action-wrapper .swipe-actions.active {\n opacity: 1;\n pointer-events: all;\n}\n.swipe-action-wrapper .swipe-actions.active::before {\n content: \"\";\n position: absolute;\n top: 0;\n inset-inline-end: 0;\n width: 125%;\n height: 100%;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0.735) 0%, #ffffff 50%);\n pointer-events: none;\n}\n.swipe-action-wrapper .swipe-actions button {\n border: none;\n padding: 10px;\n cursor: pointer;\n background: none;\n transition: transform 0.2s, box-shadow 0.2s ease-in-out;\n z-index: 2;\n}\n.swipe-action-wrapper .swipe-actions button:hover {\n transform: translateY(-2px);\n}\n.swipe-action-wrapper:hover .swipe-actions {\n opacity: 1;\n pointer-events: all;\n}";
|
|
22007
22005
|
n(css$5,{});
|
|
22008
22006
|
|
|
22009
22007
|
const HoverOptionsWrapper = ({ children, onPin, onRead, onDelete, pinIcon, readIcon, deleteIcon, swipeThreshold = 50 }) => {
|
|
@@ -22137,13 +22135,17 @@ const Toast = ({ icon, text, onActionText, onAction, onHide, type, className, du
|
|
|
22137
22135
|
" "));
|
|
22138
22136
|
};
|
|
22139
22137
|
|
|
22140
|
-
var css$2 = ".range {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: #a7a7a7;\n width: 100%;\n}\n\n.satisfiedText {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-top: 1rem;\n}\n\n.rangeBorder {\n width: 2px;\n height: 0.5rem;\n background: #a7a7a7;\n}\n\n.rangeSelectedBorder {\n width: 2px;\n height: 0.5rem;\n background: #000000;\n}\n\n.rangeMarginTop {\n margin-top: 1.4rem;\n}\n\n.rangeLabelColor {\n color: #000000;\n}\n\n.rangeLabels {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 1.625rem;\n}\n\n.slidecontainer {\n width: 100%;\n}\n\n.slider {\n -webkit-appearance: none;\n width: 100%;\n height: 0.5rem;\n border-radius: 6.25rem;\n background: #cecece;\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n}\n\n.slider:hover {\n opacity: 1;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 1.625rem;\n height: 1.625rem;\n border-radius: 50%;\n background: #ffffff;\n cursor: pointer;\n box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2509803922);\n}\n\n.slider::-moz-range-thumb {\n width: 1.625rem;\n height: 1.625rem;\n border-radius: 50%;\n background: #000000;\n cursor: pointer;\n}";
|
|
22138
|
+
var css$2 = ".range {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n color: #a7a7a7;\n width: 100%;\n}\n\n.satisfiedText {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin-top: 1rem;\n}\n\n.rangeBorder {\n width: 2px;\n height: 0.5rem;\n background: #a7a7a7;\n}\n\n.rangeSelectedBorder {\n width: 2px;\n height: 0.5rem;\n background: #000000;\n}\n\n.rangeMarginTop {\n margin-top: 1.4rem;\n}\n\n.rangeLabelColor {\n color: #000000;\n}\n\n.rangeLabels {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 1.625rem;\n cursor: pointer;\n}\n\n.slidecontainer {\n width: 100%;\n}\n\n.slider {\n -webkit-appearance: none;\n width: 100%;\n height: 0.5rem;\n border-radius: 6.25rem;\n background: #cecece;\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n}\n\n.slider:hover {\n opacity: 1;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 1.625rem;\n height: 1.625rem;\n border-radius: 50%;\n background: #ffffff;\n cursor: pointer;\n box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2509803922);\n}\n\n.slider::-moz-range-thumb {\n width: 1.625rem;\n height: 1.625rem;\n border-radius: 50%;\n background: #000000;\n cursor: pointer;\n}";
|
|
22141
22139
|
n(css$2,{});
|
|
22142
22140
|
|
|
22143
22141
|
const RangeSlider = (props) => {
|
|
22144
|
-
const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1, property } = props;
|
|
22142
|
+
const { sliderLimit, minRange, maxRange, text1, text2, getSliderValue, value, rangeMultiples = 1, property, } = props;
|
|
22145
22143
|
return (React__default.createElement(React__default.Fragment, null,
|
|
22146
|
-
React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { key: index, className: "rangeLabels"
|
|
22144
|
+
React__default.createElement("div", { className: "range" }, Array.from({ length: sliderLimit }).map((_, index) => (React__default.createElement("div", { key: index, className: "rangeLabels", onClick: () => {
|
|
22145
|
+
if (getSliderValue) {
|
|
22146
|
+
getSliderValue({ target: { value: `${index}` } }, property);
|
|
22147
|
+
}
|
|
22148
|
+
} },
|
|
22147
22149
|
React__default.createElement(Typography, { className: Number(value) === index ? "rangeLabelColor" : "", variant: "B3", weight: Number(value) === index ? "BOLD" : "SEMI_BOLD" }, index % rangeMultiples === 0 ? index : " "),
|
|
22148
22150
|
React__default.createElement("div", { className: `${Number(value) === index ? "rangeSelectedBorder" : "rangeBorder"} ${index % rangeMultiples !== 0 ? "rangeMarginTop" : ""}` }))))),
|
|
22149
22151
|
React__default.createElement("div", { className: "slidecontainer" },
|