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

@bikdotai/bik-component-library 0.0.838-beta.6 → 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 (105) hide show

package/dist/esm/components/agent-builder/components/ToolInstructionsField.js CHANGED Viewed

@@ -1,54 +1,53 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { stripHtmlTags as x } from "../../../helpers/sanitize.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { useState as m } from "react";
-import y from "styled-components";
-import { TitleSmall as T } from "../../TypographyStyle.js";
+import x from "styled-components";
+import { TitleSmall as y } from "../../TypographyStyle.js";
 import { COLORS as I } from "../../../constants/Theme.js";
-import { FieldBlock as S, AiTextAreaShell as A, AiTextAreaInput as v } from "../AgentBuilder.styled.js";
-import { Button as F } from "../../button/Button.js";
-import b from "../../../icons/BIK AI specific/WandSparkles.js";
-const W = ({
+import { FieldBlock as S, AiTextAreaShell as T, AiTextAreaInput as A } from "../AgentBuilder.styled.js";
+import { Button as v } from "../../button/Button.js";
+import F from "../../../icons/BIK AI specific/WandSparkles.js";
+const z = ({
   label: d,
   value: t,
   onChange: i,
-  maxLength: p,
-  placeholder: c,
+  maxLength: c,
+  placeholder: p,
   minHeight: f = "120px",
-  onImprove: e,
-  ...s
+  onImprove: o,
+  ...n
 }) => {
-  const [u, l] = m(!1), [r, n] = m(!1), g = async () => {
-    if (!(!e || r || t.trim().length === 0)) {
-      n(!0);
+  const [u, l] = m(!1), [r, s] = m(!1), g = async () => {
+    if (!(!o || r || t.trim().length === 0)) {
+      s(!0);
       try {
-        i(await e(t));
+        i(await o(t));
       } finally {
-        n(!1);
+        s(!1);
       }
     }
   };
   return /* @__PURE__ */ a(S, { children: [
-    /* @__PURE__ */ o(T, { color: I.content.primary, children: d }),
-    /* @__PURE__ */ a(A, { focused: u, minHeight: f, children: [
-      /* @__PURE__ */ o(
-        v,
+    /* @__PURE__ */ e(y, { color: I.content.primary, children: d }),
+    /* @__PURE__ */ a(T, { focused: u, minHeight: f, children: [
+      /* @__PURE__ */ e(
+        A,
         {
-          "data-test": s["data-test"],
+          "data-test": n["data-test"],
           value: t,
-          placeholder: c,
-          maxLength: p,
+          placeholder: p,
+          maxLength: c,
           onFocus: () => l(!0),
           onBlur: () => l(!1),
-          onChange: (h) => i(x(h.target.value))
+          onChange: (h) => i(h.target.value)
         }
       ),
-      e && /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
-        F,
+      o && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
+        v,
         {
-          "data-test": `${s["data-test"] ?? "tool"}-improve`,
+          "data-test": `${n["data-test"] ?? "tool"}-improve`,
           buttonType: "ai",
           size: "small",
-          LeadingIcon: b,
+          LeadingIcon: F,
           buttonText: "Improve with AI",
           isLoading: r,
           disabled: r || t.trim().length === 0,
@@ -57,11 +56,11 @@ const W = ({
       ) })
     ] })
   ] });
-}, k = y.div`
+}, b = x.div`
 	display: flex;
 	align-items: center;
 `;
 export {
-  W as ToolInstructionsField
+  z as ToolInstructionsField
 };
 //# sourceMappingURL=ToolInstructionsField.js.map

package/dist/esm/components/agent-builder/components/ToolInstructionsField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { ~~stripHtmlTags } from '@src/helpers/sanitize';\nimport {~~ WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. /\n\tonImprove?: (text: string) => Promise<string>;\n\t'data-test'?: string;\n}\n\n/\n A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove \|\| improving \|\| value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(~~stripHtmlTags(~~e.target.value))}\n\t\t\t\t/>\n\t\t\t\t{onImprove && (\n\t\t\t\t\t<ImproveRow>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\t\t\t\tbuttonType=\"ai\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\t\t\t\tisLoading={improving}\n\t\t\t\t\t\t\tdisabled={improving \|\| value.trim().length === 0}\n\t\t\t\t\t\t\tonClick={handleImprove}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImproveRow>\n\t\t\t\t)}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","rest","focused","setFocused","useState","improving","setImproving","handleImprove","FieldBlock","jsx","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","e","~~stripHtmlTags","~~ImproveRow","Button","WandSparkles","styled"],"mappings":"~~;;;;;;;;;AA8BO~~,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1CG,IAAgB,YAAY;AACjC,QAAI,GAACP,KAAaK,KAAaV,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAW,EAAa,EAAI;AACjB,UAAI;AACH,QAAAV,EAAS,MAAMI,EAAUL,CAAK,CAAC;AAAA,MAChC,UAAA;AACC,QAAAW,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD;AAEA,2BACEE,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAjB,GAAM;AAAA,IAClD,gBAAAkB,EAACC,GAAA,EAAgB,SAAAX,GAAkB,WAAAH,GAClC,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,aAAWb,EAAK,WAAW;AAAA,UAC3B,OAAAN;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMM,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACY,MAAMnB,~~EAASoB~~,~~EAAcD,~~EAAE,OAAO,KAAK~~,CAAC~~;AAAA,QAAA;AAAA,MAAA;AAAA,~~MAEvDf~~,~~uBACCiB~~,GAAA,EACA,UAAA,~~gBAAAR~~;AAAA,~~QAACS~~;AAAA,QAAA;AAAA,UACA,aAAW,~~GAAGjB~~,EAAK,WAAW,KAAK,MAAM;AAAA,UACzC,YAAW;AAAA,UACX,MAAK;AAAA,UACL,~~aAAakB~~;AAAAA,UACb,YAAW;AAAA,UACX,~~WAAWd~~;AAAA,UACX,UAAUA,KAAaV,EAAM,KAAA,EAAO,WAAW;AAAA,UAC/C,SAASY;AAAA,QAAA;AAAA,MAAA,EACV,CACD;AAAA,IAAA,EAAA,CAEF;AAAA,EAAA,GACD;AAEF,~~GAEMU~~,IAAaG,EAAO;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. /\n\tonImprove?: (text: string) => Promise<string>;\n\t'data-test'?: string;\n}\n\n/\n A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove \|\| improving \|\| value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t\t{onImprove && (\n\t\t\t\t\t<ImproveRow>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\t\t\t\tbuttonType=\"ai\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\t\t\t\tisLoading={improving}\n\t\t\t\t\t\t\tdisabled={improving \|\| value.trim().length === 0}\n\t\t\t\t\t\t\tonClick={handleImprove}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ImproveRow>\n\t\t\t\t)}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","rest","focused","setFocused","useState","improving","setImproving","handleImprove","FieldBlock","jsx","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","e","ImproveRow","Button","WandSparkles","styled"],"mappings":";;;;;;;;AA6BO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAE1CG,IAAgB,YAAY;AACjC,QAAI,GAACP,KAAaK,KAAaV,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAW,EAAa,EAAI;AACjB,UAAI;AACH,QAAAV,EAAS,MAAMI,EAAUL,CAAK,CAAC;AAAA,MAChC,UAAA;AACC,QAAAW,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD;AAEA,2BACEE,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAjB,GAAM;AAAA,IAClD,gBAAAkB,EAACC,GAAA,EAAgB,SAAAX,GAAkB,WAAAH,GAClC,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,aAAWb,EAAK,WAAW;AAAA,UAC3B,OAAAN;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMM,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACY,MAAMnB,EAASmB,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAExCf,uBACCgB,GAAA,EACA,UAAA,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACA,aAAW,GAAGhB,EAAK,WAAW,KAAK,MAAM;AAAA,UACzC,YAAW;AAAA,UACX,MAAK;AAAA,UACL,aAAaiB;AAAAA,UACb,YAAW;AAAA,UACX,WAAWb;AAAA,UACX,UAAUA,KAAaV,EAAM,KAAA,EAAO,WAAW;AAAA,UAC/C,SAASY;AAAA,QAAA;AAAA,MAAA,EACV,CACD;AAAA,IAAA,EAAA,CAEF;AAAA,EAAA,GACD;AAEF,GAEMS,IAAaG,EAAO;AAAA;AAAA;AAAA;"}

package/dist/esm/components/alerts/Alert.js CHANGED Viewed

@@ -63,6 +63,7 @@ const T = (t) => {
         t.showCrossButton && /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
           r,
           {
+            "data-test": "alert-close-button",
             width: 20,
             height: 20,
             color: l.content.secondary,

package/dist/esm/components/alerts/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../src/components/alerts/Alert.tsx"],"sourcesContent":["import CloseIcon from '@src/assets/icons/cross.svg';\nimport React from 'react';\nimport {\n\tAlertContentWrapper,\n\tAlertStyle,\n\tCloseIconWrapper,\n} from '@src/components/alerts/Alert.styled';\nimport {\n\tALERT_TYPES,\n\tCOLOR_CONFIG_MAP,\n\tCONTENT_POSITION,\n} from '@src/components/alerts/AlertHelper';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type AlertProps = {\n\ttype: ALERT_TYPES;\n\ttext: string \| React.ReactNode;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\ttextColor?: string;\n\tcontentPosition?: CONTENT_POSITION;\n\tcontainerStyle?: React.CSSProperties;\n\tredirectTo?: string;\n\tredirectToText?: string;\n\ticonStyle?: React.CSSProperties;\n\thandleRedirectButtonClick?: () => void;\n\tshowCrossButton?: boolean;\n\thandleCrossIconClick?: () => void;\n};\n\nexport const Alert: React.FC<AlertProps> = (props) => {\n\tconst handleRedirection = () => {\n\t\tif (props.redirectTo) {\n\t\t\twindow.open(props.redirectTo, '_blank');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AlertStyle\n\t\t\ttype={props.type}\n\t\t\tcontentPosition={props.contentPosition}\n\t\t\tstyle={props.containerStyle}\n\t\t>\n\t\t\t<AlertContentWrapper contentPosition={props.contentPosition}>\n\t\t\t\t{props.icon && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...props?.iconStyle,\n\t\t\t\t\t\t\tdisplay: props?.iconStyle?.display \|\| 'flex',\n\t\t\t\t\t\t\talignSelf: props?.iconStyle?.alignSelf \|\| 'flex-start',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\tcolor={COLOR_CONFIG_MAP[props.type].textColor}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: props.textColor \|\| COLOR_CONFIG_MAP[props.type].textColor,\n\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\tmarginRight: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.text}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{props.redirectToText && props.redirectTo && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.text.brand,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprops.redirectTo === 'INTERNAL' &&\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thandleRedirection();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.redirectToText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</AlertContentWrapper>\n\t\t\t{props.showCrossButton && (\n\t\t\t\t<CloseIconWrapper>\n\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (props?.handleCrossIconClick) {\n\t\t\t\t\t\t\t\tprops.handleCrossIconClick();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</CloseIconWrapper>\n\t\t\t)}\n\t\t</AlertStyle>\n\t);\n};\n"],"names":["Alert","props","handleRedirection","jsxs","AlertStyle","AlertContentWrapper","jsx","COLOR_CONFIG_MAP","BodyCaption","COLORS","CloseIconWrapper","CloseIcon"],"mappings":";;;;;;AA8BO,MAAMA,IAA8B,CAACC,MAAU;AACrD,QAAMC,IAAoB,MAAM;AAC/B,IAAID,EAAM,cACT,OAAO,KAAKA,EAAM,YAAY,QAAQ;AAAA,EAExC;AAEA,SACC,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMH,EAAM;AAAA,MACZ,iBAAiBA,EAAM;AAAA,MACvB,OAAOA,EAAM;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAAoB,iBAAiBJ,EAAM,iBAC1C,UAAA;AAAA,UAAAA,EAAM,QACN,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,GAAGL,GAAO;AAAA,gBACV,SAASA,GAAO,WAAW,WAAW;AAAA,gBACtC,WAAWA,GAAO,WAAW,aAAa;AAAA,cAAA;AAAA,cAG3C,UAAA,gBAAAK;AAAA,gBAACL,EAAM;AAAA,gBAAN;AAAA,kBACA,OAAOM,EAAiBN,EAAM,IAAI,EAAE;AAAA,kBACpC,QAAQ;AAAA,kBACR,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,UAGF,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOP,EAAM,aAAaM,EAAiBN,EAAM,IAAI,EAAE;AAAA,gBACvD,YAAY;AAAA,gBACZ,aAAa;AAAA,cAAA;AAAA,cAGb,UAAAA,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEPA,EAAM,kBAAkBA,EAAM,cAC9B,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOC,EAAO,KAAK;AAAA,gBACnB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,cAAA;AAAA,cAEjB,SAAS,MAAM;AACd,gBACCR,EAAM,eAAe,cACrBA,EAAM,4BAENA,EAAM,0BAAA,IAENC,EAAA;AAAA,cAEF;AAAA,cAEC,UAAAD,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR,GAEF;AAAA,QACCA,EAAM,mBACN,gBAAAK,EAACI,GAAA,EACA,UAAA,gBAAAJ;AAAA,UAACK;AAAAA,UAAA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAOF,EAAO,QAAQ;AAAA,YACtB,SAAS,MAAM;AACd,cAAIR,GAAO,wBACVA,EAAM,qBAAA;AAAA,YAER;AAAA,UAAA;AAAA,QAAA,EACD,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../src/components/alerts/Alert.tsx"],"sourcesContent":["import CloseIcon from '@src/assets/icons/cross.svg';\nimport React from 'react';\nimport {\n\tAlertContentWrapper,\n\tAlertStyle,\n\tCloseIconWrapper,\n} from '@src/components/alerts/Alert.styled';\nimport {\n\tALERT_TYPES,\n\tCOLOR_CONFIG_MAP,\n\tCONTENT_POSITION,\n} from '@src/components/alerts/AlertHelper';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type AlertProps = {\n\ttype: ALERT_TYPES;\n\ttext: string \| React.ReactNode;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\ttextColor?: string;\n\tcontentPosition?: CONTENT_POSITION;\n\tcontainerStyle?: React.CSSProperties;\n\tredirectTo?: string;\n\tredirectToText?: string;\n\ticonStyle?: React.CSSProperties;\n\thandleRedirectButtonClick?: () => void;\n\tshowCrossButton?: boolean;\n\thandleCrossIconClick?: () => void;\n};\n\nexport const Alert: React.FC<AlertProps> = (props) => {\n\tconst handleRedirection = () => {\n\t\tif (props.redirectTo) {\n\t\t\twindow.open(props.redirectTo, '_blank');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AlertStyle\n\t\t\ttype={props.type}\n\t\t\tcontentPosition={props.contentPosition}\n\t\t\tstyle={props.containerStyle}\n\t\t>\n\t\t\t<AlertContentWrapper contentPosition={props.contentPosition}>\n\t\t\t\t{props.icon && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...props?.iconStyle,\n\t\t\t\t\t\t\tdisplay: props?.iconStyle?.display \|\| 'flex',\n\t\t\t\t\t\t\talignSelf: props?.iconStyle?.alignSelf \|\| 'flex-start',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\tcolor={COLOR_CONFIG_MAP[props.type].textColor}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: props.textColor \|\| COLOR_CONFIG_MAP[props.type].textColor,\n\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\tmarginRight: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.text}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{props.redirectToText && props.redirectTo && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.text.brand,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprops.redirectTo === 'INTERNAL' &&\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thandleRedirection();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.redirectToText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</AlertContentWrapper>\n\t\t\t{props.showCrossButton && (\n\t\t\t\t<CloseIconWrapper>\n\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\tdata-test=\"alert-close-button\"\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (props?.handleCrossIconClick) {\n\t\t\t\t\t\t\t\tprops.handleCrossIconClick();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</CloseIconWrapper>\n\t\t\t)}\n\t\t</AlertStyle>\n\t);\n};\n"],"names":["Alert","props","handleRedirection","jsxs","AlertStyle","AlertContentWrapper","jsx","COLOR_CONFIG_MAP","BodyCaption","COLORS","CloseIconWrapper","CloseIcon"],"mappings":";;;;;;AA8BO,MAAMA,IAA8B,CAACC,MAAU;AACrD,QAAMC,IAAoB,MAAM;AAC/B,IAAID,EAAM,cACT,OAAO,KAAKA,EAAM,YAAY,QAAQ;AAAA,EAExC;AAEA,SACC,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMH,EAAM;AAAA,MACZ,iBAAiBA,EAAM;AAAA,MACvB,OAAOA,EAAM;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAAoB,iBAAiBJ,EAAM,iBAC1C,UAAA;AAAA,UAAAA,EAAM,QACN,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,GAAGL,GAAO;AAAA,gBACV,SAASA,GAAO,WAAW,WAAW;AAAA,gBACtC,WAAWA,GAAO,WAAW,aAAa;AAAA,cAAA;AAAA,cAG3C,UAAA,gBAAAK;AAAA,gBAACL,EAAM;AAAA,gBAAN;AAAA,kBACA,OAAOM,EAAiBN,EAAM,IAAI,EAAE;AAAA,kBACpC,QAAQ;AAAA,kBACR,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,UAGF,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOP,EAAM,aAAaM,EAAiBN,EAAM,IAAI,EAAE;AAAA,gBACvD,YAAY;AAAA,gBACZ,aAAa;AAAA,cAAA;AAAA,cAGb,UAAAA,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEPA,EAAM,kBAAkBA,EAAM,cAC9B,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOC,EAAO,KAAK;AAAA,gBACnB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,cAAA;AAAA,cAEjB,SAAS,MAAM;AACd,gBACCR,EAAM,eAAe,cACrBA,EAAM,4BAENA,EAAM,0BAAA,IAENC,EAAA;AAAA,cAEF;AAAA,cAEC,UAAAD,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR,GAEF;AAAA,QACCA,EAAM,mBACN,gBAAAK,EAACI,GAAA,EACA,UAAA,gBAAAJ;AAAA,UAACK;AAAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAOF,EAAO,QAAQ;AAAA,YACtB,SAAS,MAAM;AACd,cAAIR,GAAO,wBACVA,EAAM,qBAAA;AAAA,YAER;AAAA,UAAA;AAAA,QAAA,EACD,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;"}

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

@@ -6,23 +6,23 @@ import { COLORS as l } from "../../constants/Theme.js";
 import tt from "../../assets/icons/arrow_down.svg.js";
 import et from "../../assets/icons/arrow_up.svg.js";
 import rt from "../../assets/icons/info.svg.js";
-import { BodyCaption as ot, TitleLarge as nt, TitleMedium as it, Caption as u } from "../TypographyStyle.js";
+import { BodyCaption as nt, TitleLarge as ot, TitleMedium as it, Caption as u } from "../TypographyStyle.js";
 import { truncateValueForInternationalStore as q, truncateValueForIndianStore as B } from "./chart/utils/calcPercentage.js";
 import { AnalyticsTrendContainer as lt, IconContainer as at } from "./CommonStyles.js";
 import { Tooltip as V } from "../tooltips/Tooltip.js";
 import { Tag as C } from "../tag/Tag.js";
 const wt = ({
-  title: c,
+  title: h,
   value: r,
   trendPercent: e,
   type: a = "horizontal",
-  timeline: o,
+  timeline: n,
   customRange: f,
   tooltip: b,
   card: y = !0,
   rightSeparator: D = !1,
   size: $ = "big",
-  share: n = !1,
+  share: o = !1,
   formatVal: A,
   prefixSymbol: d,
   trailingIcon: v,
@@ -31,7 +31,7 @@ const wt = ({
   funnelPercent: w,
   isLoading: i,
   trendRaw: g,
-  trendRawString: h,
+  trendRawString: c,
   suffixText: m,
   trendStyle: G,
   trendContainerStyle: H,
@@ -45,7 +45,7 @@ const wt = ({
   tooltipTimelineText: S,
   customTimelineText: W
 }) => {
-  const L = $ === "big" ? nt : it, E = typeof e < "u" ? e < 0 ? "negative" : e === 0 ? "neutral" : "positive" : void 0, T = typeof e < "u" ? n ? Math.round(e) : Math.abs(Math.round(e)) : void 0, Q = () => typeof r > "u" ? "--" : typeof r == "number" && A ? r > 999 ? I ? `${d ?? ""}${q(
+  const L = $ === "big" ? ot : it, E = typeof e < "u" ? e < 0 ? "negative" : e === 0 ? "neutral" : "positive" : void 0, T = typeof e < "u" ? o ? Math.round(e) : Math.abs(Math.round(e)) : void 0, Q = () => typeof r > "u" ? "--" : typeof r == "number" && A ? r > 999 ? I ? `${d ?? ""}${q(
     r
   )} ${m ?? ""}` : `${d ?? ""}${B(
     r
@@ -103,12 +103,12 @@ const wt = ({
                       },
                       children: [
                         /* @__PURE__ */ t(
-                          ot,
+                          nt,
                           {
                             style: {
                               color: l.content.secondary
                             },
-                            children: c
+                            children: h
                           }
                         ),
                         b && /* @__PURE__ */ t(V, { body: b, placement: "right", width: 300, children: /* @__PURE__ */ t(
@@ -140,7 +140,7 @@ const wt = ({
                         flexDirection: "row",
                         gap: 12,
                         alignItems: "center",
-                        ...n ? { justifyContent: "space-between" } : {}
+                        ...o ? { justifyContent: "space-between" } : {}
                       },
                       children: [
                         i && /* @__PURE__ */ t(k, { width: 108, height: 26 }),
@@ -161,15 +161,15 @@ const wt = ({
                             type: "neutral"
                           }
                         ),
-                        a === "horizontal" && !i && !n && /* @__PURE__ */ t(
+                        a === "horizontal" && !i && !o && /* @__PURE__ */ t(
                           _,
                           {
-                            timeline: o,
+                            timeline: n,
                             customRange: f,
                             percent: T,
                             direction: E,
                             trendRaw: g,
-                            trendRawString: h,
+                            trendRawString: c,
                             prefixSymbol: d,
                             trendIconStyle: z,
                             isInternationalStore: I,
@@ -177,7 +177,7 @@ const wt = ({
                             customTimelineText: W
                           }
                         ),
-                        i && !n && a === "horizontal" && /* @__PURE__ */ t(k, { height: 20, width: 141, marginTop: 6 }),
+                        i && !o && a === "horizontal" && /* @__PURE__ */ t(k, { height: 20, width: 141, marginTop: 6 }),
                         a === "vertical" && !i && typeof w < "u" && /* @__PURE__ */ t(
                           C,
                           {
@@ -186,8 +186,8 @@ const wt = ({
                             type: "neutral"
                           }
                         ),
-                        n && !i && typeof T < "u" && /* @__PURE__ */ t(C, { tagText: `${T} %`, theme: "light", type: "neutral" }),
-                        !n && !i && F && F != 0 ? /* @__PURE__ */ t(
+                        o && !i && typeof T < "u" && /* @__PURE__ */ t(C, { tagText: `${T} %`, theme: "light", type: "neutral" }),
+                        !o && !i && F && F != 0 ? /* @__PURE__ */ t(
                           C,
                           {
                             tagText: R(F),
@@ -198,15 +198,15 @@ const wt = ({
                       ]
                     }
                   ),
-                  a === "vertical" && !i && !n && /* @__PURE__ */ t("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ t(
+                  a === "vertical" && !i && !o && /* @__PURE__ */ t("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ t(
                     _,
                     {
-                      timeline: o,
+                      timeline: n,
                       customRange: f,
                       percent: T,
                       direction: E,
                       trendRaw: g,
-                      trendRawString: h,
+                      trendRawString: c,
                       prefixSymbol: d,
                       trendIconStyle: z,
                       isInternationalStore: I,
@@ -218,50 +218,58 @@ const wt = ({
                 ]
               }
             ),
-            p && !i && /* @__PURE__ */ t(V, { body: p, placement: "right", children: v && /* @__PURE__ */ t("div", { className: "icon--holder", onClick: M, children: Z.createElement(v, {
-              height: 20,
-              width: 20,
-              color: l.content.secondary
-            }) }) })
+            p && !i && /* @__PURE__ */ t(V, { body: p, placement: "right", children: v && /* @__PURE__ */ t(
+              "div",
+              {
+                "data-test": "analytics-trend-trailing-icon",
+                className: "icon--holder",
+                onClick: M,
+                children: Z.createElement(v, {
+                  height: 20,
+                  width: 20,
+                  color: l.content.secondary
+                })
+              }
+            ) })
           ]
         }
       )
     }
   );
 }, _ = ({
-  percent: c,
+  percent: h,
   direction: r,
   timeline: e,
   customRange: a,
-  trendRaw: o,
+  trendRaw: n,
   trendRawString: f,
   prefixSymbol: b,
   trendIconStyle: y,
   isInternationalStore: D,
   tooltipTimelineText: $,
-  customTimelineText: n
+  customTimelineText: o
 }) => {
   const A = () => {
-    let h = "--";
-    if (o)
-      return D ? h = String(
-        q(Math.abs(o))
-      ) : h = String(B(Math.abs(o))), o < 0 ? "-" + h : h;
+    let c = "--";
+    if (n)
+      return D ? c = String(
+        q(Math.abs(n))
+      ) : c = String(B(Math.abs(n))), n < 0 ? "-" + c : c;
   }, d = () => {
-    const h = ((o ?? 0) > 0 ? "+" : "") + (b ?? "");
-    return typeof o > "u" ? "--" : `${h ?? ""}${A()}`;
+    const c = ((n ?? 0) > 0 ? "+" : "") + (b ?? "");
+    return typeof n > "u" ? "--" : `${c ?? ""}${A()}`;
   }, [v, M] = O(
     d()
   ), [p, w] = O(
-    n || ""
+    o || ""
   );
   U(() => {
-    n || w(
+    o || w(
       e === "today" ? "vs yesterday" : e === "yesterday" ? "vs 1 day before" : e === "7 days" ? "vs last 7 days" : e === "30 days" ? "vs last 30 days" : e === "custom" && a ? P.getAnalyticsCustomDateTimelineText(a) : ""
     );
   }, [e, a]), U(() => {
     M(d());
-  }, [o]);
+  }, [n]);
   const i = r === "negative" ? tt : et, g = r === "negative" ? l.background.negative.vibrant : r === "positive" ? l.background.positive.vibrant : l.content.placeholder;
   return /* @__PURE__ */ s(
     "div",
@@ -273,7 +281,7 @@ const wt = ({
         flexWrap: "wrap"
       },
       children: [
-        typeof c == "number" && /* @__PURE__ */ t(
+        typeof h == "number" && /* @__PURE__ */ t(
           i,
           {
             color: g,
@@ -282,19 +290,19 @@ const wt = ({
             style: { marginRight: 2, ...y ?? {} }
           }
         ),
-        typeof c == "number" && r && /* @__PURE__ */ s(u, { style: { color: g }, children: [
-          r === "neutral" ? 0 : c < 1e3 ? c : ">999",
+        typeof h == "number" && r && /* @__PURE__ */ s(u, { style: { color: g }, children: [
+          r === "neutral" ? 0 : h < 1e3 ? h : ">999",
           "%"
         ] }),
-        !!o && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `(${v})` }),
-        !o && (f?.length || 0) > 0 && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `${f}` }),
+        !!n && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `(${v})` }),
+        !n && (f?.length || 0) > 0 && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `${f}` }),
         e && ($ ? /* @__PURE__ */ t(V, { body: $, placement: "bottom", children: /* @__PURE__ */ t(
           u,
           {
             style: { marginLeft: 4, color: l.content.placeholder },
-            children: n || p
+            children: o || p
           }
-        ) }) : /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: n || p }))
+        ) }) : /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: o || p }))
       ]
     }
   );

package/dist/esm/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":"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"}

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

@@ -1,8 +1,8 @@
 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 { TitleMedium as k, TitleSmall as A, SubHeading as w, BodyTiny as x } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
-import x from "../../assets/icons/bik_livechat.svg.js";
+import O 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";
@@ -10,12 +10,12 @@ 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
+import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as l } from "./AvatarHelper.js";
+const n = {
+  [a.EXTRA_SMALL]: 10,
+  [a.SMALL]: 16,
+  [a.MEDIUM]: 20,
+  [a.LARGE]: 32
 }, b = {
   [s.LIGHT]: i.content.secondary,
   [s.WHITE]: i.content.secondary,
@@ -26,7 +26,7 @@ var P = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messe
 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 });
+    return t.size === a.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === a.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : t.size === a.SMALL ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : /* @__PURE__ */ e(x, { 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",
     {
@@ -75,7 +75,7 @@ const J = (t) => {
       case "tasks":
         return /* @__PURE__ */ e(L, { width: 11, height: 11 });
       case "livechat":
-        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(O, { width: 11, height: 11 });
     }
   }, T = () => t.status ? /* @__PURE__ */ e(
     "div",
@@ -107,8 +107,8 @@ const J = (t) => {
               t.type === r.ICON && t.icon && /* @__PURE__ */ e(
                 t.icon,
                 {
-                  width: a[t.size],
-                  height: a[t.size],
+                  width: n[t.size],
+                  height: n[t.size],
                   color: b[t.background]
                 }
               )
@@ -118,10 +118,11 @@ const J = (t) => {
         t.inboxSettings && /* @__PURE__ */ e(
           "div",
           {
+            "data-test": "avatar-inbox-badge",
             style: {
               position: "absolute",
-              left: a[t.size] + "px",
-              top: a[t.size] + "px",
+              left: n[t.size] + "px",
+              top: n[t.size] + "px",
               width: 14,
               height: 14,
               borderRadius: t?.borderRadius || "50%",
@@ -136,10 +137,11 @@ const J = (t) => {
         t.status && /* @__PURE__ */ e(
           "div",
           {
+            "data-test": "avatar-status-indicator",
             style: {
               position: "absolute",
-              left: a[t.size] + "px",
-              top: a[t.size] + "px",
+              left: n[t.size] + "px",
+              top: n[t.size] + "px",
               width: 11,
               height: 11,
               borderRadius: "50%",
@@ -156,7 +158,7 @@ const J = (t) => {
   );
 };
 export {
-  a as AVATAR_SIZE_VS_ICON_SIZE_MAP,
+  n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
   J as Avatar,
   b as BACKGROUND_VS_TEXT_COLOR_MAP,
   P as MESSAGE_CHANNELS