@cuemath/leap 2.9.12-j2 → 3.0.1-as1

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-info.js

@@ -1,184 +1,165 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { memo as U, useRef as B, useState as N, useMemo as I, useLayoutEffect as X } from "react";
-import V from "../../../../../assets/line-icons/icons/bin2.js";
-import W from "../../../../../assets/line-icons/icons/closed-eye.js";
-import Y from "../../../../../assets/line-icons/icons/edit2.js";
-import Z from "../../../../../assets/line-icons/icons/eye2.js";
-import q from "../../../../../assets/line-icons/icons/star2.js";
-import z from "../../../../sheets/lessons-list/lesson-item/context-menu-helper/target-element.js";
-import J from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
-import K from "../../../../ui/context-menu/context-menu.js";
-import { useUIContext as Q } from "../../../../ui/context/context.js";
-import ee from "../../../../ui/image/image.js";
-import i from "../../../../ui/layout/flex-view.js";
-import w from "../../../../ui/text/text.js";
-import te from "../../../create/comps/milestone-progress-v2/milestone-progress-v2.js";
-import oe from "./context-menu-helper/menu-element.js";
-import { GOAL_CATEGORY_BASED_IMAGES as ie } from "./milestone-constants.js";
-import { getGoalCategoryBasedColorTheme as ne } from "./milestone-utils.js";
-import { MilestoneTitle as re } from "./milestone-widget-styled.js";
-const Te = U(
-  ({ isClassOngoing: x, isStudentPresent: E, isExpanded: d, ...T }) => {
-    const { milestone: D, userType: _, onEdit: p, onDelete: f, toggleExpand: A, onAddOutcome: u } = T, {
-      id: o,
-      milestone_name: g,
-      milestone_date_ts: y,
-      user_milestone_progress: M,
-      milestone_state: t,
-      permissions: G,
-      goal_category: n,
-      goal_code: h
-    } = D, { onEvent: S } = Q(), r = B(null), [P, v] = N(!1), {
-      can_delete: s,
-      can_edit: C,
-      can_update_date: R,
-      can_update_plan: O
-    } = G, { textColor: k, borderColor: j } = ne(n), l = I(() => typeof h == "string", [h]), a = _ === "TEACHER", F = I(
-      () => ({
-        milestone_id: o,
-        temporary_milestone_id: o,
-        milestone_state: t
-      }),
-      [o, t]
-    ), $ = x && !E, b = !l || t !== "DRAFT", H = I(
-      () => [
-        {
-          id: "milestone-widget-edit",
-          Icon: Y,
-          label: "Edit",
-          disabled: $ || !C,
-          //* Not showing option to edit drafts.
-          //* For goals we have a separate edit CTA.
-          visible: a && t !== "DRAFT"
-        },
-        {
-          id: "milestone-widget-hide-n-show",
-          Icon: d ? W : Z,
-          label: d ? "Hide" : "Show",
-          disabled: !1,
-          visible: !0
-        },
-        {
-          id: "milestone-widget-add-outcome",
-          Icon: q,
-          label: "Add outcome",
-          disabled: t !== "OUTCOME_PENDING",
-          visible: a
-        },
-        {
-          id: "milestone-widget-delete-draft",
-          Icon: V,
-          label: "Delete",
-          disabled: !s,
-          visible: a && s && b
-        }
-      ],
-      [
-        C,
-        $,
-        d,
-        t,
-        a,
-        s,
-        b
-      ]
-    ), L = (m) => {
-      switch (S("clicked", {
-        cta: m,
-        ...F
-      }), m) {
-        case "Edit":
-          p == null || p({
-            milestoneId: o,
-            milestoneName: g,
-            milestoneDueDate: y,
-            isMilestoneChaptersListEditable: O,
-            isMilestoneDateEditable: R,
-            milestoneState: t,
-            canDelete: s,
-            goalCategory: n,
-            goalCode: h
-          });
-          return;
-        case "Add outcome":
-          u == null || u(o);
-          return;
-        case "Delete":
-          f == null || f({ milestoneId: o, isGoalCreation: l, milestoneState: t });
-          return;
-        default:
-          A();
-          return;
-      }
-    };
-    return X(() => {
-      r.current && r.current.scrollHeight > r.current.clientHeight && v(!0);
-    }, [r]), /* @__PURE__ */ c(i, { $flexDirection: "row", $justifyContent: "space-between", $flexGapX: 1, children: [
-      /* @__PURE__ */ c(i, { $widthX: 30.5, $flexGap: l ? 8 : 0, children: [
-        n && /* @__PURE__ */ c(i, { $flexDirection: "row", $flexGap: 4, $alignItems: "center", children: [
-          /* @__PURE__ */ e(
-            ee,
-            {
-              src: ie[n],
-              withLoader: !0,
-              width: 24,
-              height: 24
-            }
-          ),
-          /* @__PURE__ */ e(w, { $renderAs: "ac4-black", $color: k, children: n.split("_").join(" ") }),
-          t === "DRAFT" && /* @__PURE__ */ e(
-            i,
-            {
-              $flexDirection: "row",
-              $gap: 4,
-              $gutter: 4,
-              $alignItems: "center",
-              $background: j,
-              children: /* @__PURE__ */ e(w, { $renderAs: "ac4", children: "Draft" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          J,
-          {
-            renderAs: "primary",
-            position: "bottom",
-            tooltipItem: g,
-            hidden: !P,
-            children: /* @__PURE__ */ e(re, { ref: r, $renderAs: l ? "ah4" : "ah3", children: g })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(i, { onClick: (m) => m.stopPropagation(), $height: "fit-content", children: /* @__PURE__ */ c(i, { $flexDirection: "row", $flexGapX: 1, $alignItems: "center", children: [
-        /* @__PURE__ */ e(
-          te,
-          {
-            userType: _,
-            milestoneId: o,
-            progressInfo: M,
-            showProgress: !0
-          }
-        ),
-        /* @__PURE__ */ e(
-          K,
-          {
-            targetElement: /* @__PURE__ */ e(z, { shape: "curve" }),
-            menuElement: /* @__PURE__ */ e(
-              oe,
+import { jsxs as t, jsx as e, Fragment as P } from "react/jsx-runtime";
+import { memo as W, useRef as X, useState as j, useMemo as H, useLayoutEffect as F } from "react";
+import K from "../../../../../assets/line-icons/icons/check2.js";
+import V from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
+import v from "../../../../ui/image/image.js";
+import r from "../../../../ui/layout/flex-view.js";
+import U from "../../../../ui/separator/separator.js";
+import s from "../../../../ui/text/text.js";
+import Y from "./goals/goal-action-ctas.js";
+import { GOAL_CATEGORY_BASED_IMAGES as q } from "./milestone-constants.js";
+import { getRemainingDaysToCompleteGoal as z, getGoalCategoryBasedColorTheme as J, getMilestoneWidgetStatusInfo as Q } from "./milestone-utils.js";
+import { ChapterProgressSVG as Z, ChapterProgressSVGCircle as u, StyledCheckIconWrapper as ee, MilestoneTitle as te } from "./milestone-widget-styled.js";
+import re from "./outcome/outcome.js";
+const ue = W(
+  ({ isClassOngoing: C, isStudentPresent: T, isExpanded: oe, ...x }) => {
+    const {
+      milestone: d,
+      studentId: A,
+      studentName: _,
+      teacherName: I,
+      parentName: w,
+      userType: y,
+      courseStream: G,
+      outcomes: i,
+      onEdit: D,
+      onDraftPublish: E,
+      onAddOutcome: b
+    } = x, {
+      milestone_name: m,
+      milestone_date_ts: S,
+      milestone_state: o,
+      goal_category: l,
+      goal_code: g,
+      progress_stat: k
+    } = d, { completed: p = 0, total: h = 0 } = k || {}, $ = o === "OUTCOME_PENDING", a = p > 0 ? Math.floor((p / h || 1) * 100) : 0, n = X(null), [B, O] = j(!1), { textColor: N, borderColor: f } = J(l), c = Q(o), R = ($ ? c == null ? void 0 : c.progressBackgroundColor : f) || "WHITE_5", L = H(() => typeof g == "string", [g]), M = z(S);
+    return F(() => {
+      n.current && n.current.scrollHeight > n.current.clientHeight && O(!0);
+    }, [n]), l ? /* @__PURE__ */ t(
+      r,
+      {
+        $flexDirection: "row",
+        $justifyContent: "space-between",
+        $alignItems: "center",
+        $flexGapX: 1,
+        children: [
+          /* @__PURE__ */ t(r, { $flexDirection: "row", $flexGapX: 1.5, children: [
+            /* @__PURE__ */ t(
+              r,
               {
-                menuOptions: H,
-                onMenuOptionSelection: L
+                $widthX: 4,
+                $heightX: 4,
+                $background: "WHITE_T_38",
+                $position: "relative",
+                $justifyContent: "center",
+                $alignItems: "center",
+                $borderRadiusX: 2,
+                children: [
+                  /* @__PURE__ */ t(Z, { width: "64px", height: "64px", children: [
+                    /* @__PURE__ */ e(u, { $progress: 0, r: "31", cx: "32", cy: "32" }),
+                    /* @__PURE__ */ e(
+                      u,
+                      {
+                        $progressCircle: !0,
+                        $progressBackground: "BLACK_1",
+                        $progress: a * 2,
+                        r: "31",
+                        cx: "32",
+                        cy: "32"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(r, { $widthX: 4, $heightX: 4, $justifyContent: "center", $alignItems: "center", children: /* @__PURE__ */ e(
+                    v,
+                    {
+                      src: q[l],
+                      withLoader: !0,
+                      width: 40,
+                      height: 40
+                    }
+                  ) }),
+                  a === 100 && /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(K, { width: 20, height: 20 }) })
+                ]
               }
             ),
-            menuOffset: 12,
-            menuZIndex: 2
-          }
-        )
-      ] }) })
-    ] });
+            /* @__PURE__ */ t(r, { $flexGap: 16, children: [
+              /* @__PURE__ */ t(r, { $flexGap: 4, children: [
+                /* @__PURE__ */ t(r, { $flexDirection: "row", $alignItems: "center", $flexGap: 4, children: [
+                  /* @__PURE__ */ e(s, { $renderAs: "ac4-black", $color: N, children: l.split("_").join(" ") }),
+                  $ && /* @__PURE__ */ e(
+                    r,
+                    {
+                      $flexDirection: "row",
+                      $gap: 4,
+                      $gutter: 4,
+                      $alignItems: "center",
+                      $background: R,
+                      children: /* @__PURE__ */ e(s, { $renderAs: "ac4", $color: "WHITE", children: "Outcome pending" })
+                    }
+                  ),
+                  o === "DRAFT" && /* @__PURE__ */ e(
+                    r,
+                    {
+                      $flexDirection: "row",
+                      $gap: 4,
+                      $gutter: 4,
+                      $alignItems: "center",
+                      $background: f,
+                      children: /* @__PURE__ */ e(s, { $renderAs: "ac4", children: "Draft" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e(
+                  V,
+                  {
+                    renderAs: "primary",
+                    position: "bottom",
+                    tooltipItem: m,
+                    hidden: !B,
+                    children: /* @__PURE__ */ e(
+                      te,
+                      {
+                        ref: n,
+                        $renderAs: L ? "ah4" : "ab1",
+                        $color: "BLACK_1",
+                        children: m
+                      }
+                    )
+                  }
+                ),
+                !!h && o !== "DRAFT" && /* @__PURE__ */ t(s, { $renderAs: "ub3", $color: "BLACK_T_60", children: [
+                  `${a}% complete`,
+                  o === "ACTIVE" && M
+                ] })
+              ] }),
+              !!(i != null && i.length) && /* @__PURE__ */ t(P, { children: [
+                /* @__PURE__ */ e(U, { width: 40, height: 1, background: "BLACK_T_15" }),
+                /* @__PURE__ */ e(re, { outcomes: i })
+              ] })
+            ] })
+          ] }),
+          y === "TEACHER" && /* @__PURE__ */ e(
+            Y,
+            {
+              milestone: d,
+              studentId: A,
+              studentName: _,
+              teacherName: I ?? "",
+              parentName: w ?? "",
+              onAddOutcome: b,
+              isClassOngoing: !!C,
+              isStudentPresent: !!T,
+              onDraftPublish: E,
+              onEdit: D,
+              courseStream: G
+            }
+          )
+        ]
+      }
+    ) : null;
   }
 );
 export {
-  Te as default
+  ue as default
 };
 //# sourceMappingURL=milestone-info.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"milestone-info.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-info.tsx"],"sourcesContent":["import type { IMenuOptionsProps } from './context-menu-helper/menu-element-types';\nimport type { IMileStoneInfoWrapperProps } from './milestone-widget-types';\n\nimport React, { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport Bin2Icon from '../../../../../assets/line-icons/icons/bin2';\nimport ClosedEyeIcon from '../../../../../assets/line-icons/icons/closed-eye';\nimport Edit2Icon from '../../../../../assets/line-icons/icons/edit2';\nimport Eye2Icon from '../../../../../assets/line-icons/icons/eye2';\nimport Star2Icon from '../../../../../assets/line-icons/icons/star2';\nimport ContextMenuTargetElement from '../../../../sheets/lessons-list/lesson-item/context-menu-helper/target-element';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport ContextMenu from '../../../../ui/context-menu/context-menu';\nimport { useUIContext } from '../../../../ui/context/context';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport MilestoneProgressInfoV2 from '../../../create/comps/milestone-progress-v2/milestone-progress-v2';\nimport ContextMenuElement from './context-menu-helper/menu-element';\nimport { GOAL_CATEGORY_BASED_IMAGES } from './milestone-constants';\nimport { getGoalCategoryBasedColorTheme } from './milestone-utils';\nimport * as Styled from './milestone-widget-styled';\n\nconst MilestoneInfoWrapper: React.FC<IMileStoneInfoWrapperProps> = memo(\n  ({ isClassOngoing, isStudentPresent, isExpanded, ...restMilestoneInfoWrapperProps }) => {\n    const { milestone, userType, onEdit, onDelete, toggleExpand, onAddOutcome } =\n      restMilestoneInfoWrapperProps;\n\n    const {\n      id: milestoneId,\n      milestone_name: milestoneName,\n      milestone_date_ts: dueDate,\n      user_milestone_progress: milestoneProgress,\n      milestone_state: milestoneState,\n      permissions: milestonePermissions,\n      goal_category: goalCategory,\n      goal_code: goalCode,\n    } = milestone;\n\n    const { onEvent: trackEvent } = useUIContext();\n\n    const titleTextRef = useRef<HTMLDivElement>(null);\n    const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n\n    const {\n      can_delete: canDelete,\n      can_edit: canEdit,\n      can_update_date: canUpdateDate,\n      can_update_plan: canUpdatePlan,\n    } = milestonePermissions;\n\n    const { textColor: goalCategoryTextColor, borderColor } =\n      getGoalCategoryBasedColorTheme(goalCategory);\n    const isGoalCreation = useMemo(() => typeof goalCode === 'string', [goalCode]);\n\n    const isTeacher = userType === 'TEACHER';\n    const analyticsProps = useMemo(\n      () => ({\n        milestone_id: milestoneId,\n        temporary_milestone_id: milestoneId,\n        milestone_state: milestoneState,\n      }),\n      [milestoneId, milestoneState],\n    );\n\n    const isStudentAbsentInClass = isClassOngoing && !isStudentPresent;\n\n    const canDeleteGoal = !isGoalCreation || milestoneState !== 'DRAFT';\n\n    const menuOptions: IMenuOptionsProps[] = useMemo(\n      () => [\n        {\n          id: 'milestone-widget-edit',\n          Icon: Edit2Icon,\n          label: 'Edit',\n          disabled: isStudentAbsentInClass || !canEdit,\n          //* Not showing option to edit drafts.\n          //* For goals we have a separate edit CTA.\n          visible: isTeacher && milestoneState !== 'DRAFT',\n        },\n        {\n          id: 'milestone-widget-hide-n-show',\n          Icon: isExpanded ? ClosedEyeIcon : Eye2Icon,\n          label: isExpanded ? 'Hide' : 'Show',\n          disabled: false,\n          visible: true,\n        },\n        {\n          id: 'milestone-widget-add-outcome',\n          Icon: Star2Icon,\n          label: 'Add outcome',\n          disabled: milestoneState !== 'OUTCOME_PENDING',\n          visible: isTeacher,\n        },\n        {\n          id: 'milestone-widget-delete-draft',\n          Icon: Bin2Icon,\n          label: 'Delete',\n          disabled: !canDelete,\n          visible: isTeacher && canDelete && canDeleteGoal,\n        },\n      ],\n      [\n        canEdit,\n        isStudentAbsentInClass,\n        isExpanded,\n        milestoneState,\n        isTeacher,\n        canDelete,\n        canDeleteGoal,\n      ],\n    );\n\n    const handleOnMenuSelection = (selectedOption: string) => {\n      trackEvent('clicked', {\n        cta: selectedOption,\n        ...analyticsProps,\n      });\n\n      switch (selectedOption) {\n        case 'Edit':\n          onEdit?.({\n            milestoneId,\n            milestoneName,\n            milestoneDueDate: dueDate,\n            isMilestoneChaptersListEditable: canUpdatePlan,\n            isMilestoneDateEditable: canUpdateDate,\n            milestoneState,\n            canDelete,\n            goalCategory,\n            goalCode,\n          });\n\n          return;\n\n        case 'Add outcome':\n          onAddOutcome?.(milestoneId);\n\n          return;\n\n        case 'Delete':\n          onDelete?.({ milestoneId, isGoalCreation, milestoneState });\n\n          return;\n\n        default:\n          toggleExpand();\n\n          return;\n      }\n    };\n\n    useLayoutEffect(() => {\n      if (\n        titleTextRef.current &&\n        titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n      ) {\n        setShowTitleTooltip(true);\n      }\n    }, [titleTextRef]);\n\n    return (\n      <FlexView $flexDirection=\"row\" $justifyContent=\"space-between\" $flexGapX={1}>\n        <FlexView $widthX={30.5} $flexGap={isGoalCreation ? 8 : 0}>\n          {goalCategory && (\n            <FlexView $flexDirection=\"row\" $flexGap={4} $alignItems=\"center\">\n              <Image\n                src={GOAL_CATEGORY_BASED_IMAGES[goalCategory]}\n                withLoader\n                width={24}\n                height={24}\n              />\n\n              <Text $renderAs=\"ac4-black\" $color={goalCategoryTextColor}>\n                {goalCategory.split('_').join(' ')}\n              </Text>\n\n              {milestoneState === 'DRAFT' && (\n                <FlexView\n                  $flexDirection=\"row\"\n                  $gap={4}\n                  $gutter={4}\n                  $alignItems=\"center\"\n                  $background={borderColor}\n                >\n                  <Text $renderAs=\"ac4\">Draft</Text>\n                </FlexView>\n              )}\n            </FlexView>\n          )}\n\n          <ArrowTooltip\n            renderAs=\"primary\"\n            position=\"bottom\"\n            tooltipItem={milestoneName}\n            hidden={!showTitleTooltip}\n          >\n            <Styled.MilestoneTitle ref={titleTextRef} $renderAs={!isGoalCreation ? 'ah3' : 'ah4'}>\n              {milestoneName}\n            </Styled.MilestoneTitle>\n          </ArrowTooltip>\n        </FlexView>\n\n        <FlexView onClick={e => e.stopPropagation()} $height=\"fit-content\">\n          <FlexView $flexDirection=\"row\" $flexGapX={1} $alignItems=\"center\">\n            <MilestoneProgressInfoV2\n              userType={userType}\n              milestoneId={milestoneId}\n              progressInfo={milestoneProgress}\n              showProgress\n            />\n\n            <ContextMenu\n              targetElement={<ContextMenuTargetElement shape=\"curve\" />}\n              menuElement={\n                <ContextMenuElement\n                  menuOptions={menuOptions}\n                  onMenuOptionSelection={handleOnMenuSelection}\n                />\n              }\n              menuOffset={12}\n              menuZIndex={2}\n            />\n          </FlexView>\n        </FlexView>\n      </FlexView>\n    );\n  },\n);\n\nexport default MilestoneInfoWrapper;\n"],"names":["MilestoneInfoWrapper","memo","isClassOngoing","isStudentPresent","isExpanded","restMilestoneInfoWrapperProps","milestone","userType","onEdit","onDelete","toggleExpand","onAddOutcome","milestoneId","milestoneName","dueDate","milestoneProgress","milestoneState","milestonePermissions","goalCategory","goalCode","trackEvent","useUIContext","titleTextRef","useRef","showTitleTooltip","setShowTitleTooltip","useState","canDelete","canEdit","canUpdateDate","canUpdatePlan","goalCategoryTextColor","borderColor","getGoalCategoryBasedColorTheme","isGoalCreation","useMemo","isTeacher","analyticsProps","isStudentAbsentInClass","canDeleteGoal","menuOptions","Edit2Icon","ClosedEyeIcon","Eye2Icon","Star2Icon","Bin2Icon","handleOnMenuSelection","selectedOption","useLayoutEffect","FlexView","jsxs","jsx","Image","GOAL_CATEGORY_BASED_IMAGES","Text","ArrowTooltip","Styled.MilestoneTitle","e","MilestoneProgressInfoV2","ContextMenu","ContextMenuTargetElement","ContextMenuElement"],"mappings":"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"}
+{"version":3,"file":"milestone-info.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-info.tsx"],"sourcesContent":["import type { IMileStoneInfoWrapperProps } from './milestone-widget-types';\n\nimport React, { memo, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport GoalActionCtas from './goals/goal-action-ctas';\nimport { GOAL_CATEGORY_BASED_IMAGES } from './milestone-constants';\nimport {\n  getGoalCategoryBasedColorTheme,\n  getMilestoneWidgetStatusInfo,\n  getRemainingDaysToCompleteGoal,\n} from './milestone-utils';\nimport * as Styled from './milestone-widget-styled';\nimport OutcomeWrapper from './outcome/outcome';\n\nconst MilestoneInfoWrapper: React.FC<IMileStoneInfoWrapperProps> = memo(\n  ({ isClassOngoing, isStudentPresent, isExpanded, ...restMilestoneInfoWrapperProps }) => {\n    const {\n      milestone,\n      studentId,\n      studentName,\n      teacherName,\n      parentName,\n      userType,\n      courseStream,\n      outcomes,\n      onEdit,\n      onDraftPublish,\n      onAddOutcome,\n    } = restMilestoneInfoWrapperProps;\n\n    const {\n      milestone_name: milestoneName,\n      milestone_date_ts: dueDate,\n      milestone_state: milestoneState,\n      goal_category: goalCategory,\n      goal_code: goalCode,\n      progress_stat: progressStat,\n    } = milestone;\n\n    const { completed = 0, total = 0 } = progressStat || {};\n    const isOutcomePending = milestoneState === 'OUTCOME_PENDING';\n    const progressCompletionPercentage =\n      completed > 0 ? Math.floor((completed / total || 1) * 100) : 0;\n\n    const titleTextRef = useRef<HTMLDivElement>(null);\n    const [showTitleTooltip, setShowTitleTooltip] = useState(false);\n\n    const { textColor: goalCategoryTextColor, borderColor } =\n      getGoalCategoryBasedColorTheme(goalCategory);\n\n    const outcomeStatusInfo = getMilestoneWidgetStatusInfo(milestoneState);\n    const backgroundColor =\n      (isOutcomePending ? outcomeStatusInfo?.progressBackgroundColor : borderColor) || 'WHITE_5';\n\n    const isGoalCreation = useMemo(() => typeof goalCode === 'string', [goalCode]);\n    const remainingDays = getRemainingDaysToCompleteGoal(dueDate);\n\n    useLayoutEffect(() => {\n      if (\n        titleTextRef.current &&\n        titleTextRef.current.scrollHeight > titleTextRef.current.clientHeight\n      ) {\n        setShowTitleTooltip(true);\n      }\n    }, [titleTextRef]);\n\n    if (!goalCategory) return null;\n\n    return (\n      <FlexView\n        $flexDirection=\"row\"\n        $justifyContent=\"space-between\"\n        $alignItems=\"center\"\n        $flexGapX={1}\n      >\n        <FlexView $flexDirection=\"row\" $flexGapX={1.5}>\n          <FlexView\n            $widthX={4}\n            $heightX={4}\n            $background=\"WHITE_T_38\"\n            $position=\"relative\"\n            $justifyContent=\"center\"\n            $alignItems=\"center\"\n            $borderRadiusX={2}\n          >\n            <Styled.ChapterProgressSVG width=\"64px\" height=\"64px\">\n              <Styled.ChapterProgressSVGCircle $progress={0} r=\"31\" cx=\"32\" cy=\"32\" />\n              <Styled.ChapterProgressSVGCircle\n                $progressCircle\n                $progressBackground=\"BLACK_1\"\n                $progress={progressCompletionPercentage * 2}\n                r=\"31\"\n                cx=\"32\"\n                cy=\"32\"\n              />\n            </Styled.ChapterProgressSVG>\n\n            <FlexView $widthX={4} $heightX={4} $justifyContent=\"center\" $alignItems=\"center\">\n              <Image\n                src={GOAL_CATEGORY_BASED_IMAGES[goalCategory]}\n                withLoader\n                width={40}\n                height={40}\n              />\n            </FlexView>\n\n            {progressCompletionPercentage === 100 && (\n              <Styled.StyledCheckIconWrapper>\n                <Check2Icon width={20} height={20} />\n              </Styled.StyledCheckIconWrapper>\n            )}\n          </FlexView>\n\n          <FlexView $flexGap={16}>\n            <FlexView $flexGap={4}>\n              <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={4}>\n                <Text $renderAs=\"ac4-black\" $color={goalCategoryTextColor}>\n                  {goalCategory.split('_').join(' ')}\n                </Text>\n\n                {isOutcomePending && (\n                  <FlexView\n                    $flexDirection=\"row\"\n                    $gap={4}\n                    $gutter={4}\n                    $alignItems=\"center\"\n                    $background={backgroundColor}\n                  >\n                    <Text $renderAs=\"ac4\" $color=\"WHITE\">\n                      Outcome pending\n                    </Text>\n                  </FlexView>\n                )}\n\n                {milestoneState === 'DRAFT' && (\n                  <FlexView\n                    $flexDirection=\"row\"\n                    $gap={4}\n                    $gutter={4}\n                    $alignItems=\"center\"\n                    $background={borderColor}\n                  >\n                    <Text $renderAs=\"ac4\">Draft</Text>\n                  </FlexView>\n                )}\n              </FlexView>\n\n              <ArrowTooltip\n                renderAs=\"primary\"\n                position=\"bottom\"\n                tooltipItem={milestoneName}\n                hidden={!showTitleTooltip}\n              >\n                <Styled.MilestoneTitle\n                  ref={titleTextRef}\n                  $renderAs={!isGoalCreation ? 'ab1' : 'ah4'}\n                  $color=\"BLACK_1\"\n                >\n                  {milestoneName}\n                </Styled.MilestoneTitle>\n              </ArrowTooltip>\n\n              {!!total && milestoneState !== 'DRAFT' && (\n                <Text $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n                  {`${progressCompletionPercentage}% complete`}\n                  {milestoneState === 'ACTIVE' && remainingDays}\n                </Text>\n              )}\n            </FlexView>\n\n            {!!outcomes?.length && (\n              <>\n                <Separator width={40} height={1} background=\"BLACK_T_15\" />\n                <OutcomeWrapper outcomes={outcomes} />\n              </>\n            )}\n          </FlexView>\n        </FlexView>\n\n        {userType === 'TEACHER' && (\n          <GoalActionCtas\n            milestone={milestone}\n            studentId={studentId}\n            studentName={studentName}\n            teacherName={teacherName ?? ''}\n            parentName={parentName ?? ''}\n            onAddOutcome={onAddOutcome}\n            isClassOngoing={Boolean(isClassOngoing)}\n            isStudentPresent={Boolean(isStudentPresent)}\n            onDraftPublish={onDraftPublish}\n            onEdit={onEdit}\n            courseStream={courseStream}\n          />\n        )}\n      </FlexView>\n    );\n  },\n);\n\nexport default MilestoneInfoWrapper;\n"],"names":["MilestoneInfoWrapper","memo","isClassOngoing","isStudentPresent","isExpanded","restMilestoneInfoWrapperProps","milestone","studentId","studentName","teacherName","parentName","userType","courseStream","outcomes","onEdit","onDraftPublish","onAddOutcome","milestoneName","dueDate","milestoneState","goalCategory","goalCode","progressStat","completed","total","isOutcomePending","progressCompletionPercentage","titleTextRef","useRef","showTitleTooltip","setShowTitleTooltip","useState","goalCategoryTextColor","borderColor","getGoalCategoryBasedColorTheme","outcomeStatusInfo","getMilestoneWidgetStatusInfo","backgroundColor","isGoalCreation","useMemo","remainingDays","getRemainingDaysToCompleteGoal","useLayoutEffect","jsxs","FlexView","Styled.ChapterProgressSVG","jsx","Styled.ChapterProgressSVGCircle","Image","GOAL_CATEGORY_BASED_IMAGES","Styled.StyledCheckIconWrapper","Check2Icon","Text","ArrowTooltip","Styled.MilestoneTitle","Fragment","Separator","OutcomeWrapper","GoalActionCtas"],"mappings":"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"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs-styled.js

@@ -1,26 +1,40 @@
-import p from "styled-components";
+import n from "styled-components";
 import a from "../../../../../ui/layout/flex-view.js";
-import d from "../../../../../ui/text/text.js";
-const m = p(a)(({ theme: r }) => `
+import i from "../../../../../ui/text/text.js";
+import { MILESTONE_WIDGET_MIN_HEIGHT as c } from "../../../../constants.js";
+const x = n(a)(({ theme: r }) => `
     padding-bottom: ${r.layout.gutter * 1.5}px;
-  `), u = p.div(({ theme: r, $backgroundColor: o, $frames: t }) => {
+  `), T = n.div(({ theme: r, $backgroundColor: o, $frames: t }) => {
   const { colors: e } = r;
   return `
     display: grid;
     background: ${e[o || "WHITE_3"]};
     grid-template-columns: repeat(${t}, 1fr);
   `;
-}), g = p(d)(({ theme: r, $selected: o }) => {
-  const { layout: t, colors: e } = r, { BLACK_T_15: n, BLACK_T_87: s } = e;
+}), m = n(i)(({ theme: r, $selected: o }) => {
+  const { layout: t, colors: e } = r, { BLACK_T_15: p, BLACK_T_87: s } = e;
   return `
     cursor: pointer;
     padding: ${t.gutter * 0.5}px 0;
-    border-bottom: 1px solid ${o ? s : n};
+    border-bottom: 1px solid ${o ? s : p};
+  `;
+}), $ = n(a)(({ theme: r }) => {
+  const { WHITE_5: o } = r.colors, { gutter: t } = r.layout;
+  return `
+    position: relative;
+    height: ${c}px;
+    overflow: auto; 
+
+    background: ${r.colors.WHITE_2};
+    background-image: linear-gradient(${o} 0.5px, transparent 0.5px),
+      linear-gradient(90deg, ${o} 0.5px, transparent 0.5px);
+    background-size: ${t * 2.81}px ${t * 2.81}px;
   `;
 });
 export {
-  m as NoPlanCardWrapper,
-  g as TabsText,
-  u as TabsWrapper
+  x as NoPlanCardWrapper,
+  $ as TabComponentWrapper,
+  m as TabsText,
+  T as TabsWrapper
 };
 //# sourceMappingURL=milestone-tabs-styled.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"milestone-tabs-styled.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Text from '../../../../../ui/text/text';\n\nconst NoPlanCardWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    padding-bottom: ${theme.layout.gutter * 1.5}px;\n  `;\n});\n\ninterface ITabsWrapper {\n  $backgroundColor?: TColorNames;\n  $frames: number;\n}\n\nconst TabsWrapper = styled.div<ITabsWrapper>(({ theme, $backgroundColor, $frames }) => {\n  const { colors } = theme;\n\n  return `\n    display: grid;\n    background: ${colors[$backgroundColor || 'WHITE_3']};\n    grid-template-columns: repeat(${$frames}, 1fr);\n  `;\n});\n\ninterface ITabsText {\n  $selected?: boolean;\n}\n\nconst TabsText = styled(Text)<ITabsText>(({ theme, $selected }) => {\n  const { layout, colors } = theme;\n  const { BLACK_T_15, BLACK_T_87 } = colors;\n\n  return `\n    cursor: pointer;\n    padding: ${layout.gutter * 0.5}px 0;\n    border-bottom: 1px solid ${$selected ? BLACK_T_87 : BLACK_T_15};\n  `;\n});\n\nexport { NoPlanCardWrapper, TabsWrapper, TabsText };\n"],"names":["NoPlanCardWrapper","styled","FlexView","theme","TabsWrapper","$backgroundColor","$frames","colors","TabsText","Text","$selected","layout","BLACK_T_15","BLACK_T_87"],"mappings":";;;AAOA,MAAMA,IAAoBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACrC;AAAA,sBACaA,EAAM,OAAO,SAAS,GAAG;AAAA,GAE9C,GAOKC,IAAcH,EAAO,IAAkB,CAAC,EAAE,OAAAE,GAAO,kBAAAE,GAAkB,SAAAC,QAAc;AAC/E,QAAA,EAAE,QAAAC,EAAW,IAAAJ;AAEZ,SAAA;AAAA;AAAA,kBAESI,EAAOF,KAAoB,SAAS,CAAC;AAAA,oCACnBC,CAAO;AAAA;AAE3C,CAAC,GAMKE,IAAWP,EAAOQ,CAAI,EAAa,CAAC,EAAE,OAAAN,GAAO,WAAAO,QAAgB;AAC3D,QAAA,EAAE,QAAAC,GAAQ,QAAAJ,EAAW,IAAAJ,GACrB,EAAE,YAAAS,GAAY,YAAAC,EAAe,IAAAN;AAE5B,SAAA;AAAA;AAAA,eAEMI,EAAO,SAAS,GAAG;AAAA,+BACHD,IAAYG,IAAaD,CAAU;AAAA;AAElE,CAAC;"}
+{"version":3,"file":"milestone-tabs-styled.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../../ui/types';\n\nimport styled from 'styled-components';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Text from '../../../../../ui/text/text';\nimport { MILESTONE_WIDGET_MIN_HEIGHT } from '../../../../constants';\n\nconst NoPlanCardWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    padding-bottom: ${theme.layout.gutter * 1.5}px;\n  `;\n});\n\ninterface ITabsWrapper {\n  $backgroundColor?: TColorNames;\n  $frames: number;\n}\n\nconst TabsWrapper = styled.div<ITabsWrapper>(({ theme, $backgroundColor, $frames }) => {\n  const { colors } = theme;\n\n  return `\n    display: grid;\n    background: ${colors[$backgroundColor || 'WHITE_3']};\n    grid-template-columns: repeat(${$frames}, 1fr);\n  `;\n});\n\ninterface ITabsText {\n  $selected?: boolean;\n}\n\nconst TabsText = styled(Text)<ITabsText>(({ theme, $selected }) => {\n  const { layout, colors } = theme;\n  const { BLACK_T_15, BLACK_T_87 } = colors;\n\n  return `\n    cursor: pointer;\n    padding: ${layout.gutter * 0.5}px 0;\n    border-bottom: 1px solid ${$selected ? BLACK_T_87 : BLACK_T_15};\n  `;\n});\n\nconst TabComponentWrapper = styled(FlexView)(({ theme }) => {\n  const { WHITE_5 } = theme.colors;\n  const { gutter } = theme.layout;\n\n  return `\n    position: relative;\n    height: ${MILESTONE_WIDGET_MIN_HEIGHT}px;\n    overflow: auto; \n\n    background: ${theme.colors.WHITE_2};\n    background-image: linear-gradient(${WHITE_5} 0.5px, transparent 0.5px),\n      linear-gradient(90deg, ${WHITE_5} 0.5px, transparent 0.5px);\n    background-size: ${gutter * 2.81}px ${gutter * 2.81}px;\n  `;\n});\n\nexport { NoPlanCardWrapper, TabsWrapper, TabsText, TabComponentWrapper };\n"],"names":["NoPlanCardWrapper","styled","FlexView","theme","TabsWrapper","$backgroundColor","$frames","colors","TabsText","Text","$selected","layout","BLACK_T_15","BLACK_T_87","TabComponentWrapper","WHITE_5","gutter","MILESTONE_WIDGET_MIN_HEIGHT"],"mappings":";;;;AAQA,MAAMA,IAAoBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACrC;AAAA,sBACaA,EAAM,OAAO,SAAS,GAAG;AAAA,GAE9C,GAOKC,IAAcH,EAAO,IAAkB,CAAC,EAAE,OAAAE,GAAO,kBAAAE,GAAkB,SAAAC,QAAc;AAC/E,QAAA,EAAE,QAAAC,EAAW,IAAAJ;AAEZ,SAAA;AAAA;AAAA,kBAESI,EAAOF,KAAoB,SAAS,CAAC;AAAA,oCACnBC,CAAO;AAAA;AAE3C,CAAC,GAMKE,IAAWP,EAAOQ,CAAI,EAAa,CAAC,EAAE,OAAAN,GAAO,WAAAO,QAAgB;AAC3D,QAAA,EAAE,QAAAC,GAAQ,QAAAJ,EAAW,IAAAJ,GACrB,EAAE,YAAAS,GAAY,YAAAC,EAAe,IAAAN;AAE5B,SAAA;AAAA;AAAA,eAEMI,EAAO,SAAS,GAAG;AAAA,+BACHD,IAAYG,IAAaD,CAAU;AAAA;AAElE,CAAC,GAEKE,IAAsBb,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAAY;AACpD,QAAA,EAAE,SAAAY,EAAQ,IAAIZ,EAAM,QACpB,EAAE,QAAAa,EAAO,IAAIb,EAAM;AAElB,SAAA;AAAA;AAAA,cAEKc,CAA2B;AAAA;AAAA;AAAA,kBAGvBd,EAAM,OAAO,OAAO;AAAA,wCACEY,CAAO;AAAA,+BAChBA,CAAO;AAAA,uBACfC,IAAS,IAAI,MAAMA,IAAS,IAAI;AAAA;AAEvD,CAAC;"}