dhre-component-lib 0.3.4 → 0.3.5
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/OtpInput/OtpInput.d.ts +2 -2
- package/dist/components/Stepper/Stepper.d.ts +6 -4
- package/dist/index.d.ts +8 -6
- package/dist/index.esm.js +17 -19
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +17 -19
- package/dist/index.js.map +1 -1
- package/dist/theme/colors/colors.scss +4 -1
- package/package.json +1 -1
- package/dist/components/RightDrawer/RightDrawer.d.ts +0 -12
- package/dist/components/RightDrawer/index.d.ts +0 -1
package/dist/index.js
CHANGED
|
@@ -9861,29 +9861,27 @@ const Carousel = ({ items }) => {
|
|
|
9861
9861
|
React__default.default.createElement("div", { className: "carousel-dots" }, items.map((_, index) => (React__default.default.createElement("span", { key: index, "data-testid": `dot-${index}`, className: `dot ${index === currentIndex ? "active" : ""}`, onClick: () => handleDotClick(index) }))))));
|
|
9862
9862
|
};
|
|
9863
9863
|
|
|
9864
|
-
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 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}";
|
|
9864
|
+
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}";
|
|
9865
9865
|
n(css,{});
|
|
9866
9866
|
|
|
9867
|
-
const Stepper = ({ submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex }) => {
|
|
9867
|
+
const Stepper = ({ variant, dividerWidth, submittedDate, component, status, statusIcon, successIcon, currentStep, stepperData, type, alignment, showLabelIndex }) => {
|
|
9868
9868
|
return (React__default.default.createElement(React__default.default.Fragment, null,
|
|
9869
9869
|
alignment !== "vertical" && React__default.default.createElement(React__default.default.Fragment, null,
|
|
9870
9870
|
type === "static" &&
|
|
9871
|
-
React__default.default.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React__default.default.createElement(
|
|
9872
|
-
React__default.default.createElement("div", {
|
|
9873
|
-
React__default.default.createElement("div", { className: '
|
|
9874
|
-
|
|
9875
|
-
|
|
9876
|
-
React__default.default.createElement(Typography, { variant: 'B2', weight: 'SEMI_BOLD' }, val?.name)))))),
|
|
9871
|
+
React__default.default.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React__default.default.createElement("div", { key: val.id, style: { width: val.id < stepperData.length ? 100 / (stepperData.length - 1) + '%' : '' } },
|
|
9872
|
+
React__default.default.createElement("div", { className: 'stepperItem' },
|
|
9873
|
+
React__default.default.createElement("div", { className: 'stepperCircle' }, showLabelIndex ? val.id : ''),
|
|
9874
|
+
val.id < stepperData.length && React__default.default.createElement("div", { className: 'stepperDivider' }, " ")),
|
|
9875
|
+
React__default.default.createElement(Typography, { variant: variant, weight: 'SEMI_BOLD' }, val?.name))))),
|
|
9877
9876
|
type === "dynamic" &&
|
|
9878
|
-
React__default.default.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React__default.default.createElement(
|
|
9879
|
-
React__default.default.createElement("div", {
|
|
9880
|
-
React__default.default.createElement("div", { className: '
|
|
9881
|
-
|
|
9882
|
-
|
|
9883
|
-
|
|
9884
|
-
React__default.default.createElement(Typography, { className: (currentStep && (currentStep < val.id)) ? 'contentSecondary' : '', variant: 'B2', weight: 'SEMI_BOLD' }, val?.name))))))),
|
|
9877
|
+
React__default.default.createElement("div", { className: 'stepperAlignment' }, stepperData?.map((val) => (React__default.default.createElement("div", { key: val.id, style: { width: val.id < stepperData.length ? 100 / (stepperData.length - 1) + '%' : '' } },
|
|
9878
|
+
React__default.default.createElement("div", { className: 'stepperItem' },
|
|
9879
|
+
(currentStep && (currentStep === val.id || currentStep < val.id)) && React__default.default.createElement("div", { className: `${'stepperCircle'} ${currentStep < val.id ? 'stepperNotReachedBorder' : ""}` }, showLabelIndex ? val.id : ''),
|
|
9880
|
+
(currentStep && currentStep > val.id) && React__default.default.createElement("div", { className: `${'stepperCircle'} ${'stepperSuccessBorder'}` }, successIcon),
|
|
9881
|
+
val.id < stepperData.length && React__default.default.createElement("div", { className: (currentStep && currentStep > val.id) ? 'stepperPlainDivider' : 'stepperDisabledDivider', style: { width: dividerWidth ?? '' } }, " ")),
|
|
9882
|
+
React__default.default.createElement(Typography, { className: (currentStep && (currentStep < val.id)) ? 'contentSecondary' : '', variant: variant, weight: 'SEMI_BOLD' }, val?.name)))))),
|
|
9885
9883
|
alignment === "vertical" && React__default.default.createElement(React__default.default.Fragment, null,
|
|
9886
|
-
type === "dynamic" &&
|
|
9884
|
+
type === "dynamic" &&
|
|
9887
9885
|
React__default.default.createElement("div", { className: 'stepperVerticalAlignment' }, stepperData?.map((val) => (React__default.default.createElement(React__default.default.Fragment, null,
|
|
9888
9886
|
React__default.default.createElement("div", { className: 'stepperVerticalItem' },
|
|
9889
9887
|
React__default.default.createElement("div", { className: 'flex' },
|
|
@@ -9899,14 +9897,14 @@ const Stepper = ({ submittedDate, component, status, statusIcon, successIcon, cu
|
|
|
9899
9897
|
((currentStep && (val.id < currentStep)) || ((currentStep === val.id) && status !== "Pending")) && React__default.default.createElement("div", null, submittedDate),
|
|
9900
9898
|
" ",
|
|
9901
9899
|
React__default.default.createElement("div", null, val.component),
|
|
9902
|
-
" "))))))
|
|
9903
|
-
type === "static" &&
|
|
9900
|
+
" ")))))),
|
|
9901
|
+
type === "static" &&
|
|
9904
9902
|
React__default.default.createElement("div", { className: 'stepperVerticalAlignment' }, stepperData?.map((val) => (React__default.default.createElement(React__default.default.Fragment, null,
|
|
9905
9903
|
React__default.default.createElement("div", { className: 'stepperVerticalItem' },
|
|
9906
9904
|
React__default.default.createElement("div", { className: 'flexCenter' },
|
|
9907
9905
|
React__default.default.createElement("div", { className: 'stepperVerticalCircle' }, showLabelIndex ? val.id : ''),
|
|
9908
9906
|
React__default.default.createElement(Typography, { variant: 'B2', weight: 'SEMI_BOLD' }, val?.name))),
|
|
9909
|
-
React__default.default.createElement("div", null, val.id < stepperData.length && React__default.default.createElement("div", { className: 'stepperVerticalDivider' }, " ")))))))))
|
|
9907
|
+
React__default.default.createElement("div", null, val.id < stepperData.length && React__default.default.createElement("div", { className: 'stepperVerticalDivider' }, " ")))))))));
|
|
9910
9908
|
};
|
|
9911
9909
|
|
|
9912
9910
|
exports.Accordian = Accordion;
|