@erpsquad/common 1.8.40 → 1.8.42

package/dist/components/calculation-summary/components/total-summary/index.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material"),o=require("../../../accordion/accordion/index.js"),t=require("../../../typography/typography/index.js");exports.default=({data:a})=>/* @__PURE__ */e.jsx(o.default,{title:/* @__PURE__ */e.jsx(t.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:"Total"}),accordionProps:{defaultExpanded:!0,sx:{borderBottomWidth:1,"& .MuiAccordionSummary-root":{borderBottomWidth:1}}},children:/* @__PURE__ */e.jsxs(r.Box,{className:"calculationSummary--SummaryContainer",children:[
-/* @__PURE__ */e.jsxs(r.Box,{className:"calculationSummary--SummaryItem",children:[
-/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Grand Total"}),
-/* @__PURE__ */e.jsxs(t.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:[a.currencySymbol," ",a.total]})]}),Number(a.roundOffDifferenceAmount)>0&&/* @__PURE__ */e.jsxs(r.Box,{className:"calculationSummary--SummaryItem",children:[
-/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Round Off Difference"}),
-/* @__PURE__ */e.jsxs(t.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:[a.currencySymbol," ",a.roundOffDifferenceAmount]})]})]})});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../accordion/accordion/index.js"),o=require("../../../typography/typography/index.js"),t=require("../../../../node_modules/@mui/material/Box/Box/index.js");exports.default=({data:a})=>/* @__PURE__ */e.jsx(r.default,{title:/* @__PURE__ */e.jsx(o.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:"Total"}),accordionProps:{defaultExpanded:!0,sx:{borderBottomWidth:1,"& .MuiAccordionSummary-root":{borderBottomWidth:1}}},children:/* @__PURE__ */e.jsxs(t.default,{className:"calculationSummary--SummaryContainer",children:[
+/* @__PURE__ */e.jsxs(t.default,{className:"calculationSummary--SummaryItem",children:[
+/* @__PURE__ */e.jsx(o.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Grand Total"}),
+/* @__PURE__ */e.jsxs(o.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:[a.currencySymbol," ",a.total]})]}),Number(a.roundOffDifferenceAmount)>0&&/* @__PURE__ */e.jsxs(t.default,{className:"calculationSummary--SummaryItem",children:[
+/* @__PURE__ */e.jsx(o.Typography,{type:"s5",weight:"medium",color:"theme.secondary.800",children:"Round Off Difference"}),
+/* @__PURE__ */e.jsxs(o.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:[a.currencySymbol," ",a.roundOffDifferenceAmount]})]})]})});
 //# sourceMappingURL=index.js.map

package/dist/components/calculation-summary/components/total-summary/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/calculation-summary/components/total-summary.tsx"],"sourcesContent":["import { Box } from '@mui/material';\n\nimport Accordion from '../../accordion/accordion';\nimport Typography from '../../typography/typography';\n\nexport interface ITotalSummary {\n\ttotal: string | number;\n\troundOffDifferenceAmount: number | string;\n\tcurrencySymbol: string;\n}\ninterface ITotalSummaryProps {\n\tdata: ITotalSummary;\n}\n\nconst TotalSummary: React.FC<ITotalSummaryProps> = ({ data }) => {\n\treturn (\n\t\t<Accordion\n\t\t\ttitle={\n\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\tTotal\n\t\t\t\t</Typography>\n\t\t\t}\n\t\t\taccordionProps={{\n\t\t\t\tdefaultExpanded: true,\n\t\t\t\tsx: {\n\t\t\t\t\tborderBottomWidth: 1,\n\t\t\t\t\t'& .MuiAccordionSummary-root': { borderBottomWidth: 1 }\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t<Box className='calculationSummary--SummaryContainer'>\n\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\tGrand Total\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{data.currencySymbol} {data.total}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{Number(data.roundOffDifferenceAmount) > 0 && \n\t\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\t\tRound Off Difference\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t\t{data.currencySymbol} {data.roundOffDifferenceAmount}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t</Box>\n\t\t</Accordion>\n\t);\n};\n\nexport default TotalSummary;\n"],"names":["data","jsx","Accordion","title","Typography","type","weight","color","children","accordionProps","defaultExpanded","sx","borderBottomWidth","jsxs","Box","className","currencySymbol","total","Number","roundOffDifferenceAmount"],"mappings":"0PAcmD,EAAGA,yBAEpDC,EAAAA,IAACC,EAAAA,QAAA,CACAC,2BACEC,aAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAAuBC,SAAA,UAIpEC,eAAgB,CACfC,iBAAiB,EACjBC,GAAI,CACHC,kBAAmB,EACnB,8BAA+B,CAAEA,kBAAmB,KAGtDJ,0BAAAK,KAACC,EAAAA,IAAA,CAAIC,UAAU,uCACdP,SAAA;iBAAAK,KAACC,EAAAA,IAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKiB,YAG7BC,OAAOlB,EAAKmB,0BAA4B,kBACxCN,OAACC,EAAAA,IAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKmB"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/calculation-summary/components/total-summary.tsx"],"sourcesContent":["import { Box } from '@mui/material';\n\nimport Accordion from '../../accordion/accordion';\nimport Typography from '../../typography/typography';\n\nexport interface ITotalSummary {\n\ttotal: string | number;\n\troundOffDifferenceAmount: number | string;\n\tcurrencySymbol: string;\n}\ninterface ITotalSummaryProps {\n\tdata: ITotalSummary;\n}\n\nconst TotalSummary: React.FC<ITotalSummaryProps> = ({ data }) => {\n\treturn (\n\t\t<Accordion\n\t\t\ttitle={\n\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\tTotal\n\t\t\t\t</Typography>\n\t\t\t}\n\t\t\taccordionProps={{\n\t\t\t\tdefaultExpanded: true,\n\t\t\t\tsx: {\n\t\t\t\t\tborderBottomWidth: 1,\n\t\t\t\t\t'& .MuiAccordionSummary-root': { borderBottomWidth: 1 }\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t<Box className='calculationSummary--SummaryContainer'>\n\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\tGrand Total\n\t\t\t\t\t</Typography>\n\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t{data.currencySymbol} {data.total}\n\t\t\t\t\t</Typography>\n\t\t\t\t</Box>\n\t\t\t\t{Number(data.roundOffDifferenceAmount) > 0 && \n\t\t\t\t\t<Box className='calculationSummary--SummaryItem'>\n\t\t\t\t\t\t<Typography type='s5' weight='medium' color='theme.secondary.800'>\n\t\t\t\t\t\t\tRound Off Difference\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t<Typography type='s3' weight='medium' color='theme.secondary.1000'>\n\t\t\t\t\t\t\t{data.currencySymbol} {data.roundOffDifferenceAmount}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t</Box>\n\t\t\t\t}\n\t\t\t</Box>\n\t\t</Accordion>\n\t);\n};\n\nexport default TotalSummary;\n"],"names":["data","jsx","Accordion","title","Typography","type","weight","color","children","accordionProps","defaultExpanded","sx","borderBottomWidth","jsxs","Box","className","currencySymbol","total","Number","roundOffDifferenceAmount"],"mappings":"oSAcmD,EAAGA,yBAEpDC,EAAAA,IAACC,EAAAA,QAAA,CACAC,2BACEC,aAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAAuBC,SAAA,UAIpEC,eAAgB,CACfC,iBAAiB,EACjBC,GAAI,CACHC,kBAAmB,EACnB,8BAA+B,CAAEA,kBAAmB,KAGtDJ,0BAAAK,KAACC,EAAAA,QAAA,CAAIC,UAAU,uCACdP,SAAA;iBAAAK,KAACC,EAAAA,QAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKiB,YAG7BC,OAAOlB,EAAKmB,0BAA4B,kBACxCN,OAACC,EAAAA,QAAA,CAAIC,UAAU,kCACdP,SAAA;eAAAP,EAAAA,IAACG,EAAAA,YAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,sBAAsBC,SAAA;sBAGjEJ,EAAAA,WAAA,CAAWC,KAAK,KAAKC,OAAO,SAASC,MAAM,uBAC1CC,SAAA,CAAAR,EAAKgB,eAAe,IAAEhB,EAAKmB"}

package/dist/components/card-wrapper/card-wrapper/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
 /* empty css                             */
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 const CardWrapper = ({ children, ...rest }) => {
   return /* @__PURE__ */ jsx(Box, { className: "card-wrapper", ...rest, children });
 };

package/dist/components/card-wrapper/card-wrapper/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material");,/* empty css                          */exports.default=({children:s,...a})=>/* @__PURE__ */e.jsx(r.Box,{className:"card-wrapper",...a,children:s});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");;/* empty css                          */var r=;/* empty css                                                 */exports.default=({children:s,...a})=>/* @__PURE__ */e.jsx(r.default,{className:"card-wrapper",...a,children:s});
 //# sourceMappingURL=index.js.map

package/dist/components/card-wrapper/card-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n  children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n  return (\n    <Box className=\"card-wrapper\" {...rest}>\n      {children}\n    </Box>\n  );\n};\n\nexport default CardWrapper;\n"],"names":["children","rest","Box","className"],"mappings":"2LAQoB,EAAGA,cAAaC,0BAE/BC,EAAAA,IAAA,CAAIC,UAAU,kBAAmBF,EAC/BD"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/card-wrapper/card-wrapper.tsx"],"sourcesContent":["import { Box } from \"@mui/material\";\nimport \"./card-wrapper.scss\";\nimport React from \"react\";\n\ninterface CardWrapperPropsType {\n  children: React.ReactNode;\n}\n\nconst CardWrapper = ({ children, ...rest }: CardWrapperPropsType) => {\n  return (\n    <Box className=\"card-wrapper\" {...rest}>\n      {children}\n    </Box>\n  );\n};\n\nexport default CardWrapper;\n"],"names":["children","rest","Box","className"],"mappings":"sOAQoB,EAAGA,cAAaC,0BAE/BC,EAAAA,QAAA,CAAIC,UAAU,kBAAmBF,EAC/BD"}

package/dist/components/change-user-password-modal/change-user-password-modal/index.esm.js

@@ -5,15 +5,16 @@ import { useForm } from "react-hook-form";
 import { yupResolver as o } from "../../../node_modules/@hookform/resolvers/yup/dist/yup/index.esm.js";
 import * as Yup from "yup";
 import { useAuth } from "../../../hooks/useAuth/index.esm.js";
-import { styled } from "@mui/system";
-import Box from "@mui/material/Box";
 import { Typography } from "../../typography/typography/index.esm.js";
 import DynamicInput from "../../form-control/form-builder/form-builder-element/text/index.esm.js";
 import Button from "../../button/button/index.esm.js";
 import Toast from "../../toast/toast/index.esm.js";
-import { FormControlLabel, Checkbox } from "@mui/material";
+import styled from "../../../node_modules/@mui/system/esm/styled/index.esm.js";
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import { Eye } from "../../icons/eye/index.esm.js";
 import { EyeOff } from "../../icons/eye-off/index.esm.js";
+import FormControlLabel from "../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+import Checkbox from "../../../node_modules/@mui/material/Checkbox/Checkbox/index.esm.js";
 const validationSchema = Yup.object({
   login: Yup.object({
     password: Yup.string().required("Please enter password").min(8, "Password must be at least 8 characters").matches(/[A-Z]/, "Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/, "Password must contain at least one special character")

package/dist/components/change-user-password-modal/change-user-password-modal/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["yupResolver"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["yupResolver"],"mappings":"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"}

package/dist/components/change-user-password-modal/change-user-password-modal/index.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../modal/modal/index.js"),o=require("react-hook-form"),s=require("../../../node_modules/@hookform/resolvers/yup/dist/yup/index.js"),a=require("yup"),n=require("../../../hooks/useAuth/index.js"),l=require("@mui/system"),i=require("@mui/material/Box"),u=require("../../typography/typography/index.js"),d=require("../../form-control/form-builder/form-builder-element/text/index.js"),c=require("../../button/button/index.js"),m=require("../../toast/toast/index.js"),h=require("@mui/material"),f=require("../../icons/eye/index.js"),p=require("../../icons/eye-off/index.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function j(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=/* @__PURE__ */Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var y=/* @__PURE__ */j(a),g=/* @__PURE__ */x(i);const b=y.object({login:y.object({password:y.string().required("Please enter password").min(8,"Password must be at least 8 characters").matches(/[A-Z]/,"Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/,"Password must contain at least one special character")})});exports.default=({showModal:a,setShowModal:i,userId:x})=>{const{changeUserPasswordByAdmin:j}=n.useAuth(),[y,w]=r.useState(!1),[q,C]=r.useState(null),{control:P,handleSubmit:v,reset:S}=o.useForm({resolver:s.yupResolver(b),mode:"all"}),[k,O]=r.useState(!1),N=l.styled(g.default)(()=>({display:"flex",flexDirection:"column"}));/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),o=require("../../modal/modal/index.js"),s=require("react-hook-form"),t=require("../../../node_modules/@hookform/resolvers/yup/dist/yup/index.js"),a=require("yup"),n=require("../../../hooks/useAuth/index.js"),l=require("../../typography/typography/index.js"),i=require("../../form-control/form-builder/form-builder-element/text/index.js"),d=require("../../button/button/index.js"),u=require("../../toast/toast/index.js"),c=require("../../../node_modules/@mui/system/esm/styled/index.js"),m=require("../../../node_modules/@mui/material/Box/Box/index.js"),h=require("../../icons/eye/index.js"),x=require("../../icons/eye-off/index.js"),f=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),p=require("../../../node_modules/@mui/material/Checkbox/Checkbox/index.js");function j(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=/* @__PURE__ */Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:function(){return e[o]}})}}),r.default=e,r}var g=/* @__PURE__ */j(a);const y=g.object({login:g.object({password:g.string().required("Please enter password").min(8,"Password must be at least 8 characters").matches(/[A-Z]/,"Password must contain at least one uppercase letter").matches(/[!@#$%^&*(),.?":{}|<>]/,"Password must contain at least one special character")})});exports.default=({showModal:a,setShowModal:j,userId:g})=>{const{changeUserPasswordByAdmin:b}=n.useAuth(),[w,q]=r.useState(!1),[C,P]=r.useState(null),{control:v,handleSubmit:k,reset:S}=s.useForm({resolver:t.yupResolver(y),mode:"all"}),[O,F]=r.useState(!1),N=c.default(m.default)(()=>({display:"flex",flexDirection:"column"}));/* @__PURE__ */
 return e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(t.default,{open:a,onClose:()=>i(!1),children:/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("form",{onSubmit:v(async e=>(e.login.id=x,e.login.isNotify=y,await j(e.login,(e,r)=>{r?(C({message:e,type:"normal"}),i(!1),S({login:{password:"",id:"",isNotify:!1}})):C({message:e,type:"alert"})}),e)),children:/* @__PURE__ */e.jsxs(N,{gap:4,className:"popup-change-pass",children:[
+/* @__PURE__ */e.jsx(o.default,{open:a,onClose:()=>j(!1),children:/* @__PURE__ */e.jsx(e.Fragment,{children:/* @__PURE__ */e.jsx("form",{onSubmit:k(async e=>(e.login.id=g,e.login.isNotify=w,await b(e.login,(e,r)=>{r?(P({message:e,type:"normal"}),j(!1),S({login:{password:"",id:"",isNotify:!1}})):P({message:e,type:"alert"})}),e)),children:/* @__PURE__ */e.jsxs(N,{gap:4,className:"popup-change-pass",children:[
 /* @__PURE__ */e.jsxs(N,{gap:2,children:[
-/* @__PURE__ */e.jsx(g.default,{children:/* @__PURE__ */e.jsx(u.Typography,{align:"center",type:"h1",weight:"medium",color:"theme.secondary.1000",children:"Change Password"})}),
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(l.Typography,{align:"center",type:"h1",weight:"medium",color:"theme.secondary.1000",children:"Change Password"})}),
 /* @__PURE__ */e.jsxs(N,{gap:2,children:[
-/* @__PURE__ */e.jsx(g.default,{children:/* @__PURE__ */e.jsx(d.default,{formControl:P,label:"Enter New Password",name:"password",type:k?"text":"password",placeholder:"Enter New Password",fieldArrayName:"login",endIcon:/* @__PURE__ */e.jsx(e.Fragment,{children:k?/* @__PURE__ */e.jsx(f.Eye,{fontSize:"small",htmlColor:"#292D32"}):/* @__PURE__ */e.jsx(p.EyeOff,{fontSize:"small",htmlColor:"#292D32"})}),onIconClick:()=>O(!k)})}),
-/* @__PURE__ */e.jsx(g.default,{children:/* @__PURE__ */e.jsx(h.FormControlLabel,{control:/* @__PURE__ */e.jsx(h.Checkbox,{size:"small",onChange:e=>w(e.target.checked),sx:{"&.Mui-checked":{color:"#2EB273"}}}),label:"Notify User of Password Change",sx:{"& .MuiFormControlLabel-label":{fontSize:"14px"}}})})]})]}),
-/* @__PURE__ */e.jsx(N,{gap:2,children:/* @__PURE__ */e.jsx(c.default,{type:"submit",size:"large",variant:"contained",children:"Change Password"})})]})})})}),
-/* @__PURE__ */e.jsx(m.default,{open:Boolean(q),message:null==q?void 0:q.message,type:null==q?void 0:q.type,handleClose:()=>C(null),anchorOrigin:{horizontal:"right",vertical:"bottom"},autoHideDuration:3e3})]})};
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(i.default,{formControl:v,label:"Enter New Password",name:"password",type:O?"text":"password",placeholder:"Enter New Password",fieldArrayName:"login",endIcon:/* @__PURE__ */e.jsx(e.Fragment,{children:O?/* @__PURE__ */e.jsx(h.Eye,{fontSize:"small",htmlColor:"#292D32"}):/* @__PURE__ */e.jsx(x.EyeOff,{fontSize:"small",htmlColor:"#292D32"})}),onIconClick:()=>F(!O)})}),
+/* @__PURE__ */e.jsx(m.default,{children:/* @__PURE__ */e.jsx(f.default,{control:/* @__PURE__ */e.jsx(p.default,{size:"small",onChange:e=>q(e.target.checked),sx:{"&.Mui-checked":{color:"#2EB273"}}}),label:"Notify User of Password Change",sx:{"& .MuiFormControlLabel-label":{fontSize:"14px"}}})})]})]}),
+/* @__PURE__ */e.jsx(N,{gap:2,children:/* @__PURE__ */e.jsx(d.default,{type:"submit",size:"large",variant:"contained",children:"Change Password"})})]})})})}),
+/* @__PURE__ */e.jsx(u.default,{open:Boolean(C),message:null==C?void 0:C.message,type:null==C?void 0:C.type,handleClose:()=>P(null),anchorOrigin:{horizontal:"right",vertical:"bottom"},autoHideDuration:3e3})]})};
 //# sourceMappingURL=index.js.map

package/dist/components/change-user-password-modal/change-user-password-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["validationSchema","Yup","object","login","password","string","required","min","matches","showModal","setShowModal","userId","changeUserPasswordByAdmin","useAuth","isNotify","setIsNotify","useState","toast","setToast","control","handleSubmit","reset","useForm","resolver","yupResolver","mode","showPassword","setShowPassword","FlexBox","styled","Box","display","flexDirection","jsxs","Fragment","children","jsx","Modal","open","onClose","onSubmit","async","values","id","message","type","gap","className","Typography","align","weight","color","DynamicInput","formControl","label","name","placeholder","fieldArrayName","endIcon","Eye","fontSize","htmlColor","EyeOff","onIconClick","FormControlLabel","Checkbox","size","onChange","e","target","checked","sx","Button","variant","Toast","Boolean","handleClose","anchorOrigin","horizontal","vertical","autoHideDuration"],"mappings":"2mCAiBA,MAAMA,EAAmBC,EAAIC,OAAO,CAClCC,MAAOF,EAAIC,OAAO,CACdE,SAAUH,EAAII,SACHC,SAAS,yBACTC,IAAI,EAAG,0CACPC,QAAQ,QAAS,uDACjBA,QAAQ,yBAA0B,4EAMnB,EAAEC,YAAWC,eAAcC,aACtD,MAAMC,0BAAEA,GAA8BC,aAC/BC,EAAUC,GAAeC,EAAAA,UAAS,IACnCC,EAAOC,GAAYF,EAAAA,SAAwB,OAM5CG,QAAEA,EAAAC,aAASA,EAAAC,MAAcA,GAAUC,EAAAA,QAAoB,CAC3DC,SAAUC,EAAAA,YAAYxB,GACtByB,KAAM,SAwBDC,EAAcC,GAAmBX,EAAAA,UAAkB,GAGnDY,EAAUC,EAAAA,OAAOC,EAAAA,QAAPD,CAAY,KAAA,CACzBE,QAAS,OACTC,cAAe;AAGnB,OACIC,EAAAA,KAAAC,WAAA,CACAC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CACDC,KAAM7B,EACN8B,QAAS,IAAM7B,GAAa,GAC5ByB,wBACEC,EAAAA,IAAAF,EAAAA,SAAA,CACEC,wBAAAC,EAAAA,IAAC,OAAA,CAAKI,SAAUpB,EApCPqB,MAAOC,IACpBA,EAAOvC,MAAMwC,GAAKhC,EAClB+B,EAAOvC,MAAMW,SAAWA,QACpBF,EAA0B8B,EAAOvC,MAAO,CAACyC,EAASC,KAClDA,GACF3B,EAAS,CAAE0B,UAAkBC,KAAM,WACnCnC,GAAa,GACbW,EAAM,CACJlB,MAAO,CACHC,SAAU,GACVuC,GAAI,GACJ7B,UAAU,MAIhBI,EAAS,CAAE0B,UAAkBC,KAAM,YAGhCH,IAmBGP,wBAAAF,EAAAA,KAACL,EAAA,CAAQkB,IAAK,EAAGC,UAAU,oBACzBZ,SAAA;iBAAAF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACY,EAAAA,WAAA,CACCC,MAAM,SACNJ,KAAK,KACLK,OAAO,SACPC,MAAM,uBACPhB,SAAA;iBAIHF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACgB,EAAAA,QAAA,CACCC,YAAalC,EACbmC,MAAM,qBACNC,KAAK,WACLV,KAAMnB,EAAe,OAAS,WAC9B8B,YAAY,qBACZC,eAAe,QACfC,uBACEtB,EAAAA,IAAAF,EAAAA,SAAA,CACGC,SAAAT,iBACCU,MAACuB,EAAAA,IAAA,CAAIC,SAAS,QAAQC,UAAU,iCAE/BC,SAAA,CAAOF,SAAS,QAAQC,UAAU,cAIzCE,YA7CK,IAAMpC,GAAiBD;qBAgD/BI,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAAC4B,EAAAA,iBAAA,CAAkB7C,6BAAU8C,WAAA,CAASC,KAAK,QAAQC,SAAWC,GAAMrD,EAAYqD,EAAEC,OAAOC,SAAUC,GAAI,CACnG,gBAAiB,CACjBpB,MAAO,cAEJG,MAAM,iCAAiCiB,GAAI,CAC9C,+BAAgC,CAChCX,SAAU;eAMpBxB,EAAAA,IAACR,EAAA,CAAQkB,IAAK,EACZX,wBAAAC,EAAAA,IAACoC,UAAA,CAAO3B,KAAK,SAASqB,KAAK,QAAQO,QAAQ,YAAYtC;eASnEC,EAAAA,IAACsC,EAAAA,QAAA,CACGpC,KAAMqC,QAAQ1D,GACd2B,QAAS3B,MAAAA,OAAAA,EAAAA,EAAO2B,QAChBC,KAAM5B,MAAAA,OAAAA,EAAAA,EAAO4B,KACb+B,YAAa,IAAM1D,EAAS,MAC5B2D,aAAc,CAAEC,WAAY,QAASC,SAAU,UAC/CC,iBAAkB"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/change-user-password-modal/change-user-password-modal.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport Modal from \"../modal/modal\";\r\nimport { useForm } from \"react-hook-form\";\r\nimport { LoginFormValues } from \"../../contexts/AuthContext\";\r\nimport { yupResolver } from \"@hookform/resolvers/yup\";\r\nimport * as Yup from \"yup\";\r\nimport { useAuth } from \"../../hooks/useAuth\";\r\nimport { styled } from \"@mui/system\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"../typography/typography\";\r\nimport DynamicInput from \"../form-control/form-builder/form-builder-element/text\";\r\nimport { Eye, EyeOff } from \"../icons\";\r\nimport Button from \"../button/button\";\r\nimport Toast from \"../toast/toast\";\r\nimport { Checkbox, FormControlLabel } from \"@mui/material\";\r\n\r\n\r\nconst validationSchema = Yup.object({\r\n  login: Yup.object({\r\n      password: Yup.string()\r\n                .required(\"Please enter password\")\r\n                .min(8, \"Password must be at least 8 characters\")\r\n                .matches(/[A-Z]/, \"Password must contain at least one uppercase letter\")\r\n                .matches(/[!@#$%^&*(),.?\":{}|<>]/, \"Password must contain at least one special character\"),\r\n  }),\r\n});\r\n\r\n\r\n\r\nconst ChangeUserPasswordModal = ({showModal, setShowModal, userId}) => {\r\n     const { changeUserPasswordByAdmin } = useAuth();\r\n     const [isNotify, setIsNotify] = useState(false);\r\n    const [toast, setToast] = useState<IToast | null>(null);\r\n\r\n    interface FormValeus {\r\n        login: LoginFormValues;\r\n    }\r\n\r\n    const { control, handleSubmit, reset } = useForm<FormValeus>({\r\n      resolver: yupResolver(validationSchema),\r\n      mode: \"all\",\r\n    });\r\n\r\n    const onSubmit = async (values: FormValeus) => {\r\n        values.login.id = userId;\r\n        values.login.isNotify = isNotify;\r\n      await changeUserPasswordByAdmin(values.login, (message, type) => {\r\n        if (type) {\r\n          setToast({ message: message, type: \"normal\" });\r\n          setShowModal(false);\r\n          reset({\r\n            login: {\r\n                password: \"\",\r\n                id: \"\",\r\n                isNotify: false\r\n            },\r\n        });\r\n        } else {\r\n          setToast({ message: message, type: \"alert\" });\r\n        }\r\n      });\r\n      return values;      \r\n    };\r\n\r\n    const [showPassword, setShowPassword] = useState<boolean>(false);\r\n    const handleShowPassword = () => setShowPassword(!showPassword);\r\n\r\n     const FlexBox = styled(Box)(() => ({\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n    }));\r\n\r\n    return (\r\n        <>\r\n        <Modal \r\n        open={showModal}\r\n        onClose={() => setShowModal(false)} \r\n        children={\r\n          <>\r\n            <form onSubmit={handleSubmit(onSubmit)}>\r\n                <FlexBox gap={4} className=\"popup-change-pass\">\r\n                  <FlexBox gap={2}>\r\n                    <Box>\r\n                      <Typography\r\n                        align=\"center\"\r\n                        type=\"h1\"\r\n                        weight=\"medium\"\r\n                        color=\"theme.secondary.1000\"\r\n                      >\r\n                        Change Password\r\n                      </Typography>\r\n                    </Box>\r\n                    <FlexBox gap={2}>\r\n                      <Box>\r\n                        <DynamicInput\r\n                          formControl={control}\r\n                          label=\"Enter New Password\"\r\n                          name=\"password\"\r\n                          type={showPassword ? \"text\" : \"password\"}\r\n                          placeholder=\"Enter New Password\"\r\n                          fieldArrayName=\"login\"\r\n                          endIcon={\r\n                            <>\r\n                              {showPassword ? (\r\n                                <Eye fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              ) : (\r\n                                <EyeOff fontSize=\"small\" htmlColor=\"#292D32\" />\r\n                              )}\r\n                            </>\r\n                          }\r\n                          onIconClick={handleShowPassword}\r\n                        />\r\n                      </Box>\r\n                      <Box>\r\n                        <FormControlLabel  control={<Checkbox size=\"small\" onChange={(e) => setIsNotify(e.target.checked)} sx={{\r\n                            '&.Mui-checked': {\r\n                            color: '#2EB273',\r\n                            },\r\n                        }} />} label=\"Notify User of Password Change\" sx={{ \r\n                            '& .MuiFormControlLabel-label': {\r\n                            fontSize: '14px',\r\n                            },\r\n                        }}/>\r\n                      </Box>\r\n                    </FlexBox>\r\n                  </FlexBox>\r\n                  <FlexBox gap={2}>\r\n                    <Button type=\"submit\" size=\"large\" variant=\"contained\">\r\n                      Change Password\r\n                    </Button>\r\n                  </FlexBox>\r\n                </FlexBox>\r\n              </form>          \r\n          </>\r\n        }\r\n        />\r\n        <Toast\r\n            open={Boolean(toast)}\r\n            message={toast?.message}\r\n            type={toast?.type}\r\n            handleClose={() => setToast(null)}\r\n            anchorOrigin={{ horizontal: \"right\", vertical: \"bottom\" }}\r\n            autoHideDuration={3000}\r\n            />\r\n        </>\r\n    );\r\n}\r\n\r\nexport default ChangeUserPasswordModal;"],"names":["validationSchema","Yup","object","login","password","string","required","min","matches","showModal","setShowModal","userId","changeUserPasswordByAdmin","useAuth","isNotify","setIsNotify","useState","toast","setToast","control","handleSubmit","reset","useForm","resolver","yupResolver","mode","showPassword","setShowPassword","FlexBox","styled","Box","display","flexDirection","jsxs","Fragment","children","jsx","Modal","open","onClose","onSubmit","async","values","id","message","type","gap","className","Typography","align","weight","color","DynamicInput","formControl","label","name","placeholder","fieldArrayName","endIcon","Eye","fontSize","htmlColor","EyeOff","onIconClick","FormControlLabel","Checkbox","size","onChange","e","target","checked","sx","Button","variant","Toast","Boolean","handleClose","anchorOrigin","horizontal","vertical","autoHideDuration"],"mappings":"uuCAiBA,MAAMA,EAAmBC,EAAIC,OAAO,CAClCC,MAAOF,EAAIC,OAAO,CACdE,SAAUH,EAAII,SACHC,SAAS,yBACTC,IAAI,EAAG,0CACPC,QAAQ,QAAS,uDACjBA,QAAQ,yBAA0B,4EAMnB,EAAEC,YAAWC,eAAcC,aACtD,MAAMC,0BAAEA,GAA8BC,aAC/BC,EAAUC,GAAeC,EAAAA,UAAS,IACnCC,EAAOC,GAAYF,EAAAA,SAAwB,OAM5CG,QAAEA,EAAAC,aAASA,EAAAC,MAAcA,GAAUC,EAAAA,QAAoB,CAC3DC,SAAUC,EAAAA,YAAYxB,GACtByB,KAAM,SAwBDC,EAAcC,GAAmBX,EAAAA,UAAkB,GAGnDY,EAAUC,EAAAA,QAAOC,EAAAA,QAAPD,CAAY,KAAA,CACzBE,QAAS,OACTC,cAAe;AAGnB,OACIC,EAAAA,KAAAC,WAAA,CACAC,SAAA;eAAAC,EAAAA,IAACC,EAAAA,QAAA,CACDC,KAAM7B,EACN8B,QAAS,IAAM7B,GAAa,GAC5ByB,wBACEC,EAAAA,IAAAF,EAAAA,SAAA,CACEC,wBAAAC,EAAAA,IAAC,OAAA,CAAKI,SAAUpB,EApCPqB,MAAOC,IACpBA,EAAOvC,MAAMwC,GAAKhC,EAClB+B,EAAOvC,MAAMW,SAAWA,QACpBF,EAA0B8B,EAAOvC,MAAO,CAACyC,EAASC,KAClDA,GACF3B,EAAS,CAAE0B,UAAkBC,KAAM,WACnCnC,GAAa,GACbW,EAAM,CACJlB,MAAO,CACHC,SAAU,GACVuC,GAAI,GACJ7B,UAAU,MAIhBI,EAAS,CAAE0B,UAAkBC,KAAM,YAGhCH,IAmBGP,wBAAAF,EAAAA,KAACL,EAAA,CAAQkB,IAAK,EAAGC,UAAU,oBACzBZ,SAAA;iBAAAF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACY,EAAAA,WAAA,CACCC,MAAM,SACNJ,KAAK,KACLK,OAAO,SACPC,MAAM,uBACPhB,SAAA;iBAIHF,KAACL,EAAA,CAAQkB,IAAK,EACZX,SAAA;qBAACL,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAACgB,EAAAA,QAAA,CACCC,YAAalC,EACbmC,MAAM,qBACNC,KAAK,WACLV,KAAMnB,EAAe,OAAS,WAC9B8B,YAAY,qBACZC,eAAe,QACfC,uBACEtB,EAAAA,IAAAF,EAAAA,SAAA,CACGC,SAAAT,iBACCU,MAACuB,EAAAA,IAAA,CAAIC,SAAS,QAAQC,UAAU,iCAE/BC,SAAA,CAAOF,SAAS,QAAQC,UAAU,cAIzCE,YA7CK,IAAMpC,GAAiBD;qBAgD/BI,EAAAA,QAAA,CACCK,wBAAAC,EAAAA,IAAC4B,EAAAA,QAAA,CAAkB7C,6BAAU8C,UAAA,CAASC,KAAK,QAAQC,SAAWC,GAAMrD,EAAYqD,EAAEC,OAAOC,SAAUC,GAAI,CACnG,gBAAiB,CACjBpB,MAAO,cAEJG,MAAM,iCAAiCiB,GAAI,CAC9C,+BAAgC,CAChCX,SAAU;eAMpBxB,EAAAA,IAACR,EAAA,CAAQkB,IAAK,EACZX,wBAAAC,EAAAA,IAACoC,UAAA,CAAO3B,KAAK,SAASqB,KAAK,QAAQO,QAAQ,YAAYtC;eASnEC,EAAAA,IAACsC,EAAAA,QAAA,CACGpC,KAAMqC,QAAQ1D,GACd2B,QAAS3B,MAAAA,OAAAA,EAAAA,EAAO2B,QAChBC,KAAM5B,MAAAA,OAAAA,EAAAA,EAAO4B,KACb+B,YAAa,IAAM1D,EAAS,MAC5B2D,aAAc,CAAEC,WAAY,QAASC,SAAU,UAC/CC,iBAAkB"}

package/dist/components/charts/ChartLegends/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box } from "@mui/material";
 import { Typography } from "../../typography/typography/index.esm.js";
 /* empty css                            */
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 function ChartLegends({ legends, colors }) {
   return /* @__PURE__ */ jsx(
     Box,

package/dist/components/charts/ChartLegends/index.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material"),s=;/* empty css                                 */function t({legends:t,colors:i}){/* @__PURE__ */
-return e.jsx(r.Box,{sx:{display:"flex",justifyContent:"center",alignContent:"space-between"},children:t.map((r,t)=>/* @__PURE__ */e.jsxs("div",{style:{marginLeft:"20px",display:"flex"},children:[
-/* @__PURE__ */e.jsx("div",{className:"legends-circle",style:{backgroundColor:i[t]}}),
-/* @__PURE__ */e.jsx(s.Typography,{type:"s5",sx:{color:"#656669"},children:r})]}))})},/* empty css                         */exports.ChartLegends=t,exports.default=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=;/* empty css                                 */;/* empty css                         */var s=;/* empty css                                                 */function t({legends:t,colors:n}){/* @__PURE__ */
+return e.jsx(s.default,{sx:{display:"flex",justifyContent:"center",alignContent:"space-between"},children:t.map((s,t)=>/* @__PURE__ */e.jsxs("div",{style:{marginLeft:"20px",display:"flex"},children:[
+/* @__PURE__ */e.jsx("div",{className:"legends-circle",style:{backgroundColor:n[t]}}),
+/* @__PURE__ */e.jsx(r.Typography,{type:"s5",sx:{color:"#656669"},children:s})]}))})}exports.ChartLegends=t,exports.default=t;
 //# sourceMappingURL=index.js.map

package/dist/components/charts/ChartLegends/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/charts/ChartLegends.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport Typography from '../typography/typography';\nimport './chartLegend.scss';\ninterface IProps {\n\tlegends: string[];\n\tcolors: string[];\n}\nexport function ChartLegends({ legends, colors }: IProps) {\n\treturn (\n\t\t<Box\n\t\t\tsx={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\talignContent: 'space-between'\n\t\t\t}}>\n\t\t\t{legends.map((legend, index) => (\n\t\t\t\t<div style={{ marginLeft: '20px', display: 'flex' }}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName='legends-circle'\n\t\t\t\t\t\tstyle={{ backgroundColor: colors[index] }}></div>\n\t\t\t\t\t<Typography type='s5' sx={{ color: '#656669' }}>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Typography>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</Box>\n\t);\n}\n\nexport default ChartLegends\n"],"names":["ChartLegends","legends","colors","jsx","Box","sx","display","justifyContent","alignContent","children","map","legend","index","jsxs","style","marginLeft","className","backgroundColor","Typography","type","color"],"mappings":"oLAOO,SAASA,GAAaC,QAAEA,EAAAC,OAASA;AACvC,OACCC,EAAAA,IAACC,EAAAA,IAAA,CACAC,GAAI,CACHC,QAAS,OACTC,eAAgB,SAChBC,aAAc,iBAEdC,SAAAR,EAAQS,IAAI,CAACC,EAAQC,mBACrBC,EAAAA,KAAC,MAAA,CAAIC,MAAO,CAAEC,WAAY,OAAQT,QAAS,QAC1CG,SAAA;eAAAN,EAAAA,IAAC,MAAA,CACAa,UAAU,iBACVF,MAAO,CAAEG,gBAAiBf,EAAOU;eAClCT,EAAAA,IAACe,EAAAA,YAAWC,KAAK,KAAKd,GAAI,CAAEe,MAAO,WACjCX,SAAAE,SAMP"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/charts/ChartLegends.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport Typography from '../typography/typography';\nimport './chartLegend.scss';\ninterface IProps {\n\tlegends: string[];\n\tcolors: string[];\n}\nexport function ChartLegends({ legends, colors }: IProps) {\n\treturn (\n\t\t<Box\n\t\t\tsx={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\talignContent: 'space-between'\n\t\t\t}}>\n\t\t\t{legends.map((legend, index) => (\n\t\t\t\t<div style={{ marginLeft: '20px', display: 'flex' }}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName='legends-circle'\n\t\t\t\t\t\tstyle={{ backgroundColor: colors[index] }}></div>\n\t\t\t\t\t<Typography type='s5' sx={{ color: '#656669' }}>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</Typography>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</Box>\n\t);\n}\n\nexport default ChartLegends\n"],"names":["ChartLegends","legends","colors","jsx","Box","sx","display","justifyContent","alignContent","children","map","legend","index","jsxs","style","marginLeft","className","backgroundColor","Typography","type","color"],"mappings":"uQAOO,SAASA,GAAaC,QAAEA,EAAAC,OAASA;AACvC,OACCC,EAAAA,IAACC,EAAAA,QAAA,CACAC,GAAI,CACHC,QAAS,OACTC,eAAgB,SAChBC,aAAc,iBAEdC,SAAAR,EAAQS,IAAI,CAACC,EAAQC,mBACrBC,EAAAA,KAAC,MAAA,CAAIC,MAAO,CAAEC,WAAY,OAAQT,QAAS,QAC1CG,SAAA;eAAAN,EAAAA,IAAC,MAAA,CACAa,UAAU,iBACVF,MAAO,CAAEG,gBAAiBf,EAAOU;eAClCT,EAAAA,IAACe,EAAAA,YAAWC,KAAK,KAAKd,GAAI,CAAEe,MAAO,WACjCX,SAAAE,SAMP"}

package/dist/components/charts/areaLinerChart/index.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Box } from "@mui/material";
 import { useRef, useState, useEffect } from "react";
 import linear from "../../../node_modules/d3-scale/src/linear/index.esm.js";
 import max from "../../../node_modules/d3-array/src/max/index.esm.js";
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import select from "../../../node_modules/d3-selection/src/select/index.esm.js";
 import { point } from "../../../node_modules/d3-scale/src/band/index.esm.js";
 import { axisBottom, axisLeft } from "../../../node_modules/d3-axis/src/axis/index.esm.js";

package/dist/components/charts/areaLinerChart/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("react"),a=require("../../../node_modules/d3-scale/src/linear/index.js"),n=require("../../../node_modules/d3-array/src/max/index.js"),s=require("../../../node_modules/d3-selection/src/select/index.js"),o=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");exports.default=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=r.useRef(null),k=r.useRef(null),[q,_]=r.useState(0),[b,$]=r.useState(null);return r.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),r.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;s.default(j.current).selectAll("*").remove();const r=s.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=o.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=a.default().domain([0,n.default(f,e=>n.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=r.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=r.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const S=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const a=r.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var n;a.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),a.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),r.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",S),r.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(n=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(n?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&r.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),s.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),s.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../node_modules/d3-scale/src/linear/index.js"),a=require("../../../node_modules/d3-array/src/max/index.js"),n=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/d3-selection/src/select/index.js"),s=require("../../../node_modules/d3-scale/src/band/index.js"),l=require("../../../node_modules/d3-axis/src/axis/index.js"),i=require("../../../node_modules/d3-shape/src/area/index.js"),d=require("../../../node_modules/d3-shape/src/line/index.js"),u=require("../../../node_modules/d3-format/src/defaultLocale/index.js"),c=require("../../../node_modules/d3-shape/src/curve/monotone/index.js"),p=require("../../../node_modules/d3-shape/src/curve/linear/index.js");exports.default=({data:f,height:m=400,customLabelFormatter:x,yAxisLabelType:h="inValue",currency:v,colors:g,customLegend:y})=>{const j=t.useRef(null),k=t.useRef(null),[q,_]=t.useState(0),[b,$]=t.useState(null);return t.useEffect(()=>{const e=k.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;_(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===q)return;const e=q-40-30,t=m-20-30;o.default(j.current).selectAll("*").remove();const n=o.default(j.current).attr("width",q).attr("height",m).append("g").attr("transform","translate(40,20)"),y=s.point().domain(f[0].values.map(e=>e.month)).range([0,e]),k=r.default().domain([0,a.default(f,e=>a.default(e.values,e=>e.value))]).range([t,0]),_=Math.floor(e/80),b=l.axisBottom(y).ticks(_),E=n.append("g").attr("transform",`translate(0,${t})`).call(b);E.selectAll("text").attr("transform","translate(0, 10)").attr("color","#8E8E93").style("text-anchor","middle");const w=n.append("g");w.append("g").attr("color","#8E8E93").attr("transform","translate(-10,0)").call(l.axisLeft(k).tickSize(-e).tickFormat(e=>{return x?x(e):(t=e,r=v,"inPercent"===(a=h)?`${u.format(".0%")(t/100)}`:"inValue"===a?`${r||""} ${u.format(".2s")(t).replace("k","K")}`:t.toString());var t,r,a}).tickSizeOuter(0)).selectAll("line").attr("stroke-dasharray","3,3").attr("stroke","#D3D3D4"),E.selectAll(".tick line").remove(),w.select(".domain").attr("stroke","none"),E.select(".domain").attr("stroke","none");const S=i.default().x(e=>y(e.month)).y0(t).y1(e=>k(e.value));f.forEach((e,t)=>{const r=n.append("defs").append("linearGradient").attr("id",`area-gradient-${t}`).attr("x1","0%").attr("x2","0%").attr("y1","0%").attr("y2","100%");var a;r.append("stop").attr("offset","0%").attr("stop-color",g[t]).attr("stop-opacity",.4),r.append("stop").attr("offset","100%").attr("stop-color",g[t]).attr("stop-opacity",.1),n.append("path").datum(e.values).attr("fill",`url(#area-gradient-${t})`).attr("d",S),n.append("path").datum(e.values).attr("fill","none").attr("stroke",g[t]).attr("stroke-width",2).attr("d",(a=e.isSmooth||!1,d.default().x(e=>y(e.month)).y(e=>k(e.value)).curve(a?c.monotoneX:p.default))),(null==e?void 0:e.showCircle)&&n.selectAll(`circle-${t}`).data(e.values).enter().append("circle").attr("cx",e=>y(e.month)).attr("cy",e=>k(e.value)).attr("r",5).attr("fill",g[t]).attr("stroke","#fff").style("cursor","pointer").on("mouseover",function(t,r){$({x:`${t.pageX+10}px`,y:t.pageY-30+"px",content:`${e.name}: ${r.value}`}),o.default(this).transition().attr("r",7).attr("fill","#ff4500")}).on("mouseout",function(){$(null),o.default(this).transition().attr("r",5).attr("fill",g[t])})})},[f,q,m,x,h,v,g,y]),/* @__PURE__ */e.jsxs("div",{ref:k,style:{width:"100%",height:"100%"},children:[
 /* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
-/* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(t.Box,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};
+/* @__PURE__ */e.jsx("svg",{ref:j,width:"100%",height:m}),y&&y]}),b&&/* @__PURE__ */e.jsx(n.default,{sx:{position:"absolute",left:b.x,top:b.y,pointerEvents:"none",backgroundColor:"#2EB273",zIndex:"99999",border:"none",borderRadius:"3px",transform:"translate(-50%, -100%)",padding:"2px 6px 2px 6px",gap:"10px"},children:/* @__PURE__ */e.jsx("span",{style:{fontSize:"16px",weight:"500",color:"#ffff"},children:b.content})})]})};
 //# sourceMappingURL=index.js.map

package/dist/components/charts/areaLinerChart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport default AreaLineChart;\n"],"names":["data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"mzBAuBsB,EAAGA,OAAMC,SAAS,IAAKC,uBAAsBC,iBAAiB,UAAWC,WAAUC,SAAQC,mBAC7G,MAAMC,EAASC,EAAAA,OAA6B,MACtCC,EAAaD,EAAAA,OAAuB,OACnCE,EAAgBC,GAAqBC,EAAAA,SAAiB,IACtDC,EAAaC,GAAkBF,EAAAA,SAAc,MAiKpD,OAhKAG,EAAAA,UAAU,KACN,MAAMC,EAAUP,EAAWQ,QAErBC,EAAiB,IAAIC,eAAgBC,IACvC,GAAIA,EAAQ,GAAI,CACZ,MAAMC,EAAWD,EAAQ,GAAGE,YAAYC,MACxCZ,EAAkBU,EACtB,IAOJ,OAJIL,GACAE,EAAeM,QAAQR,GAGpB,KACCA,GACAE,EAAeO,UAAUT,KAGlC,IAEHD,EAAAA,UAAU,KACN,GAAuB,IAAnBL,EAAsB,OAE1B,MACMa,EAAQb,EADyC,GAAtB,GAE3BgB,EAAczB,EAFE,GAAuB,GAK7C0B,EAAAA,QAAUpB,EAAOU,SAASW,UAAU,KAAKC,SAEzC,MAAMC,EAAMH,EAAAA,QACApB,EAAOU,SACdc,KAAK,QAASrB,GACdqB,KAAK,SAAU9B,GACf+B,OAAO,KACPD,KAAK,YAAa,oBAGjBE,EAAIC,EAAAA,QAELC,OAAOnC,EAAK,GAAGoC,OAAOC,IAAIC,GAAKA,EAAEC,QACjCC,MAAM,CAAC,EAAGjB,IAETkB,EAAIC,YAELP,OAAO,CAAC,EAAGQ,EAAAA,QAAO3C,EAAM4C,GAAWD,UAAOC,EAAQR,OAAQE,GAAKA,EAAEO,UACjEL,MAAM,CAACd,EAAa,IAGnBoB,EAAWC,KAAKC,MAAMzB,EAAQ,IAC9B0B,EAAQC,EAAAA,WAAcjB,GAAGkB,MAAML,GAE/BM,EAAatB,EAAIE,OAAO,KACzBD,KAAK,YAAa,eAAeL,MACjC2B,KAAKJ,GAEVG,EAAWxB,UAAU,QAChBG,KAAK,YAAa,oBAClBA,KAAK,QAAS,WACduB,MAAM,cAAe,UAG1B,MAAMC,EAAQzB,EAAIE,OAAO,KACzBuB,EAAMvB,OAAO,KAAKD,KAAK,QAAS,WAAWA,KAAK,YAAa,oBACxDsB,KAAKG,WAAYf,GAAGgB,UAAUlC,GAAOmC,WAAYpB,IAC9CpC,SACMA,EAAqBoC,IAjFrBqB,EAkFarB,EAlFAsB,EAkFGxD,EAjFhB,eAD6ByD,EAkFH1D,GAhFjC,GAAG2D,EAAAA,OAAU,MAAVA,CAAiBH,EAAM,OACZ,YAAdE,EACA,GAAGD,GAAU,MAAME,EAAAA,OAAU,MAAVA,CAAiBH,GAAKI,QAAQ,IAAK,OAE1DJ,EAAIK,YANM,IAACL,EAAaC,EAAgBC,IAmFrCI,cAAc,IACfrC,UAAU,QACVG,KAAK,mBAAoB,OACzBA,KAAK,SAAU,WAEpBqB,EAAWxB,UAAU,cAAcC,SACnC0B,EAAMW,OAAO,WAAWnC,KAAK,SAAU,QACvCqB,EAAWc,OAAO,WAAWnC,KAAK,SAAU,QAM5C,MAKMoC,EAAOC,EAAAA,UACRnC,EAAEK,GAAKL,EAAEK,EAAEC,QACX8B,GAAG3C,GACH4C,MAAQ7B,EAAEH,EAAEO,QAGjB7C,EAAKuE,QAAQ,CAAC3B,EAAS4B,KAInB,MAAMC,EAAW3C,EAAIE,OAAO,QACvBA,OAAO,kBACPD,KAAK,KAAM,iBAAiByC,KAC5BzC,KAAK,KAAM,MACXA,KAAK,KAAM,MACXA,KAAK,KAAM,MACXA,KAAK,KAAM,QArBP,IAAC2C,EAuBVD,EAASzC,OAAO,QACXD,KAAK,SAAU,MACfA,KAAK,aAAc1B,EAAOmE,IAC1BzC,KAAK,eAAgB,IAE1B0C,EAASzC,OAAO,QACXD,KAAK,SAAU,QACfA,KAAK,aAAc1B,EAAOmE,IAC1BzC,KAAK,eAAgB,IAG1BD,EAAIE,OAAO,QACN2C,MAAM/B,EAAQR,QACdL,KAAK,OAAQ,sBAAsByC,MACnCzC,KAAK,IAAKoC,GAGfrC,EAAIE,OAAO,QACN2C,MAAM/B,EAAQR,QACdL,KAAK,OAAQ,QACbA,KAAK,SAAU1B,EAAOmE,IACtBzC,KAAK,eAAgB,GACrBA,KAAK,KA7CA2C,EA6CU9B,EAAQ8B,WAAY,EA7CRE,YAC/B3C,EAAEK,GAAKL,EAAEK,EAAEC,QACXE,EAAEH,GAAKG,EAAEH,EAAEO,QACXgC,MAAMH,EAAWI,EAAAA,UAAoBC,cA8ClC,MAAAnC,OAAA,EAAAA,EAASoC,aACLlD,EAAIF,UAAU,UAAU4C,KACnBxE,KAAK4C,EAAQR,QACb6C,QACAjD,OAAO,UACPD,KAAK,KAAMO,GAAKL,EAAEK,EAAEC,QACpBR,KAAK,KAAMO,GAAKG,EAAEH,EAAEO,QACpBd,KAAK,IAAK,GACVA,KAAK,OAAQ1B,EAAOmE,IACpBzC,KAAK,SAAU,QACfuB,MAAM,SAAU,WAChB4B,GAAG,YAAa,SAAUC,EAAO7C,GAC9BxB,EAAe,CACXmB,EAAG,GAAGkD,EAAMC,MAAQ,OACpB3C,EAAM0C,EAAME,MAAQ,GAAjB,KACHC,QAAS,GAAG1C,EAAQ2C,SAASjD,EAAEO,UAEnClB,EAAAA,QAAU6D,MAAMC,aAAa1D,KAAK,IAAK,GAAGA,KAAK,OAAQ,UAC3D,GACCmD,GAAG,WAAY,WACZpE,EAAe,MACfa,EAAAA,QAAU6D,MAAMC,aAAa1D,KAAK,IAAK,GAAGA,KAAK,OAAQ1B,EAAOmE,GAClE,MAKjB,CAACxE,EAAMU,EAAgBT,EAAQC,EAAsBC,EAAgBC,EAAUC,EAAQC,mBAGtFoF,OAAC,MAAA,CAAIC,IAAKlF,EAAY6C,MAAO,CAAE/B,MAAO,OAAQtB,OAAQ,QAClD2F,SAAA;eAAAF,EAAAA,KAAC,MAAA,CAAIpC,MAAO,CAAEuC,SAAU,YACpBD,SAAA;eAAAE,EAAAA,IAAC,MAAA,CAAIH,IAAKpF,EAAQgB,MAAM,OAAOtB,WAE3BK,GACAA,KAIPO,kBACGiF,EAAAA,IAACC,MAAA,CAAIC,GAAI,CACLH,SAAU,WACVI,KAAMpF,EAAYoB,EAClBiE,IAAKrF,EAAY4B,EACjB0D,cAAe,OACfC,gBAAiB,UACjBC,OAAQ,QACRC,OAAQ,OACRC,aAAc,MACdC,UAAW,yBACXC,QAAS,kBACTC,IAAK,QAELd,wBAAAE,EAAAA,IAAC,OAAA,CAAKxC,MAAO,CAAEqD,SAAU,OAAQC,OAAQ,MAAOC,MAAO,SAClDjB,SAAA/E,EAAYyE"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/charts/areaLinerChart.tsx"],"sourcesContent":["import { Box } from '@mui/material';\nimport * as d3 from 'd3';\nimport { useEffect, useRef, useState } from 'react';\n\ninterface IChartProps {\n    data: { name: string, values: { month: string, value: number }[], isSmooth?: boolean }[],\n    height: number,\n    yAxisLabelType?: 'inPercent' | 'inValue' | 'custom';\n    customLabelFormatter?: (value: number) => string;\n    currency?: string;\n    colors?: string[];\n    customLegend: React.ReactNode\n}\n\nconst formatNumber = (num: number, symbol: string, labelType: string) => {\n    if (labelType === 'inPercent') {\n        return `${d3.format(\".0%\")(num / 100)}`;\n    } else if (labelType === 'inValue') {\n        return `${symbol || ''} ${d3.format(\".2s\")(num).replace('k', 'K')}`;\n    }\n    return num.toString();\n};\n\nconst AreaLineChart = ({ data, height = 400, customLabelFormatter, yAxisLabelType = 'inValue', currency, colors, customLegend }: IChartProps) => {\n    const svgRef = useRef<SVGSVGElement | null>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const [tooltipData, setTooltipData] = useState<any>(null);\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (containerWidth === 0) return; // Wait for the container width\n\n        const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n        const width = containerWidth - margin.left - margin.right;\n        const chartHeight = height - margin.top - margin.bottom;\n\n        // Clear the SVG\n        d3.select(svgRef.current).selectAll('*').remove();\n\n        const svg = d3\n            .select(svgRef.current)\n            .attr('width', containerWidth)\n            .attr('height', height)\n            .append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Define scales\n        const x = d3\n            .scalePoint()\n            .domain(data[0].values.map(d => d.month)) // Assuming all datasets share the same x-domain\n            .range([0, width]);\n\n        const y = d3\n            .scaleLinear()\n            .domain([0, d3.max(data, dataset => d3.max(dataset.values, d => d.value))!]) // Max value across all datasets\n            .range([chartHeight, 0]);\n\n        // Limit x-axis ticks dynamically based on width\n        const numTicks = Math.floor(width / 80); // Adjust the factor (80) based on chart width\n        const xAxis = d3.axisBottom(x).ticks(numTicks);\n\n        const xAxisGroup = svg.append('g')\n            .attr('transform', `translate(0,${chartHeight})`)\n            .call(xAxis);\n\n        xAxisGroup.selectAll(\"text\")\n            .attr(\"transform\", \"translate(0, 10)\")\n            .attr('color', '#8E8E93')\n            .style(\"text-anchor\", \"middle\");\n\n        // Y Axis\n        const yAxis = svg.append('g')\n        yAxis.append('g').attr('color', '#8E8E93').attr(\"transform\", `translate(-10,0)`)\n            .call(d3.axisLeft(y).tickSize(-width).tickFormat((d: any) =>\n                customLabelFormatter\n                    ? customLabelFormatter(d)\n                    : formatNumber(d, currency, yAxisLabelType)\n            ).tickSizeOuter(0) as any)\n            .selectAll('line')\n            .attr('stroke-dasharray', '3,3')\n            .attr('stroke', '#D3D3D4');\n\n        xAxisGroup.selectAll(\".tick line\").remove();\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\");\n        xAxisGroup.select(\".domain\").attr(\"stroke\", \"none\");\n\n        // Define color scale for lines\n        // const color = d3.scaleOrdinal(d3.schemeCategory10);\n\n        // Line and area generators\n        const line = (isSmooth: boolean) => d3.line<any>()\n            .x(d => x(d.month)!)\n            .y(d => y(d.value))\n            .curve(isSmooth ? d3.curveMonotoneX : d3.curveLinear);  // Conditionally smooth the line\n\n        const area = d3.area<any>()\n            .x(d => x(d.month)!)\n            .y0(chartHeight)\n            .y1(d => y(d.value));\n\n        // Iterate over each dataset to create lines and areas\n        data.forEach((dataset, i) => {\n            // const datasetColor = color(i.toString());\n\n            // Create gradient for each area\n            const gradient = svg.append('defs')\n                .append('linearGradient')\n                .attr('id', `area-gradient-${i}`)\n                .attr('x1', '0%')\n                .attr('x2', '0%')\n                .attr('y1', '0%')\n                .attr('y2', '100%');\n\n            gradient.append('stop')\n                .attr('offset', '0%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.4);\n\n            gradient.append('stop')\n                .attr('offset', '100%')\n                .attr('stop-color', colors[i])\n                .attr('stop-opacity', 0.1);\n\n            // Append the area with gradient\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', `url(#area-gradient-${i})`)\n                .attr('d', area);\n\n            // Append the line with smoothness condition\n            svg.append('path')\n                .datum(dataset.values)\n                .attr('fill', 'none')\n                .attr('stroke', colors[i])\n                .attr('stroke-width', 2)\n                .attr('d', line(dataset.isSmooth || false));  // Use smoothness from the dataset\n\n            // Append circles for hover effect\n            {\n                dataset?.showCircle &&\n                    svg.selectAll(`circle-${i}`)\n                        .data(dataset.values)\n                        .enter()\n                        .append('circle')\n                        .attr('cx', d => x(d.month)!)\n                        .attr('cy', d => y(d.value))\n                        .attr('r', 5)\n                        .attr('fill', colors[i])\n                        .attr('stroke', '#fff')\n                        .style('cursor', 'pointer')\n                        .on('mouseover', function (event, d) {\n                            setTooltipData({\n                                x: `${event.pageX + 10}px`,\n                                y: `${event.pageY - 30}px`,\n                                content: `${dataset.name}: ${d.value}`\n                            });\n                            d3.select(this).transition().attr('r', 7).attr('fill', '#ff4500');\n                        })\n                        .on('mouseout', function () {\n                            setTooltipData(null);\n                            d3.select(this).transition().attr('r', 5).attr('fill', colors[i]);\n                        });\n            }\n\n        });\n\n    }, [data, containerWidth, height, customLabelFormatter, yAxisLabelType, currency, colors, customLegend]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <svg ref={svgRef} width=\"100%\" height={height} />\n                {\n                    customLegend &&\n                    customLegend\n\n                }\n            </div>\n            {tooltipData &&\n                <Box sx={{\n                    position: 'absolute',\n                    left: tooltipData.x,\n                    top: tooltipData.y,\n                    pointerEvents: 'none',\n                    backgroundColor: '#2EB273',\n                    zIndex: '99999',\n                    border: 'none',\n                    borderRadius: '3px',\n                    transform: 'translate(-50%, -100%)',\n                    padding: '2px 6px 2px 6px',\n                    gap: '10px'\n                }}>\n                    <span style={{ fontSize: '16px', weight: '500', color: '#ffff' }}>\n                        {tooltipData.content}\n                    </span>\n                </Box>\n            }\n        </div>\n    );\n};\n\nexport default AreaLineChart;\n"],"names":["data","height","customLabelFormatter","yAxisLabelType","currency","colors","customLegend","svgRef","useRef","wrapperRef","containerWidth","setContainerWidth","useState","tooltipData","setTooltipData","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","chartHeight","d3.select","selectAll","remove","svg","attr","append","x","d3.scalePoint","domain","values","map","d","month","range","y","d3.scaleLinear","d3.max","dataset","value","numTicks","Math","floor","xAxis","d3.axisBottom","ticks","xAxisGroup","call","style","yAxis","d3.axisLeft","tickSize","tickFormat","num","symbol","labelType","d3.format","replace","toString","tickSizeOuter","select","area","d3.area","y0","y1","forEach","i","gradient","isSmooth","datum","d3.line","curve","d3.curveMonotoneX","d3.curveLinear","showCircle","enter","on","event","pageX","pageY","content","name","this","transition","jsxs","ref","children","position","jsx","Box","sx","left","top","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","padding","gap","fontSize","weight","color"],"mappings":"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"}

package/dist/components/charts/barLineChart/barLinechart/index.esm.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import { Box } from "@mui/material";
 import { Typography } from "../../../typography/typography/index.esm.js";
 /* empty css                             */
 import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
 import min from "../../../../node_modules/d3-array/src/min/index.esm.js";
 import band from "../../../../node_modules/d3-scale/src/band/index.esm.js";
 import linear from "../../../../node_modules/d3-scale/src/linear/index.esm.js";
+import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
 import { axisLeft, axisBottom } from "../../../../node_modules/d3-axis/src/axis/index.esm.js";
 import { format } from "../../../../node_modules/d3-format/src/defaultLocale/index.esm.js";

package/dist/components/charts/barLineChart/barLinechart/index.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material"),n=;/* empty css                                    */;/* empty css                          */var s=,/* empty css                                               */l=,/* empty css                                               */a=,/* empty css                                                */o=,/* empty css                                                  */d=,/* empty css                                                      */i=,/* empty css                                               */c=,/* empty css                                                          */u=,/* empty css                                                       */h=,/* empty css                                                */p=;/* empty css                                                          */exports.default=({data:f,height:x=400,margin:m={top:20,right:30,bottom:30,left:50},bars:y,lines:g,line:j=!0,showGrid:v=!0,barColors:b,lineColors:k})=>{var w;const q=t.useRef(null),$=t.useRef(null),_=t.useRef(null),[B,C]=t.useState(null),[R,A]=t.useState(0),E=e=>c.format(".2s")(e).replace("k","K"),L=f.length>y.length,M=L?Math.max(60*f.length,R):R;return t.useEffect(()=>{const e=$.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;A(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===R)return;const e=s.default(f,e=>Math.max(...y.map(t=>e[t.field]),...g.map(t=>e[t.field])))??0,t=l.default(f,e=>Math.min(...y.map(t=>e[t.field]),...g.map(t=>e[t.field])))??0,r=d.default(q.current),n=M-m.left-m.right,c=e||t?x-m.top-m.bottom:0,w=a.default().domain(f.map(e=>e.month)).range([0,n]).padding(.3),$=o.default().domain([t,e]).nice().range([c,0]);r.selectAll("*").remove();const B=r.append("g").attr("transform",`translate(${m.left},${m.top})`);B.append("g").call(i.axisLeft($).tickFormat(E)).call(e=>e.select(".domain").remove()).select(".domain").attr("stroke","none"),B.append("g").attr("transform",`translate(0,${c})`).call(i.axisBottom(w)).selectAll(".tick text").attr("text-anchor","middle").select(".domain").attr("stroke","none"),v&&B.selectAll(".grid-line").data($.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",n).attr("y1",e=>$(e)).attr("y2",e=>$(e)).style("stroke","#ddd").style("stroke-dasharray","8,8").style("stroke-width",1),j&&B.selectAll(".grid-line-2").data($.ticks()).enter().append("line").attr("class","grid-line-2").attr("x1",0).attr("x2",n).attr("y1",e=>$(e)).attr("y2",e=>$(e)).style("stroke","#ddd").style("stroke-dasharray","8,8").style("stroke-width",1),y.forEach((e,t)=>{B.selectAll(`.bar-${e.field}`).data(f).enter().append("rect").attr("class",`bar bar-${e.field}`).attr("x",e=>w(e.month)??0).attr("y",t=>t[e.field]>=0?$(t[e.field]):$(0)).attr("rx",5).attr("ry",5).attr("width",w.bandwidth()/y.length).attr("height",t=>Math.abs($(t[e.field])-$(0))).attr("fill",b[t]).attr("transform",`translate(${t*w.bandwidth()/y.length}, 0)`).on("mouseover",function(e,t){var r;const[n,s]=u.default(e,q.current),l=(null==(r=_.current)?void 0:r.scrollLeft)||0;C({x:n+m.left-l,y:s+m.top,content:t})}).on("mouseout",()=>C(null))}),g.forEach((e,t)=>{const r=h.default().x(e=>(w(e.month)??0)+w.bandwidth()/2).y(t=>$(t[e.field])).curve(p.monotoneX);B.append("path").datum(f).attr("fill","none").attr("stroke",k[t]).attr("stroke-width",2).attr("d",r).on("mouseover",function(t){var r;const[n]=u.default(t,q.current),s=w.domain().find(e=>{const t=w(e)??0;return n>=t&&n<=t+w.bandwidth()});if(s){const t=f.find(e=>e.month===s);if(t){const s=(null==(r=_.current)?void 0:r.scrollLeft)||0;C({x:n+m.left-s,y:$(t[e.field])+m.top,content:t})}}}).on("mouseout",()=>C(null))})},[f,R,M,j,x,m,y,g,v,b,k]),/* @__PURE__ */e.jsx("div",{ref:$,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
-/* @__PURE__ */e.jsx("div",{ref:_,style:{width:"100%",overflowX:L?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:q,width:M,height:x,viewBox:`0 0 ${M} ${x}`,style:{display:"block"}})}),B&&/* @__PURE__ */e.jsx("div",{style:{position:"absolute",left:B.x,top:B.y,pointerEvents:"none",backgroundColor:"white",zIndex:"99999",border:"none",padding:"5px",borderRadius:"3px",transform:"translate(-50%, -100%)"},children:/* @__PURE__ */e.jsxs(r.Box,{children:[
-/* @__PURE__ */e.jsx("div",{style:{background:"#F3F2F2",padding:"10px"},children:/* @__PURE__ */e.jsx(n.Typography,{type:"s4",style:{whiteSpace:"noWrap",width:"200px",color:"#232529"},children:null==(w=B.content)?void 0:w.month})}),
-/* @__PURE__ */e.jsxs(r.Box,{sx:{p:1.5,display:"flex",flexDirection:"column",gap:1.5},children:[y.map((t,s)=>/* @__PURE__ */e.jsxs(r.Box,{sx:{display:"flex",gap:1.5,alignItems:"center"},children:[
-/* @__PURE__ */e.jsx("div",{className:"circle",style:{backgroundColor:b[s]}}),
-/* @__PURE__ */e.jsxs(n.Typography,{type:"s5",color:"theme.secondary.900",children:[t.label,": ",
-/* @__PURE__ */e.jsxs("span",{style:{fontWeight:600},children:["$ ",B.content[t.field]]})]})]},`bar-${s}`)),g.map((t,s)=>/* @__PURE__ */e.jsxs(r.Box,{sx:{display:"flex",gap:1.5,alignItems:"center"},children:[
-/* @__PURE__ */e.jsx("div",{className:"circle",style:{backgroundColor:k[s]}}),
-/* @__PURE__ */e.jsxs(n.Typography,{type:"s5",color:"theme.secondary.900",children:[t.label,": ",
-/* @__PURE__ */e.jsxs("span",{style:{fontWeight:600},children:["$ ",B.content[t.field]]})]})]},`line-${s}`))]})]})})]})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=;/* empty css                                    */;/* empty css                          */var n=,/* empty css                                               */s=,/* empty css                                               */l=,/* empty css                                                */a=,/* empty css                                                  */d=,/* empty css                                                    */o=,/* empty css                                                      */i=,/* empty css                                               */c=,/* empty css                                                          */u=,/* empty css                                                       */h=,/* empty css                                                */f=;/* empty css                                                          */exports.default=({data:p,height:x=400,margin:m={top:20,right:30,bottom:30,left:50},bars:y,lines:g,line:j=!0,showGrid:v=!0,barColors:b,lineColors:k})=>{var w;const q=t.useRef(null),_=t.useRef(null),$=t.useRef(null),[C,R]=t.useState(null),[A,E]=t.useState(0),L=e=>c.format(".2s")(e).replace("k","K"),M=p.length>y.length,B=M?Math.max(60*p.length,A):A;return t.useEffect(()=>{const e=_.current,t=new ResizeObserver(e=>{if(e[0]){const t=e[0].contentRect.width;E(t)}});return e&&t.observe(e),()=>{e&&t.unobserve(e)}},[]),t.useEffect(()=>{if(0===A)return;const e=n.default(p,e=>Math.max(...y.map(t=>e[t.field]),...g.map(t=>e[t.field])))??0,t=s.default(p,e=>Math.min(...y.map(t=>e[t.field]),...g.map(t=>e[t.field])))??0,r=o.default(q.current),d=B-m.left-m.right,c=e||t?x-m.top-m.bottom:0,w=l.default().domain(p.map(e=>e.month)).range([0,d]).padding(.3),_=a.default().domain([t,e]).nice().range([c,0]);r.selectAll("*").remove();const C=r.append("g").attr("transform",`translate(${m.left},${m.top})`);C.append("g").call(i.axisLeft(_).tickFormat(L)).call(e=>e.select(".domain").remove()).select(".domain").attr("stroke","none"),C.append("g").attr("transform",`translate(0,${c})`).call(i.axisBottom(w)).selectAll(".tick text").attr("text-anchor","middle").select(".domain").attr("stroke","none"),v&&C.selectAll(".grid-line").data(_.ticks()).enter().append("line").attr("class","grid-line").attr("x1",0).attr("x2",d).attr("y1",e=>_(e)).attr("y2",e=>_(e)).style("stroke","#ddd").style("stroke-dasharray","8,8").style("stroke-width",1),j&&C.selectAll(".grid-line-2").data(_.ticks()).enter().append("line").attr("class","grid-line-2").attr("x1",0).attr("x2",d).attr("y1",e=>_(e)).attr("y2",e=>_(e)).style("stroke","#ddd").style("stroke-dasharray","8,8").style("stroke-width",1),y.forEach((e,t)=>{C.selectAll(`.bar-${e.field}`).data(p).enter().append("rect").attr("class",`bar bar-${e.field}`).attr("x",e=>w(e.month)??0).attr("y",t=>t[e.field]>=0?_(t[e.field]):_(0)).attr("rx",5).attr("ry",5).attr("width",w.bandwidth()/y.length).attr("height",t=>Math.abs(_(t[e.field])-_(0))).attr("fill",b[t]).attr("transform",`translate(${t*w.bandwidth()/y.length}, 0)`).on("mouseover",function(e,t){var r;const[n,s]=u.default(e,q.current),l=(null==(r=$.current)?void 0:r.scrollLeft)||0;R({x:n+m.left-l,y:s+m.top,content:t})}).on("mouseout",()=>R(null))}),g.forEach((e,t)=>{const r=h.default().x(e=>(w(e.month)??0)+w.bandwidth()/2).y(t=>_(t[e.field])).curve(f.monotoneX);C.append("path").datum(p).attr("fill","none").attr("stroke",k[t]).attr("stroke-width",2).attr("d",r).on("mouseover",function(t){var r;const[n]=u.default(t,q.current),s=w.domain().find(e=>{const t=w(e)??0;return n>=t&&n<=t+w.bandwidth()});if(s){const t=p.find(e=>e.month===s);if(t){const s=(null==(r=$.current)?void 0:r.scrollLeft)||0;R({x:n+m.left-s,y:_(t[e.field])+m.top,content:t})}}}).on("mouseout",()=>R(null))})},[p,A,B,j,x,m,y,g,v,b,k]),/* @__PURE__ */e.jsx("div",{ref:_,style:{width:"100%",height:"100%"},children:/* @__PURE__ */e.jsxs("div",{style:{position:"relative"},children:[
+/* @__PURE__ */e.jsx("div",{ref:$,style:{width:"100%",overflowX:M?"auto":"hidden",overflowY:"hidden"},children:/* @__PURE__ */e.jsx("svg",{ref:q,width:B,height:x,viewBox:`0 0 ${B} ${x}`,style:{display:"block"}})}),C&&/* @__PURE__ */e.jsx("div",{style:{position:"absolute",left:C.x,top:C.y,pointerEvents:"none",backgroundColor:"white",zIndex:"99999",border:"none",padding:"5px",borderRadius:"3px",transform:"translate(-50%, -100%)"},children:/* @__PURE__ */e.jsxs(d.default,{children:[
+/* @__PURE__ */e.jsx("div",{style:{background:"#F3F2F2",padding:"10px"},children:/* @__PURE__ */e.jsx(r.Typography,{type:"s4",style:{whiteSpace:"noWrap",width:"200px",color:"#232529"},children:null==(w=C.content)?void 0:w.month})}),
+/* @__PURE__ */e.jsxs(d.default,{sx:{p:1.5,display:"flex",flexDirection:"column",gap:1.5},children:[y.map((t,n)=>/* @__PURE__ */e.jsxs(d.default,{sx:{display:"flex",gap:1.5,alignItems:"center"},children:[
+/* @__PURE__ */e.jsx("div",{className:"circle",style:{backgroundColor:b[n]}}),
+/* @__PURE__ */e.jsxs(r.Typography,{type:"s5",color:"theme.secondary.900",children:[t.label,": ",
+/* @__PURE__ */e.jsxs("span",{style:{fontWeight:600},children:["$ ",C.content[t.field]]})]})]},`bar-${n}`)),g.map((t,n)=>/* @__PURE__ */e.jsxs(d.default,{sx:{display:"flex",gap:1.5,alignItems:"center"},children:[
+/* @__PURE__ */e.jsx("div",{className:"circle",style:{backgroundColor:k[n]}}),
+/* @__PURE__ */e.jsxs(r.Typography,{type:"s5",color:"theme.secondary.900",children:[t.label,": ",
+/* @__PURE__ */e.jsxs("span",{style:{fontWeight:600},children:["$ ",C.content[t.field]]})]})]},`line-${n}`))]})]})})]})})};
 //# sourceMappingURL=index.js.map

package/dist/components/charts/barLineChart/barLinechart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/barLineChart/barLinechart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\nimport { Box, /* List, ListItem */ } from '@mui/material';\nimport Typography from '../../typography/typography';\nimport './barLineChart.scss';\n\ninterface DataPoint {\n    [key: string]: string | number;\n}\n\ninterface ChartField {\n    field: string;\n    color: string;\n    label: string;\n}\n\nexport interface IBarLineChartProps {\n    data: DataPoint[];\n    width?: number;\n    height?: number;\n    margin?: { top: number; right: number; bottom: number; left: number };\n    bars: ChartField[];\n    lines: ChartField[];\n    line?: boolean;\n    showGrid?: boolean;\n    barColors?: any[];\n    lineColors?: any[];\n}\n\nconst BarLineChart: React.FC<IBarLineChartProps> = ({\n    data,\n    height = 400,\n    margin = { top: 20, right: 30, bottom: 30, left: 50 },\n    bars,\n    lines,\n    line = true,\n    showGrid = true,\n    barColors,\n    lineColors\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [tooltip, setTooltip] = useState<{ x: number; y: number; content: DataPoint } | null>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const formatNumber = (num: number) => d3.format('.2s')(num).replace('k', 'K');\n\n    const needsHorizontalScroll = data.length > bars.length;\n    const minBarWidth = 60\n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minBarWidth, containerWidth)\n        : containerWidth;\n\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, [])\n    \n    useEffect(() => {\n        if (containerWidth === 0) return;\n        const yMax = d3.max(data, d => {\n            return Math.max(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n        const yMin = d3.min(data, d => {\n            return Math.min(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n\n        const svg = d3.select(svgRef.current);\n        const innerWidth = calculatedChartWidth - margin.left - margin.right;\n        const innerHeight = yMax || yMin ? height - margin.top - margin.bottom : 0;\n\n        const x = d3.scaleBand()\n            .domain(data.map(d => d.month as string))\n            .range([0, innerWidth])\n            .padding(0.3);\n\n        const y = d3.scaleLinear()\n            .domain([yMin, yMax])\n            .nice()\n            .range([innerHeight, 0]);\n\n        svg.selectAll('*').remove();\n\n        const g = svg.append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Y axis\n        const yAxis = g.append('g')\n            .call(d3.axisLeft(y).tickFormat(formatNumber))\n            .call(g => g.select('.domain').remove());\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // X axis\n        const xAxis = g.append('g')\n            .attr('transform', `translate(0,${innerHeight})`)\n            .call(d3.axisBottom(x))\n            .selectAll('.tick text')\n            .attr('text-anchor', 'middle');\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // Render grid lines if applicable\n        if (showGrid) {\n            g.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1);\n        }\n        \n        // Render grid lines if applicable\n        if (line) {\n            g.selectAll('.grid-line-2')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line-2')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1)\n        }\n\n        // Draw bars for bar chart\n        bars.forEach((bar, i) => {\n            g.selectAll(`.bar-${bar.field}`)\n                .data(data)\n                .enter()\n                .append('rect')\n                .attr('class', `bar bar-${bar.field}`)\n                .attr('x', d => x(d.month as string) ?? 0)\n                .attr('y', d => d[bar.field] >= 0 ? y(d[bar.field]) : y(0))  // Positive bars above y(0), negative bars below\n                .attr(\"rx\", 5)\n                .attr(\"ry\", 5)\n                .attr('width', x.bandwidth() / bars.length)\n                .attr('height', d => {\n                    return Math.abs(y(d[bar.field]) - y(0));  // Absolute height from y(0)\n                })\n                .attr('fill', barColors[i])\n                .attr('transform', `translate(${(i * x.bandwidth()) / bars.length}, 0)`)\n                .on('mouseover', function (event, d) {\n                    const [xPos, yPos] = d3.pointer(event, svgRef.current);\n                    const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                    setTooltip({ \n                        x: xPos + margin.left - scrollLeft, \n                        y: yPos + margin.top, \n                        content: d \n                    });\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n        \n        // Draw lines for line chart\n        lines.forEach((line, index) => {\n            const lineGenerator = d3.line<DataPoint>()\n                .x(d => (x(d.month as string) ?? 0) + x.bandwidth() / 2) // Calculate x position for each data point\n                .y(d => y(d[line.field] as number))\n                .curve(d3.curveMonotoneX);\n\n            g.append('path')\n                .datum(data)\n                .attr('fill', 'none')\n                .attr('stroke', lineColors[index])\n                .attr('stroke-width', 2)\n                .attr('d', lineGenerator)\n                .on('mouseover', function (event) {\n                    const [xPos] = d3.pointer(event, svgRef.current);\n                    const month = x.domain().find((month) => {\n                        const monthPosition = x(month as string) ?? 0;\n                        return xPos >= monthPosition && xPos <= monthPosition + x.bandwidth();\n                    });\n\n                    if (month) {\n                        const closestDataPoint = data.find(d => d.month === month);\n                        if (closestDataPoint) {\n                            const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                            setTooltip({\n                                x: xPos + margin.left - scrollLeft,\n                                y: y(closestDataPoint[line.field]) + margin.top,\n                                content: closestDataPoint\n                            });\n                        }\n                    }\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n    }, [data, containerWidth, calculatedChartWidth, line, height, margin, bars, lines, showGrid, barColors, lineColors]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <div \n                    ref={scrollContainerRef}\n                    style={{ \n                        width: '100%', \n                        overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n                        overflowY: 'hidden'\n                    }}\n                >\n                    <svg \n                        ref={svgRef} \n                        width={calculatedChartWidth} \n                        height={height} \n                        viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n                        style={{ display: 'block' }}\n                    />\n                </div>\n                {tooltip && (\n                    <div\n                        style={{\n                            position: 'absolute',\n                            left: tooltip.x,\n                            top: tooltip.y,\n                            pointerEvents: 'none',\n                            backgroundColor: 'white',\n                            zIndex: '99999',\n                            border: 'none',\n                            padding: '5px',\n                            borderRadius: '3px',\n                            transform: 'translate(-50%, -100%)'\n                        }}\n                    >\n                        <Box>\n                            <div style={{ background: '#F3F2F2', padding: '10px' }}>\n                                <Typography type='s4' style={{ whiteSpace: 'noWrap', width: '200px', color: '#232529' }}>{tooltip.content?.month}</Typography>\n                            </div>\n                            <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n\n                                {bars.map((bar, index) => (\n                                    <Box key={`bar-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: barColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {bar.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[bar.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                                {lines.map((line, index) => (\n                                    <Box key={`line-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: lineColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {line.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[line.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                            </Box>\n                        </Box>\n                      \n                    </div>\n                )\n                }\n            </div>\n        </div>\n    );\n};\n\nexport default BarLineChart;"],"names":["data","height","margin","top","right","bottom","left","bars","lines","line","showGrid","barColors","lineColors","svgRef","useRef","wrapperRef","scrollContainerRef","tooltip","setTooltip","useState","containerWidth","setContainerWidth","formatNumber","num","d3.format","replace","needsHorizontalScroll","length","calculatedChartWidth","Math","max","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","yMax","d3.max","d","map","bar","field","yMin","d3.min","min","svg","d3.select","innerWidth","innerHeight","x","d3.scaleBand","domain","month","range","padding","y","d3.scaleLinear","nice","selectAll","remove","g","append","attr","call","d3.axisLeft","tickFormat","select","d3.axisBottom","ticks","enter","style","forEach","i","bandwidth","abs","on","event","xPos","yPos","d3.pointer","scrollLeft","_a","content","index","lineGenerator","d3.line","curve","d3.curveMonotoneX","datum","find","monthPosition","closestDataPoint","ref","children","jsxs","position","jsx","overflowX","overflowY","viewBox","display","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","Box","background","Typography","type","whiteSpace","color","sx","p","flexDirection","gap","alignItems","className","label","fontWeight"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/charts/barLineChart/barLinechart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from 'react';\nimport * as d3 from 'd3';\nimport { Box, /* List, ListItem */ } from '@mui/material';\nimport Typography from '../../typography/typography';\nimport './barLineChart.scss';\n\ninterface DataPoint {\n    [key: string]: string | number;\n}\n\ninterface ChartField {\n    field: string;\n    color: string;\n    label: string;\n}\n\nexport interface IBarLineChartProps {\n    data: DataPoint[];\n    width?: number;\n    height?: number;\n    margin?: { top: number; right: number; bottom: number; left: number };\n    bars: ChartField[];\n    lines: ChartField[];\n    line?: boolean;\n    showGrid?: boolean;\n    barColors?: any[];\n    lineColors?: any[];\n}\n\nconst BarLineChart: React.FC<IBarLineChartProps> = ({\n    data,\n    height = 400,\n    margin = { top: 20, right: 30, bottom: 30, left: 50 },\n    bars,\n    lines,\n    line = true,\n    showGrid = true,\n    barColors,\n    lineColors\n}) => {\n    const svgRef = useRef<SVGSVGElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [tooltip, setTooltip] = useState<{ x: number; y: number; content: DataPoint } | null>(null);\n    const [containerWidth, setContainerWidth] = useState<number>(0);\n    const formatNumber = (num: number) => d3.format('.2s')(num).replace('k', 'K');\n\n    const needsHorizontalScroll = data.length > bars.length;\n    const minBarWidth = 60\n    const calculatedChartWidth = needsHorizontalScroll \n        ? Math.max(data.length * minBarWidth, containerWidth)\n        : containerWidth;\n\n    useEffect(() => {\n        const wrapper = wrapperRef.current;\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            if (entries[0]) {\n                const newWidth = entries[0].contentRect.width;\n                setContainerWidth(newWidth);\n            }\n        });\n\n        if (wrapper) {\n            resizeObserver.observe(wrapper);\n        }\n\n        return () => {\n            if (wrapper) {\n                resizeObserver.unobserve(wrapper);\n            }\n        };\n    }, [])\n    \n    useEffect(() => {\n        if (containerWidth === 0) return;\n        const yMax = d3.max(data, d => {\n            return Math.max(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n        const yMin = d3.min(data, d => {\n            return Math.min(\n                ...bars.map(bar => d[bar.field] as number),\n                ...lines.map(line => d[line.field] as number)\n            );\n        }) ?? 0;\n\n        const svg = d3.select(svgRef.current);\n        const innerWidth = calculatedChartWidth - margin.left - margin.right;\n        const innerHeight = yMax || yMin ? height - margin.top - margin.bottom : 0;\n\n        const x = d3.scaleBand()\n            .domain(data.map(d => d.month as string))\n            .range([0, innerWidth])\n            .padding(0.3);\n\n        const y = d3.scaleLinear()\n            .domain([yMin, yMax])\n            .nice()\n            .range([innerHeight, 0]);\n\n        svg.selectAll('*').remove();\n\n        const g = svg.append('g')\n            .attr('transform', `translate(${margin.left},${margin.top})`);\n\n        // Y axis\n        const yAxis = g.append('g')\n            .call(d3.axisLeft(y).tickFormat(formatNumber))\n            .call(g => g.select('.domain').remove());\n        yAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // X axis\n        const xAxis = g.append('g')\n            .attr('transform', `translate(0,${innerHeight})`)\n            .call(d3.axisBottom(x))\n            .selectAll('.tick text')\n            .attr('text-anchor', 'middle');\n        xAxis.select(\".domain\").attr(\"stroke\", \"none\")\n        \n        // Render grid lines if applicable\n        if (showGrid) {\n            g.selectAll('.grid-line')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1);\n        }\n        \n        // Render grid lines if applicable\n        if (line) {\n            g.selectAll('.grid-line-2')\n                .data(y.ticks())\n                .enter()\n                .append('line')\n                .attr('class', 'grid-line-2')\n                .attr('x1', 0)\n                .attr('x2', innerWidth)\n                .attr('y1', d => y(d))\n                .attr('y2', d => y(d))\n                .style('stroke', '#ddd')\n                .style('stroke-dasharray', '8,8') // Dotted line\n                .style('stroke-width', 1)\n        }\n\n        // Draw bars for bar chart\n        bars.forEach((bar, i) => {\n            g.selectAll(`.bar-${bar.field}`)\n                .data(data)\n                .enter()\n                .append('rect')\n                .attr('class', `bar bar-${bar.field}`)\n                .attr('x', d => x(d.month as string) ?? 0)\n                .attr('y', d => d[bar.field] >= 0 ? y(d[bar.field]) : y(0))  // Positive bars above y(0), negative bars below\n                .attr(\"rx\", 5)\n                .attr(\"ry\", 5)\n                .attr('width', x.bandwidth() / bars.length)\n                .attr('height', d => {\n                    return Math.abs(y(d[bar.field]) - y(0));  // Absolute height from y(0)\n                })\n                .attr('fill', barColors[i])\n                .attr('transform', `translate(${(i * x.bandwidth()) / bars.length}, 0)`)\n                .on('mouseover', function (event, d) {\n                    const [xPos, yPos] = d3.pointer(event, svgRef.current);\n                    const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                    setTooltip({ \n                        x: xPos + margin.left - scrollLeft, \n                        y: yPos + margin.top, \n                        content: d \n                    });\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n        \n        // Draw lines for line chart\n        lines.forEach((line, index) => {\n            const lineGenerator = d3.line<DataPoint>()\n                .x(d => (x(d.month as string) ?? 0) + x.bandwidth() / 2) // Calculate x position for each data point\n                .y(d => y(d[line.field] as number))\n                .curve(d3.curveMonotoneX);\n\n            g.append('path')\n                .datum(data)\n                .attr('fill', 'none')\n                .attr('stroke', lineColors[index])\n                .attr('stroke-width', 2)\n                .attr('d', lineGenerator)\n                .on('mouseover', function (event) {\n                    const [xPos] = d3.pointer(event, svgRef.current);\n                    const month = x.domain().find((month) => {\n                        const monthPosition = x(month as string) ?? 0;\n                        return xPos >= monthPosition && xPos <= monthPosition + x.bandwidth();\n                    });\n\n                    if (month) {\n                        const closestDataPoint = data.find(d => d.month === month);\n                        if (closestDataPoint) {\n                            const scrollLeft = scrollContainerRef.current?.scrollLeft || 0;\n                            setTooltip({\n                                x: xPos + margin.left - scrollLeft,\n                                y: y(closestDataPoint[line.field]) + margin.top,\n                                content: closestDataPoint\n                            });\n                        }\n                    }\n                })\n                .on('mouseout', () => setTooltip(null));\n        });\n    }, [data, containerWidth, calculatedChartWidth, line, height, margin, bars, lines, showGrid, barColors, lineColors]);\n\n    return (\n        <div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>\n            <div style={{ position: 'relative' }}>\n                <div \n                    ref={scrollContainerRef}\n                    style={{ \n                        width: '100%', \n                        overflowX: needsHorizontalScroll ? 'auto' : 'hidden',\n                        overflowY: 'hidden'\n                    }}\n                >\n                    <svg \n                        ref={svgRef} \n                        width={calculatedChartWidth} \n                        height={height} \n                        viewBox={`0 0 ${calculatedChartWidth} ${height}`}\n                        style={{ display: 'block' }}\n                    />\n                </div>\n                {tooltip && (\n                    <div\n                        style={{\n                            position: 'absolute',\n                            left: tooltip.x,\n                            top: tooltip.y,\n                            pointerEvents: 'none',\n                            backgroundColor: 'white',\n                            zIndex: '99999',\n                            border: 'none',\n                            padding: '5px',\n                            borderRadius: '3px',\n                            transform: 'translate(-50%, -100%)'\n                        }}\n                    >\n                        <Box>\n                            <div style={{ background: '#F3F2F2', padding: '10px' }}>\n                                <Typography type='s4' style={{ whiteSpace: 'noWrap', width: '200px', color: '#232529' }}>{tooltip.content?.month}</Typography>\n                            </div>\n                            <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n\n                                {bars.map((bar, index) => (\n                                    <Box key={`bar-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: barColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {bar.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[bar.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                                {lines.map((line, index) => (\n                                    <Box key={`line-${index}`} sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>\n                                        <div className=\"circle\" style={{ backgroundColor: lineColors[index] }} />\n                                        <Typography type='s5' color='theme.secondary.900'>\n                                            {line.label}: <span style={{ fontWeight: 600 }}>$ {tooltip.content[line.field]}</span>\n                                        </Typography>\n                                    </Box>\n                                ))}\n                            </Box>\n                        </Box>\n                      \n                    </div>\n                )\n                }\n            </div>\n        </div>\n    );\n};\n\nexport default BarLineChart;"],"names":["data","height","margin","top","right","bottom","left","bars","lines","line","showGrid","barColors","lineColors","svgRef","useRef","wrapperRef","scrollContainerRef","tooltip","setTooltip","useState","containerWidth","setContainerWidth","formatNumber","num","d3.format","replace","needsHorizontalScroll","length","calculatedChartWidth","Math","max","useEffect","wrapper","current","resizeObserver","ResizeObserver","entries","newWidth","contentRect","width","observe","unobserve","yMax","d3.max","d","map","bar","field","yMin","d3.min","min","svg","d3.select","innerWidth","innerHeight","x","d3.scaleBand","domain","month","range","padding","y","d3.scaleLinear","nice","selectAll","remove","g","append","attr","call","d3.axisLeft","tickFormat","select","d3.axisBottom","ticks","enter","style","forEach","i","bandwidth","abs","on","event","xPos","yPos","d3.pointer","scrollLeft","_a","content","index","lineGenerator","d3.line","curve","d3.curveMonotoneX","datum","find","monthPosition","closestDataPoint","ref","children","jsxs","position","jsx","overflowX","overflowY","viewBox","display","pointerEvents","backgroundColor","zIndex","border","borderRadius","transform","Box","background","Typography","type","whiteSpace","color","sx","p","flexDirection","gap","alignItems","className","label","fontWeight"],"mappings":"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"}

package/dist/components/charts/line-chart/area-lineChart/index.esm.js

@@ -5,7 +5,7 @@ import max from "../../../../node_modules/d3-array/src/max/index.esm.js";
 import select from "../../../../node_modules/d3-selection/src/select/index.esm.js";
 import line from "../../../../node_modules/d3-shape/src/line/index.esm.js";
 import area from "../../../../node_modules/d3-shape/src/area/index.esm.js";
-const AreaLineChart = ({
+const AreaLineChartTwo = ({
   data,
   width = "100%",
   // Default to responsive width
@@ -50,6 +50,6 @@ const AreaLineChart = ({
   return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { width, height }, children: /* @__PURE__ */ jsx("svg", { ref: svgRef, width: "100%", height: "100%", ...rest }) });
 };
 export {
-  AreaLineChart as default
+  AreaLineChartTwo as default
 };
 //# sourceMappingURL=index.esm.js.map