npm - @bikdotai/bik-component-library - Versions diffs - 0.0.826 → 0.0.828 - Mend

@bikdotai/bik-component-library 0.0.826 → 0.0.828

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (361) hide show

package/dist/esm/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { HorizontalGraphI } from './HorizontalGraph.d';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label \|\| '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}
1	+ {"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\nimport { HorizontalGraphI } from './HorizontalGraph.type';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label \|\| '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.type.d.ts ADDED Viewed

@@ -0,0 +1,57 @@
+import { FontSpec, TooltipItem } from 'chart.js';
+export interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: number[];
+    labelColor?: string;
+    ticksCallback?: (value: string) => string;
+    stepSize?: number;
+    max?: number;
+    toolTipCallback?: (value: any) => string;
+}
+export interface RGBColorI {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export interface StackedDataset {
+    data: number[];
+    /** Single color for all bars, or array of colors for per-bar coloring */
+    backgroundColor: string | string[];
+    label?: string;
+}
+export interface HorizontalGraphI {
+    graphCanvasHeight?: number;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    xAxis: AxisDetailsI;
+    yAxis: AxisDetailsI;
+    barColorRGBA?: RGBColorI;
+    /** Array of colors for each bar (overrides barColorRGBA when provided) */
+    barColors?: string[];
+    outerPadding?: string;
+    maintainAspectRatio?: boolean;
+    showTotal?: boolean;
+    tooltipConfig?: {
+        titleCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        labelCallback?: (toolTipItem: TooltipItem<'bar'>) => string | string[];
+        footerCallback?: (toolTipItems: TooltipItem<'bar'>[]) => string | string[];
+        footerStyles?: {
+            footerFont?: Partial<FontSpec>;
+        };
+    };
+    skipOuterLayout?: boolean;
+    isInternationalStore?: boolean;
+    /** Enable stacked bars */
+    stacked?: boolean;
+    /** Additional datasets for stacked bars (used with stacked=true) */
+    stackedDatasets?: StackedDataset[];
+    /** Callback when a bar is clicked, receives the index of the clicked bar */
+    onBarClick?: (index: number) => void;
+}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/LazyCharts.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import { default as React } from 'react';
-export declare const LazyVerticalGraph: React.LazyExoticComponent<React.FC<VerticalGraphI>>;
+export declare const LazyVerticalGraph: React.LazyExoticComponent<React.FC<import('./VerticalBarGraph/VerticalGraph.type').VerticalGraphI>>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
-import { VerticalGraphI } from './VerticalGraph.d';
+import { VerticalGraphI } from './VerticalGraph.type';
 export declare const VerticalGraph: React.FC<VerticalGraphI>;

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.tsx"],"sourcesContent":["import BarChartIcon from '@src/assets/icons/ChartBar.svg';\nimport PieChartIcon from '@src/assets/icons/ChartPie.svg';\nimport MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tColor,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React, { Suspense, useEffect } from 'react';\nimport { useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport { VerticalGraphI } from './VerticalGraph.d';\nimport { GraphContainerWrapper } from './VerticalGraph.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const VerticalGraph: React.FC<VerticalGraphI> = (props) => {\n\tconst { PieChartComponent: PieChartAnalytics } = props;\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst [showPieChart, setShowPieChart] = useState(false);\n\tconst [pieChartData, setPieChartData] = useState<\n\t\t{\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[]\n\t>();\n\n\tuseEffect(() => {\n\t\tconst dataForPieChart: {\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[] = [];\n\t\tif (!showPieChart) {\n\t\t\treturn;\n\t\t}\n\t\tprops.popupData?.xAxis.data.forEach((ele, index) => {\n\t\t\tdataForPieChart.push({\n\t\t\t\tname: ele.toString(),\n\t\t\t\tcount: Number(props.popupData?.yAxis.data[index]) \|\| 0,\n\t\t\t});\n\t\t});\n\t\tsetPieChartData(dataForPieChart);\n\t}, [showPieChart, props.popupData?.xAxis.data, props.popupData?.yAxis.data]);\n\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\tconst noDataPresent = props.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst noDataPresentInPopup =\n\t\tprops.popupData?.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\tconst options = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\tconst optionsForPopup = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresentInPopup,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.xAxis.title,\n\t\t\t\t\ttext: props.popupData?.xAxis.title,\n\t\t\t\t\tcolor: props.popupData?.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.yAxis.title,\n\t\t\t\t\ttext: props.popupData?.yAxis.title,\n\t\t\t\t\tcolor: props.popupData?.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.popupData?.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresentInPopup ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\n\tconst data = {\n\t\tlabels: props.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.xAxis.data.length;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\tconst dataForPopup = {\n\t\tlabels: props.popupData?.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresentInPopup ? dummyValues : props.popupData?.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.popupData?.xAxis.data.length \|\| 0;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\n\treturn (\n\t\t<GraphContainerWrapper padding={props.outerPadding}>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<div style={{ marginBottom: 24 }}>\n\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div style={{ display: 'flex', justifyContent: 'flex-end' }}>\n\t\t\t\t{props.showConvertToPieChart && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPieChart(true);\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{props.allowChartPopup && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetShowPopup(false);\n\t\t\t\t\t\tsetShowPieChart(false);\n\t\t\t\t\t}}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={props.popupData?.chartHeading}\n\t\t\t\t\twidth=\"75%\"\n\t\t\t\t\theaderRightCustomElement={\n\t\t\t\t\t\tprops.showConvertToPieChart ? (\n\t\t\t\t\t\t\t!showPieChart ? (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(true);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={BarChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : null\n\t\t\t\t\t}\n\t\t\t\t\theaderLeftCustomElement={props.popupData?.headerLeftCustomElement}\n\t\t\t\t>\n\t\t\t\t\t{showPieChart && pieChartData && PieChartAnalytics && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Suspense fallback={<div>Loading...</div>}>\n\t\t\t\t\t\t\t\t<PieChartAnalytics\n\t\t\t\t\t\t\t\t\tslices={pieChartData}\n\t\t\t\t\t\t\t\t\tsize={props.pieChartSize}\n\t\t\t\t\t\t\t\t\thideTitle={true}\n\t\t\t\t\t\t\t\t\tcurrencyProps={props.currencyProps}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Suspense>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!showPieChart && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Bar options={optionsForPopup} data={dataForPopup} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","VerticalGraph","props","PieChartAnalytics","showPopup","setShowPopup","useState","showPieChart","setShowPieChart","pieChartData","setPieChartData","useEffect","dataForPieChart","ele","index","dummyValues","noDataPresent","noDataPresentInPopup","yAxisConfigForNoData","options","COLORS","FONTS","optionsForPopup","data","d","context","rgba","gradientColorSet","dataSetLen","counter","rgb","i","rgbaColor","dataForPopup","jsxs","GraphContainerWrapper","jsx","TitleMedium","IconButton","PieChartIcon","MaximizeIcon","Bar","StyledModal","BarChartIcon","Suspense"],"mappings":"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"}
1	+ {"version":3,"file":"VerticalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.tsx"],"sourcesContent":["import BarChartIcon from '@src/assets/icons/ChartBar.svg';\nimport PieChartIcon from '@src/assets/icons/ChartPie.svg';\nimport MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tColor,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React, { Suspense, useEffect } from 'react';\nimport { useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport { GraphContainerWrapper } from './VerticalGraph.styles';\nimport { VerticalGraphI } from './VerticalGraph.type';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const VerticalGraph: React.FC<VerticalGraphI> = (props) => {\n\tconst { PieChartComponent: PieChartAnalytics } = props;\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst [showPieChart, setShowPieChart] = useState(false);\n\tconst [pieChartData, setPieChartData] = useState<\n\t\t{\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[]\n\t>();\n\n\tuseEffect(() => {\n\t\tconst dataForPieChart: {\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[] = [];\n\t\tif (!showPieChart) {\n\t\t\treturn;\n\t\t}\n\t\tprops.popupData?.xAxis.data.forEach((ele, index) => {\n\t\t\tdataForPieChart.push({\n\t\t\t\tname: ele.toString(),\n\t\t\t\tcount: Number(props.popupData?.yAxis.data[index]) \|\| 0,\n\t\t\t});\n\t\t});\n\t\tsetPieChartData(dataForPieChart);\n\t}, [showPieChart, props.popupData?.xAxis.data, props.popupData?.yAxis.data]);\n\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\tconst noDataPresent = props.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst noDataPresentInPopup =\n\t\tprops.popupData?.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\tconst options = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\tconst optionsForPopup = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresentInPopup,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.xAxis.title,\n\t\t\t\t\ttext: props.popupData?.xAxis.title,\n\t\t\t\t\tcolor: props.popupData?.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.yAxis.title,\n\t\t\t\t\ttext: props.popupData?.yAxis.title,\n\t\t\t\t\tcolor: props.popupData?.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.popupData?.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresentInPopup ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\n\tconst data = {\n\t\tlabels: props.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.xAxis.data.length;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\tconst dataForPopup = {\n\t\tlabels: props.popupData?.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresentInPopup ? dummyValues : props.popupData?.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.popupData?.xAxis.data.length \|\| 0;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\n\treturn (\n\t\t<GraphContainerWrapper padding={props.outerPadding}>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<div style={{ marginBottom: 24 }}>\n\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div style={{ display: 'flex', justifyContent: 'flex-end' }}>\n\t\t\t\t{props.showConvertToPieChart && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPieChart(true);\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{props.allowChartPopup && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetShowPopup(false);\n\t\t\t\t\t\tsetShowPieChart(false);\n\t\t\t\t\t}}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={props.popupData?.chartHeading}\n\t\t\t\t\twidth=\"75%\"\n\t\t\t\t\theaderRightCustomElement={\n\t\t\t\t\t\tprops.showConvertToPieChart ? (\n\t\t\t\t\t\t\t!showPieChart ? (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(true);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={BarChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(false);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : null\n\t\t\t\t\t}\n\t\t\t\t\theaderLeftCustomElement={props.popupData?.headerLeftCustomElement}\n\t\t\t\t>\n\t\t\t\t\t{showPieChart && pieChartData && PieChartAnalytics && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Suspense fallback={<div>Loading...</div>}>\n\t\t\t\t\t\t\t\t<PieChartAnalytics\n\t\t\t\t\t\t\t\t\tslices={pieChartData}\n\t\t\t\t\t\t\t\t\tsize={props.pieChartSize}\n\t\t\t\t\t\t\t\t\thideTitle={true}\n\t\t\t\t\t\t\t\t\tcurrencyProps={props.currencyProps}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Suspense>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!showPieChart && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Bar options={optionsForPopup} data={dataForPopup} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","VerticalGraph","props","PieChartAnalytics","showPopup","setShowPopup","useState","showPieChart","setShowPieChart","pieChartData","setPieChartData","useEffect","dataForPieChart","ele","index","dummyValues","noDataPresent","noDataPresentInPopup","yAxisConfigForNoData","options","COLORS","FONTS","optionsForPopup","data","d","context","rgba","gradientColorSet","dataSetLen","counter","rgb","i","rgbaColor","dataForPopup","jsxs","GraphContainerWrapper","jsx","TitleMedium","IconButton","PieChartIcon","MaximizeIcon","Bar","StyledModal","BarChartIcon","Suspense"],"mappings":"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"}

package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.type.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+export interface AxisDetailsI {
+    title?: string;
+    titleColor?: string;
+    data: (string | number)[];
+    labelColor?: string;
+    ticksCallback?: (value: string) => string;
+    toolTipCallback?: (value: string) => string;
+}
+export interface RGBColorI {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+export interface ChartHeadingI {
+    heading: string;
+    color?: string;
+}
+export interface VerticalGraphI {
+    graphCanvasHeight?: number;
+    tickColor?: string;
+    labelColor?: string;
+    chartHeading?: ChartHeadingI;
+    xAxis: AxisDetailsI;
+    yAxis: AxisDetailsI;
+    barColorRGBA: RGBColorI;
+    isFunnel?: boolean;
+    outerPadding?: string;
+    allowChartPopup?: boolean;
+    showConvertToPieChart?: boolean;
+    pieChartSize?: number;
+    popupData?: {
+        xAxis: AxisDetailsI;
+        yAxis: AxisDetailsI;
+        barColorRGBA: RGBColorI;
+        chartHeading?: string;
+        headerLeftCustomElement?: React.ReactNode;
+    };
+    currencyProps?: {
+        symbol?: string;
+        isInternationalStore?: boolean;
+    };
+    showTotal?: boolean;
+    PieChartComponent?: React.ComponentType<any>;
+}

package/dist/esm/components/avatar/Avatar.d.ts CHANGED Viewed

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from './AvatarHelper';
 export declare const AVATAR_SIZE_VS_ICON_SIZE_MAP: {
+    EXTRA_SMALL: number;
     SMALL: number;
     MEDIUM: number;
-    INBOX: number;
     LARGE: number;
 };
 export declare const BACKGROUND_VS_TEXT_COLOR_MAP: {
     LIGHT: string;
     WHITE: string;
     DARK: string;
+    BRAND: string;
 };
 export type AvatarProps = {
     type: AVATAR_TYPES;

package/dist/esm/components/avatar/Avatar.js CHANGED Viewed

@@ -1,82 +1,60 @@
-import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import { useState as k } from "react";
-import { AvatarStyle as v } from "./Avatar.styled.js";
-import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as h, AVATAR_SIZE_MAP as o } from "./AvatarHelper.js";
-import { BodyTiny as R, TitleSmall as w, TitleMedium as O } from "../TypographyStyle.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useState as R } from "react";
+import { TitleMedium as k, TitleSmall as A, SubHeading as w, BodyTiny as O } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
-import A from "../../assets/icons/bik_livechat.svg.js";
+import x from "../../assets/icons/bik_livechat.svg.js";
 import u from "../../assets/icons/email-channel.svg.js";
 import d from "../../assets/icons/facebook_channel.svg.js";
 import z from "../../assets/icons/gmail.svg.js";
-import x from "../../assets/icons/instagram-channel.svg.js";
-import C from "../../assets/icons/task.svg.js";
-import B from "../../assets/icons/whatsapp_color.svg.js";
-const n = {
-  [a.SMALL]: 16,
-  [a.MEDIUM]: 20,
-  [a.INBOX]: 24,
-  [a.LARGE]: 32
-}, c = {
-  [h.LIGHT]: i.content.secondary,
-  [h.WHITE]: i.content.secondary,
-  [h.DARK]: i.surface.standard
+import C from "../../assets/icons/instagram-channel.svg.js";
+import L from "../../assets/icons/task.svg.js";
+import U from "../../assets/icons/whatsapp_color.svg.js";
+import { AvatarStyle as B } from "./Avatar.styled.js";
+import { SIZE as n, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as l } from "./AvatarHelper.js";
+const a = {
+  [n.EXTRA_SMALL]: 10,
+  [n.SMALL]: 16,
+  [n.MEDIUM]: 20,
+  [n.LARGE]: 32
+}, b = {
+  [s.LIGHT]: i.content.secondary,
+  [s.WHITE]: i.content.secondary,
+  [s.DARK]: i.surface.standard,
+  [s.BRAND]: i.background.inverseLight
 };
-var U = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(U || {});
-const Y = (t) => {
-  const [l, b] = k(!1), m = () => {
-    const s = (t.name || "").split(".").join(" ").split(" ").map((T) => T.charAt(0).toUpperCase()).slice(0, 2).join("");
-    if (t.size === a.SMALL)
-      return /* @__PURE__ */ e(
-        R,
-        {
-          style: { color: c[t.background] },
-          children: s
-        }
-      );
-    if (t.size === a.MEDIUM || t.size === a.INBOX)
-      return /* @__PURE__ */ e(
-        w,
-        {
-          style: { color: c[t.background] },
-          children: s
-        }
-      );
-    if (t.size === a.LARGE)
-      return /* @__PURE__ */ e(
-        O,
-        {
-          style: { color: c[t.background] },
-          children: s
-        }
-      );
-  }, I = () => t.useNameFallback && (!t.photoUrl || l) && t.name ? /* @__PURE__ */ e("div", { children: m() }) : t.useNameFallback && t.photoUrl && !l ? /* @__PURE__ */ e(
+var P = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(P || {});
+const J = (t) => {
+  const [h, f] = R(!1), g = () => {
+    const o = (t.name || "").split(".").join(" ").split(" ").map((v) => v.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
+    return t.size === n.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === n.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : t.size === n.SMALL ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : /* @__PURE__ */ e(O, { style: { color: c, fontSize: "6.667px", lineHeight: "8px" }, children: o });
+  }, I = () => t.useNameFallback && (!t.photoUrl || h) && t.name ? /* @__PURE__ */ e("div", { children: g() }) : t.useNameFallback && t.photoUrl && !h ? /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: o[t.size],
-      height: o[t.size],
+      width: l[t.size],
+      height: l[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl,
       onError: () => {
-        b(!0);
+        f(!0);
       }
     }
   ) : /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: o[t.size],
-      height: o[t.size],
+      width: l[t.size],
+      height: l[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl
     }
-  ), f = () => {
+  ), y = () => {
     switch (t.channelName) {
       case "email":
         return /* @__PURE__ */ e(u, { width: 11, height: 11 });
@@ -89,17 +67,17 @@ const Y = (t) => {
       case "messenger":
         return /* @__PURE__ */ e(d, { width: 11, height: 11 });
       case "instagram":
-        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(C, { width: 11, height: 11 });
       case "whatsapp":
-        return /* @__PURE__ */ e(B, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(U, { width: 11, height: 11 });
       case "gmail":
         return /* @__PURE__ */ e(z, { width: 11, height: 11 });
       case "tasks":
-        return /* @__PURE__ */ e(C, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(L, { width: 11, height: 11 });
       case "livechat":
-        return /* @__PURE__ */ e(A, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
     }
-  }, y = () => t.status ? /* @__PURE__ */ e(
+  }, T = () => t.status ? /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -110,28 +88,28 @@ const Y = (t) => {
       }
     }
   ) : null;
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ m(
     "div",
     {
       style: {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ g(
-          v,
+        /* @__PURE__ */ m(
+          B,
           {
-            type: t.type === r.IMAGE && (l || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
+            type: t.type === r.IMAGE && (h || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
             size: t.size,
             background: t.background,
             children: [
               t.type === r.IMAGE && I(),
-              t.type === r.INITIALS && /* @__PURE__ */ e("div", { children: m() }),
+              t.type === r.INITIALS && /* @__PURE__ */ e("div", { children: g() }),
               t.type === r.ICON && t.icon && /* @__PURE__ */ e(
                 t.icon,
                 {
-                  width: n[t.size],
-                  height: n[t.size],
-                  color: c[t.background]
+                  width: a[t.size],
+                  height: a[t.size],
+                  color: b[t.background]
                 }
               )
             ]
@@ -142,8 +120,8 @@ const Y = (t) => {
           {
             style: {
               position: "absolute",
-              left: n[t.size] + "px",
-              top: n[t.size] + "px",
+              left: a[t.size] + "px",
+              top: a[t.size] + "px",
               width: 14,
               height: 14,
               borderRadius: t?.borderRadius || "50%",
@@ -152,7 +130,7 @@ const Y = (t) => {
               backgroundColor: t.inboxSettings.isSelected ? t.inboxSettings.isComments ? i.content.primary : i.background.brandLight : t.inboxSettings.isComments ? i.content.primary : i.surface.standard,
               alignItems: "center"
             },
-            children: f()
+            children: y()
           }
         ),
         t.status && /* @__PURE__ */ e(
@@ -160,8 +138,8 @@ const Y = (t) => {
           {
             style: {
               position: "absolute",
-              left: n[t.size] + "px",
-              top: n[t.size] + "px",
+              left: a[t.size] + "px",
+              top: a[t.size] + "px",
               width: 11,
               height: 11,
               borderRadius: "50%",
@@ -170,7 +148,7 @@ const Y = (t) => {
               backgroundColor: i.surface.standard,
               alignItems: "center"
             },
-            children: y()
+            children: T()
           }
         )
       ]
@@ -178,9 +156,9 @@ const Y = (t) => {
   );
 };
 export {
-  n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
-  Y as Avatar,
-  c as BACKGROUND_VS_TEXT_COLOR_MAP,
-  U as MESSAGE_CHANNELS
+  a as AVATAR_SIZE_VS_ICON_SIZE_MAP,
+  J as Avatar,
+  b as BACKGROUND_VS_TEXT_COLOR_MAP,
+  P as MESSAGE_CHANNELS
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/esm/components/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM \|\| props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\n\t\t);\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}

package/dist/esm/components/avatar/Avatar.styled.js CHANGED Viewed

@@ -1,14 +1,14 @@
-import a from "styled-components";
-import { AVATAR_SIZE_MAP as t, AVATAR_TYPES as d, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
-import { COLORS as o } from "../../constants/Theme.js";
-const A = a.div`
-	width: ${(r) => t[r.size] + "px"};
-	height: ${(r) => t[r.size] + "px"};
+import o from "styled-components";
+import { AVATAR_SIZE_MAP as d, AVATAR_TYPES as t, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
+import { COLORS as a } from "../../constants/Theme.js";
+const A = o.div`
+	width: ${(r) => d[r.size] + "px"};
+	height: ${(r) => d[r.size] + "px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background === e.LIGHT ? o.background.base : r.background === e.WHITE ? o.surface.standard : o.background.inverse};
-	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + o.stroke.primary : 0};
+	background-color: ${(r) => r.type === t.IMAGE ? "null" : r.background === e.LIGHT ? a.background.base : r.background === e.WHITE ? a.surface.standard : r.background === e.BRAND ? a.background.brandLight : a.background.inverse};
+	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + a.stroke.primary : 0};
 	border-radius: 50%;
 `;
 export {

package/dist/esm/components/avatar/Avatar.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,~~WACfA~~,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}
1	+ {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,aAClBA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}