npm - @cuemath/leap - Versions diffs - 3.4.5 → 3.4.7-m-t - Mend

@cuemath/leap 3.4.5 → 3.4.7-m-t

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

package/dist/features/stickers/sticker-selector/sticker-selector.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { memo as B, useState as G, useCallback as H, useMemo as c } from "react";
-import K from "../../ui/arrow-tooltip/arrow-tooltip.js";
-import R from "./comps/stiker-selector-grid/sticker-selector-grid.js";
-import { useHandleStickerSend as _ } from "./hooks/use-handle-sticker-send.js";
-import { TriggerWrapper as $ } from "./sticker-selector-styled.js";
+import { memo as j, useState as B, useCallback as G, useMemo as c } from "react";
+import H from "../../ui/arrow-tooltip/arrow-tooltip.js";
+import K from "./comps/stiker-selector-grid/sticker-selector-grid.js";
+import { useHandleStickerSend as R } from "./hooks/use-handle-sticker-send.js";
+import { TriggerWrapper as _ } from "./sticker-selector-styled.js";
 const q = ({
   triggerNode: e,
   studentClassroomId: m,
@@ -30,20 +30,20 @@ const q = ({
     zIndex: M,
     parentWidth: X,
     isBlocking: D = !1
-  } = f, [o, n] = G(!1), r = _(m), l = H(
+  } = f, [o, n] = B(!1), r = R(m), l = G(
     (W) => {
       if (o) return;
       const d = ["burst-from-edges", "pop-expand", "float-up", "fall-down"], Y = d[Math.floor(Math.random() * d.length)];
       r == null || r(W, Y), n(!0);
-      const j = setTimeout(() => {
+      const $ = setTimeout(() => {
         n(!1);
       }, 5e3);
-      return () => clearTimeout(j);
+      return () => clearTimeout($);
     },
     [r, o]
   ), F = c(
     () => /* @__PURE__ */ t(
-      R,
+      K,
       {
         columns: i,
         gap: s,
@@ -53,9 +53,9 @@ const q = ({
       }
     ),
     [i, s, a, l, o]
-  ), V = c(() => /* @__PURE__ */ t($, { $disabled: o, children: e }), [o, e]);
+  ), V = c(() => /* @__PURE__ */ t(_, { $disabled: o, children: e }), [o, e]);
   return /* @__PURE__ */ t(
-    K,
+    H,
     {
       children: V,
       alwaysVisible: !0,
@@ -81,7 +81,7 @@ const q = ({
       tooltipYCoOrdinates: I
     }
   );
-}, Z = B(q);
+}, Z = j(q);
 export {
   Z as default
 };

package/dist/features/stickers/sticker-selector/sticker-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useMemo, useState, useCallback } from 'react';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport type { IStickerData, TStickerAnimationEffects } from '../stickers-types';\nimport StickerSelectorGrid from './comps/stiker-selector-grid/sticker-selector-grid';\nimport { useHandleStickerSend } from './hooks/use-handle-sticker-send';\nimport * as Styled from './sticker-selector-styled';\nimport type { IStickerSelectorProps } from './sticker-selector-types';\n\nconst StickerSelector: FC<IStickerSelectorProps> = ({\n triggerNode,\n studentClassroomId,\n gridConfig,\n tooltipConfig,\n visible,\n}) => {\n const { columns = 4, gap = 8, stickerSize = 48 } = gridConfig;\n const {\n isAnimated,\n arrowColor,\n arrowSize,\n arrowXCoOrdinates,\n arrowYCoOrdinates,\n backgroundColor,\n borderColor,\n position = 'bottom',\n renderAs = 'primary',\n textVariant,\n tooltipOffset,\n tooltipXCoOrdinates,\n tooltipYCoOrdinates,\n width,\n widthX,\n zIndex,\n parentWidth,\n isBlocking = false,\n } = tooltipConfig;\n\n const [isTemporarilyDisabled, setIsTemporarilyDisabled] = useState(false);\n\n const sendSticker = useHandleStickerSend(studentClassroomId);\n\n const handleStickerSend = useCallback(\n (sticker: IStickerData) => {\n if (isTemporarilyDisabled) return;\n\n const STICKER_EFFECTS = ['burst-from-edges', 'pop-expand', 'float-up', 'fall-down'] as const;\n\n const randomEffect: TStickerAnimationEffects =\n STICKER_EFFECTS[Math.floor(Math.random() * STICKER_EFFECTS.length)]!;\n\n sendSticker?.(sticker, randomEffect);\n setIsTemporarilyDisabled(true);\n\n const timeout = setTimeout(() => {\n setIsTemporarilyDisabled(false);\n }, 5000);\n\n return () => clearTimeout(timeout);\n },\n [sendSticker, isTemporarilyDisabled],\n );\n\n const tooltipItem = useMemo(\n () => (\n <StickerSelectorGrid\n columns={columns}\n gap={gap}\n stickerSize={stickerSize}\n onStickerClick={handleStickerSend}\n disabled={isTemporarilyDisabled}\n />\n ),\n [columns, gap, stickerSize, handleStickerSend, isTemporarilyDisabled],\n );\n\n const triggerEle = useMemo(() => {\n return (\n <Styled.TriggerWrapper $disabled={isTemporarilyDisabled}>{triggerNode}</Styled.TriggerWrapper>\n );\n }, [isTemporarilyDisabled, triggerNode]);\n\n return (\n <ArrowTooltip\n children={triggerEle}\n alwaysVisible\n hidden={!visible}\n tooltipItem={tooltipItem}\n renderAs={renderAs}\n position={position}\n isBlocking={isBlocking}\n isAnimated={isAnimated}\n zIndex={zIndex}\n width={width}\n widthX={widthX}\n parentWidth={parentWidth}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n textVariant={textVariant}\n tooltipOffset={tooltipOffset}\n arrowColor={arrowColor}\n arrowSize={arrowSize}\n arrowXCoOrdinates={arrowXCoOrdinates}\n arrowYCoOrdinates={arrowYCoOrdinates}\n tooltipXCoOrdinates={tooltipXCoOrdinates}\n tooltipYCoOrdinates={tooltipYCoOrdinates}\n />\n );\n};\n\nexport default memo(StickerSelector);\n"],"names":["StickerSelector","triggerNode","studentClassroomId","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","isTemporarilyDisabled","setIsTemporarilyDisabled","useState","sendSticker","useHandleStickerSend","handleStickerSend","useCallback","sticker","STICKER_EFFECTS","randomEffect","timeout","tooltipItem","useMemo","jsx","StickerSelectorGrid","triggerEle","Styled.TriggerWrapper","ArrowTooltip","~~stickerSelector~~","memo"],"mappings":";;;;;;AAUA,MAAMA,IAA6C,CAAC;AAAA,EAClD,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,IAAU,GAAG,KAAAC,IAAM,GAAG,aAAAC,IAAc,GAAO,IAAAL,GAC7C;AAAA,IACJ,YAAAM;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EACX,IAAAtB,GAEE,CAACuB,GAAuBC,CAAwB,IAAIC,EAAS,EAAK,GAElEC,IAAcC,EAAqB7B,CAAkB,GAErD8B,IAAoBC;AAAA,IACxB,CAACC,MAA0B;AACzB,UAAIP,EAAuB;AAE3B,YAAMQ,IAAkB,CAAC,oBAAoB,cAAc,YAAY,WAAW,GAE5EC,IACJD,EAAgB,KAAK,MAAM,KAAK,WAAWA,EAAgB,MAAM,CAAC;AAEpE,MAAAL,KAAA,QAAAA,EAAcI,GAASE,IACvBR,EAAyB,EAAI;AAEvB,YAAAS,IAAU,WAAW,MAAM;AAC/B,QAAAT,EAAyB,EAAK;AAAA,SAC7B,GAAI;AAEA,aAAA,MAAM,aAAaS,CAAO;AAAA,IACnC;AAAA,IACA,CAACP,GAAaH,CAAqB;AAAA,EAAA,GAG/BW,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAnC;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBwB;AAAA,QAChB,UAAUL;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,CAACrB,GAASC,GAAKC,GAAawB,GAAmBL,CAAqB;AAAA,EAAA,GAGhEe,IAAaH,EAAQ,wBAEtBI,GAAA,EAAsB,WAAWhB,GAAwB,UAAY1B,EAAA,CAAA,GAEvE,CAAC0B,GAAuB1B,CAAW,CAAC;AAGrC,SAAA,gBAAAuC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,UAAUF;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACrC;AAAA,MACT,aAAAiC;AAAA,MACA,UAAArB;AAAA,MACA,UAAAD;AAAA,MACA,YAAAU;AAAA,MACA,YAAAjB;AAAA,MACA,QAAAe;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,aAAAE;AAAA,MACA,iBAAAX;AAAA,MACA,aAAAC;AAAA,MACA,aAAAG;AAAA,MACA,eAAAC;AAAA,MACA,YAAAT;AAAA,MACA,WAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAO;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEewB,IAAAC,EAAK9C,CAAe;"}
1	+ {"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useMemo, useState, useCallback } from 'react';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport type { IStickerData, TStickerAnimationEffects } from '../stickers-types';\nimport StickerSelectorGrid from './comps/stiker-selector-grid/sticker-selector-grid';\nimport { useHandleStickerSend } from './hooks/use-handle-sticker-send';\nimport * as Styled from './sticker-selector-styled';\nimport type { IStickerSelectorProps } from './sticker-selector-types';\n\nconst StickerSelector: FC<IStickerSelectorProps> = ({\n triggerNode,\n studentClassroomId,\n gridConfig,\n tooltipConfig,\n visible,\n}) => {\n const { columns = 4, gap = 8, stickerSize = 48 } = gridConfig;\n const {\n isAnimated,\n arrowColor,\n arrowSize,\n arrowXCoOrdinates,\n arrowYCoOrdinates,\n backgroundColor,\n borderColor,\n position = 'bottom',\n renderAs = 'primary',\n textVariant,\n tooltipOffset,\n tooltipXCoOrdinates,\n tooltipYCoOrdinates,\n width,\n widthX,\n zIndex,\n parentWidth,\n isBlocking = false,\n } = tooltipConfig;\n\n const [isTemporarilyDisabled, setIsTemporarilyDisabled] = useState(false);\n\n const sendSticker = useHandleStickerSend(studentClassroomId);\n\n const handleStickerSend = useCallback(\n (sticker: IStickerData) => {\n if (isTemporarilyDisabled) return;\n\n const STICKER_EFFECTS = ['burst-from-edges', 'pop-expand', 'float-up', 'fall-down'] as const;\n\n const randomEffect: TStickerAnimationEffects =\n STICKER_EFFECTS[Math.floor(Math.random() * STICKER_EFFECTS.length)]!;\n\n sendSticker?.(sticker, randomEffect);\n setIsTemporarilyDisabled(true);\n\n const timeout = setTimeout(() => {\n setIsTemporarilyDisabled(false);\n }, 5000);\n\n return () => clearTimeout(timeout);\n },\n [sendSticker, isTemporarilyDisabled],\n );\n\n const tooltipItem = useMemo(\n () => (\n <StickerSelectorGrid\n columns={columns}\n gap={gap}\n stickerSize={stickerSize}\n onStickerClick={handleStickerSend}\n disabled={isTemporarilyDisabled}\n />\n ),\n [columns, gap, stickerSize, handleStickerSend, isTemporarilyDisabled],\n );\n\n const triggerEle = useMemo(() => {\n return (\n <Styled.TriggerWrapper $disabled={isTemporarilyDisabled}>{triggerNode}</Styled.TriggerWrapper>\n );\n }, [isTemporarilyDisabled, triggerNode]);\n\n return (\n <ArrowTooltip\n children={triggerEle}\n alwaysVisible\n hidden={!visible}\n tooltipItem={tooltipItem}\n renderAs={renderAs}\n position={position}\n isBlocking={isBlocking}\n isAnimated={isAnimated}\n zIndex={zIndex}\n width={width}\n widthX={widthX}\n parentWidth={parentWidth}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n textVariant={textVariant}\n tooltipOffset={tooltipOffset}\n arrowColor={arrowColor}\n arrowSize={arrowSize}\n arrowXCoOrdinates={arrowXCoOrdinates}\n arrowYCoOrdinates={arrowYCoOrdinates}\n tooltipXCoOrdinates={tooltipXCoOrdinates}\n tooltipYCoOrdinates={tooltipYCoOrdinates}\n />\n );\n};\n\nexport default memo(StickerSelector);\n"],"names":["StickerSelector","triggerNode","studentClassroomId","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","isTemporarilyDisabled","setIsTemporarilyDisabled","useState","sendSticker","useHandleStickerSend","handleStickerSend","useCallback","sticker","STICKER_EFFECTS","randomEffect","timeout","tooltipItem","useMemo","jsx","StickerSelectorGrid","triggerEle","Styled.TriggerWrapper","ArrowTooltip","StickerSelector$1","memo"],"mappings":";;;;;;AAUA,MAAMA,IAA6C,CAAC;AAAA,EAClD,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,IAAU,GAAG,KAAAC,IAAM,GAAG,aAAAC,IAAc,GAAO,IAAAL,GAC7C;AAAA,IACJ,YAAAM;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EACX,IAAAtB,GAEE,CAACuB,GAAuBC,CAAwB,IAAIC,EAAS,EAAK,GAElEC,IAAcC,EAAqB7B,CAAkB,GAErD8B,IAAoBC;AAAA,IACxB,CAACC,MAA0B;AACzB,UAAIP,EAAuB;AAE3B,YAAMQ,IAAkB,CAAC,oBAAoB,cAAc,YAAY,WAAW,GAE5EC,IACJD,EAAgB,KAAK,MAAM,KAAK,WAAWA,EAAgB,MAAM,CAAC;AAEpE,MAAAL,KAAA,QAAAA,EAAcI,GAASE,IACvBR,EAAyB,EAAI;AAEvB,YAAAS,IAAU,WAAW,MAAM;AAC/B,QAAAT,EAAyB,EAAK;AAAA,SAC7B,GAAI;AAEA,aAAA,MAAM,aAAaS,CAAO;AAAA,IACnC;AAAA,IACA,CAACP,GAAaH,CAAqB;AAAA,EAAA,GAG/BW,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAnC;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBwB;AAAA,QAChB,UAAUL;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,CAACrB,GAASC,GAAKC,GAAawB,GAAmBL,CAAqB;AAAA,EAAA,GAGhEe,IAAaH,EAAQ,wBAEtBI,GAAA,EAAsB,WAAWhB,GAAwB,UAAY1B,EAAA,CAAA,GAEvE,CAAC0B,GAAuB1B,CAAW,CAAC;AAGrC,SAAA,gBAAAuC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,UAAUF;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACrC;AAAA,MACT,aAAAiC;AAAA,MACA,UAAArB;AAAA,MACA,UAAAD;AAAA,MACA,YAAAU;AAAA,MACA,YAAAjB;AAAA,MACA,QAAAe;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,aAAAE;AAAA,MACA,iBAAAX;AAAA,MACA,aAAAC;AAAA,MACA,aAAAG;AAAA,MACA,eAAAC;AAAA,MACA,YAAAT;AAAA,MACA,WAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAO;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEewB,IAAAC,EAAK9C,CAAe;"}

package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js CHANGED Viewed

@@ -1,80 +1,146 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { memo as L, useState as T, useCallback as h, useMemo as v, useRef as H, useEffect as X } from "react";
-import $ from "../../../ui/buttons/clickable/clickable.js";
-import c from "../../../ui/layout/flex-view.js";
-import y from "../../../ui/separator/separator.js";
-import u from "../../../ui/text/text.js";
-import N from "../../constants/events.js";
-import { GuideContainer as P, HintIcon as V, SolIcon as j, Pointer as x, SectionContainer as B, Section as W, CloseIcon as K, Guide as M } from "./worksheet-sidebar-styled.js";
-const Z = L(
-  ({ questionWidth: f, questions: _, activeQuestionIndex: O, learnosity: S, actionbarHeight: p, loggerRef: l }) => {
-    var C;
-    const [t, s] = T(), [k, A] = T({
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { memo as M, useState as S, useRef as C, useCallback as s, useMemo as m, useEffect as q } from "react";
+import { useGetEligibleJourneysViaRoute as z } from "../../../journey/hooks/use-get-eligible-journeys-via-route.js";
+import { JOURNEY_ID_TEACHER as D } from "../../../journey/journey-id/journey-id-teacher.js";
+import { useJourney as F } from "../../../journey/use-journey/use-journey.js";
+import { useStickersJourney as Q } from "../../../stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.js";
+import Z from "../../../stickers/sticker-selector/sticker-selector.js";
+import f from "../../../ui/buttons/clickable/clickable.js";
+import i from "../../../ui/layout/flex-view.js";
+import G from "../../../ui/separator/separator.js";
+import d from "../../../ui/text/text.js";
+import v from "../../constants/events.js";
+import { StickersIcon as ee, GuideContainer as te, HintIcon as oe, SolIcon as ie, Pointer as ne, SectionContainer as re, Section as ce, CloseIcon as le, Guide as se } from "./worksheet-sidebar-styled.js";
+const Ie = M(
+  ({
+    questionWidth: E,
+    questions: Y,
+    activeQuestionIndex: L,
+    learnosity: b,
+    actionbarHeight: I,
+    loggerRef: a,
+    studentClassroomId: T
+  }) => {
+    var A;
+    const [t, h] = S(), [X, J] = S({
       top: 0,
       left: 0
-    }), { top: g, left: b } = k, R = h(() => {
-      s("HINT"), l.current(N.WORKSHEET_V3_HINT_SEEN);
-    }, [l]), w = h(() => {
-      s("SOL"), l.current(N.WORKSHEET_V3_SOLUTION_SEEN);
-    }, [l]), G = h(() => {
-      s(() => {
+    }), [g, B] = S(!1), k = C(null), { top: O, left: R } = X, K = s(() => {
+      h("HINT"), a.current(v.WORKSHEET_V3_HINT_SEEN);
+    }, [a]), V = s(() => {
+      h("SOL"), a.current(v.WORKSHEET_V3_SOLUTION_SEEN);
+    }, [a]), j = s(() => {
+      h(() => {
       });
-    }, []), { hints: n, solution: d } = ((C = _[O]) == null ? void 0 : C.metadata) || {}, o = v(() => t === void 0 ? void 0 : t === "HINT" ? n : d, [t, n, d]), E = H(null), I = H(null), m = h((a) => {
-      if (a.current) {
-        const i = a.current.getBoundingClientRect();
-        A({
-          top: i.top + i.height / 2 - 8,
-          left: i.right - 78
+    }, []), p = s(() => {
+      B((c) => !c);
+    }, []), { hints: n, solution: u } = ((A = Y[L]) == null ? void 0 : A.metadata) || {}, r = m(() => t === void 0 ? void 0 : t === "HINT" ? n : u, [t, n, u]), _ = C(null), N = C(null), $ = s((c) => {
+      if (c.current) {
+        const l = c.current.getBoundingClientRect();
+        J({
+          top: l.top + l.height / 2 - 8,
+          left: l.right - 78
           // 52px (sidebar width) + 16px (gutter) + 10px
         });
       }
-    }, []);
-    return t && o && S && S.renderMath("mathjax"), X(() => {
-      t === "HINT" ? m(I) : t === "SOL" ? m(E) : o || s(void 0);
-    }, [t, m, o]), /* @__PURE__ */ r(P, { $background: "WHITE", children: [
-      /* @__PURE__ */ e($, { label: "hints", onClick: R, disabled: !n, children: /* @__PURE__ */ r(c, { $alignItems: "center", $justifyContent: "center", ref: I, children: [
-        /* @__PURE__ */ e(V, { width: 32, height: 32, $disabled: !n }),
-        /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
-        /* @__PURE__ */ e(c, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(y, { width: 24, height: 1, background: "GREY_2" }) })
+    }, []), H = m(
+      () => /* @__PURE__ */ e("div", { ref: k, children: /* @__PURE__ */ e(f, { label: "teacher-badges", onClick: p, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", children: [
+        /* @__PURE__ */ e(ee, { width: 32, height: 32, $disabled: !g }),
+        /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: g ? "BLACK" : "GREY_4", children: "STICKERS" }),
+        /* @__PURE__ */ e(i, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(G, { width: 24, height: 1, background: "GREY_2" }) })
+      ] }) }) }),
+      [g, p]
+    ), x = m(
+      () => ({
+        stickerSize: 48,
+        columns: 4,
+        gap: 8
+      }),
+      []
+    ), P = m(
+      () => ({
+        position: "left",
+        zIndex: 1e3,
+        arrowYCoOrdinates: -175,
+        tooltipXCoOrdinates: "7.5%",
+        tooltipYCoOrdinates: "40%"
+      }),
+      []
+    ), W = {
+      position: "left",
+      tooltipXCoOrdinates: 20,
+      tooltipYCoOrdinates: -20
+    }, U = z([
+      D.STICKERS_INTRO_JOURNEY
+    ]), { isJourneyActive: w } = F(), { startTeacherStickersJourney: y } = Q({
+      triggerRef: k,
+      triggerElement: H,
+      tooltipConfig: W
+    });
+    return t && r && b && b.renderMath("mathjax"), q(() => {
+      t === "HINT" ? $(N) : t === "SOL" ? $(_) : r || h(void 0), w || y();
+    }, [
+      t,
+      $,
+      r,
+      U,
+      w,
+      y
+    ]), /* @__PURE__ */ o(te, { $background: "WHITE", children: [
+      T && /* @__PURE__ */ e(
+        Z,
+        {
+          triggerNode: H,
+          studentClassroomId: T,
+          gridConfig: x,
+          tooltipConfig: P,
+          visible: g,
+          onToggle: p
+        }
+      ),
+      /* @__PURE__ */ e(f, { label: "hints", onClick: K, disabled: !n, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", ref: N, children: [
+        /* @__PURE__ */ e(oe, { width: 32, height: 32, $disabled: !n }),
+        /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
+        /* @__PURE__ */ e(i, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(G, { width: 24, height: 1, background: "GREY_2" }) })
       ] }) }),
-      /* @__PURE__ */ e($, { label: "solution", onClick: w, disabled: !d, children: /* @__PURE__ */ r(c, { $alignItems: "center", $justifyContent: "center", ref: E, children: [
-        /* @__PURE__ */ e(j, { width: 32, height: 32, $disabled: !d }),
-        /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
+      /* @__PURE__ */ e(f, { label: "solution", onClick: V, disabled: !u, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", ref: _, children: [
+        /* @__PURE__ */ e(ie, { width: 32, height: 32, $disabled: !u }),
+        /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
       ] }) }),
-      t && g && b && /* @__PURE__ */ e(x, { topValue: g, leftValue: b }),
+      t && O && R && /* @__PURE__ */ e(ne, { topValue: O, leftValue: R }),
       t && /* @__PURE__ */ e(
-        B,
+        re,
         {
           $background: "WHITE",
-          $questionWidth: f,
-          $actionbarHeight: p,
+          $questionWidth: E,
+          $actionbarHeight: I,
           $borderRadius: 10,
-          children: /* @__PURE__ */ r(
-            W,
+          children: /* @__PURE__ */ o(
+            ce,
             {
               $gutterX: 1,
               $gapX: 1,
-              $questionWidth: f,
-              $actionbarHeight: p,
+              $questionWidth: E,
+              $actionbarHeight: I,
               children: [
-                /* @__PURE__ */ e($, { label: "close", onClick: G, children: /* @__PURE__ */ e(K, {}) }),
-                /* @__PURE__ */ e(c, { $gutterX: 0.5, children: /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
-                o && o.map((a, i) => /* @__PURE__ */ r(c, { $gutterX: 0.5, $gapX: 0.5, children: [
-                  o.length > 1 && /* @__PURE__ */ r(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
+                /* @__PURE__ */ e(f, { label: "close", onClick: j, children: /* @__PURE__ */ e(le, {}) }),
+                /* @__PURE__ */ e(i, { $gutterX: 0.5, children: /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
+                r && r.map((c, l) => /* @__PURE__ */ o(i, { $gutterX: 0.5, $gapX: 0.5, children: [
+                  r.length > 1 && /* @__PURE__ */ o(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
                     t,
                     " ",
-                    i + 1,
+                    l + 1,
                     ":"
                   ] }),
                   /* @__PURE__ */ e(
-                    M,
+                    se,
                     {
                       dangerouslySetInnerHTML: {
-                        __html: a
+                        __html: c
                       }
                     }
                   )
-                ] }, i.toString()))
+                ] }, l.toString()))
               ]
             }
           )
@@ -84,6 +150,6 @@ const Z = L(
   }
 );
 export {
-  Z as default
+  Ie as default
 };
 //# sourceMappingURL=question-guide.js.map

package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useState,\n useRef,\n type FC,\n type RefObject,\n} from 'react';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\nimport {\n Section,\n GuideContainer,\n CloseIcon,\n SolIcon,\n HintIcon,\n SectionContainer,\n Guide,\n Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' \| 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n actionbarHeight: number;\n}\n\nconst QuestionGuide: FC<IQuestionGuideProps> = memo(\n ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\n const [activeSection, setActiveSection] = useState<TSections \| undefined>();\n const [pointerPosition, setPointerPosition] = useState({\n top: 0,\n left: 0,\n });\n const { top, left } = pointerPosition;\n\n const handleHintClick = useCallback(() => {\n setActiveSection('HINT');\n loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n }, [loggerRef]);\n const handleSolClick = useCallback(() => {\n setActiveSection('SOL');\n loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n }, [loggerRef]);\n const handleClose = useCallback(() => {\n setActiveSection(() => undefined);\n }, []);\n\n const { hints, solution } = questions[activeQuestionIndex]?.metadata \|\| {};\n\n const activeSectionData = useMemo(() => {\n return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n }, [activeSection, hints, solution]);\n\n const sqlRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;\n const hintRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>;\n\n const updatePointerPosition = useCallback((ref: RefObject<HTMLDivElement>) => {\n if (ref.current) {\n const rect = ref.current.getBoundingClientRect();\n\n setPointerPosition({\n top: rect.top + rect.height / 2 - 8,\n left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n });\n }\n }, []);\n\n if (activeSection && activeSectionData && learnosity) {\n learnosity.renderMath('mathjax');\n }\n\n useEffect(() => {\n if (activeSection === 'HINT') {\n updatePointerPosition(hintRef);\n } else if (activeSection === 'SOL') {\n updatePointerPosition(sqlRef);\n } else if (!activeSectionData) {\n setActiveSection(undefined);\n }\n }, [activeSection, updatePointerPosition, activeSectionData]);\n\n return (\n <GuideContainer $background=\"WHITE\">\n <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n <HintIcon width={32} height={32} $disabled={!hints} />\n <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n HINT\n </Text>\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n </FlexView>\n </Clickable>\n <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n <SolIcon width={32} height={32} $disabled={!solution} />\n <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n SOL\n </Text>\n </FlexView>\n </Clickable>\n {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n {activeSection && (\n <SectionContainer\n $background=\"WHITE\"\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n $borderRadius={10}\n >\n <Section\n $gutterX={1}\n $gapX={1}\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n >\n <Clickable label=\"close\" onClick={handleClose}>\n <CloseIcon />\n </Clickable>\n <FlexView $gutterX={0.5}>\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n </Text>\n </FlexView>\n {activeSectionData &&\n activeSectionData.map((item, index) => (\n <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n {activeSectionData.length > 1 && (\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection} {index + 1}:\n </Text>\n )}\n <Guide\n dangerouslySetInnerHTML={{\n __html: item,\n }}\n />\n </FlexView>\n ))}\n </Section>\n </SectionContainer>\n )}\n </GuideContainer>\n );\n },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","hints","solution","_a","activeSectionData","useMemo","sqlRef","useRef","hintRef","updatePointerPosition","ref","rect","useEffect","jsxs","GuideContainer","jsx","Clickable","FlexView","HintIcon","Text","Separator","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":"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"}
1	+ {"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import React, {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useState,\n useRef,\n type ReactElement,\n type RefObject,\n} from 'react';\n\nimport { useGetEligibleJourneysViaRoute } from '../../../journey/hooks/use-get-eligible-journeys-via-route';\nimport { JOURNEY_ID_TEACHER } from '../../../journey/journey-id/journey-id-teacher';\nimport { useJourney } from '../../../journey/use-journey/use-journey';\nimport { useStickersJourney } from '../../../stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey';\nimport StickerSelector from '../../../stickers/sticker-selector/sticker-selector';\nimport {\n type IArrowTooltipProps,\n type TPositionProps,\n} from '../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\nimport {\n Section,\n GuideContainer,\n CloseIcon,\n SolIcon,\n HintIcon,\n StickersIcon,\n SectionContainer,\n Guide,\n Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' \| 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n actionbarHeight: number;\n studentClassroomId?: string;\n}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n ({\n questionWidth,\n questions,\n activeQuestionIndex,\n learnosity,\n actionbarHeight,\n loggerRef,\n studentClassroomId,\n }) => {\n const [activeSection, setActiveSection] = useState<TSections \| undefined>();\n const [pointerPosition, setPointerPosition] = useState({\n top: 0,\n left: 0,\n });\n const [showStickers, setShowStickers] = useState(false);\n const triggerRef = useRef<HTMLDivElement \| null>(null);\n const { top, left } = pointerPosition;\n\n const handleHintClick = useCallback(() => {\n setActiveSection('HINT');\n loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n }, [loggerRef]);\n const handleSolClick = useCallback(() => {\n setActiveSection('SOL');\n loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n }, [loggerRef]);\n const handleClose = useCallback(() => {\n setActiveSection(() => undefined);\n }, []);\n const handleBadgeToggle = useCallback(() => {\n setShowStickers(prev => !prev);\n }, []);\n\n const { hints, solution } = questions[activeQuestionIndex]?.metadata \|\| {};\n\n const activeSectionData = useMemo(() => {\n return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n }, [activeSection, hints, solution]);\n\n const sqlRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n const hintRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n\n const updatePointerPosition = useCallback((ref: React.RefObject<HTMLDivElement>) => {\n if (ref.current) {\n const rect = ref.current.getBoundingClientRect();\n\n setPointerPosition({\n top: rect.top + rect.height / 2 - 8,\n left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n });\n }\n }, []);\n\n const stickerTrigger = useMemo(\n () => (\n <div ref={triggerRef}>\n <Clickable label=\"teacher-badges\" onClick={handleBadgeToggle}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <StickersIcon width={32} height={32} $disabled={!showStickers} />\n <Text $renderAs=\"eyebrow2\" $color={!showStickers ? 'GREY_4' : 'BLACK'}>\n STICKERS\n </Text>\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n </FlexView>\n </Clickable>\n </div>\n ),\n [showStickers, handleBadgeToggle],\n );\n\n const stickerGridConfig = useMemo(\n () => ({\n stickerSize: 48,\n columns: 4,\n gap: 8,\n }),\n [],\n );\n\n const stickerTooltipConfig = useMemo(\n () => ({\n position: 'left' as TPositionProps,\n zIndex: 1000,\n arrowYCoOrdinates: -175,\n tooltipXCoOrdinates: '7.5%',\n tooltipYCoOrdinates: '40%',\n }),\n [],\n );\n\n const coachmarkConfig = {\n position: 'left',\n tooltipXCoOrdinates: 20,\n tooltipYCoOrdinates: -20,\n };\n\n const eligibleJourneyIds = useGetEligibleJourneysViaRoute([\n JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY,\n ]);\n\n const { isJourneyActive } = useJourney();\n\n const { startTeacherStickersJourney } = useStickersJourney({\n triggerRef: triggerRef as RefObject<HTMLDivElement>,\n triggerElement: stickerTrigger as ReactElement,\n tooltipConfig: coachmarkConfig as IArrowTooltipProps,\n });\n\n if (activeSection && activeSectionData && learnosity) {\n learnosity.renderMath('mathjax');\n }\n\n useEffect(() => {\n if (activeSection === 'HINT') {\n updatePointerPosition(hintRef);\n } else if (activeSection === 'SOL') {\n updatePointerPosition(sqlRef);\n } else if (!activeSectionData) {\n setActiveSection(undefined);\n }\n\n if (\n // eligibleJourneyIds.includes(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY) &&\n !isJourneyActive\n ) {\n startTeacherStickersJourney();\n }\n }, [\n activeSection,\n updatePointerPosition,\n activeSectionData,\n eligibleJourneyIds,\n isJourneyActive,\n startTeacherStickersJourney,\n ]);\n\n return (\n <GuideContainer $background=\"WHITE\">\n {studentClassroomId && (\n <StickerSelector\n triggerNode={stickerTrigger}\n studentClassroomId={studentClassroomId}\n gridConfig={stickerGridConfig}\n tooltipConfig={stickerTooltipConfig}\n visible={showStickers}\n onToggle={handleBadgeToggle}\n />\n )}\n <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n <HintIcon width={32} height={32} $disabled={!hints} />\n <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n HINT\n </Text>\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n </FlexView>\n </Clickable>\n <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n <SolIcon width={32} height={32} $disabled={!solution} />\n <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n SOL\n </Text>\n </FlexView>\n </Clickable>\n {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n {activeSection && (\n <SectionContainer\n $background=\"WHITE\"\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n $borderRadius={10}\n >\n <Section\n $gutterX={1}\n $gapX={1}\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n >\n <Clickable label=\"close\" onClick={handleClose}>\n <CloseIcon />\n </Clickable>\n <FlexView $gutterX={0.5}>\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n </Text>\n </FlexView>\n {activeSectionData &&\n activeSectionData.map((item, index) => (\n <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n {activeSectionData.length > 1 && (\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection} {index + 1}:\n </Text>\n )}\n <Guide\n dangerouslySetInnerHTML={{\n __html: item,\n }}\n />\n </FlexView>\n ))}\n </Section>\n </SectionContainer>\n )}\n </GuideContainer>\n );\n },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","studentClassroomId","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","showStickers","setShowStickers","triggerRef","useRef","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","handleBadgeToggle","prev","hints","solution","_a","activeSectionData","useMemo","sqlRef","hintRef","updatePointerPosition","ref","rect","stickerTrigger","jsx","Clickable","jsxs","FlexView","StickersIcon","Text","Separator","stickerGridConfig","stickerTooltipConfig","coachmarkConfig","eligibleJourneyIds","useGetEligibleJourneysViaRoute","JOURNEY_ID_TEACHER","isJourneyActive","useJourney","startTeacherStickersJourney","useStickersJourney","useEffect","GuideContainer","StickerSelector","HintIcon","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"mappings":";;;;;;;;;;;;;AAiDA,MAAMA,KAA+CC;AAAA,EACnD,CAAC;AAAA,IACC,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,MACI;;AACJ,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAgC,GACpE,CAACC,GAAiBC,CAAkB,IAAIF,EAAS;AAAA,MACrD,KAAK;AAAA,MACL,MAAM;AAAA,IAAA,CACP,GACK,CAACG,GAAcC,CAAe,IAAIJ,EAAS,EAAK,GAChDK,IAAaC,EAA8B,IAAI,GAC/C,EAAE,KAAAC,GAAK,MAAAC,EAAS,IAAAP,GAEhBQ,IAAkBC,EAAY,MAAM;AACxC,MAAAX,EAAiB,MAAM,GACbH,EAAA,QAAQe,EAAO,sBAAsB;AAAA,IAAA,GAC9C,CAACf,CAAS,CAAC,GACRgB,IAAiBF,EAAY,MAAM;AACvC,MAAAX,EAAiB,KAAK,GACZH,EAAA,QAAQe,EAAO,0BAA0B;AAAA,IAAA,GAClD,CAACf,CAAS,CAAC,GACRiB,IAAcH,EAAY,MAAM;AACpC,MAAAX,EAAiB,MAAA;AAAA,OAAe;AAAA,IAClC,GAAG,CAAE,CAAA,GACCe,IAAoBJ,EAAY,MAAM;AAC1B,MAAAN,EAAA,CAAAW,MAAQ,CAACA,CAAI;AAAA,IAC/B,GAAG,CAAE,CAAA,GAEC,EAAE,OAAAC,GAAO,UAAAC,EAAS,MAAIC,IAAA1B,EAAUC,CAAmB,MAA7B,gBAAAyB,EAAgC,aAAY,IAElEC,IAAoBC,EAAQ,MACzBtB,MAAkB,SAAY,SAAYA,MAAkB,SAASkB,IAAQC,GACnF,CAACnB,GAAekB,GAAOC,CAAQ,CAAC,GAE7BI,IAASf,EAAuB,IAAI,GACpCgB,IAAUhB,EAAuB,IAAI,GAErCiB,IAAwBb,EAAY,CAACc,MAAyC;AAClF,UAAIA,EAAI,SAAS;AACT,cAAAC,IAAOD,EAAI,QAAQ,sBAAsB;AAE5B,QAAAtB,EAAA;AAAA,UACjB,KAAKuB,EAAK,MAAMA,EAAK,SAAS,IAAI;AAAA,UAClC,MAAMA,EAAK,QAAQ;AAAA;AAAA,QAAA,CACpB;AAAA,MACH;AAAA,IACF,GAAG,CAAE,CAAA,GAECC,IAAiBN;AAAA,MACrB,MACG,gBAAAO,EAAA,OAAA,EAAI,KAAKtB,GACR,4BAACuB,GAAU,EAAA,OAAM,kBAAiB,SAASd,GACzC,UAAC,gBAAAe,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,QAAA,gBAAAH,EAACI,MAAa,OAAO,IAAI,QAAQ,IAAI,WAAW,CAAC5B,GAAc;AAAA,QAC/D,gBAAAwB,EAACK,KAAK,WAAU,YAAW,QAAS7B,IAA0B,UAAX,UAAoB,UAEvE,WAAA,CAAA;AAAA,QACC,gBAAAwB,EAAAG,GAAA,EAAS,MAAM,GAAG,aAAY,UAC7B,UAAA,gBAAAH,EAACM,GAAU,EAAA,OAAO,IAAI,QAAQ,GAAG,YAAW,SAAS,CAAA,GACvD;AAAA,MAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,MAEF,CAAC9B,GAAcW,CAAiB;AAAA,IAAA,GAG5BoB,IAAoBd;AAAA,MACxB,OAAO;AAAA,QACL,aAAa;AAAA,QACb,SAAS;AAAA,QACT,KAAK;AAAA,MAAA;AAAA,MAEP,CAAC;AAAA,IAAA,GAGGe,IAAuBf;AAAA,MAC3B,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,QACrB,qBAAqB;AAAA,MAAA;AAAA,MAEvB,CAAC;AAAA,IAAA,GAGGgB,IAAkB;AAAA,MACtB,UAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,IAAA,GAGjBC,IAAqBC,EAA+B;AAAA,MACxDC,EAAmB;AAAA,IAAA,CACpB,GAEK,EAAE,iBAAAC,MAAoBC,KAEtB,EAAE,6BAAAC,EAA4B,IAAIC,EAAmB;AAAA,MACzD,YAAAtC;AAAA,MACA,gBAAgBqB;AAAA,MAChB,eAAeU;AAAA,IAAA,CAChB;AAEG,WAAAtC,KAAiBqB,KAAqBzB,KACxCA,EAAW,WAAW,SAAS,GAGjCkD,EAAU,MAAM;AACd,MAAI9C,MAAkB,SACpByB,EAAsBD,CAAO,IACpBxB,MAAkB,QAC3ByB,EAAsBF,CAAM,IAClBF,KACVpB,EAAiB,MAAS,GAKzByC,KAE2BE;IAC9B,GACC;AAAA,MACD5C;AAAA,MACAyB;AAAA,MACAJ;AAAA,MACAkB;AAAA,MACAG;AAAA,MACAE;AAAA,IAAA,CACD,GAGC,gBAAAb,EAACgB,IAAe,EAAA,aAAY,SACzB,UAAA;AAAA,MACChD,KAAA,gBAAA8B;AAAA,QAACmB;AAAA,QAAA;AAAA,UACC,aAAapB;AAAA,UACb,oBAAA7B;AAAA,UACA,YAAYqC;AAAA,UACZ,eAAeC;AAAA,UACf,SAAShC;AAAA,UACT,UAAUW;AAAA,QAAA;AAAA,MACZ;AAAA,wBAEDc,GAAU,EAAA,OAAM,SAAQ,SAASnB,GAAiB,UAAU,CAACO,GAC5D,UAAA,gBAAAa,EAACC,KAAS,aAAY,UAAS,iBAAgB,UAAS,KAAKR,GAC3D,UAAA;AAAA,QAAA,gBAAAK,EAACoB,MAAS,OAAO,IAAI,QAAQ,IAAI,WAAW,CAAC/B,GAAO;AAAA,QACpD,gBAAAW,EAACK,KAAK,WAAU,YAAW,QAAShB,IAAmB,UAAX,UAAoB,UAEhE,OAAA,CAAA;AAAA,QACC,gBAAAW,EAAAG,GAAA,EAAS,MAAM,GAAG,aAAY,UAC7B,UAAA,gBAAAH,EAACM,GAAU,EAAA,OAAO,IAAI,QAAQ,GAAG,YAAW,SAAS,CAAA,GACvD;AAAA,MAAA,EAAA,CACF,EACF,CAAA;AAAA,wBACCL,GAAU,EAAA,OAAM,YAAW,SAAShB,GAAgB,UAAU,CAACK,GAC9D,UAAA,gBAAAY,EAACC,KAAS,aAAY,UAAS,iBAAgB,UAAS,KAAKT,GAC3D,UAAA;AAAA,QAAA,gBAAAM,EAACqB,MAAQ,OAAO,IAAI,QAAQ,IAAI,WAAW,CAAC/B,GAAU;AAAA,QACtD,gBAAAU,EAACK,KAAK,WAAU,YAAW,QAAShB,IAAmB,UAAX,UAAoB,UAEhE,MAAA,CAAA;AAAA,MAAA,EAAA,CACF,EACF,CAAA;AAAA,MACClB,KAAiBS,KAAOC,KAAQ,gBAAAmB,EAACsB,MAAQ,UAAU1C,GAAK,WAAWC,GAAM;AAAA,MACzEV,KACC,gBAAA6B;AAAA,QAACuB;AAAA,QAAA;AAAA,UACC,aAAY;AAAA,UACZ,gBAAgB3D;AAAA,UAChB,kBAAkBI;AAAA,UAClB,eAAe;AAAA,UAEf,UAAA,gBAAAkC;AAAA,YAACsB;AAAA,YAAA;AAAA,cACC,UAAU;AAAA,cACV,OAAO;AAAA,cACP,gBAAgB5D;AAAA,cAChB,kBAAkBI;AAAA,cAElB,UAAA;AAAA,gBAAA,gBAAAgC,EAACC,KAAU,OAAM,SAAQ,SAASf,GAChC,UAAA,gBAAAc,EAACyB,MAAU,EACb,CAAA;AAAA,kCACCtB,GAAS,EAAA,UAAU,KAClB,UAAA,gBAAAH,EAACK,KAAK,WAAU,YAAW,QAAO,YAAW,gBAAgB,MAC1D,UAAAlC,MAAkB,SAAS,WAAW,YACzC,CAAA,GACF;AAAA,gBACCqB,KACCA,EAAkB,IAAI,CAACkC,GAAMC,MAC3B,gBAAAzB,EAACC,GAAS,EAAA,UAAU,KAAK,OAAO,KAC7B,UAAA;AAAA,kBAAkBX,EAAA,SAAS,KACzB,gBAAAU,EAAAG,GAAA,EAAK,WAAU,YAAW,QAAO,YAAW,gBAAgB,MAC1D,UAAA;AAAA,oBAAAlC;AAAA,oBAAc;AAAA,oBAAEwD,IAAQ;AAAA,oBAAE;AAAA,kBAAA,GAC7B;AAAA,kBAEF,gBAAA3B;AAAA,oBAAC4B;AAAA,oBAAA;AAAA,sBACC,yBAAyB;AAAA,wBACvB,QAAQF;AAAA,sBACV;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA,KAVwCC,EAAM,SAAS,CAWzD,CACD;AAAA,cAAA;AAAA,YAAA;AAAA,UACL;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}

package/dist/features/worksheet/worksheet/worksheet-sidebar/sidebar.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { memo as $, useCallback as x } from "react";
-import C from "../../../ui/layout/flex-view.js";
-import g from "../../../ui/separator/separator.js";
+import { memo as x, useCallback as C } from "react";
+import g from "../../../ui/layout/flex-view.js";
+import u from "../../../ui/separator/separator.js";
 import { SIDEBAR_WIDTH as f } from "../constants.js";
-import u from "./navigator.js";
-import w from "./question-guide.js";
-import { SideBarContainer as S, UnderlinedTextWrapper as T, UnderlinedText as j } from "./worksheet-sidebar-styled.js";
-const I = $(
+import w from "./navigator.js";
+import S from "./question-guide.js";
+import { SideBarContainer as T, UnderlinedTextWrapper as j, UnderlinedText as k } from "./worksheet-sidebar-styled.js";
+const U = x(
   ({
     questionWidth: t,
     questions: i,
@@ -16,34 +16,36 @@ const I = $(
     height: l,
     actionbarHeight: s,
     openQuestionFeedbackModal: e,
-    loggerRef: h
+    loggerRef: h,
+    studentClassroomId: p
   }) => {
-    const p = i[m], { item_reference: o } = p ?? {}, d = x(() => {
+    const d = i[m], { item_reference: o } = d ?? {}, $ = C(() => {
       e && e(o || "");
     }, [o, e]);
     return c !== "TEACHER" || !e ? null : /* @__PURE__ */ n(
-      S,
+      T,
       {
         $width: f,
         $questionWidth: t,
         $height: l,
         $justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ r(T, { $width: f, $alignItems: "flex-start", $gapX: 0.5, children: /* @__PURE__ */ r(j, { $renderAs: "cta1", onClick: d, children: "Question Feedback" }) }),
-          /* @__PURE__ */ n(C, { children: [
+          /* @__PURE__ */ r(j, { $width: f, $alignItems: "flex-start", $gapX: 0.5, children: /* @__PURE__ */ r(k, { $renderAs: "cta1", onClick: $, children: "Question Feedback" }) }),
+          /* @__PURE__ */ n(g, { children: [
             /* @__PURE__ */ r(
-              w,
+              S,
               {
                 questionWidth: t,
                 questions: i,
                 activeQuestionIndex: m,
                 learnosity: a,
                 actionbarHeight: s,
-                loggerRef: h
+                loggerRef: h,
+                studentClassroomId: p
               }
             ),
-            /* @__PURE__ */ r(g, { heightX: 0.5 }),
-            /* @__PURE__ */ r(u, {})
+            /* @__PURE__ */ r(u, { heightX: 0.5 }),
+            /* @__PURE__ */ r(w, {})
           ] })
         ]
       }
@@ -51,6 +53,6 @@ const I = $(
   }
 );
 export {
-  I as default
+  U as default
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/features/worksheet/worksheet/worksheet-sidebar/sidebar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/sidebar.tsx"],"sourcesContent":["import { memo, useCallback, type FC } from 'react';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport type { TUserTypes } from '../../../ui/types';\nimport { SIDEBAR_WIDTH } from '../constants';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\nimport Navigator from './navigator';\nimport QuestionGuide from './question-guide';\nimport {\n SideBarContainer,\n UnderlinedText,\n UnderlinedTextWrapper,\n} from './worksheet-sidebar-styled';\n\ninterface IWorksheetSideBarProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n userType: TUserTypes;\n height: number \| string;\n actionbarHeight: number;\n openQuestionFeedbackModal?: (itemRef: string) => void;\n}\n\nconst WorksheetSideBar: FC<IWorksheetSideBarProps> = memo(\n ({\n questionWidth,\n questions,\n activeQuestionIndex,\n learnosity,\n userType,\n height,\n actionbarHeight,\n openQuestionFeedbackModal,\n loggerRef,\n }) => {\n const activeQuestion = questions[activeQuestionIndex];\n const { item_reference: itemRef } = activeQuestion ?? {};\n\n const onFeedbackClick = useCallback(() => {\n if (openQuestionFeedbackModal) {\n openQuestionFeedbackModal(itemRef \|\| '');\n }\n }, [itemRef, openQuestionFeedbackModal]);\n\n if (userType !== 'TEACHER' \|\| !openQuestionFeedbackModal) return null;\n\n return (\n <SideBarContainer\n $width={SIDEBAR_WIDTH}\n $questionWidth={questionWidth}\n $height={height}\n $justifyContent=\"space-between\"\n >\n <UnderlinedTextWrapper $width={SIDEBAR_WIDTH} $alignItems=\"flex-start\" $gapX={0.5}>\n <UnderlinedText $renderAs=\"cta1\" onClick={onFeedbackClick}>\n Question Feedback\n </UnderlinedText>\n </UnderlinedTextWrapper>\n\n <FlexView>\n <QuestionGuide\n questionWidth={questionWidth}\n questions={questions}\n activeQuestionIndex={activeQuestionIndex}\n learnosity={learnosity}\n actionbarHeight={actionbarHeight}\n loggerRef={loggerRef}\n />\n <Separator heightX={0.5} />\n <Navigator />\n </FlexView>\n </SideBarContainer>\n );\n },\n);\n\nexport default WorksheetSideBar;\n"],"names":["WorksheetSideBar","memo","questionWidth","questions","activeQuestionIndex","learnosity","userType","height","actionbarHeight","openQuestionFeedbackModal","loggerRef","activeQuestion","itemRef","onFeedbackClick","useCallback","jsxs","SideBarContainer","SIDEBAR_WIDTH","jsx","UnderlinedTextWrapper","UnderlinedText","FlexView","QuestionGuide","Separator","Navigator"],"mappings":";;;;;;;;~~AA0BA~~,MAAMA,IAA+CC;AAAA,EACnD,CAAC;AAAA,IACC,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,MACI;AACE,UAAAC,~~IAAiBR~~,EAAUC,CAAmB,GAC9C,EAAE,~~gBAAgBQ~~,MAAYD,KAAkB,CAAA,GAEhDE,IAAkBC,EAAY,MAAM;AACxC,~~MAAIL~~,KACFA,~~EAA0BG~~,KAAW,EAAE;AAAA,IACzC,GACC,CAACA,~~GAASH~~,CAAyB,CAAC;AAEvC,WAAIH,MAAa,aAAa,CAACG,IAAkC,OAG/D,~~gBAAAM~~;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAQC;AAAA,QACR,~~gBAAgBf~~;AAAA,QAChB,SAASK;AAAA,QACT,iBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,~~gBAAAW~~,EAACC,GAAsB,EAAA,QAAQF,GAAe,aAAY,cAAa,OAAO,KAC5E,UAAC,gBAAAC,EAAAE,GAAA,EAAe,WAAU,QAAO,SAASP,GAAiB,8BAE3D,CAAA,GACF;AAAA,4BAECQ,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,~~eAAApB~~;AAAA,gBACA,WAAAC;AAAA,gBACA,qBAAAC;AAAA,gBACA,YAAAC;AAAA,gBACA,iBAAAG;AAAA,gBACA,WAAAE;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAQ,EAACK,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,8BACxBC,GAAU,EAAA;AAAA,UAAA,GACb;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
1	+ {"version":3,"file":"sidebar.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/sidebar.tsx"],"sourcesContent":["import { memo, useCallback, type FC } from 'react';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport type { TUserTypes } from '../../../ui/types';\nimport { SIDEBAR_WIDTH } from '../constants';\nimport type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\nimport Navigator from './navigator';\nimport QuestionGuide from './question-guide';\nimport {\n SideBarContainer,\n UnderlinedText,\n UnderlinedTextWrapper,\n} from './worksheet-sidebar-styled';\n\ninterface IWorksheetSideBarProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n userType: TUserTypes;\n height: number \| string;\n actionbarHeight: number;\n studentClassroomId?: string;\n openQuestionFeedbackModal?: (itemRef: string) => void;\n}\n\nconst WorksheetSideBar: FC<IWorksheetSideBarProps> = memo(\n ({\n questionWidth,\n questions,\n activeQuestionIndex,\n learnosity,\n userType,\n height,\n actionbarHeight,\n openQuestionFeedbackModal,\n loggerRef,\n studentClassroomId,\n }) => {\n const activeQuestion = questions[activeQuestionIndex];\n const { item_reference: itemRef } = activeQuestion ?? {};\n\n const onFeedbackClick = useCallback(() => {\n if (openQuestionFeedbackModal) {\n openQuestionFeedbackModal(itemRef \|\| '');\n }\n }, [itemRef, openQuestionFeedbackModal]);\n\n if (userType !== 'TEACHER' \|\| !openQuestionFeedbackModal) return null;\n\n return (\n <SideBarContainer\n $width={SIDEBAR_WIDTH}\n $questionWidth={questionWidth}\n $height={height}\n $justifyContent=\"space-between\"\n >\n <UnderlinedTextWrapper $width={SIDEBAR_WIDTH} $alignItems=\"flex-start\" $gapX={0.5}>\n <UnderlinedText $renderAs=\"cta1\" onClick={onFeedbackClick}>\n Question Feedback\n </UnderlinedText>\n </UnderlinedTextWrapper>\n\n <FlexView>\n <QuestionGuide\n questionWidth={questionWidth}\n questions={questions}\n activeQuestionIndex={activeQuestionIndex}\n learnosity={learnosity}\n actionbarHeight={actionbarHeight}\n loggerRef={loggerRef}\n studentClassroomId={studentClassroomId}\n />\n <Separator heightX={0.5} />\n <Navigator />\n </FlexView>\n </SideBarContainer>\n );\n },\n);\n\nexport default WorksheetSideBar;\n"],"names":["WorksheetSideBar","memo","questionWidth","questions","activeQuestionIndex","learnosity","userType","height","actionbarHeight","openQuestionFeedbackModal","loggerRef","studentClassroomId","activeQuestion","itemRef","onFeedbackClick","useCallback","jsxs","SideBarContainer","SIDEBAR_WIDTH","jsx","UnderlinedTextWrapper","UnderlinedText","FlexView","QuestionGuide","Separator","Navigator"],"mappings":";;;;;;;;AA2BA,MAAMA,IAA+CC;AAAA,EACnD,CAAC;AAAA,IACC,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,WAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,MACI;AACE,UAAAC,IAAiBT,EAAUC,CAAmB,GAC9C,EAAE,gBAAgBS,MAAYD,KAAkB,CAAA,GAEhDE,IAAkBC,EAAY,MAAM;AACxC,MAAIN,KACFA,EAA0BI,KAAW,EAAE;AAAA,IACzC,GACC,CAACA,GAASJ,CAAyB,CAAC;AAEvC,WAAIH,MAAa,aAAa,CAACG,IAAkC,OAG/D,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAQC;AAAA,QACR,gBAAgBhB;AAAA,QAChB,SAASK;AAAA,QACT,iBAAgB;AAAA,QAEhB,UAAA;AAAA,UAAA,gBAAAY,EAACC,GAAsB,EAAA,QAAQF,GAAe,aAAY,cAAa,OAAO,KAC5E,UAAC,gBAAAC,EAAAE,GAAA,EAAe,WAAU,QAAO,SAASP,GAAiB,8BAE3D,CAAA,GACF;AAAA,4BAECQ,GACC,EAAA,UAAA;AAAA,YAAA,gBAAAH;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,eAAArB;AAAA,gBACA,WAAAC;AAAA,gBACA,qBAAAC;AAAA,gBACA,YAAAC;AAAA,gBACA,iBAAAG;AAAA,gBACA,WAAAE;AAAA,gBACA,oBAAAC;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAQ,EAACK,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,8BACxBC,GAAU,EAAA;AAAA,UAAA,GACb;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import r from "styled-components";
-import c from "../../../../assets/line-icons/icons/bulb.js";
-import d from "../../../../assets/line-icons/icons/cross.js";
-import l from "../../../../assets/line-icons/icons/info.js";
+import p from "../../../../assets/line-icons/icons/bulb.js";
+import l from "../../../../assets/line-icons/icons/cross.js";
+import d from "../../../../assets/line-icons/icons/info.js";
+import a from "../../../../assets/line-icons/icons/sticker.js";
 import e from "../../../ui/layout/flex-view.js";
-import a from "../../../ui/text/text.js";
-import { CustomElement as x } from "../worksheet-question/worksheet-question-styled.js";
+import x from "../../../ui/text/text.js";
+import { CustomElement as m } from "../worksheet-question/worksheet-question-styled.js";
 r(e)`
   border: 2px solid #000;
 `;
@@ -19,29 +20,29 @@ const y = r(e)(
   border: 1px solid ${i.colors.GREY_2};
   overflow: hidden;
 `
-), C = r(e)`
+), S = r(e)`
   cursor: pointer;
-`, I = r(a)`
+`, k = r(x)`
   text-decoration: underline;
   white-space: nowrap;
   writing-mode: vertical-rl;
   text-align: right;
-`, s = (t) => t.startsWith("calc(") ? t.replace(")", " - 0px)") : t, p = (t) => t.trim().split(/\s+(?=[+-])/).map((n) => n.startsWith("-") ? `+${n.slice(1)}` : n.startsWith("+") ? `-${n.slice(1)}` : `-${n}`).join(" "), m = (t) => t.startsWith("calc(") && t.endsWith(")") ? (t = t.slice(5, -1), `calc(${p(t)})`) : p(t), T = r(e)(
+`, s = (t) => t.startsWith("calc(") ? t.replace(")", " - 0px)") : t, c = (t) => t.trim().split(/\s+(?=[+-])/).map((n) => n.startsWith("-") ? `+${n.slice(1)}` : n.startsWith("+") ? `-${n.slice(1)}` : `-${n}`).join(" "), f = (t) => t.startsWith("calc(") && t.endsWith(")") ? (t = t.slice(5, -1), `calc(${c(t)})`) : c(t), E = r(e)(
   ({ $questionWidth: t }) => `
   width: calc(${t}px - 32px); // 32px is the left + right padding
   overflow-y: auto;
   height: 100%;
   display: flex;
 `
-), E = r(e)(({ $questionWidth: t, $height: o }) => `
-  margin-top: ${typeof o == "number" ? `${-o}px` : m(s(o))};
+), G = r(e)(({ $questionWidth: t, $height: o }) => `
+  margin-top: ${typeof o == "number" ? `${-o}px` : f(s(o))};
   position: sticky;
   left: calc((100% - ${t}px ) *.5 + ${t}px + 12px);
   bottom: 16px;
   align-items: center;
   height: ${typeof o == "number" ? `${o}px` : s(o)};
   z-index: 1;
-`), G = r(e)(
+`), T = r(e)(
   ({ theme: t }) => `
   width: 100%;
   border-radius: 8px;
@@ -50,7 +51,7 @@ const y = r(e)(
   align-items: center;
   padding: 10px;
 `
-), S = r.div`
+), B = r.div`
   position: fixed;
   top: ${({ topValue: t }) => `${t}px`};
   left: ${({ leftValue: t }) => `${t}px`};
@@ -60,32 +61,37 @@ const y = r(e)(
   background: white;
   border-top: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
-`, W = r(d)`
+`, R = r(l)`
   position: absolute;
   top: 8px;
   right: 16px;
-`, k = r(l)(({ theme: t, $disabled: o }) => `
+`, W = r(d)(({ theme: t, $disabled: o }) => `
     & path {
       stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
     }
-  `), v = r(c)(({ theme: t, $disabled: o }) => `
+  `), Y = r(p)(({ theme: t, $disabled: o }) => `
     & path {
       stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
     }
-  `), B = r(x)``;
+  `), _ = r(a)(({ theme: t, $disabled: o }) => `
+    & path {
+      stroke: ${o ? t.colors.GREY_4 : t.colors.BLACK};
+    }
+  `), v = r(m)``;
 export {
-  W as CloseIcon,
-  B as Guide,
-  G as GuideContainer,
-  k as HintIcon,
-  S as Pointer,
-  T as Section,
+  R as CloseIcon,
+  v as Guide,
+  T as GuideContainer,
+  W as HintIcon,
+  B as Pointer,
+  E as Section,
   y as SectionContainer,
-  E as SideBarContainer,
-  v as SolIcon,
-  I as UnderlinedText,
-  C as UnderlinedTextWrapper,
+  G as SideBarContainer,
+  Y as SolIcon,
+  _ as StickersIcon,
+  k as UnderlinedText,
+  S as UnderlinedTextWrapper,
   s as getMinHeightFromString,
-  m as negateExpression
+  f as negateExpression
 };
 //# sourceMappingURL=worksheet-sidebar-styled.js.map

package/dist/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"worksheet-sidebar-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport BulbIcon from '../../../../assets/line-icons/icons/bulb';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport InfoIcon from '../../../../assets/line-icons/icons/info';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { CustomElement } from '../worksheet-question/worksheet-question-styled';\n\nexport const Circle = styled(FlexView)`\n border: 2px solid #000;\n`;\nexport const SectionContainer = styled(FlexView)<{\n $questionWidth: number;\n $actionbarHeight: number;\n}>(\n ({ $questionWidth, $actionbarHeight, theme }) => `\n position: absolute;\n bottom: ${$actionbarHeight}px;\n right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)\n width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n height: 30%;\n display: flex;\n border: 1px solid ${theme.colors.GREY_2};\n overflow: hidden;\n`,\n);\n\nexport const UnderlinedTextWrapper = styled(FlexView)`\n cursor: pointer;\n`;\n\nexport const UnderlinedText = styled(Text)`\n text-decoration: underline;\n white-space: nowrap;\n writing-mode: vertical-rl;\n text-align: right;\n`;\n\nexport const getMinHeightFromString = (minHeight: string) => {\n if (minHeight.startsWith('calc(')) {\n return minHeight.replace(')', ' - 0px)');\n }\n\n return minHeight;\n};\n\nconst negateString = (expression: string) => {\n const terms = expression.trim().split(/\\s+(?=[+-])/);\n const negatedTerms = terms.map(term => {\n if (term.startsWith('-')) {\n return `+${term.slice(1)}`; // change - to +\n }\n\n if (term.startsWith('+')) {\n return `-${term.slice(1)}`; // change + to -\n }\n\n return `-${term}`; // add leading '-'\n });\n\n return negatedTerms.join(' ');\n};\n\nexport const negateExpression = (expression: string) => {\n if (expression.startsWith('calc(') && expression.endsWith(')')) {\n expression = expression.slice(5, -1); // Remove 'calc(' and ')'\n const negatedTerms = negateString(expression);\n\n return `calc(${negatedTerms})`;\n }\n\n return negateString(expression);\n};\n\nexport const Section = styled(FlexView)<{\n $questionWidth: number;\n $actionbarHeight: number;\n}>(\n ({ $questionWidth }) => `\n width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n overflow-y: auto;\n height: 100%;\n display: flex;\n`,\n);\nexport const SideBarContainer = styled(FlexView)<{\n $questionWidth: number;\n $height: number \| string;\n}>(({ $questionWidth, $height }) => {\n return `\n margin-top: ${\n typeof $height === 'number'\n ? `${-$height}px`\n : negateExpression(getMinHeightFromString($height))\n };\n position: sticky;\n left: calc((100% - ${$questionWidth}px ) *.5 + ${$questionWidth}px + 12px);\n bottom: 16px;\n align-items: center;\n height: ${typeof $height === 'number' ? `${$height}px` : getMinHeightFromString($height)};\n z-index: 1;\n`;\n});\n\nexport const GuideContainer = styled(FlexView)(\n ({ theme }) => `\n width: 100%;\n border-radius: 8px;\n border: 1px solid ${theme.colors.GREY_2};\n justify-content: center;\n align-items: center;\n padding: 10px;\n`,\n);\n\nexport const Pointer = styled.div<{ topValue: number; leftValue: number }>`\n position: fixed;\n top: ${({ topValue }) => `${topValue}px`};\n left: ${({ leftValue }) => `${leftValue}px`};\n width: 15px;\n height: 15px;\n transform: rotate(45deg);\n background: white;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n position: absolute;\n top: 8px;\n right: 16px;\n`;\n\nexport const HintIcon = styled(InfoIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n return `\n & path {\n stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n }\n `;\n});\n\nexport const SolIcon = styled(BulbIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n return `\n & path {\n stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n }\n `;\n});\n\nexport const Guide = styled(CustomElement)``;\n"],"names":["styled","FlexView","SectionContainer","$questionWidth","$actionbarHeight","theme","UnderlinedTextWrapper","UnderlinedText","Text","getMinHeightFromString","minHeight","negateString","expression","term","negateExpression","Section","SideBarContainer","$height","GuideContainer","Pointer","topValue","leftValue","CloseIcon","CrossIcon","HintIcon","InfoIcon","$disabled","SolIcon","BulbIcon","Guide","CustomElement"],"mappings":"~~;;;;;;;AASsBA~~,EAAOC,CAAQ;AAAA;AAAA;AAGxB,MAAAC,IAAmBF,EAAOC,CAAQ;AAAA,EAI7C,CAAC,EAAE,gBAAAE,GAAgB,kBAAAC,GAAkB,OAAAC,EAAY,MAAA;AAAA;AAAA,YAEvCD,CAAgB;AAAA;AAAA,gBAEZD,CAAc;AAAA;AAAA;AAAA,sBAGRE,EAAM,OAAO,MAAM;AAAA;AAAA;AAGzC,GAEaC,IAAwBN,EAAOC,CAAQ;AAAA;AAAA,GAIvCM,IAAiBP,EAAOQ,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAyB,CAACC,MACjCA,EAAU,WAAW,OAAO,IACvBA,EAAU,QAAQ,KAAK,SAAS,IAGlCA,GAGHC,IAAe,CAACC,MACNA,EAAW,KAAK,EAAE,MAAM,aAAa,EACxB,IAAI,CAAQC,MACjCA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGtBA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGnB,IAAIA,CAAI,EAChB,EAEmB,KAAK,GAAG,GAGjBC,IAAmB,CAACF,MAC3BA,EAAW,WAAW,OAAO,KAAKA,EAAW,SAAS,GAAG,KAC9CA,IAAAA,EAAW,MAAM,GAAG,EAAE,GAG5B,QAFcD,EAAaC,CAAU,CAEjB,OAGtBD,EAAaC,CAAU,GAGnBG,IAAUf,EAAOC,CAAQ;AAAA,EAIpC,CAAC,EAAE,gBAAAE,EAAA,MAAqB;AAAA,gBACVA,CAAc;AAAA;AAAA;AAAA;AAAA;AAK9B,GACaa,IAAmBhB,EAAOC,CAAQ,EAG5C,CAAC,EAAE,gBAAAE,GAAgB,SAAAc,QACb;AAAA,gBAEL,OAAOA,KAAY,WACf,GAAG,CAACA,CAAO,OACXH,EAAiBL,EAAuBQ,CAAO,CAAC,CACtD;AAAA;AAAA,uBAEqBd,CAAc,cAAcA,CAAc;AAAA;AAAA;AAAA,YAGrD,OAAOc,KAAY,WAAW,GAAGA,CAAO,OAAOR,EAAuBQ,CAAO,CAAC;AAAA;AAAA,CAGzF,GAEYC,IAAiBlB,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA;AAAA;AAAA,sBAGKA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKzC,GAEac,IAAUnB,EAAO;AAAA;AAAA,SAErB,CAAC,EAAE,UAAAoB,EAAe,MAAA,GAAGA,CAAQ,IAAI;AAAA,UAChC,CAAC,EAAE,WAAAC,EAAgB,MAAA,GAAGA,CAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAYtB,EAAOuB,CAAS;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAWxB,EAAOyB,CAAQ,EAA0B,CAAC,EAAE,OAAApB,GAAO,WAAAqB,QAClE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYsB,IAAU3B,EAAO4B,CAAQ,EAA0B,CAAC,EAAE,OAAAvB,GAAO,WAAAqB,QACjE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,~~GAEYwB~~,~~IAAQ7B~~,EAAO8B,CAAa;"}
1	+ {"version":3,"file":"worksheet-sidebar-styled.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/worksheet-sidebar-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport BulbIcon from '../../../../assets/line-icons/icons/bulb';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport InfoIcon from '../../../../assets/line-icons/icons/info';\nimport StickerIcon from '../../../../assets/line-icons/icons/sticker';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport { CustomElement } from '../worksheet-question/worksheet-question-styled';\n\nexport const Circle = styled(FlexView)`\n border: 2px solid #000;\n`;\nexport const SectionContainer = styled(FlexView)<{\n $questionWidth: number;\n $actionbarHeight: number;\n}>(\n ({ $questionWidth, $actionbarHeight, theme }) => `\n position: absolute;\n bottom: ${$actionbarHeight}px;\n right: 80px; //52px(sidebar(width) +12px(gutter) + (16px)\n width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n height: 30%;\n display: flex;\n border: 1px solid ${theme.colors.GREY_2};\n overflow: hidden;\n`,\n);\n\nexport const UnderlinedTextWrapper = styled(FlexView)`\n cursor: pointer;\n`;\n\nexport const UnderlinedText = styled(Text)`\n text-decoration: underline;\n white-space: nowrap;\n writing-mode: vertical-rl;\n text-align: right;\n`;\n\nexport const getMinHeightFromString = (minHeight: string) => {\n if (minHeight.startsWith('calc(')) {\n return minHeight.replace(')', ' - 0px)');\n }\n\n return minHeight;\n};\n\nconst negateString = (expression: string) => {\n const terms = expression.trim().split(/\\s+(?=[+-])/);\n const negatedTerms = terms.map(term => {\n if (term.startsWith('-')) {\n return `+${term.slice(1)}`; // change - to +\n }\n\n if (term.startsWith('+')) {\n return `-${term.slice(1)}`; // change + to -\n }\n\n return `-${term}`; // add leading '-'\n });\n\n return negatedTerms.join(' ');\n};\n\nexport const negateExpression = (expression: string) => {\n if (expression.startsWith('calc(') && expression.endsWith(')')) {\n expression = expression.slice(5, -1); // Remove 'calc(' and ')'\n const negatedTerms = negateString(expression);\n\n return `calc(${negatedTerms})`;\n }\n\n return negateString(expression);\n};\n\nexport const Section = styled(FlexView)<{\n $questionWidth: number;\n $actionbarHeight: number;\n}>(\n ({ $questionWidth }) => `\n width: calc(${$questionWidth}px - 32px); // 32px is the left + right padding\n overflow-y: auto;\n height: 100%;\n display: flex;\n`,\n);\nexport const SideBarContainer = styled(FlexView)<{\n $questionWidth: number;\n $height: number \| string;\n}>(({ $questionWidth, $height }) => {\n return `\n margin-top: ${\n typeof $height === 'number'\n ? `${-$height}px`\n : negateExpression(getMinHeightFromString($height))\n };\n position: sticky;\n left: calc((100% - ${$questionWidth}px ) *.5 + ${$questionWidth}px + 12px);\n bottom: 16px;\n align-items: center;\n height: ${typeof $height === 'number' ? `${$height}px` : getMinHeightFromString($height)};\n z-index: 1;\n`;\n});\n\nexport const GuideContainer = styled(FlexView)(\n ({ theme }) => `\n width: 100%;\n border-radius: 8px;\n border: 1px solid ${theme.colors.GREY_2};\n justify-content: center;\n align-items: center;\n padding: 10px;\n`,\n);\n\nexport const Pointer = styled.div<{ topValue: number; leftValue: number }>`\n position: fixed;\n top: ${({ topValue }) => `${topValue}px`};\n left: ${({ leftValue }) => `${leftValue}px`};\n width: 15px;\n height: 15px;\n transform: rotate(45deg);\n background: white;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n`;\n\nexport const CloseIcon = styled(CrossIcon)`\n position: absolute;\n top: 8px;\n right: 16px;\n`;\n\nexport const HintIcon = styled(InfoIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n return `\n & path {\n stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n }\n `;\n});\n\nexport const SolIcon = styled(BulbIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n return `\n & path {\n stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n }\n `;\n});\nexport const StickersIcon = styled(StickerIcon)<{ $disabled: boolean }>(({ theme, $disabled }) => {\n return `\n & path {\n stroke: ${$disabled ? theme.colors.GREY_4 : theme.colors.BLACK};\n }\n `;\n});\n\nexport const Guide = styled(CustomElement)``;\n"],"names":["styled","FlexView","SectionContainer","$questionWidth","$actionbarHeight","theme","UnderlinedTextWrapper","UnderlinedText","Text","getMinHeightFromString","minHeight","negateString","expression","term","negateExpression","Section","SideBarContainer","$height","GuideContainer","Pointer","topValue","leftValue","CloseIcon","CrossIcon","HintIcon","InfoIcon","$disabled","SolIcon","BulbIcon","StickersIcon","StickerIcon","Guide","CustomElement"],"mappings":";;;;;;;;AAUsBA,EAAOC,CAAQ;AAAA;AAAA;AAGxB,MAAAC,IAAmBF,EAAOC,CAAQ;AAAA,EAI7C,CAAC,EAAE,gBAAAE,GAAgB,kBAAAC,GAAkB,OAAAC,EAAY,MAAA;AAAA;AAAA,YAEvCD,CAAgB;AAAA;AAAA,gBAEZD,CAAc;AAAA;AAAA;AAAA,sBAGRE,EAAM,OAAO,MAAM;AAAA;AAAA;AAGzC,GAEaC,IAAwBN,EAAOC,CAAQ;AAAA;AAAA,GAIvCM,IAAiBP,EAAOQ,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO5BC,IAAyB,CAACC,MACjCA,EAAU,WAAW,OAAO,IACvBA,EAAU,QAAQ,KAAK,SAAS,IAGlCA,GAGHC,IAAe,CAACC,MACNA,EAAW,KAAK,EAAE,MAAM,aAAa,EACxB,IAAI,CAAQC,MACjCA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGtBA,EAAK,WAAW,GAAG,IACd,IAAIA,EAAK,MAAM,CAAC,CAAC,KAGnB,IAAIA,CAAI,EAChB,EAEmB,KAAK,GAAG,GAGjBC,IAAmB,CAACF,MAC3BA,EAAW,WAAW,OAAO,KAAKA,EAAW,SAAS,GAAG,KAC9CA,IAAAA,EAAW,MAAM,GAAG,EAAE,GAG5B,QAFcD,EAAaC,CAAU,CAEjB,OAGtBD,EAAaC,CAAU,GAGnBG,IAAUf,EAAOC,CAAQ;AAAA,EAIpC,CAAC,EAAE,gBAAAE,EAAA,MAAqB;AAAA,gBACVA,CAAc;AAAA;AAAA;AAAA;AAAA;AAK9B,GACaa,IAAmBhB,EAAOC,CAAQ,EAG5C,CAAC,EAAE,gBAAAE,GAAgB,SAAAc,QACb;AAAA,gBAEL,OAAOA,KAAY,WACf,GAAG,CAACA,CAAO,OACXH,EAAiBL,EAAuBQ,CAAO,CAAC,CACtD;AAAA;AAAA,uBAEqBd,CAAc,cAAcA,CAAc;AAAA;AAAA;AAAA,YAGrD,OAAOc,KAAY,WAAW,GAAGA,CAAO,OAAOR,EAAuBQ,CAAO,CAAC;AAAA;AAAA,CAGzF,GAEYC,IAAiBlB,EAAOC,CAAQ;AAAA,EAC3C,CAAC,EAAE,OAAAI,EAAA,MAAY;AAAA;AAAA;AAAA,sBAGKA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAKzC,GAEac,IAAUnB,EAAO;AAAA;AAAA,SAErB,CAAC,EAAE,UAAAoB,EAAe,MAAA,GAAGA,CAAQ,IAAI;AAAA,UAChC,CAAC,EAAE,WAAAC,EAAgB,MAAA,GAAGA,CAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAShCC,IAAYtB,EAAOuB,CAAS;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAWxB,EAAOyB,CAAQ,EAA0B,CAAC,EAAE,OAAApB,GAAO,WAAAqB,QAClE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEYsB,IAAU3B,EAAO4B,CAAQ,EAA0B,CAAC,EAAE,OAAAvB,GAAO,WAAAqB,QACjE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GACYwB,IAAe7B,EAAO8B,CAAW,EAA0B,CAAC,EAAE,OAAAzB,GAAO,WAAAqB,QACzE;AAAA;AAAA,gBAEOA,IAAYrB,EAAM,OAAO,SAASA,EAAM,OAAO,KAAK;AAAA;AAAA,GAGnE,GAEY0B,IAAQ/B,EAAOgC,CAAa;"}