@cuemath/leap 3.2.34-mby → 3.2.34-mbz1

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.
@@ -1 +1 @@
1
- {"version":3,"file":"info.js","sources":["../../../../src/assets/line-icons/icons/info.tsx"],"sourcesContent":["const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M12.0003 20.3334C16.6027 20.3334 20.3337 16.6025 20.3337 12.0001C20.3337 7.39771 16.6027 3.66675 12.0003 3.66675C7.39795 3.66675 3.66699 7.39771 3.66699 12.0001C3.66699 16.6025 7.39795 20.3334 12.0003 20.3334Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 15.3333V12\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 8.66675H12.0083\"\n stroke=\"currentColor\"\n strokeWidth=\"2.08\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport default InfoIcon;\n"],"names":["InfoIcon","props","jsxs","jsx","StickerIcon"],"mappings":";AAAA,MAAMA,IAAoD,CACxDC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACL,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}
1
+ {"version":3,"file":"info.js","sources":["../../../../src/assets/line-icons/icons/info.tsx"],"sourcesContent":["const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n >\n <path\n d=\"M12.0003 20.3334C16.6027 20.3334 20.3337 16.6025 20.3337 12.0001C20.3337 7.39771 16.6027 3.66675 12.0003 3.66675C7.39795 3.66675 3.66699 7.39771 3.66699 12.0001C3.66699 16.6025 7.39795 20.3334 12.0003 20.3334Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 15.3333V12\"\n stroke=\"currentColor\"\n strokeWidth=\"1.66667\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M12 8.66675H12.0083\"\n stroke=\"currentColor\"\n strokeWidth=\"2.08\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n);\n\nexport default InfoIcon;\n"],"names":["InfoIcon","props","jsxs","jsx","InfoIcon$1"],"mappings":";AAAA,MAAMA,IAAoD,CACxDC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACL,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,eAAc;AAAA,UACd,gBAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}
@@ -1,13 +1,13 @@
1
1
  import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
2
  import { memo as a } from "react";
3
3
  import h from "../../../../../../assets/line-icons/icons/info.js";
4
- import y from "../../../../../ui/arrow-tooltip/arrow-tooltip.js";
5
- import f from "../../../../../ui/buttons/text-button/text-button.js";
4
+ import f from "../../../../../ui/arrow-tooltip/arrow-tooltip.js";
5
+ import y from "../../../../../ui/buttons/text-button/text-button.js";
6
6
  import { ZINDEX as p } from "../../../../../ui/constants/z-index.js";
7
7
  import o from "../../../../../ui/layout/flex-view.js";
8
8
  import i from "../../../../../ui/text/text.js";
9
9
  import { SAT_TEST_QUESTION_STATUS as $ } from "../../../constants/index.js";
10
- import { FlexText as A, StyledCheckIcon as S, StyledCrossIcon as T, StyledMinusIcon as b, TableRow as d, StyledTableBody as I } from "./sat-sheet-summary-styled.js";
10
+ import { FlexText as A, StyledCheckIcon as I, StyledCrossIcon as T, StyledMinusIcon as b, TableRow as d, StyledTableBody as S } from "./sat-sheet-summary-styled.js";
11
11
  const { CORRECT: g, INCORRECT: C, UNSCORED: x } = $, w = [
12
12
  {
13
13
  key: "section-column",
@@ -29,35 +29,35 @@ const { CORRECT: g, INCORRECT: C, UNSCORED: x } = $, w = [
29
29
  label: "Action",
30
30
  centerAlign: !0
31
31
  }
32
- ], k = "Unscored questions are those which do not impact your final mark, so it does not matter if you get them right or wrong.", R = a(({ status: r }) => r === x ? /* @__PURE__ */ c(A, { $renderAs: "body2", $align: "center", $opacity: 0.5, children: [
32
+ ], R = "Unscored questions are those which do not impact your final mark, so it does not matter if you get them right or wrong.", _ = a(({ status: r }) => r === x ? /* @__PURE__ */ c(A, { $renderAs: "body2", $align: "center", $opacity: 0.5, children: [
33
33
  "Unscored",
34
34
  " ",
35
35
  /* @__PURE__ */ e(
36
- y,
36
+ f,
37
37
  {
38
38
  renderAs: "primary",
39
39
  position: "bottom",
40
- tooltipItem: k,
40
+ tooltipItem: R,
41
41
  zIndex: p.SAT_SUMMARY_SCORE,
42
42
  widthX: 19.6025,
43
43
  children: /* @__PURE__ */ e(h, {})
44
44
  }
45
45
  )
46
- ] }) : r === g ? /* @__PURE__ */ e(S, {}) : r === C ? /* @__PURE__ */ e(T, {}) : /* @__PURE__ */ e(b, {})), X = ({ questionByQuestionList: r, onReview: m }) => /* @__PURE__ */ c(o, { $flexGapX: 1, children: [
46
+ ] }) : r === g ? /* @__PURE__ */ e(I, {}) : r === C ? /* @__PURE__ */ e(T, {}) : /* @__PURE__ */ e(b, {})), X = ({ questionByQuestionList: r, onReview: m }) => /* @__PURE__ */ c(o, { $flexGapX: 1, children: [
47
47
  /* @__PURE__ */ e(i, { $renderAs: "eyebrow2", children: "Question by question overview" }),
48
48
  /* @__PURE__ */ c("table", { children: [
49
49
  /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e(d, { children: w.map((l) => {
50
- const { key: t, label: n, centerAlign: s } = l;
51
- return /* @__PURE__ */ e("th", { children: /* @__PURE__ */ e(i, { $renderAs: "body2", $opacity: 0.5, $align: s ? "center" : "left", children: n }) }, t);
50
+ const { key: n, label: t, centerAlign: s } = l;
51
+ return /* @__PURE__ */ e("th", { children: /* @__PURE__ */ e(i, { $renderAs: "body2", $opacity: 0.5, $align: s ? "center" : "left", children: t }) }, n);
52
52
  }) }) }),
53
- /* @__PURE__ */ e(I, { children: r.map((l) => {
54
- const { question_no: t, section: n, score: s, user_node_id: u } = l;
53
+ /* @__PURE__ */ e(S, { children: r.map((l) => {
54
+ const { question_no: n, section: t, score: s, user_node_id: u } = l;
55
55
  return /* @__PURE__ */ c(d, { children: [
56
- /* @__PURE__ */ e(i, { $renderAs: "body2", children: n }),
57
- /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(i, { $renderAs: "cta2", $align: "center", children: t }) }),
58
- /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(R, { status: s }) }),
59
- /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(f, { label: "Review", onClick: () => m(u, t - 1) }) })
60
- ] }, `${t}_${n}`);
56
+ /* @__PURE__ */ e(i, { $renderAs: "body2", children: t }),
57
+ /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(i, { $renderAs: "cta2", $align: "center", children: n }) }),
58
+ /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(_, { status: s }) }),
59
+ /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", children: /* @__PURE__ */ e(y, { label: "Review", onClick: () => m(u, n - 1) }) })
60
+ ] }, `${n}_${t}`);
61
61
  }) })
62
62
  ] })
63
63
  ] });
@@ -3,7 +3,7 @@ import g from "../../../../../assets/line-icons/icons/chevron-down.js";
3
3
  import $ from "../../../../../assets/line-icons/icons/info.js";
4
4
  import i from "../../../../ui/layout/flex-view.js";
5
5
  import s from "../../../../ui/text/text.js";
6
- const m = x`
6
+ const f = x`
7
7
  0% {
8
8
  opacity: 0;
9
9
  }
@@ -12,7 +12,7 @@ const m = x`
12
12
  }
13
13
  `, v = r(i)`
14
14
  position: relative;
15
- animation: ${m} 0.3s ease-in-out;
15
+ animation: ${f} 0.3s ease-in-out;
16
16
  `;
17
17
  r(g)(({ theme: o, $expanded: t }) => {
18
18
  const {
@@ -129,7 +129,7 @@ const A = r.div(({ theme: o }) => {
129
129
  position: absolute;
130
130
  inset: 50%;
131
131
  transform: translate(-50%, -50%) rotate(-90deg);
132
- `), S = r.circle(
132
+ `), W = r.circle(
133
133
  ({ theme: o, $progressCircle: t, $progress: e, $progressBackground: n }) => {
134
134
  const { colors: p, layout: l } = o, { GREY_2: c } = p, { gutter: a } = l, d = a * 12.5, u = t ? d - e : e;
135
135
  return `
@@ -148,7 +148,7 @@ r(s)(({ theme: o, $backgroundColor: t }) => `
148
148
  `);
149
149
  export {
150
150
  G as ChapterProgressSVG,
151
- S as ChapterProgressSVGCircle,
151
+ W as ChapterProgressSVGCircle,
152
152
  C as Content,
153
153
  k as ContentWrapper,
154
154
  v as MainContainer,
@@ -1,10 +1,10 @@
1
1
  import t from "styled-components";
2
- import p from "../../../../../../assets/line-icons/icons/info.js";
2
+ import n from "../../../../../../assets/line-icons/icons/info.js";
3
3
  import e from "../../../../../ui/layout/flex-view.js";
4
4
  import r from "../../../../../ui/text/text.js";
5
5
  const m = t(e)`
6
6
  transform: translateY(2px);
7
- `, c = t(r)(() => `
7
+ `, f = t(r)(() => `
8
8
  display: -webkit-box;
9
9
  -webkit-box-orient: vertical;
10
10
  -webkit-line-clamp: 2;
@@ -25,7 +25,7 @@ t(e)(({ theme: o }) => {
25
25
  grid-row-gap: ${i * 0.625}px;
26
26
  `;
27
27
  });
28
- t(p)(
28
+ t(n)(
29
29
  () => `
30
30
  position: relative;
31
31
  cursor: pointer;
@@ -33,6 +33,6 @@ t(p)(
33
33
  );
34
34
  export {
35
35
  m as NumbersWrapper,
36
- c as StyledText
36
+ f as StyledText
37
37
  };
38
38
  //# sourceMappingURL=outcome-styled.js.map
@@ -1,7 +1,7 @@
1
1
  import e from "styled-components";
2
- import i from "../../../../assets/line-icons/icons/info.js";
2
+ import s from "../../../../assets/line-icons/icons/info.js";
3
3
  import p from "../../../ui/layout/flex-view.js";
4
- import s from "../../../ui/text/text.js";
4
+ import i from "../../../ui/text/text.js";
5
5
  const x = e(p)(({
6
6
  theme: t,
7
7
  $disabled: o
@@ -29,11 +29,11 @@ const x = e(p)(({
29
29
  flex-grow: 1;
30
30
  opacity: ${t ? 0.5 : 1};
31
31
  `), y = e.img(
32
- ({ theme: t, $gutter: o, $gap: r, $width: n, $height: a }) => {
33
- const { gutter: c } = t.layout;
32
+ ({ theme: t, $gutter: o, $gap: r, $width: n, $height: c }) => {
33
+ const { gutter: a } = t.layout;
34
34
  return `
35
- width: ${n || c * 3}px;
36
- height: ${a || c * 2.75}px;
35
+ width: ${n || a * 3}px;
36
+ height: ${c || a * 2.75}px;
37
37
  padding: ${r || 0}px ${o || 0}px;
38
38
  `;
39
39
  }
@@ -43,7 +43,7 @@ const x = e(p)(({
43
43
  display: flex;
44
44
  gap: ${o * 0.25}px;
45
45
  `;
46
- }), f = e(s)(({ theme: t }) => {
46
+ }), f = e(i)(({ theme: t }) => {
47
47
  const { gutter: o } = t.layout, { GREY_1: r } = t.colors;
48
48
  return `
49
49
  padding: ${o * 0.5}px;
@@ -52,7 +52,7 @@ const x = e(p)(({
52
52
  font-weight: 700;
53
53
  font-size: ${o * 0.625}px;
54
54
  `;
55
- }), S = e(i)(({ theme: t }) => `
55
+ }), S = e(s)(({ theme: t }) => `
56
56
  transform: rotate(180deg);
57
57
 
58
58
  path {
@@ -1,87 +1,75 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { memo as v, useCallback as D, useMemo as G } from "react";
3
- import M from "../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker.js";
4
- import T from "../../ui/arrow-tooltip/arrow-tooltip.js";
5
- import { stickerData as V } from "../sticker-data.js";
6
- import Y from "./sticker-selector-grid.js";
7
- const j = ({
8
- triggerNode: n,
9
- studentClassroomId: d,
10
- gridConfig: l,
11
- tooltipConfig: m,
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { memo as I, useMemo as V } from "react";
3
+ import Y from "../../ui/arrow-tooltip/arrow-tooltip.js";
4
+ import { stickerData as j } from "../sticker-data.js";
5
+ import B from "./sticker-selector-grid.js";
6
+ const D = ({
7
+ triggerNode: s,
8
+ onStickerSend: o,
9
+ gridConfig: a,
10
+ tooltipConfig: n,
12
11
  visible: c
13
12
  }) => {
14
- const { columns: t = 4, gap: r = 8, stickerSize: i = 48 } = l, {
15
- isAnimated: p,
16
- arrowColor: C,
17
- arrowSize: f,
18
- arrowXCoOrdinates: k,
19
- arrowYCoOrdinates: S,
20
- backgroundColor: w,
21
- borderColor: u,
22
- position: g = "bottom",
23
- renderAs: b = "primary",
24
- textVariant: h,
25
- tooltipOffset: A,
13
+ const { columns: r = 4, gap: t = 8, stickerSize: i = 48 } = a, {
14
+ isAnimated: l,
15
+ arrowColor: m,
16
+ arrowSize: d,
17
+ arrowXCoOrdinates: p,
18
+ arrowYCoOrdinates: f,
19
+ backgroundColor: k,
20
+ borderColor: w,
21
+ position: C = "bottom",
22
+ renderAs: S = "primary",
23
+ textVariant: u,
24
+ tooltipOffset: h,
26
25
  tooltipXCoOrdinates: O,
27
- tooltipYCoOrdinates: x,
28
- width: B,
29
- widthX: I,
30
- zIndex: y,
31
- parentWidth: z,
32
- isBlocking: E = !1
33
- } = m, { publish: o } = M({ studentClassroomId: d }), a = D(
34
- (e) => o == null ? void 0 : o({
35
- eventName: "TEACHER_BADGE",
36
- eventPayload: {
37
- data: {
38
- selectedBadge: { id: e.id, name: e.name },
39
- badgeId: e.id
40
- }
41
- }
42
- }),
43
- [o]
44
- ), X = G(
45
- () => /* @__PURE__ */ s(
46
- Y,
26
+ tooltipYCoOrdinates: b,
27
+ width: x,
28
+ widthX: g,
29
+ zIndex: z,
30
+ parentWidth: A,
31
+ isBlocking: X = !1
32
+ } = n, y = V(
33
+ () => /* @__PURE__ */ e(
34
+ B,
47
35
  {
48
- stickers: V,
49
- columns: t,
50
- gap: r,
36
+ stickers: j,
37
+ columns: r,
38
+ gap: t,
51
39
  stickerSize: i,
52
- onStickerClick: a
40
+ onStickerClick: o
53
41
  }
54
42
  ),
55
- [t, r, a, i]
43
+ [r, t, o, i]
56
44
  );
57
- return /* @__PURE__ */ s(
58
- T,
45
+ return /* @__PURE__ */ e(
46
+ Y,
59
47
  {
60
- children: n,
48
+ children: s,
61
49
  alwaysVisible: !0,
62
50
  hidden: !c,
63
- tooltipItem: X,
64
- renderAs: b,
65
- position: g,
66
- isBlocking: E,
67
- isAnimated: p,
68
- zIndex: y,
69
- width: B,
70
- widthX: I,
71
- parentWidth: z,
72
- backgroundColor: w,
73
- borderColor: u,
74
- textVariant: h,
75
- tooltipOffset: A,
76
- arrowColor: C,
77
- arrowSize: f,
78
- arrowXCoOrdinates: k,
79
- arrowYCoOrdinates: S,
51
+ tooltipItem: y,
52
+ renderAs: S,
53
+ position: C,
54
+ isBlocking: X,
55
+ isAnimated: l,
56
+ zIndex: z,
57
+ width: x,
58
+ widthX: g,
59
+ parentWidth: A,
60
+ backgroundColor: k,
61
+ borderColor: w,
62
+ textVariant: u,
63
+ tooltipOffset: h,
64
+ arrowColor: m,
65
+ arrowSize: d,
66
+ arrowXCoOrdinates: p,
67
+ arrowYCoOrdinates: f,
80
68
  tooltipXCoOrdinates: O,
81
- tooltipYCoOrdinates: x
69
+ tooltipYCoOrdinates: b
82
70
  }
83
71
  );
84
- }, q = v(j);
72
+ }, q = I(D);
85
73
  export {
86
74
  q as default
87
75
  };
@@ -1 +1 @@
1
- {"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { IStickerSelectorProps, IStickerData } from './sticker-selector-types';\n\nimport React, { memo, useCallback, useMemo } from 'react';\n\nimport useInClassMessageBroker from '../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport { stickerData } from '../sticker-data';\nimport StickerSelectorGrid from './sticker-selector-grid';\n\nconst StickersSelector: React.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 const { publish } = useInClassMessageBroker({ studentClassroomId });\n\n const handleSend = useCallback(\n (sticker: IStickerData) =>\n publish?.({\n eventName: 'TEACHER_BADGE',\n eventPayload: {\n data: {\n selectedBadge: { id: sticker.id, name: sticker.name },\n badgeId: sticker.id,\n },\n },\n }),\n [publish],\n );\n\n const tooltipItem = useMemo(\n () => (\n <StickerSelectorGrid\n stickers={stickerData}\n columns={columns}\n gap={gap}\n stickerSize={stickerSize}\n onStickerClick={handleSend}\n />\n ),\n [columns, gap, handleSend, stickerSize],\n );\n\n return (\n <ArrowTooltip\n children={triggerNode}\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(StickersSelector);\n"],"names":["StickersSelector","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","publish","useInClassMessageBroker","handleSend","useCallback","sticker","tooltipItem","useMemo","jsx","StickerSelectorGrid","stickerData","ArrowTooltip","StickerSelector","memo"],"mappings":";;;;;;AASA,MAAMA,IAAoD,CAAC;AAAA,EACzD,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,GACE,EAAE,SAAAuB,EAAQ,IAAIC,EAAwB,EAAE,oBAAA1B,EAAoB,CAAA,GAE5D2B,IAAaC;AAAA,IACjB,CAACC,MACCJ,KAAA,gBAAAA,EAAU;AAAA,MACR,WAAW;AAAA,MACX,cAAc;AAAA,QACZ,MAAM;AAAA,UACJ,eAAe,EAAE,IAAII,EAAQ,IAAI,MAAMA,EAAQ,KAAK;AAAA,UACpD,SAASA,EAAQ;AAAA,QACnB;AAAA,MACF;AAAA,IAAA;AAAA,IAEJ,CAACJ,CAAO;AAAA,EAAA,GAGJK,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUC;AAAA,QACV,SAAA9B;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBqB;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,CAACvB,GAASC,GAAKsB,GAAYrB,CAAW;AAAA,EAAA;AAItC,SAAA,gBAAA0B;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,UAAUpC;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACI;AAAA,MACT,aAAA2B;AAAA,MACA,UAAAf;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,GAEeiB,IAAAC,EAAKvC,CAAgB;"}
1
+ {"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { IStickerSelectorProps } from './sticker-selector-types';\n\nimport React, { memo, useMemo } from 'react';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport { stickerData } from '../sticker-data';\nimport StickerSelectorGrid from './sticker-selector-grid';\n\nconst StickerSelector: React.FC<IStickerSelectorProps> = ({\n triggerNode,\n onStickerSend,\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 tooltipItem = useMemo(\n () => (\n <StickerSelectorGrid\n stickers={stickerData}\n columns={columns}\n gap={gap}\n stickerSize={stickerSize}\n onStickerClick={onStickerSend}\n />\n ),\n [columns, gap, onStickerSend, stickerSize],\n );\n\n return (\n <ArrowTooltip\n children={triggerNode}\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","onStickerSend","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","tooltipItem","useMemo","jsx","StickerSelectorGrid","stickerData","ArrowTooltip","StickerSelector$1","memo"],"mappings":";;;;;AAQA,MAAMA,IAAmD,CAAC;AAAA,EACxD,aAAAC;AAAA,EACA,eAAAC;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,GAEEuB,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUC;AAAA,QACV,SAAAzB;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBN;AAAA,MAAA;AAAA,IAClB;AAAA,IAEF,CAACI,GAASC,GAAKL,GAAeM,CAAW;AAAA,EAAA;AAIzC,SAAA,gBAAAqB;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,UAAU/B;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACI;AAAA,MACT,aAAAsB;AAAA,MACA,UAAAV;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,GAEeY,IAAAC,EAAKlC,CAAe;"}
@@ -1,124 +1,125 @@
1
- import { jsx as e, jsxs as i } from "react/jsx-runtime";
2
- import { memo as V, useState as C, useCallback as a, useMemo as S, useRef as R, useEffect as W } from "react";
1
+ import { jsx as e, jsxs as o } from "react/jsx-runtime";
2
+ import { memo as W, useState as p, useCallback as s, useMemo as $, useRef as w, useEffect as Y } from "react";
3
3
  import M from "../../../stickers/sticker-selector/sticker-selector.js";
4
- import { useTrialSessionContext as q } from "../../../trial-session/context/use-trial-session-context.js";
5
- import h from "../../../ui/buttons/clickable/clickable.js";
6
- import o from "../../../ui/layout/flex-view.js";
7
- import b from "../../../ui/separator/separator.js";
4
+ import m from "../../../ui/buttons/clickable/clickable.js";
5
+ import i from "../../../ui/layout/flex-view.js";
6
+ import O from "../../../ui/separator/separator.js";
8
7
  import d from "../../../ui/text/text.js";
9
- import A from "../../constants/events.js";
10
- import { StickersIcon as G, GuideContainer as z, HintIcon as U, SolIcon as D, Pointer as F, SectionContainer as Q, Section as J, CloseIcon as Z, Guide as ee } from "./worksheet-sidebar-styled.js";
11
- const he = V(
12
- ({ questionWidth: p, questions: O, activeQuestionIndex: y, learnosity: I, actionbarHeight: E, loggerRef: g }) => {
13
- var N;
14
- const [t, u] = C(), [L, X] = C({
8
+ import R from "../../constants/events.js";
9
+ import { StickersIcon as q, GuideContainer as z, HintIcon as U, SolIcon as D, Pointer as F, SectionContainer as Q, Section as J, CloseIcon as Z, Guide as ee } from "./worksheet-sidebar-styled.js";
10
+ const ae = W(
11
+ ({
12
+ questionWidth: C,
13
+ questions: A,
14
+ activeQuestionIndex: G,
15
+ learnosity: b,
16
+ actionbarHeight: I,
17
+ loggerRef: a,
18
+ enableStickers: L,
19
+ handleStickerSend: E
20
+ }) => {
21
+ var _;
22
+ const [t, h] = p(), [X, v] = p({
15
23
  top: 0,
16
24
  left: 0
17
- }), [n, v] = C(!1), { studentId: T } = q(), { top: k, left: w } = L;
18
- console.log("student-id", T);
19
- const B = a(() => {
20
- u("HINT"), g.current(A.WORKSHEET_V3_HINT_SEEN);
21
- }, [g]), K = a(() => {
22
- u("SOL"), g.current(A.WORKSHEET_V3_SOLUTION_SEEN);
23
- }, [g]), j = a(() => {
24
- u(() => {
25
+ }), [g, y] = p(!1), { top: T, left: k } = X, B = s(() => {
26
+ h("HINT"), a.current(R.WORKSHEET_V3_HINT_SEEN);
27
+ }, [a]), j = s(() => {
28
+ h("SOL"), a.current(R.WORKSHEET_V3_SOLUTION_SEEN);
29
+ }, [a]), x = s(() => {
30
+ h(() => {
25
31
  });
26
- }, []), $ = a(() => {
27
- v((l) => !l);
28
- }, []), { hints: r, solution: m } = ((N = O[y]) == null ? void 0 : N.metadata) || {}, c = S(() => t === void 0 ? void 0 : t === "HINT" ? r : m, [t, r, m]), _ = R(null), H = R(null), f = a((l) => {
29
- if (l.current) {
30
- const s = l.current.getBoundingClientRect();
31
- X({
32
- top: s.top + s.height / 2 - 8,
33
- left: s.right - 78
32
+ }, []), f = s(() => {
33
+ y((c) => !c);
34
+ }, []), { hints: n, solution: u } = ((_ = A[G]) == null ? void 0 : _.metadata) || {}, r = $(() => t === void 0 ? void 0 : t === "HINT" ? n : u, [t, n, u]), H = w(null), N = w(null), S = s((c) => {
35
+ if (c.current) {
36
+ const l = c.current.getBoundingClientRect();
37
+ v({
38
+ top: l.top + l.height / 2 - 8,
39
+ left: l.right - 78
34
40
  // 52px (sidebar width) + 16px (gutter) + 10px
35
41
  });
36
42
  }
37
- }, []), x = S(
38
- () => /* @__PURE__ */ e(h, { label: "teacher-badges", onClick: $, children: /* @__PURE__ */ i(o, { $alignItems: "center", $justifyContent: "center", children: [
39
- /* @__PURE__ */ e(G, { width: 32, height: 32, $disabled: !n }),
40
- /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "STICKERS" }),
41
- /* @__PURE__ */ e(o, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(b, { width: 24, height: 1, background: "GREY_2" }) })
43
+ }, []), K = $(
44
+ () => /* @__PURE__ */ e(m, { label: "teacher-badges", onClick: f, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", children: [
45
+ /* @__PURE__ */ e(q, { width: 32, height: 32, $disabled: !g }),
46
+ /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: g ? "BLACK" : "GREY_4", children: "STICKERS" }),
47
+ /* @__PURE__ */ e(i, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(O, { width: 24, height: 1, background: "GREY_2" }) })
42
48
  ] }) }),
43
- [n, $]
44
- ), Y = S(
49
+ [g, f]
50
+ ), P = $(
45
51
  () => ({
46
52
  stickerSize: 48,
47
53
  columns: 4,
48
54
  gap: 8
49
55
  }),
50
56
  []
51
- ), P = S(
57
+ ), V = $(
52
58
  () => ({
53
- position: "bottom",
59
+ position: "left",
54
60
  zIndex: 1e3,
55
61
  arrowXCoOrdinates: 87.5,
56
62
  tooltipXCoOrdinates: "-32.5%"
57
63
  }),
58
64
  []
59
65
  );
60
- return t && c && I && I.renderMath("mathjax"), W(() => {
61
- t === "HINT" ? f(H) : t === "SOL" ? f(_) : c || u(void 0);
62
- }, [t, f, c]), /* @__PURE__ */ i(z, { $background: "WHITE", children: [
63
- /* @__PURE__ */ e(
66
+ return t && r && b && b.renderMath("mathjax"), Y(() => {
67
+ t === "HINT" ? S(N) : t === "SOL" ? S(H) : r || h(void 0);
68
+ }, [t, S, r]), /* @__PURE__ */ o(z, { $background: "WHITE", children: [
69
+ L && E && /* @__PURE__ */ e(
64
70
  M,
65
71
  {
66
- triggerNode: x,
67
- studentClassroomId: T,
68
- gridConfig: Y,
69
- tooltipConfig: P,
70
- visible: n,
71
- onToggle: $
72
+ triggerNode: K,
73
+ onStickerSend: E,
74
+ gridConfig: P,
75
+ tooltipConfig: V,
76
+ visible: g,
77
+ onToggle: f
72
78
  }
73
79
  ),
74
- /* @__PURE__ */ e(h, { label: "teacher-badges", onClick: $, children: /* @__PURE__ */ i(o, { $alignItems: "center", $justifyContent: "center", children: [
75
- /* @__PURE__ */ e(G, { width: 32, height: 32, $disabled: !n }),
76
- /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "STICKERS" }),
77
- /* @__PURE__ */ e(o, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(b, { width: 24, height: 1, background: "GREY_2" }) })
80
+ /* @__PURE__ */ e(m, { label: "hints", onClick: B, disabled: !n, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", ref: N, children: [
81
+ /* @__PURE__ */ e(U, { width: 32, height: 32, $disabled: !n }),
82
+ /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
83
+ /* @__PURE__ */ e(i, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(O, { width: 24, height: 1, background: "GREY_2" }) })
78
84
  ] }) }),
79
- /* @__PURE__ */ e(h, { label: "hints", onClick: B, disabled: !r, children: /* @__PURE__ */ i(o, { $alignItems: "center", $justifyContent: "center", ref: H, children: [
80
- /* @__PURE__ */ e(U, { width: 32, height: 32, $disabled: !r }),
81
- /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: r ? "BLACK" : "GREY_4", children: "HINT" }),
82
- /* @__PURE__ */ e(o, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(b, { width: 24, height: 1, background: "GREY_2" }) })
85
+ /* @__PURE__ */ e(m, { label: "solution", onClick: j, disabled: !u, children: /* @__PURE__ */ o(i, { $alignItems: "center", $justifyContent: "center", ref: H, children: [
86
+ /* @__PURE__ */ e(D, { width: 32, height: 32, $disabled: !u }),
87
+ /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
83
88
  ] }) }),
84
- /* @__PURE__ */ e(h, { label: "solution", onClick: K, disabled: !m, children: /* @__PURE__ */ i(o, { $alignItems: "center", $justifyContent: "center", ref: _, children: [
85
- /* @__PURE__ */ e(D, { width: 32, height: 32, $disabled: !m }),
86
- /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: r ? "BLACK" : "GREY_4", children: "SOL" })
87
- ] }) }),
88
- t && k && w && /* @__PURE__ */ e(F, { topValue: k, leftValue: w }),
89
+ t && T && k && /* @__PURE__ */ e(F, { topValue: T, leftValue: k }),
89
90
  t && /* @__PURE__ */ e(
90
91
  Q,
91
92
  {
92
93
  $background: "WHITE",
93
- $questionWidth: p,
94
- $actionbarHeight: E,
94
+ $questionWidth: C,
95
+ $actionbarHeight: I,
95
96
  $borderRadius: 10,
96
- children: /* @__PURE__ */ i(
97
+ children: /* @__PURE__ */ o(
97
98
  J,
98
99
  {
99
100
  $gutterX: 1,
100
101
  $gapX: 1,
101
- $questionWidth: p,
102
- $actionbarHeight: E,
102
+ $questionWidth: C,
103
+ $actionbarHeight: I,
103
104
  children: [
104
- /* @__PURE__ */ e(h, { label: "close", onClick: j, children: /* @__PURE__ */ e(Z, {}) }),
105
- /* @__PURE__ */ e(o, { $gutterX: 0.5, children: /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
106
- c && c.map((l, s) => /* @__PURE__ */ i(o, { $gutterX: 0.5, $gapX: 0.5, children: [
107
- c.length > 1 && /* @__PURE__ */ i(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
105
+ /* @__PURE__ */ e(m, { label: "close", onClick: x, children: /* @__PURE__ */ e(Z, {}) }),
106
+ /* @__PURE__ */ e(i, { $gutterX: 0.5, children: /* @__PURE__ */ e(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
107
+ r && r.map((c, l) => /* @__PURE__ */ o(i, { $gutterX: 0.5, $gapX: 0.5, children: [
108
+ r.length > 1 && /* @__PURE__ */ o(d, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
108
109
  t,
109
110
  " ",
110
- s + 1,
111
+ l + 1,
111
112
  ":"
112
113
  ] }),
113
114
  /* @__PURE__ */ e(
114
115
  ee,
115
116
  {
116
117
  dangerouslySetInnerHTML: {
117
- __html: l
118
+ __html: c
118
119
  }
119
120
  }
120
121
  )
121
- ] }, s.toString()))
122
+ ] }, l.toString()))
122
123
  ]
123
124
  }
124
125
  )
@@ -128,6 +129,6 @@ const he = V(
128
129
  }
129
130
  );
130
131
  export {
131
- he as default
132
+ ae as default
132
133
  };
133
134
  //# sourceMappingURL=question-guide.js.map