npm - @bikdotai/bik-component-library - Versions diffs - 0.0.838 → 0.0.839-0 - Mend

@bikdotai/bik-component-library 0.0.838 → 0.0.839-0

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 (25) hide show

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number \| string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' \| 'yesterday' \| '7 days' \| '30 days' \| 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' \| 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' \| 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\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\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\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{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div className={'icon--holder'} onClick={onTrailIconClick}>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' \| 'negative' \| 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length \|\| 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number \| string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' \| 'yesterday' \| '7 days' \| '30 days' \| 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' \| 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' \| 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\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\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\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{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test=\"analytics-trend-trailing-icon\"\n\t\t\t\t\t\t\t\tclassName={'icon--holder'}\n\t\t\t\t\t\t\t\tonClick={onTrailIconClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' \| 'negative' \| 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length \|\| 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"0oBAuDaA,GAAoD,CAAC,CACjE,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,aACP,SAAAC,EACA,YAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,GACP,eAAAC,EAAiB,GACjB,KAAAC,EAAO,MACP,MAAAC,EAAQ,GACR,UAAAC,EACA,aAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,cAAAC,EACA,UAAAC,EACA,SAAAC,EACA,eAAAC,EACA,WAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,cAAAC,EACA,uBAAAC,EACA,qBAAAC,EACA,KAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,mBAAAC,CACD,IAAM,CACL,MAAMC,EAAYvB,IAAS,MAAQwB,EAAAA,WAAaC,EAAAA,YAC1CC,EACL,OAAOjC,EAAiB,IACrBA,EAAe,EACd,WACAA,IAAiB,EACjB,UACA,WACD,OAEEkC,EACL,OAAOlC,EAAiB,IACrBQ,EACC,KAAK,MAAMR,CAAY,EACvB,KAAK,IAAI,KAAK,MAAMA,CAAY,CAAC,EAClC,OAEEmC,EAAkB,IACnB,OAAOpC,EAAU,IACb,KAGJ,OAAOA,GAAU,UAChBU,EACCV,EAAQ,IACP0B,EACI,GAAGf,GAAgB,EAAE,GAAG0B,EAAAA,mCAC9BrC,CAAA,CACA,IAAImB,GAAc,EAAE,GAEd,GAAGR,GAAgB,EAAE,GAAG2B,EAAAA,4BAC9BtC,CAAA,CACA,IAAImB,GAAc,EAAE,GAGf,GAAGR,GAAgB,EAAE,GAAG,IAAI,KAAK,aAAa,QAAS,CAC7D,sBAAuB,CAAA,CACvB,EAAE,OAAOX,CAAK,CAAC,IAAImB,GAAc,EAAE,GAKhC,GAAGR,GAAgB,EAAE,GAAGX,CAAK,IAAImB,GAAc,EAAE,GAGnDoB,EAAmBC,GAAsB,CAC9C,MAAMC,EAAO,KAAK,IAAID,CAAS,EAC/B,OAAIC,EAAO,IAAM,EACT,GAAGA,EAAK,QAAQ,CAAC,CAAC,KAEnB,GAAGA,CAAI,IACf,EAEA,OACCC,EAAAA,IAACC,EAAAA,wBAAA,CACA,KAAArC,EACA,MAAO,CACN,GAAGiB,CAAA,EAGJ,SAAAqB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,IAAKjB,EAAO,GAAK,EACjB,iBAAkBpB,EAAiB,EAAI,EACvC,iBAAkBsC,EAAAA,OAAO,OAAO,QAChC,iBAAkB,QAClB,YAAcvC,EAAY,EAAL,GACrB,aAAeA,EAAY,EAAL,GACtB,OAAQ,OACR,eAAgBqB,EAAO,aAAe,gBACtC,WAAY,SACZ,GAAIN,GAAuB,CAAA,CAAC,EAG5B,SAAA,CAAA,CAAC,CAACM,GACFe,EAAAA,IAACI,EAAAA,cAAA,CAAc,MAAO,CAAE,GAAGlB,CAAA,EAC1B,SAAAc,EAAAA,IAACf,EAAA,CAAA,CAAK,CAAA,CACP,EAEDiB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,SACf,IAAK,EACL,OAAQ,OACR,GAAIxB,GAAc,CAAA,CAAC,EAGpB,SAAA,CAAAwB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,IAAK,EACL,WAAY,QAAA,EAGb,SAAA,CAAAF,EAAAA,IAACK,EAAAA,YAAA,CACA,MAAO,CACN,MAAOF,EAAAA,OAAO,QAAQ,SAAA,EAGtB,SAAA9C,CAAA,CAAA,EAGDM,SACC2C,UAAA,CAAQ,KAAM3C,EAAS,UAAW,QAAS,MAAO,IAClD,SAAAqC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,OAAQ,UACR,OAAQ,MAAA,EAGT,SAAAA,EAAAA,IAACO,EAAAA,QAAA,CACA,MAAOJ,EAAAA,OAAO,QAAQ,QACtB,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,CACD,CACD,CAAA,CAAA,CAAA,EAIFD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,IAAK,GACL,WAAY,SACZ,GAAInC,EAAQ,CAAE,eAAgB,iBAAoB,CAAA,CAAC,EAGnD,SAAA,CAAAO,GAAa0B,EAAAA,IAACQ,yBAAA,CAAuB,MAAO,IAAK,OAAQ,GAAI,EAC7D,CAAClC,GACD0B,EAAAA,IAACX,EAAA,CACA,MAAO,CACN,MAAOc,EAAAA,OAAO,QAAQ,OAAA,EAGtB,SAAAT,EAAA,CAAgB,CAAA,EAGlB,OAAOX,GAA2B,UAClCiB,EAAAA,IAACS,EAAAA,IAAA,CACA,QAAS,GAAG1B,CAAsB,IAClC,MAAM,QACN,KAAK,SAAA,CAAA,EAGNvB,IAAS,cAAgB,CAACc,GAAa,CAACP,GACxCiC,EAAAA,IAACU,EAAA,CACA,SAAAjD,EACA,YAAAC,EACA,QAAA+B,EACA,UAAWD,EACX,SAAAjB,EACA,eAAAC,EACA,aAAAP,EACA,eAAAW,EACA,qBAAAI,EACA,oBAAAG,EACA,mBAAAC,CAAA,CAAA,EAGDd,GAAa,CAACP,GAASP,IAAS,cAChCwC,EAAAA,IAACQ,EAAAA,uBAAA,CAAuB,OAAQ,GAAI,MAAO,IAAK,UAAW,CAAA,CAAG,EAE9DhD,IAAS,YACT,CAACc,GACD,OAAOD,EAAkB,KACxB2B,EAAAA,IAACS,EAAAA,IAAA,CACA,QAAS,GAAGpC,CAAa,KACzB,MAAM,QACN,KAAK,SAAA,CAAA,EAGPN,GAAS,CAACO,GAAa,OAAOmB,EAAY,KAC1CO,EAAAA,IAACS,EAAAA,IAAA,CAAI,QAAS,GAAGhB,CAAO,KAAM,MAAM,QAAQ,KAAK,UAAU,EAE3D,CAAC1B,GAAS,CAACO,GAAaQ,GAAiBA,GAAiB,EAC1DkB,EAAAA,IAACS,EAAAA,IAAA,CACA,QAASZ,EAAgBf,CAAa,EACtC,MAAM,QACN,KAAK,SAAA,CAAA,EAGNkB,EAAAA,IAAAW,EAAAA,SAAA,CAAA,CAAE,CAAA,CAAA,CAAA,EAGHnD,IAAS,YAAc,CAACc,GAAa,CAACP,GACtCiC,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,UAAW,EAAA,EACxB,SAAAA,EAAAA,IAACU,EAAA,CACA,SAAAjD,EACA,YAAAC,EACA,QAAA+B,EACA,UAAWD,EACX,SAAAjB,EACA,eAAAC,EACA,aAAAP,EACA,eAAAW,EACA,qBAAAI,EACA,oBAAAG,EACA,mBAAAC,CAAA,CAAA,EAEF,EAEAd,GAAad,IAAS,YACtBwC,EAAAA,IAACQ,EAAAA,uBAAA,CAAuB,OAAQ,GAAI,MAAO,IAAK,UAAW,CAAA,CAAG,CAAA,CAAA,CAAA,EAG/DpC,GAAmB,CAACE,GACpB0B,EAAAA,IAACM,EAAAA,SAAQ,KAAMlC,EAAiB,UAAW,QACzC,SAAAF,GACA8B,EAAAA,IAAC,MAAA,CACA,YAAU,gCACV,UAAW,eACX,QAAS7B,EAER,SAAAyC,GAAAA,QAAM,cAAc1C,EAAc,CAClC,OAAQ,GACR,MAAO,GACP,MAAOiC,EAAAA,OAAO,QAAQ,SAAA,CACtB,CAAA,CAAA,CACF,CAEF,CAAA,CAAA,CAAA,CAEF,CAAA,CAGH,EAEMO,EAYD,CAAC,CACL,QAAAjB,EACA,UAAAoB,EACA,SAAApD,EACA,YAAAC,EACA,SAAAa,EACA,eAAAC,EACA,aAAAP,EACA,eAAAW,EACA,qBAAAI,EACA,oBAAAG,EACA,mBAAAC,CACD,IAAM,CACL,MAAM0B,EAAiB,IAAM,CAC5B,IAAIC,EAAc,KAClB,GAAIxC,EAQH,OAPIS,EACH+B,EAAc,OACbpB,qCAAmC,KAAK,IAAIpB,CAAQ,CAAC,CAAA,EAGtDwC,EAAc,OAAOnB,EAAAA,4BAA4B,KAAK,IAAIrB,CAAQ,CAAC,CAAC,EAEjEA,EAAW,EACP,IAAMwC,EAENA,CAGV,EAEMC,EAAuB,IAAM,CAClC,MAAMC,IACH1C,GAAY,GAAK,EAAI,IAAM,KAAON,GAAgB,IAKrD,OAHC,OAAOM,EAAa,IACjB,KACA,GAAG0C,GAAkB,EAAE,GAAGH,EAAA,CAAgB,EAE/C,EAEM,CAACI,EAAcC,CAAe,EAAIC,EAAAA,SACvCJ,EAAA,CAAqB,EAEhB,CAACK,EAAcC,CAAe,EAAIF,EAAAA,SACvChC,GAAsB,EAAA,EAGvBmC,EAAAA,UAAU,IAAM,CACXnC,GAGJkC,EACC7D,IAAa,QACV,eACAA,IAAa,YACb,kBACAA,IAAa,SACb,iBACAA,IAAa,UACb,kBACAA,IAAa,UAAYC,EACzB8D,UAAU,mCAAmC9D,CAAW,EACxD,EAAA,CAEL,EAAG,CAACD,EAAUC,CAAW,CAAC,EAE1B6D,EAAAA,UAAU,IAAM,CACfJ,EAAgBH,GAAsB,CACvC,EAAG,CAACzC,CAAQ,CAAC,EAEb,MAAMkD,EAAYZ,IAAc,WAAaa,EAAAA,QAAgBC,EAAAA,QAEvDC,EACLf,IAAc,WACXV,EAAAA,OAAO,WAAW,SAAS,QAC3BU,IAAc,WACdV,EAAAA,OAAO,WAAW,SAAS,QAC3BA,EAAAA,OAAO,QAAQ,YAEnB,OACCD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,cAAe,MACf,SAAU,MAAA,EAGV,SAAA,CAAA,OAAOT,GAAY,UACnBO,EAAAA,IAACyB,EAAA,CACA,MAAAG,EACA,OAAQ,GACR,MAAO,GACP,MAAO,CAAE,YAAa,EAAG,GAAIhD,GAAkB,CAAA,CAAC,CAAG,CAAA,EAGpD,OAAOa,GAAY,UAAYoB,UAC9BgB,UAAA,CAAQ,MAAO,CAAE,MAAAD,CAAA,EAChB,SAAA,CAAAf,IAAc,UAAY,EAAIpB,EAAU,IAAOA,EAAU,OACzD,GAAA,EACF,EAEA,CAAC,CAAClB,GACFyB,MAAC6B,EAAAA,QAAA,CAAQ,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,WAAA,EACrD,SAAA,IAAIe,CAAY,IAClB,EAEA,CAAC3C,IAAaC,GAAgB,QAAU,GAAK,SAC5CqD,UAAA,CAAQ,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,aACrD,SAAA,GAAG3B,CAAc,GACnB,EAGAf,IACC0B,EACAa,EAAAA,IAACM,WAAQ,KAAMnB,EAAqB,UAAU,SAC7C,SAAAa,EAAAA,IAAC6B,EAAAA,QAAA,CACA,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,WAAA,EAE7C,SAAAf,GAAsBiC,CAAA,CAAA,CACxB,CACD,EAEArB,EAAAA,IAAC6B,EAAAA,QAAA,CAAQ,MAAO,CAAE,WAAY,EAAG,MAAO1B,EAAAA,OAAO,QAAQ,WAAA,EACrD,YAAsBkB,EACxB,EAAA,CAAA,CAAA,CAIL"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),c=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),_=require("../../assets/icons/task.svg.js"),j=require("../../assets/icons/whatsapp_color.svg.js"),S=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var A=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(A||{});const C=e=>{const[l,g]=m.useState(!1),h=()=>{const s=(e.name||"").split(".").join(" ").split(" ").map(b=>b.charAt(0).toUpperCase()).slice(0,2).join(""),r=u[e.background];return e.size===i.SIZE.LARGE?t.jsx(c.TitleMedium,{style:{color:r},children:s}):e.size===i.SIZE.MEDIUM?t.jsx(c.TitleSmall,{style:{color:r},children:s}):e.size===i.SIZE.SMALL?t.jsx(c.SubHeading,{style:{color:r},children:s}):t.jsx(c.BodyTiny,{style:{color:r,fontSize:"6.667px",lineHeight:"8px"},children:s})},R=()=>e.useNameFallback&&(!e.photoUrl||l)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!l?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{g(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(o.default,{width:11,height:11});case"smtp":return t.jsx(o.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(j.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(_.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},O=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,T=()=>e.type===i.AVATAR_TYPES.IMAGE&&(l||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(S.AvatarStyle,{type:T(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&R(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:u[e.background]})]}),e.inboxSettings&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:O()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=C;exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;exports.MESSAGE_CHANNELS=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),c=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),_=require("../../assets/icons/task.svg.js"),j=require("../../assets/icons/whatsapp_color.svg.js"),S=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var A=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(A||{});const C=e=>{const[l,g]=m.useState(!1),h=()=>{const s=(e.name||"").split(".").join(" ").split(" ").map(b=>b.charAt(0).toUpperCase()).slice(0,2).join(""),r=u[e.background];return e.size===i.SIZE.LARGE?t.jsx(c.TitleMedium,{style:{color:r},children:s}):e.size===i.SIZE.MEDIUM?t.jsx(c.TitleSmall,{style:{color:r},children:s}):e.size===i.SIZE.SMALL?t.jsx(c.SubHeading,{style:{color:r},children:s}):t.jsx(c.BodyTiny,{style:{color:r,fontSize:"6.667px",lineHeight:"8px"},children:s})},R=()=>e.useNameFallback&&(!e.photoUrl||l)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!l?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{g(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(o.default,{width:11,height:11});case"smtp":return t.jsx(o.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(j.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(_.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},O=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,T=()=>e.type===i.AVATAR_TYPES.IMAGE&&(l||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(S.AvatarStyle,{type:T(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&R(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:u[e.background]})]}),e.inboxSettings&&t.jsx("div",{"data-test":"avatar-inbox-badge",style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{"data-test":"avatar-status-indicator",style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:O()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=C;exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;exports.MESSAGE_CHANNELS=A;
 //# sourceMappingURL=Avatar.js.map

package/dist/cjs/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 {\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","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"ynBAuBaA,EAA+B,CAC3C,CAACC,EAAAA,KAAK,WAAW,EAAG,GACpB,CAACA,EAAAA,KAAK,KAAK,EAAG,GACd,CAACA,EAAAA,KAAK,MAAM,EAAG,GACf,CAACA,EAAAA,KAAK,KAAK,EAAG,EACf,EAEaC,EAA+B,CAC3C,CAACC,oBAAkB,KAAK,EAAGC,EAAAA,OAAO,QAAQ,UAC1C,CAACD,oBAAkB,KAAK,EAAGC,EAAAA,OAAO,QAAQ,UAC1C,CAACD,oBAAkB,IAAI,EAAGC,EAAAA,OAAO,QAAQ,SACzC,CAACD,oBAAkB,KAAK,EAAGC,EAAAA,OAAO,WAAW,YAC9C,EAmBO,IAAWC,GAAAA,IACjBA,EAAA,UAAY,YACZA,EAAA,UAAY,YACZA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,qBAAuB,MACvBA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,iBAAmB,mBACnBA,EAAA,MAAQ,QACRA,EAAA,aAAe,WAbEA,IAAAA,GAAA,CAAA,CAAA,EAgBX,MAAMC,EAAiCC,GAAU,CACvD,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAkB,EAAK,EAEjDC,EAAc,IAAM,CACzB,MAAMC,GAAYL,EAAM,MAAQ,IAC9B,MAAM,GAAG,EACT,KAAK,GAAG,EACR,MAAM,GAAG,EACT,IAAKM,GAAMA,EAAE,OAAO,CAAC,EAAE,YAAA,CAAa,EACpC,MAAM,EAAG,CAAC,EACV,KAAK,EAAE,EAEHC,EAAQZ,EAA6BK,EAAM,UAAU,EAE3D,OAAIA,EAAM,OAASN,EAAAA,KAAK,YACfc,EAAAA,YAAA,CAAY,MAAO,CAAE,MAAAD,GAAU,SAAAF,EAAS,EAE7CL,EAAM,OAASN,EAAAA,KAAK,aACfe,EAAAA,WAAA,CAAW,MAAO,CAAE,MAAAF,GAAU,SAAAF,EAAS,EAE5CL,EAAM,OAASN,EAAAA,KAAK,YACfgB,EAAAA,WAAA,CAAW,MAAO,CAAE,MAAAH,GAAU,SAAAF,EAAS,EAK/CM,EAAAA,IAACC,EAAAA,SAAA,CAAS,MAAO,CAAE,MAAAL,EAAO,SAAU,UAAW,WAAY,KAAA,EACzD,SAAAF,CAAA,CACF,CAEF,EAEMQ,EAAgB,IACjBb,EAAM,kBAAoB,CAACA,EAAM,UAAYC,IAAaD,EAAM,KAC5DW,EAAAA,IAAC,MAAA,CAAK,SAAAP,EAAA,CAAY,CAAE,EAExBJ,EAAM,iBAAmBA,EAAM,UAAY,CAACC,EAE9CU,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,MAAOG,EAAAA,gBAAgBd,EAAM,IAAI,EACjC,OAAQc,EAAAA,gBAAgBd,EAAM,IAAI,EAClC,MAAO,CACN,aAAcA,GAAO,cAAgB,MACrC,UAAW,SAAA,EAEZ,IAAKA,EAAM,SACX,QAAS,IAAM,CACdE,EAAY,EAAI,CACjB,CAAA,CAAA,EAMFS,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,MAAOG,EAAAA,gBAAgBd,EAAM,IAAI,EACjC,OAAQc,EAAAA,gBAAgBd,EAAM,IAAI,EAClC,MAAO,CACN,aAAcA,GAAO,cAAgB,MACrC,UAAW,SAAA,EAEZ,IAAKA,EAAM,QAAA,CAAA,EAKRe,EAAiB,IAAM,CAC5B,OAAQf,EAAM,YAAA,CACb,IAAK,QACJ,OAAOW,EAAAA,IAACK,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAC1C,IAAK,OACJ,OAAOL,EAAAA,IAACK,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAC1C,IAAK,WACJ,OAAOL,EAAAA,IAACM,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,mBACJ,OAAON,EAAAA,IAACM,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,YACJ,OAAON,EAAAA,IAACM,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,YACJ,OAAON,EAAAA,IAACO,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EAC9C,IAAK,WACJ,OAAOP,EAAAA,IAACQ,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,QACJ,OAAOR,EAAAA,IAACS,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAC1C,IAAK,QACJ,OAAOT,EAAAA,IAACU,EAAAA,QAAA,CAAS,MAAO,GAAI,OAAQ,GAAI,EACzC,IAAK,WACJ,OAAOV,EAAAA,IAACW,EAAAA,QAAA,CAAgB,MAAO,GAAI,OAAQ,GAAI,CAAA,CAElD,EAEMC,EAAsB,IACpBvB,EAAM,OACZW,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,gBACCX,EAAM,SAAW,SACdH,EAAAA,OAAO,QAAQ,SAAS,MACxBA,SAAO,QAAQ,SACnB,MAAO,MACP,OAAQ,MACR,aAAc,KAAA,CACf,CAAA,EAEE,KAGC2B,EAAe,IAEnBxB,EAAM,OAASyB,eAAa,QAC3BxB,GAAY,CAACD,EAAM,WACpBA,EAAM,iBACNA,EAAM,KAECyB,EAAAA,aAAa,SAGdzB,EAAM,KAGd,OACC0B,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,UAAA,EAGX,SAAA,CAAAA,EAAAA,KAACC,EAAAA,YAAA,CACA,KAAMH,EAAA,EACN,KAAMxB,EAAM,KACZ,WAAYA,EAAM,WAEjB,SAAA,CAAAA,EAAM,OAASyB,eAAa,OAASZ,EAAA,EACrCb,EAAM,OAASyB,EAAAA,aAAa,UAAYd,EAAAA,IAAC,MAAA,CAAK,aAAc,EAC5DX,EAAM,OAASyB,EAAAA,aAAa,MAAQzB,EAAM,MAC1CW,EAAAA,IAACX,EAAM,KAAN,CACA,MAAOP,EAA6BO,EAAM,IAAI,EAC9C,OAAQP,EAA6BO,EAAM,IAAI,EAC/C,MAAOL,EAA6BK,EAAM,UAAU,CAAA,CAAA,CACrD,CAAA,CAAA,EAGDA,EAAM,eACNW,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,KAAMlB,EAA6BO,EAAM,IAAI,EAAI,KACjD,IAAKP,EAA6BO,EAAM,IAAI,EAAI,KAChD,MAAO,GACP,OAAQ,GACR,aAAcA,GAAO,cAAgB,MACrC,QAAS,OACT,eAAgB,SAChB,gBAAiBA,EAAM,cAAc,WAClCA,EAAM,cAAc,WACnBH,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,WAAW,WACnBG,EAAM,cAAc,WACpBH,SAAO,QAAQ,QACfA,SAAO,QAAQ,SAClB,WAAY,QAAA,EAGZ,SAAAkB,EAAA,CAAe,CAAA,EAGjBf,EAAM,QACNW,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,KAAMlB,EAA6BO,EAAM,IAAI,EAAI,KACjD,IAAKP,EAA6BO,EAAM,IAAI,EAAI,KAChD,MAAO,GACP,OAAQ,GACR,aAAc,MACd,QAAS,OACT,eAAgB,SAChB,gBAAiBH,EAAAA,OAAO,QAAQ,SAChC,WAAY,QAAA,EAGZ,SAAA0B,EAAA,CAAoB,CAAA,CACtB,CAAA,CAAA,CAIJ"}
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\tdata-test=\"avatar-inbox-badge\"\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\tdata-test=\"avatar-status-indicator\"\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","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}

package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { jsx as s, Fragment as X, jsxs as k } from "react/jsx-runtime";
-import oe, { forwardRef as se, useRef as D, useState as q, useMemo as U, useImperativeHandle as ne, useCallback as I, useEffect as ie } from "react";
+import { jsx as n, Fragment as X, jsxs as k } from "react/jsx-runtime";
+import oe, { forwardRef as ne, useRef as D, useState as q, useMemo as U, useImperativeHandle as se, useCallback as I, useEffect as ie } from "react";
 import { COLORS as M } from "../../../constants/Theme.js";
 import { useWindowSize as le } from "../../../hooks/useWindowSize.js";
 import { BodySecondary as ae } from "../../TypographyStyle.js";
@@ -10,17 +10,17 @@ import { useScrollToBottom as ue, useInitialMountScroll as he, useScrollCleanup
 import { MESSAGE_CHANNELS as Y } from "./types.js";
 import { TOP_THRESHOLD as Se, normalizeRef as xe, isSameDay as be, Constants as P } from "./utils.js";
 import { Button as Te } from "../../button/Button.js";
-const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
-  const i = D(null), [S, x] = q(!1);
+const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: s }) => {
+  const i = D(null), [x, b] = q(!1);
   return ie(() => {
     const g = i.current;
     if (g) {
       g.style.maxHeight = "none";
       const $ = g.scrollHeight > G;
-      g.style.maxHeight = h ? "none" : `${G}px`, x($);
+      g.style.maxHeight = h ? "none" : `${G}px`, b($);
     }
   }, [R, h]), /* @__PURE__ */ k(X, { children: [
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ n(
       "div",
       {
         ref: i,
@@ -28,25 +28,25 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
           maxHeight: h ? "none" : G,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ s(ae, { children: R })
+        children: /* @__PURE__ */ n(ae, { children: R })
       }
     ),
-    S && /* @__PURE__ */ s(
+    x && /* @__PURE__ */ n(
       Te,
       {
         buttonType: "text",
         size: "xs",
         buttonText: h ? "Show less" : "Read more",
-        onClick: n
+        onClick: s
       }
     )
   ] });
 }, Me = (R, h) => {
   const {
-    messages: n = [],
+    messages: s = [],
     user: i,
-    renderBubble: S,
-    renderAvatar: x,
+    renderBubble: x,
+    renderAvatar: b,
     renderDay: g,
     renderLoading: $,
     renderChatEmpty: N,
@@ -59,9 +59,9 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
     topThreshold: J = Se,
     appType: c = u.Bik,
     maxHeight: O,
-    isActivityMessage: b,
+    isActivityMessage: T,
     ...F
-  } = R || {}, v = le(), K = D(null), p = xe(
+  } = R || {}, S = le(), K = D(null), p = xe(
     w.ref || h,
     K
   ), m = D({
@@ -70,18 +70,18 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
     isLoadingOldMessages: !1,
     isAtBottom: !0,
     hasTriggeredEndReached: !1,
-    lastMessagesLength: n?.length ?? 0,
+    lastMessagesLength: s?.length ?? 0,
     previousScrollHeight: 0,
     previousScrollTop: 0,
     scrollTimeout: null
-  }), [V, Q] = q(/* @__PURE__ */ new Set()), d = U(() => !n || n.length === 0 ? [] : [...n].reverse(), [n]), Z = U(() => {
+  }), [V, Q] = q(/* @__PURE__ */ new Set()), d = U(() => !s || s.length === 0 ? [] : [...s].reverse(), [s]), Z = U(() => {
     const e = [];
     return d.forEach((o, r) => {
       const t = d[r - 1];
       r === 0 || !be(o, t) ? e.push({ createdAt: o.createdAt, indices: [r] }) : e[e.length - 1].indices.push(r);
     }), e;
   }, [d]), E = ue(p, m);
-  ne(h, () => p.current), he(
+  se(h, () => p.current), he(
     p,
     m,
     d.length,
@@ -89,10 +89,10 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
   ), ge(m), pe(p, m, d.length), me(
     p,
     m,
-    n.length,
+    s.length,
     E
   ), ye(
-    n?.[0],
+    s?.[0],
     m,
     E,
     L
@@ -102,15 +102,20 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
     w.onEndReached,
     w.onScroll,
     J
-  ), T = I(
+  ), f = I(
     (e) => !!(e && i && e.user?._id === i._id),
     [i]
   ), W = I(
-    (e, o) => C ? _ ? !0 : !o || (b ? b(e) : !1) || (b ? b(o) : !1) || o.user._id !== e.user._id : !1,
-    [C, _, b]
+    (e, o) => C ? _ || f(e) ? !0 : !o || (T ? T(e) : !1) || (T ? T(o) : !1) || o.user._id !== e.user._id : !1,
+    [
+      C,
+      _,
+      T,
+      f
+    ]
   ), te = I(
     (e, o, r) => {
-      const t = T(e) ? "right" : "left", l = o?.user?._id !== e?.user?._id, f = r?.user?._id !== e?.user?._id, A = {
+      const t = f(e) ? "right" : "left", a = o?.user?._id !== e?.user?._id, y = r?.user?._id !== e?.user?._id, A = {
         currentMessage: e,
         previousMessage: o,
         nextMessage: r,
@@ -118,10 +123,10 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
         user: i,
         ...F
       };
-      if (S)
-        return S(A);
-      const a = e._id, B = V.has(a);
-      return /* @__PURE__ */ s(
+      if (x)
+        return x(A);
+      const l = e._id, B = V.has(l);
+      return /* @__PURE__ */ n(
         "div",
         {
           style: {
@@ -129,39 +134,39 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
             width: "fit-content",
             ...c === u.Manifest ? { minWidth: "130px" } : {},
             padding: "8px 12px",
-            borderTopLeftRadius: t === "left" ? l ? 12 : 2 : 12,
-            borderTopRightRadius: t === "right" ? l ? 12 : 2 : 12,
-            borderBottomLeftRadius: t === "left" ? f ? 12 : 2 : 12,
-            borderBottomRightRadius: t === "right" ? f ? 12 : 2 : 12,
+            borderTopLeftRadius: t === "left" ? a ? 12 : 2 : 12,
+            borderTopRightRadius: 12,
+            borderBottomLeftRadius: t === "left" ? y ? 12 : 2 : 12,
+            borderBottomRightRadius: 12,
             border: t === "left" && c === u.Manifest ? "1px solid rgb(224, 224, 224)" : "none",
             backgroundColor: t === "right" ? c === u.Manifest ? M.background.brandTint : M.background.brandLight : c === u.Manifest ? M.background.pureWhite : M.background.inactive,
             color: M.content.primary,
             wordBreak: "break-word"
           },
-          children: /* @__PURE__ */ s(
+          children: /* @__PURE__ */ n(
             Ae,
             {
               text: e.text ?? "",
               isExpanded: B,
               onToggle: () => Q((H) => {
-                const y = new Set(H);
-                return B ? y.delete(a) : y.add(a), y;
+                const v = new Set(H);
+                return B ? v.delete(l) : v.add(l), v;
               })
             }
           )
         }
       );
     },
-    [T, i, S, F, V]
+    [f, i, x, F, V]
   ), j = I(
     (e, o, r) => {
       if (!W(e, o)) return null;
-      const l = T(e) ? "right" : "left";
-      return x ? x({
+      const a = f(e) ? "right" : "left";
+      return b ? b({
         currentMessage: e,
         previousMessage: o,
         nextMessage: r,
-        position: l,
+        position: a,
         user: i,
         renderAvatarOnTop: z,
         showUserAvatar: C,
@@ -170,15 +175,15 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
     },
     [
       W,
-      T,
+      f,
       i,
       z,
       C,
       _,
-      x
+      b
     ]
   );
-  return !n || n.length === 0 ? N ? /* @__PURE__ */ s(X, { children: N() }) : null : /* @__PURE__ */ k(
+  return !s || s.length === 0 ? N ? /* @__PURE__ */ n(X, { children: N() }) : null : /* @__PURE__ */ k(
     "div",
     {
       ref: p,
@@ -193,8 +198,8 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
       },
       onScroll: ee,
       children: [
-        /* @__PURE__ */ s("div", { style: { flex: "1 0 auto" } }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ n("div", { style: { flex: "1 0 auto" } }),
+        /* @__PURE__ */ n(
           "div",
           {
             style: {
@@ -203,7 +208,7 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
               flex: "0 0 auto"
             },
             children: Z.map((e, o) => /* @__PURE__ */ k("div", { children: [
-              g ? /* @__PURE__ */ s("div", { style: { position: "sticky", top: 0, zIndex: 2 }, children: g({ createdAt: e.createdAt }) }) : /* @__PURE__ */ s(
+              g ? /* @__PURE__ */ n("div", { style: { position: "sticky", top: 0, zIndex: 2 }, children: g({ createdAt: e.createdAt }) }) : /* @__PURE__ */ n(
                 ce,
                 {
                   createdAt: e.createdAt,
@@ -212,29 +217,29 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
                 }
               ),
               e.indices.map((r) => {
-                const t = d[r], l = t?.channelId === Y.SMTP || t?.channelName === Y.SMTP, f = l ? "left" : T(t) ? "right" : "left", A = d[r - 1], a = d[r + 1], B = de(t, f), H = fe(t), y = t.category === P.ChatActivity.Category.ACTIVITY && t.activityType === P.ChatActivity.Type.PRIVATE_NOTE, re = t.category === P.ChatActivity.Category.ACTIVITY && !y;
-                return /* @__PURE__ */ s(
+                const t = d[r], a = t?.channelId === Y.SMTP || t?.channelName === Y.SMTP, y = a ? "left" : f(t) ? "right" : "left", A = d[r - 1], l = d[r + 1], B = de(t, y), H = fe(t), v = t.category === P.ChatActivity.Category.ACTIVITY && t.activityType === P.ChatActivity.Type.PRIVATE_NOTE, re = t.category === P.ChatActivity.Category.ACTIVITY && !v;
+                return /* @__PURE__ */ n(
                   oe.Fragment,
                   {
                     children: /* @__PURE__ */ k(
                       "div",
                       {
                         style: {
-                          ...v ? { margin: "0 4px" } : {},
+                          ...S ? { margin: "0 4px" } : {},
                           ...H ? {} : { display: "flex", alignItems: "flex-start" },
-                          ...c !== u.Manifest ? !v && f === "right" ? { marginLeft: 8 } : { marginRight: 8 } : {},
-                          ...l && !y && v ? { marginLeft: 8, marginRight: 8 } : {},
-                          ...l && y ? { marginRight: 16 } : {},
+                          ...c !== u.Manifest ? !S && y === "right" ? { marginLeft: 8 } : { marginRight: 8 } : {},
+                          ...a && !v && S ? { marginLeft: 8, marginRight: 8 } : {},
+                          ...a && v ? { marginRight: 16 } : {},
                           justifyContent: B,
-                          marginBottom: l ? (
+                          marginBottom: a ? (
                             // SMTP: flat 24px between mails, no same/different-user split.
-                            a ? 24 : 0
-                          ) : a ? a?.user?._id === t?.user?._id ? 4 : 20 : 0,
+                            l ? 24 : 0
+                          ) : l ? l?.user?._id === t?.user?._id ? f(t) ? 20 : 4 : 20 : 0,
                           // Activity cards: no left/bottom margin.
                           ...re ? { marginLeft: 0, marginBottom: 0 } : {}
                         },
                         children: [
-                          !v && f === "left" && /* @__PURE__ */ s(
+                          !S && y === "left" && /* @__PURE__ */ n(
                             "div",
                             {
                               style: {
@@ -245,23 +250,23 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
                               children: j(
                                 t,
                                 A,
-                                a
+                                l
                               )
                             }
                           ),
-                          /* @__PURE__ */ s(
+                          /* @__PURE__ */ n(
                             "div",
                             {
                               id: `message-bubble-${t._id ?? `${r}-${L?.() ?? "id"}`}`,
-                              style: c === u.Manifest ? { width: "100%" } : v || l ? { display: "flex", flexGrow: 1, width: "100%" } : {},
+                              style: c === u.Manifest ? { width: "100%" } : S || a ? { display: "flex", flexGrow: 1, width: "100%" } : {},
                               children: te(
                                 t,
                                 A,
-                                a
+                                l
                               )
                             }
                           ),
-                          !v && f === "right" && /* @__PURE__ */ s(
+                          !S && y === "right" && /* @__PURE__ */ n(
                             "div",
                             {
                               style: {
@@ -273,7 +278,7 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
                               children: j(
                                 t,
                                 A,
-                                a
+                                l
                               )
                             }
                           )
@@ -290,7 +295,7 @@ const G = 204, Ae = ({ text: R, isExpanded: h, onToggle: n }) => {
       ]
     }
   );
-}, De = se(
+}, De = ne(
   Me
 );
 export {