dhre-component-lib 0.8.0 → 0.8.2
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.
|
@@ -20,6 +20,10 @@ export interface CustomInputFieldProps {
|
|
|
20
20
|
disabled?: boolean;
|
|
21
21
|
istoolTip?: boolean;
|
|
22
22
|
toolTipText?: string;
|
|
23
|
+
link?: string;
|
|
24
|
+
handleLink?: () => void;
|
|
25
|
+
linkWrapper?: string;
|
|
26
|
+
linkClassName?: string;
|
|
23
27
|
}
|
|
24
28
|
declare const CustomInputField: React.FC<CustomInputFieldProps>;
|
|
25
29
|
export default CustomInputField;
|
package/dist/index.d.ts
CHANGED
|
@@ -152,6 +152,10 @@ interface CustomInputFieldProps {
|
|
|
152
152
|
disabled?: boolean;
|
|
153
153
|
istoolTip?: boolean;
|
|
154
154
|
toolTipText?: string;
|
|
155
|
+
link?: string;
|
|
156
|
+
handleLink?: () => void;
|
|
157
|
+
linkWrapper?: string;
|
|
158
|
+
linkClassName?: string;
|
|
155
159
|
}
|
|
156
160
|
declare const CustomInputField: React.FC<CustomInputFieldProps>;
|
|
157
161
|
|
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 left: 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 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}\n\n.ToolTipImage {\n position: relative;\n left: 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: left;\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}";
|
|
160
|
+
var css$i = ".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.inputLabelTooltip {\n position: absolute;\n z-index: 1;\n top: 17px;\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}\n\n.ToolTipImage {\n position: relative;\n left: 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: left;\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}";
|
|
161
161
|
n(css$i,{});
|
|
162
162
|
|
|
163
163
|
const common = {
|
|
@@ -12404,7 +12404,7 @@ const TcodeToolTip = styled(({ className, ...props }) => (React__default.createE
|
|
|
12404
12404
|
fontSize: "1rem",
|
|
12405
12405
|
},
|
|
12406
12406
|
}));
|
|
12407
|
-
const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, istoolTip, toolTipText, ...rest }) => {
|
|
12407
|
+
const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placeholder = "", onChange, className = "", inputClassName = "", labelClassName = "", error, errorClassName = "", maxLength = 0, minLength = 0, checkValidation, name, min, disabled = false, istoolTip, toolTipText, link, handleLink, linkWrapper = "", linkClassName = "", ...rest }) => {
|
|
12408
12408
|
const [showLabelOnBorder, setShowLabelOnBorder] = useState(false);
|
|
12409
12409
|
const handleInputValues = (e) => {
|
|
12410
12410
|
onChange?.(e);
|
|
@@ -12433,7 +12433,12 @@ const CustomInputField = ({ label, value = "", type = INPUT_TYPES.TEXT, placehol
|
|
|
12433
12433
|
React__default.createElement("input", { type: type, value: value, name: name, placeholder: showLabelOnBorder ? "" : placeholder, onChange: handleInputValues, onFocus: () => setShowLabelOnBorder(true), onBlur: checkFieldValue,
|
|
12434
12434
|
// className={inputClassName}
|
|
12435
12435
|
className: `${inputClassName} ${error ? "inputError" : ""}`, maxLength: maxLength, minLength: minLength, min: min, disabled: disabled, ...rest }),
|
|
12436
|
-
error && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error))
|
|
12436
|
+
error && !link && (React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName }, error)),
|
|
12437
|
+
error && link && (React__default.createElement("div", { className: linkWrapper },
|
|
12438
|
+
React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: errorClassName },
|
|
12439
|
+
error,
|
|
12440
|
+
React__default.createElement("span", { onClick: handleLink },
|
|
12441
|
+
React__default.createElement(Typography, { variant: "L1", weight: "SEMI_BOLD", className: linkClassName }, link)))))));
|
|
12437
12442
|
};
|
|
12438
12443
|
|
|
12439
12444
|
var css$g = ".container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.spinner {\n border: 2px solid transparent;\n border-radius: 50%;\n border-top: 2px solid currentColor;\n animation: spin 1s linear infinite;\n}\n\n.spinnerInner {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n}\n\n.errorText {\n color: red;\n}\n\n.button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n}\n.button-text {\n background: none;\n}\n.button-outlined {\n border: 1px solid currentColor;\n}\n.button-contained {\n background-color: currentColor;\n color: white;\n}\n.button-primary {\n color: blue;\n}\n.button-secondary {\n color: gray;\n}\n.button-small {\n font-size: 12px;\n}\n.button-medium {\n font-size: 16px;\n}\n.button-large {\n font-size: 20px;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}";
|
|
@@ -22153,7 +22158,7 @@ const Carousel = ({ items }) => {
|
|
|
22153
22158
|
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) }))))));
|
|
22154
22159
|
};
|
|
22155
22160
|
|
|
22156
|
-
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border:
|
|
22161
|
+
var css = ".stepperCircle {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 50%;\n border: 1px 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: 1px 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: 1px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperDisabledDivider {\n width: 88%;\n border: 1px dashed #898989;\n height: 0.125rem;\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.stepperPlainDivider {\n width: 88%;\n border: 1px 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: 1.25rem;\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}";
|
|
22157
22162
|
n(css,{});
|
|
22158
22163
|
|
|
22159
22164
|
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex, displayRightContent, isPaymentPlanFlow, }) => {
|