@cuemath/leap 3.2.12 → 3.2.14-as1
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.
- package/dist/assets/line-icons/icons/hint-fill.js +35 -0
- package/dist/assets/line-icons/icons/hint-fill.js.map +1 -0
- package/dist/features/chapters-v2/utils/node-card-utils.js +7 -7
- package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
- package/dist/features/puzzles/app/puzzle-app-styled.js +81 -0
- package/dist/features/puzzles/app/puzzle-app-styled.js.map +1 -0
- package/dist/features/puzzles/app/puzzle-app-view.js +120 -0
- package/dist/features/puzzles/app/puzzle-app-view.js.map +1 -0
- package/dist/features/puzzles/app/puzzle-app.js +82 -0
- package/dist/features/puzzles/app/puzzle-app.js.map +1 -0
- package/dist/features/ui/inputs/checkbox-input/checkbox-input.js +21 -21
- package/dist/features/ui/inputs/checkbox-input/checkbox-input.js.map +1 -1
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js +5 -5
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js.map +1 -1
- package/dist/features/worksheet/worksheet/mocks/activity.js +6 -0
- package/dist/features/worksheet/worksheet/mocks/activity.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/assessment.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/assessment.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/chapter_assessment.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/chapter_assessment.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/diagnostic.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/diagnostic.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/dynamic.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/dynamic.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/extra_practice.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/extra_practice.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/index.js +95 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/index.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning-v3.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning-v3.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/learning.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/legacy.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/legacy.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/level2.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/level2.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/level3.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/level3.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/mastery.js +41 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/mastery.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/practice.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/practice.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle-card.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle-card.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_easy.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_easy.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_hard.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_hard.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_medium.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/puzzle_medium.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/recap.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/recap.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/remedial.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/remedial.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/revision.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/revision.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat-math-assessment.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat-math-assessment.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_english_learning.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_english_learning.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_learning.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_learning.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_recap.js +39 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/sat_math_recap.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/target_practice.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/target_practice.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic-v2.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic-v2.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/trial-diagnostic.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_assessment.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_assessment.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_practice.js +38 -0
- package/dist/features/worksheet/worksheet/mocks/behaviors/turing_practice.js.map +1 -0
- package/dist/features/worksheet/worksheet/mocks/signed-requests.js +5 -0
- package/dist/features/worksheet/worksheet/mocks/signed-requests.js.map +1 -0
- package/dist/features/worksheet/worksheet/stories/use-canvas-sync-broker-story.js +57 -0
- package/dist/features/worksheet/worksheet/stories/use-canvas-sync-broker-story.js.map +1 -0
- package/dist/features/worksheet/worksheet/stories/worksheet-story-container.js +231 -0
- package/dist/features/worksheet/worksheet/stories/worksheet-story-container.js.map +1 -0
- package/dist/features/worksheet/worksheet/stories/worksheet-student.js +174 -0
- package/dist/features/worksheet/worksheet/stories/worksheet-student.js.map +1 -0
- package/dist/features/worksheet/worksheet/stories/worksheet-teacher.js +255 -0
- package/dist/features/worksheet/worksheet/stories/worksheet-teacher.js.map +1 -0
- package/dist/features/worksheet/worksheet/worksheet-helpers.js +32 -31
- package/dist/features/worksheet/worksheet/worksheet-helpers.js.map +1 -1
- package/dist/index.d.ts +9 -0
- package/dist/index.js +527 -523
- package/dist/index.js.map +1 -1
- package/dist/types/models/worksheet.js +5 -0
- package/dist/types/models/worksheet.js.map +1 -0
- package/package.json +1 -1
@@ -0,0 +1,35 @@
|
|
1
|
+
import { jsxs as i, jsx as l } from "react/jsx-runtime";
|
2
|
+
const t = (L) => /* @__PURE__ */ i(
|
3
|
+
"svg",
|
4
|
+
{
|
5
|
+
xmlns: "http://www.w3.org/2000/svg",
|
6
|
+
width: "24",
|
7
|
+
height: "24",
|
8
|
+
viewBox: "0 0 24 24",
|
9
|
+
fill: "none",
|
10
|
+
...L,
|
11
|
+
children: [
|
12
|
+
/* @__PURE__ */ l(
|
13
|
+
"path",
|
14
|
+
{
|
15
|
+
fillRule: "evenodd",
|
16
|
+
clipRule: "evenodd",
|
17
|
+
d: "M12.5 3.69923V2.70001H11.5V3.70001L12.5 3.69923ZM20 10.2015H19V11.2015H20V10.2015ZM17.9424 7.0043L18.8084 6.5043L19.3084 7.37033L18.4424 7.87033L17.9424 7.0043ZM15.8043 3.66699L15.3043 4.53302L16.1703 5.03302L16.6703 4.16699L15.8043 3.66699ZM5 11.2015H4V10.2015H5V11.2015ZM9.11621 4.59494L8.61621 3.72891L7.75019 4.22891L8.25019 5.09494L9.11621 4.59494ZM5.60211 6.35647L6.46813 6.85647L5.96813 7.7225L5.10211 7.2225L5.60211 6.35647ZM7.6 10.8499C7.6 8.41986 9.56995 6.44991 12 6.44991C14.4301 6.44991 16.4 8.41986 16.4 10.8499C16.4 12.422 15.5758 13.8022 14.3334 14.581H9.66658C8.42416 13.8022 7.6 12.422 7.6 10.8499ZM12 5.24991C8.90721 5.24991 6.4 7.75712 6.4 10.8499C6.4 12.9235 7.52729 14.733 9.19957 15.7004L9.33896 15.781H14.661L14.8004 15.7004C16.4727 14.733 17.6 12.9235 17.6 10.8499C17.6 7.75712 15.0928 5.24991 12 5.24991ZM9.5 16.6112V17.8112H14.5V16.6112H9.5ZM10.5 19.7526V18.5526H13.5V19.7526H10.5Z",
|
18
|
+
fill: "currentColor"
|
19
|
+
}
|
20
|
+
),
|
21
|
+
/* @__PURE__ */ l(
|
22
|
+
"path",
|
23
|
+
{
|
24
|
+
className: "hint-fill-icon-path",
|
25
|
+
d: "M12 6.44991C9.56995 6.44991 7.6 8.41986 7.6 10.8499C7.6 12.422 8.42416 13.8022 9.66658 14.581H14.3334C15.5758 13.8022 16.4 12.422 16.4 10.8499C16.4 8.41986 14.4301 6.44991 12 6.44991Z",
|
26
|
+
fill: "#FFB700"
|
27
|
+
}
|
28
|
+
)
|
29
|
+
]
|
30
|
+
}
|
31
|
+
), o = t;
|
32
|
+
export {
|
33
|
+
o as default
|
34
|
+
};
|
35
|
+
//# sourceMappingURL=hint-fill.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"hint-fill.js","sources":["../../../../src/assets/line-icons/icons/hint-fill.tsx"],"sourcesContent":["const HintFillIcon: React.FC<React.SVGProps<SVGSVGElement>> = props => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M12.5 3.69923V2.70001H11.5V3.70001L12.5 3.69923ZM20 10.2015H19V11.2015H20V10.2015ZM17.9424 7.0043L18.8084 6.5043L19.3084 7.37033L18.4424 7.87033L17.9424 7.0043ZM15.8043 3.66699L15.3043 4.53302L16.1703 5.03302L16.6703 4.16699L15.8043 3.66699ZM5 11.2015H4V10.2015H5V11.2015ZM9.11621 4.59494L8.61621 3.72891L7.75019 4.22891L8.25019 5.09494L9.11621 4.59494ZM5.60211 6.35647L6.46813 6.85647L5.96813 7.7225L5.10211 7.2225L5.60211 6.35647ZM7.6 10.8499C7.6 8.41986 9.56995 6.44991 12 6.44991C14.4301 6.44991 16.4 8.41986 16.4 10.8499C16.4 12.422 15.5758 13.8022 14.3334 14.581H9.66658C8.42416 13.8022 7.6 12.422 7.6 10.8499ZM12 5.24991C8.90721 5.24991 6.4 7.75712 6.4 10.8499C6.4 12.9235 7.52729 14.733 9.19957 15.7004L9.33896 15.781H14.661L14.8004 15.7004C16.4727 14.733 17.6 12.9235 17.6 10.8499C17.6 7.75712 15.0928 5.24991 12 5.24991ZM9.5 16.6112V17.8112H14.5V16.6112H9.5ZM10.5 19.7526V18.5526H13.5V19.7526H10.5Z\"\n fill=\"currentColor\"\n />\n <path\n className=\"hint-fill-icon-path\"\n d=\"M12 6.44991C9.56995 6.44991 7.6 8.41986 7.6 10.8499C7.6 12.422 8.42416 13.8022 9.66658 14.581H14.3334C15.5758 13.8022 16.4 12.422 16.4 10.8499C16.4 8.41986 14.4301 6.44991 12 6.44991Z\"\n fill=\"#FFB700\"\n />\n </svg>\n);\n\nexport default HintFillIcon;\n"],"names":["HintFillIcon","props","jsxs","jsx","HintFillIcon$1"],"mappings":";AAAA,MAAMA,IAAwD,CAC5DC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACJ,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAAA,EAAA;AACF,GAGFC,IAAeJ;"}
|
@@ -9,14 +9,14 @@ import E from "../../ui/arrow-tooltip/arrow-tooltip.js";
|
|
9
9
|
import I from "../../ui/text/text.js";
|
10
10
|
import { InProgressIconWrapper as d } from "../comps/node-card/node-card-styled.js";
|
11
11
|
import A from "../comps/tag/tag.js";
|
12
|
-
const
|
12
|
+
const u = 60 * 60 * 24, _ = ["NOT_STARTED"], C = (r, c) => {
|
13
13
|
if (!r || c)
|
14
14
|
return { isOverdue: !1, daysText: "", differenceInDays: 0 };
|
15
|
-
const i = Math.floor(Date.now() / 1e3), s = r - i, o = Math.ceil(s /
|
15
|
+
const i = Math.floor(Date.now() / 1e3), s = r - i, o = Math.ceil(s / u), a = o < 0, n = o > 0 ? `${Math.abs(o)}D` : "";
|
16
16
|
return { isOverdue: a, daysText: n, differenceInDays: o };
|
17
|
-
},
|
17
|
+
}, x = (r, c, i, s, o) => {
|
18
18
|
const { isOverdue: a, daysText: n, differenceInDays: T } = C(s, o);
|
19
|
-
if (!o && a &&
|
19
|
+
if (!o && a && _.includes(r))
|
20
20
|
return {
|
21
21
|
icon: /* @__PURE__ */ e(
|
22
22
|
E,
|
@@ -117,7 +117,7 @@ const _ = 60 * 60 * 24, u = ["NOT_STARTED", "IN_PROGRESS"], C = (r, c) => {
|
|
117
117
|
icon: void 0
|
118
118
|
};
|
119
119
|
}
|
120
|
-
},
|
120
|
+
}, y = (r) => {
|
121
121
|
switch (r) {
|
122
122
|
case "LEVEL2":
|
123
123
|
case "LEVEL3":
|
@@ -186,7 +186,7 @@ const _ = 60 * 60 * 24, u = ["NOT_STARTED", "IN_PROGRESS"], C = (r, c) => {
|
|
186
186
|
}
|
187
187
|
};
|
188
188
|
export {
|
189
|
-
|
190
|
-
|
189
|
+
y as getNodeCardBasedIcon,
|
190
|
+
x as getNodeStateBasedTagInfo
|
191
191
|
};
|
192
192
|
//# sourceMappingURL=node-card-utils.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport Check2Icon from '../../../assets/line-icons/icons/check2';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport Tag from '../comps/tag/tag';\n\ninterface DueDateInfo {\n isOverdue: boolean;\n daysText: string;\n differenceInDays: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED', 'IN_PROGRESS'];\n\nconst calculateDueDateInfo = (dueDateTs?: number | null, isMilestone?: boolean): DueDateInfo => {\n if (!dueDateTs || isMilestone) {\n return { isOverdue: false, daysText: '', differenceInDays: 0 };\n }\n\n const currentTimestamp = Math.floor(Date.now() / 1000);\n const differenceInSeconds = dueDateTs - currentTimestamp;\n const differenceInDays = Math.ceil(differenceInSeconds / SECONDS_PER_DAY);\n\n const isOverdue = differenceInDays < 0;\n\n const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n\n return { isOverdue, daysText, differenceInDays };\n};\n\nconst getNodeStateBasedTagInfo = (\n nodeState: INodeDataProps['state'],\n isStudent: boolean,\n accuracy?: number | null,\n dueDateTs?: number | null,\n isMilestone?: boolean,\n) => {\n const { isOverdue, daysText, differenceInDays } = calculateDueDateInfo(dueDateTs, isMilestone);\n\n if (!isMilestone && isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem=\"Complete now\"\n zIndex={10}\n hidden={!isStudent}\n parentWidth=\"fit-content\"\n >\n <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n OVERDUE\n </Text>\n </FlexView>\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n }\n\n switch (nodeState) {\n case 'NOT_STARTED':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={\n differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n }\n zIndex={10}\n hidden={!isStudent}\n >\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $paddingRight={6}\n $paddingLeft={6}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n </InProgressIconWrapper>\n </ArrowTooltip>\n ),\n top: 0,\n right: 0,\n };\n case 'LOCKED':\n return {\n icon: <Lock2Icon width={32} height={32} />,\n top: -12,\n right: -12,\n };\n case 'IN_PROGRESS':\n return {\n icon: (\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $paddingRight={0}\n $paddingLeft={daysText ? 6 : 0}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n <StatusIcon />\n </InProgressIconWrapper>\n ),\n };\n case 'COMPLETED':\n return {\n icon: (\n <Tag\n Icon={Check2Icon}\n label={typeof accuracy === 'number' ? `${accuracy}%` : undefined}\n />\n ),\n top: -10,\n right: -10,\n };\n case 'WAIT_FOR_REVIEW':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={isStudent ? 'Waiting for teacher to review' : 'Needs your review'}\n zIndex={10}\n >\n <Tag Icon={ExclamationIcon} />\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n\n default:\n return {\n icon: undefined,\n };\n }\n};\n\nconst getNodeCardBasedIcon = (nodeType: INodeDataProps['node_type']) => {\n switch (nodeType) {\n case 'LEVEL2':\n case 'LEVEL3':\n case 'HIDDEN_BASIC':\n return {\n lottie: LOTTIE.COMPETITIVE_ARENA,\n };\n case 'LEARNING':\n case 'SAT_MATH_LEARNING':\n case 'SAT_ENGLISH_LEARNING':\n return {\n lottie: LOTTIE.LEARN,\n };\n case 'RECAP':\n case 'REMEDIAL':\n case 'REVISION':\n case 'PPT_BASIC':\n case 'SAT_MATH_RECAP':\n case 'SAT_ENGLISH_RECAP':\n return {\n lottie: LOTTIE.RECAP,\n };\n case 'DYNAMIC':\n case 'ASSESSMENT':\n case 'CHAPTER_ASSESSMENT':\n case 'DIAGNOSTIC':\n case 'TURING_ASSESSMENT':\n return {\n lottie: LOTTIE.TEST,\n };\n case 'PRACTICE':\n case 'EXTRA_PRACTICE':\n case 'TARGET_PRACTICE':\n case 'MASTERY':\n case 'TURING_PRACTICE':\n case 'SAT_MATH_ASSESSMENT':\n case 'SAT_ENGLISH_ASSESSMENT':\n return {\n lottie: LOTTIE.PRACTICE,\n };\n case 'PUZZLE':\n case 'PUZZLE_EASY':\n case 'PUZZLE_MEDIUM':\n case 'PUZZLE_HARD':\n return {\n lottie: LOTTIE.PUZZLE,\n };\n case 'TURING_SUBJECTIVE':\n return {\n lottie: LOTTIE.SUBJECTIVE,\n };\n case 'TURING_BASIC':\n case 'PYTHON_BASIC':\n case 'PYTHON_VISUAL':\n return {\n lottie: LOTTIE.ACTIVITY,\n };\n case 'VIDEO':\n return {\n lottie: LOTTIE.VIDEO,\n };\n default:\n return {\n lottie: LOTTIE.PROJECT,\n };\n }\n};\n\nexport { getNodeStateBasedTagInfo, getNodeCardBasedIcon };\n"],"names":["SECONDS_PER_DAY","OVERDUE_TAG_STATES","calculateDueDateInfo","dueDateTs","isMilestone","currentTimestamp","differenceInSeconds","differenceInDays","isOverdue","daysText","getNodeStateBasedTagInfo","nodeState","isStudent","accuracy","jsx","ArrowTooltip","FlexView","Text","InProgressIconWrapper","Lock2Icon","jsxs","StatusIcon","Tag","Check2Icon","ExclamationIcon","getNodeCardBasedIcon","nodeType","LOTTIE"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"node-card-utils.js","sources":["../../../../src/features/chapters-v2/utils/node-card-utils.tsx"],"sourcesContent":["import type { INodeDataProps } from '../comps/node-card/node-card-types';\n\nimport Check2Icon from '../../../assets/line-icons/icons/check2';\nimport ExclamationIcon from '../../../assets/line-icons/icons/exclamation';\nimport Lock2Icon from '../../../assets/line-icons/icons/lock2';\nimport StatusIcon from '../../../assets/line-icons/icons/status';\nimport { LOTTIE } from '../../../assets/lottie/lottie';\nimport FlexView from '../..//ui/layout/flex-view';\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport Text from '../../ui/text/text';\nimport { InProgressIconWrapper } from '../comps/node-card/node-card-styled';\nimport Tag from '../comps/tag/tag';\n\ninterface DueDateInfo {\n isOverdue: boolean;\n daysText: string;\n differenceInDays: number;\n}\n\nconst SECONDS_PER_DAY = 60 * 60 * 24;\nconst OVERDUE_TAG_STATES: INodeDataProps['state'][] = ['NOT_STARTED'];\n\nconst calculateDueDateInfo = (dueDateTs?: number | null, isMilestone?: boolean): DueDateInfo => {\n if (!dueDateTs || isMilestone) {\n return { isOverdue: false, daysText: '', differenceInDays: 0 };\n }\n\n const currentTimestamp = Math.floor(Date.now() / 1000);\n const differenceInSeconds = dueDateTs - currentTimestamp;\n const differenceInDays = Math.ceil(differenceInSeconds / SECONDS_PER_DAY);\n\n const isOverdue = differenceInDays < 0;\n\n const daysText = differenceInDays > 0 ? `${Math.abs(differenceInDays)}D` : '';\n\n return { isOverdue, daysText, differenceInDays };\n};\n\nconst getNodeStateBasedTagInfo = (\n nodeState: INodeDataProps['state'],\n isStudent: boolean,\n accuracy?: number | null,\n dueDateTs?: number | null,\n isMilestone?: boolean,\n) => {\n const { isOverdue, daysText, differenceInDays } = calculateDueDateInfo(dueDateTs, isMilestone);\n\n if (!isMilestone && isOverdue && OVERDUE_TAG_STATES.includes(nodeState)) {\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem=\"Complete now\"\n zIndex={10}\n hidden={!isStudent}\n parentWidth=\"fit-content\"\n >\n <FlexView $background=\"RED\" $borderRadius={16} $gapX={0.24} $gutterX={0.5}>\n <Text $renderAs=\"ac4-black\" $color=\"WHITE\">\n OVERDUE\n </Text>\n </FlexView>\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n }\n\n switch (nodeState) {\n case 'NOT_STARTED':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={\n differenceInDays > 1 ? `${differenceInDays} days left` : 'Complete it today'\n }\n zIndex={10}\n hidden={!isStudent}\n >\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $paddingRight={6}\n $paddingLeft={6}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n </InProgressIconWrapper>\n </ArrowTooltip>\n ),\n top: 0,\n right: 0,\n };\n case 'LOCKED':\n return {\n icon: <Lock2Icon width={32} height={32} />,\n top: -12,\n right: -12,\n };\n case 'IN_PROGRESS':\n return {\n icon: (\n <InProgressIconWrapper\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $borderRadius={16}\n $paddingRight={0}\n $paddingLeft={daysText ? 6 : 0}\n >\n {daysText && (\n <Text $renderAs=\"ub3-bold\" $color=\"WHITE\">\n {daysText}\n </Text>\n )}\n <StatusIcon />\n </InProgressIconWrapper>\n ),\n };\n case 'COMPLETED':\n return {\n icon: (\n <Tag\n Icon={Check2Icon}\n label={typeof accuracy === 'number' ? `${accuracy}%` : undefined}\n />\n ),\n top: -10,\n right: -10,\n };\n case 'WAIT_FOR_REVIEW':\n return {\n icon: (\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"bottom\"\n tooltipItem={isStudent ? 'Waiting for teacher to review' : 'Needs your review'}\n zIndex={10}\n >\n <Tag Icon={ExclamationIcon} />\n </ArrowTooltip>\n ),\n top: -10,\n right: -10,\n };\n\n default:\n return {\n icon: undefined,\n };\n }\n};\n\nconst getNodeCardBasedIcon = (nodeType: INodeDataProps['node_type']) => {\n switch (nodeType) {\n case 'LEVEL2':\n case 'LEVEL3':\n case 'HIDDEN_BASIC':\n return {\n lottie: LOTTIE.COMPETITIVE_ARENA,\n };\n case 'LEARNING':\n case 'SAT_MATH_LEARNING':\n case 'SAT_ENGLISH_LEARNING':\n return {\n lottie: LOTTIE.LEARN,\n };\n case 'RECAP':\n case 'REMEDIAL':\n case 'REVISION':\n case 'PPT_BASIC':\n case 'SAT_MATH_RECAP':\n case 'SAT_ENGLISH_RECAP':\n return {\n lottie: LOTTIE.RECAP,\n };\n case 'DYNAMIC':\n case 'ASSESSMENT':\n case 'CHAPTER_ASSESSMENT':\n case 'DIAGNOSTIC':\n case 'TURING_ASSESSMENT':\n return {\n lottie: LOTTIE.TEST,\n };\n case 'PRACTICE':\n case 'EXTRA_PRACTICE':\n case 'TARGET_PRACTICE':\n case 'MASTERY':\n case 'TURING_PRACTICE':\n case 'SAT_MATH_ASSESSMENT':\n case 'SAT_ENGLISH_ASSESSMENT':\n return {\n lottie: LOTTIE.PRACTICE,\n };\n case 'PUZZLE':\n case 'PUZZLE_EASY':\n case 'PUZZLE_MEDIUM':\n case 'PUZZLE_HARD':\n return {\n lottie: LOTTIE.PUZZLE,\n };\n case 'TURING_SUBJECTIVE':\n return {\n lottie: LOTTIE.SUBJECTIVE,\n };\n case 'TURING_BASIC':\n case 'PYTHON_BASIC':\n case 'PYTHON_VISUAL':\n return {\n lottie: LOTTIE.ACTIVITY,\n };\n case 'VIDEO':\n return {\n lottie: LOTTIE.VIDEO,\n };\n default:\n return {\n lottie: LOTTIE.PROJECT,\n };\n }\n};\n\nexport { getNodeStateBasedTagInfo, getNodeCardBasedIcon };\n"],"names":["SECONDS_PER_DAY","OVERDUE_TAG_STATES","calculateDueDateInfo","dueDateTs","isMilestone","currentTimestamp","differenceInSeconds","differenceInDays","isOverdue","daysText","getNodeStateBasedTagInfo","nodeState","isStudent","accuracy","jsx","ArrowTooltip","FlexView","Text","InProgressIconWrapper","Lock2Icon","jsxs","StatusIcon","Tag","Check2Icon","ExclamationIcon","getNodeCardBasedIcon","nodeType","LOTTIE"],"mappings":"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"}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
import o from "styled-components";
|
2
|
+
import n from "../../../assets/line-icons/icons/hint-fill.js";
|
3
|
+
import l from "../../ui/layout/flex-view.js";
|
4
|
+
import r from "../../ui/text/text.js";
|
5
|
+
import { getPuzzleCardPattern as p } from "../utils/puzzle-pattern.js";
|
6
|
+
const d = o(l)(({ theme: t, $visible: i }) => {
|
7
|
+
const { gutter: e } = t.layout;
|
8
|
+
return i ? `
|
9
|
+
overflow: scroll;
|
10
|
+
padding-top: ${e * 1.5}px;
|
11
|
+
padding-bottom: ${e * 2}px;
|
12
|
+
` : "";
|
13
|
+
}), g = o(l)`
|
14
|
+
position: relative;
|
15
|
+
margin: 0 auto;
|
16
|
+
box-shadow: inset 0px 0px 0px 4px ${({ theme: t, $imageHue: i }) => t.colors[`${i}_4`]};
|
17
|
+
max-width: 343px;
|
18
|
+
width: 100%;
|
19
|
+
min-height: max-content;
|
20
|
+
|
21
|
+
&::before {
|
22
|
+
content: '';
|
23
|
+
position: absolute;
|
24
|
+
top: 0;
|
25
|
+
left: 0;
|
26
|
+
right: 0;
|
27
|
+
bottom: 0;
|
28
|
+
background-image: ${({ $imageHue: t }) => `url(${p(t)})`};
|
29
|
+
background-size: cover;
|
30
|
+
opacity: 0.2;
|
31
|
+
}
|
32
|
+
`, x = o(n)`
|
33
|
+
color: ${({ theme: t }) => t.colors.BLACK_1};
|
34
|
+
|
35
|
+
& .hint-fill-icon-path {
|
36
|
+
fill: ${({ theme: t }) => t.colors.WHITE_1};
|
37
|
+
}
|
38
|
+
`, u = o(r)`
|
39
|
+
& span {
|
40
|
+
font-weight: 700;
|
41
|
+
margin-right: 4px;
|
42
|
+
}
|
43
|
+
`, h = o.div`
|
44
|
+
color: ${({ theme: t }) => t.colors.BLACK};
|
45
|
+
font-size: 14px;
|
46
|
+
line-height: 1.2;
|
47
|
+
font-family: 'Athletics';
|
48
|
+
|
49
|
+
font-weight: 400;
|
50
|
+
font-style: normal;
|
51
|
+
|
52
|
+
em {
|
53
|
+
font-style: italic;
|
54
|
+
}
|
55
|
+
|
56
|
+
ul,
|
57
|
+
ol {
|
58
|
+
list-style-type: initial;
|
59
|
+
padding-left: 32px;
|
60
|
+
}
|
61
|
+
|
62
|
+
ol {
|
63
|
+
list-style-type: decimal;
|
64
|
+
}
|
65
|
+
|
66
|
+
p {
|
67
|
+
margin: 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
li {
|
71
|
+
margin: 4px 0;
|
72
|
+
}
|
73
|
+
`;
|
74
|
+
export {
|
75
|
+
d as PuzzleAppWrapper,
|
76
|
+
g as PuzzleContainer,
|
77
|
+
h as PuzzleQuestionWrapper,
|
78
|
+
u as StyledFeedbackText,
|
79
|
+
x as StyledHintFillIcon
|
80
|
+
};
|
81
|
+
//# sourceMappingURL=puzzle-app-styled.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"puzzle-app-styled.js","sources":["../../../../src/features/puzzles/app/puzzle-app-styled.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\n\nimport styled from 'styled-components';\n\nimport HintFillIcon from '../../../assets/line-icons/icons/hint-fill';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getPuzzleCardPattern } from '../utils/puzzle-pattern';\n\nconst PuzzleAppWrapper = styled(FlexView)<{ $visible: boolean }>(({ theme, $visible }) => {\n const { gutter } = theme.layout;\n\n if (!$visible) {\n return ``;\n }\n\n return `\n overflow: scroll;\n padding-top: ${gutter * 1.5}px;\n padding-bottom: ${gutter * 2}px;\n `;\n});\n\nconst PuzzleContainer = styled(FlexView)<{ $imageHue: THueNames; $backgroundOpacity?: number }>`\n position: relative;\n margin: 0 auto;\n box-shadow: inset 0px 0px 0px 4px ${({ theme, $imageHue }) => theme.colors[`${$imageHue}_4`]};\n max-width: 343px;\n width: 100%;\n min-height: max-content;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-image: ${({ $imageHue }) => `url(${getPuzzleCardPattern($imageHue)})`};\n background-size: cover;\n opacity: 0.2;\n }\n`;\n\nconst StyledHintFillIcon = styled(HintFillIcon)`\n color: ${({ theme }) => theme.colors.BLACK_1};\n\n & .hint-fill-icon-path {\n fill: ${({ theme }) => theme.colors.WHITE_1};\n }\n`;\n\nconst StyledFeedbackText = styled(Text)`\n & span {\n font-weight: 700;\n margin-right: 4px;\n }\n`;\n\nconst PuzzleQuestionWrapper = styled.div`\n color: ${({ theme }) => theme.colors.BLACK};\n font-size: 14px;\n line-height: 1.2;\n font-family: 'Athletics';\n\n font-weight: 400;\n font-style: normal;\n\n em {\n font-style: italic;\n }\n\n ul,\n ol {\n list-style-type: initial;\n padding-left: 32px;\n }\n\n ol {\n list-style-type: decimal;\n }\n\n p {\n margin: 0;\n }\n\n li {\n margin: 4px 0;\n }\n`;\n\nexport {\n PuzzleAppWrapper,\n PuzzleContainer,\n StyledFeedbackText,\n StyledHintFillIcon,\n PuzzleQuestionWrapper,\n};\n"],"names":["PuzzleAppWrapper","styled","FlexView","theme","$visible","gutter","PuzzleContainer","$imageHue","getPuzzleCardPattern","StyledHintFillIcon","HintFillIcon","StyledFeedbackText","Text","PuzzleQuestionWrapper"],"mappings":";;;;;AASM,MAAAA,IAAmBC,EAAOC,CAAQ,EAAyB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAe;AAClF,QAAA,EAAE,QAAAC,EAAO,IAAIF,EAAM;AAEzB,SAAKC,IAIE;AAAA;AAAA,mBAEUC,IAAS,GAAG;AAAA,sBACTA,IAAS,CAAC;AAAA,MANrB;AAQX,CAAC,GAEKC,IAAkBL,EAAOC,CAAQ;AAAA;AAAA;AAAA,sCAGD,CAAC,EAAE,OAAAC,GAAO,WAAAI,QAAgBJ,EAAM,OAAO,GAAGI,CAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAYtE,CAAC,EAAE,WAAAA,EAAU,MAAM,OAAOC,EAAqBD,CAAS,CAAC,GAAG;AAAA;AAAA;AAAA;AAAA,GAM9EE,IAAqBR,EAAOS,CAAY;AAAA,WACnC,CAAC,EAAE,OAAAP,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,YAGlC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAIzCQ,IAAqBV,EAAOW,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhCC,IAAwBZ,EAAO;AAAA,WAC1B,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
@@ -0,0 +1,120 @@
|
|
1
|
+
import { jsxs as y, jsx as a } from "react/jsx-runtime";
|
2
|
+
import { memo as A, useRef as S, useCallback as _, useEffect as l, useMemo as $ } from "react";
|
3
|
+
import H from "../../ui/image/image.js";
|
4
|
+
import M from "../../ui/layout/flex-view.js";
|
5
|
+
import x from "../../ui/separator/separator.js";
|
6
|
+
import d from "../../worksheet/constants/events.js";
|
7
|
+
import N from "../../worksheet/worksheet/hooks/use-learnosity.js";
|
8
|
+
import Q from "../../worksheet/worksheet/hooks/use-worksheet-data-helper.js";
|
9
|
+
import { getQuestionsFromItems as V } from "../../worksheet/worksheet/worksheet-helpers.js";
|
10
|
+
import { PuzzleQuestionWrapper as P, PuzzleContainer as R } from "./puzzle-app-styled.js";
|
11
|
+
const F = (u) => {
|
12
|
+
if (!u) return null;
|
13
|
+
const t = u.match(/<img[^>]+src="([^">]+)"/);
|
14
|
+
return t ? t[1] : null;
|
15
|
+
}, L = ({
|
16
|
+
worksheetData: u,
|
17
|
+
loggerRef: t,
|
18
|
+
onWorksheetErrored: n,
|
19
|
+
imageHue: I,
|
20
|
+
onLoaded: p
|
21
|
+
}) => {
|
22
|
+
const { signed_request: g, questions_signed_request: w } = u, z = S(null), {
|
23
|
+
loadingState: i,
|
24
|
+
data: o,
|
25
|
+
error: f
|
26
|
+
} = Q({
|
27
|
+
attemptId: void 0,
|
28
|
+
signedRequest: g,
|
29
|
+
loggerRef: t
|
30
|
+
}), E = _(
|
31
|
+
(s) => {
|
32
|
+
n({
|
33
|
+
code: s.code,
|
34
|
+
message: s.detail
|
35
|
+
});
|
36
|
+
},
|
37
|
+
[n]
|
38
|
+
), { learnosity: r } = N(w, E, t);
|
39
|
+
l(() => {
|
40
|
+
i === "error" && n({
|
41
|
+
message: f ?? "Error loading worksheet"
|
42
|
+
});
|
43
|
+
}, [i, n, f]), l(() => {
|
44
|
+
r && t.current(d.WORKSHEET_V3_LEARNOSITY_INITIALIZED);
|
45
|
+
}, [r, t]), l(() => {
|
46
|
+
r && i === "success" && p && (t.current(d.WORKSHEET_V3_READY), p());
|
47
|
+
}, [r, i, t, p]);
|
48
|
+
const m = $(() => i === "success" && (o != null && o.learnosityItems) ? (t.current(d.WORKSHEET_V3_READY), V(o.learnosityItems, {
|
49
|
+
sectioned: !1,
|
50
|
+
adaptive: !1
|
51
|
+
}).map((e) => ({
|
52
|
+
response_id: e.response_id,
|
53
|
+
type: e.type,
|
54
|
+
stimulus: e.stimulus,
|
55
|
+
template: e.template,
|
56
|
+
stimulus_review: e.stimulus_review,
|
57
|
+
options: e.options,
|
58
|
+
metadata: e.metadata,
|
59
|
+
validation: e.validation
|
60
|
+
// Add other properties as needed
|
61
|
+
}))) : [], [i, o, t]);
|
62
|
+
l(() => {
|
63
|
+
if (r && m.length > 0) {
|
64
|
+
const c = requestAnimationFrame(() => {
|
65
|
+
try {
|
66
|
+
r.renderMath("mathjax");
|
67
|
+
} catch (e) {
|
68
|
+
n({
|
69
|
+
message: `MathJax rendering failed: ${e instanceof Error ? e.message : "Unknown error"}`
|
70
|
+
});
|
71
|
+
}
|
72
|
+
});
|
73
|
+
return () => {
|
74
|
+
cancelAnimationFrame(c);
|
75
|
+
};
|
76
|
+
}
|
77
|
+
}, [r, n, m]);
|
78
|
+
const T = _((s) => {
|
79
|
+
const { stimulus: c = "", template: e = "", response_id: v } = s, h = F(c);
|
80
|
+
return /* @__PURE__ */ y(
|
81
|
+
M,
|
82
|
+
{
|
83
|
+
$background: "TRANSPARENT",
|
84
|
+
$alignItems: "center",
|
85
|
+
className: "puzzle-app-view-question-card",
|
86
|
+
children: [
|
87
|
+
h && /* @__PURE__ */ a(
|
88
|
+
H,
|
89
|
+
{
|
90
|
+
src: h,
|
91
|
+
alt: "Puzzle illustration",
|
92
|
+
width: 183,
|
93
|
+
height: 183,
|
94
|
+
withLoader: !0
|
95
|
+
}
|
96
|
+
),
|
97
|
+
/* @__PURE__ */ a(x, { heightX: 1 }),
|
98
|
+
e && /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a("div", { dangerouslySetInnerHTML: { __html: e } }) })
|
99
|
+
]
|
100
|
+
},
|
101
|
+
v
|
102
|
+
);
|
103
|
+
}, []);
|
104
|
+
return m.length ? /* @__PURE__ */ a(
|
105
|
+
R,
|
106
|
+
{
|
107
|
+
ref: z,
|
108
|
+
$gapX: 1,
|
109
|
+
$gutterX: 1,
|
110
|
+
$imageHue: I,
|
111
|
+
$background: "WHITE_1",
|
112
|
+
className: "puzzle-app-view-container",
|
113
|
+
children: m.map((s) => /* @__PURE__ */ a("div", { children: T(s) }, `question-${s.response_id}`))
|
114
|
+
}
|
115
|
+
) : null;
|
116
|
+
}, U = A(L);
|
117
|
+
export {
|
118
|
+
U as default
|
119
|
+
};
|
120
|
+
//# sourceMappingURL=puzzle-app-view.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"puzzle-app-view.js","sources":["../../../../src/features/puzzles/app/puzzle-app-view.tsx"],"sourcesContent":["import type {\n ILearnosityError,\n ILearnosityQuestion,\n} from '../../worksheet/worksheet/worksheet-types';\nimport type { IPuzzleAppViewProps } from './puzzle-app-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport EVENTS from '../../worksheet/constants/events';\nimport useLearnosity from '../../worksheet/worksheet/hooks/use-learnosity';\nimport useWorksheetDataHelper from '../../worksheet/worksheet/hooks/use-worksheet-data-helper';\nimport { getQuestionsFromItems } from '../../worksheet/worksheet/worksheet-helpers';\nimport * as Styled from './puzzle-app-styled';\n\nconst extractImageFromHTML = (htmlString: string) => {\n if (!htmlString) return null;\n\n const imgMatch = htmlString.match(/<img[^>]+src=\"([^\">]+)\"/);\n\n return imgMatch ? imgMatch[1] : null;\n};\n\nconst PuzzleAppView: FC<IPuzzleAppViewProps> = ({\n worksheetData,\n loggerRef,\n onWorksheetErrored,\n imageHue,\n onLoaded,\n}) => {\n const { signed_request: itemsSignedRequest, questions_signed_request: questionSignedRequest } =\n worksheetData;\n\n // Ref for the container to trigger MathJax rendering\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Get Learnosity items using the signed_request (not questions_signed_request)\n const {\n loadingState,\n data: learnosityData,\n error: worksheetError,\n } = useWorksheetDataHelper({\n attemptId: undefined,\n signedRequest: itemsSignedRequest,\n loggerRef,\n });\n\n const onLearnosityErrored = useCallback(\n (err: ILearnosityError) => {\n onWorksheetErrored({\n code: err.code,\n message: err.detail,\n });\n },\n [onWorksheetErrored],\n );\n\n // Initialize Learnosity using questions_signed_request (needed for interactive questions)\n const { learnosity } = useLearnosity(questionSignedRequest, onLearnosityErrored, loggerRef);\n\n useEffect(() => {\n if (loadingState === 'error') {\n onWorksheetErrored({\n message: worksheetError ?? 'Error loading worksheet',\n });\n }\n }, [loadingState, onWorksheetErrored, worksheetError]);\n\n // Log when learnosity is ready for future interactive features\n useEffect(() => {\n if (learnosity) {\n loggerRef.current(EVENTS.WORKSHEET_V3_LEARNOSITY_INITIALIZED);\n }\n }, [learnosity, loggerRef]);\n\n useEffect(() => {\n if (learnosity && loadingState === 'success' && onLoaded) {\n loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n onLoaded();\n }\n }, [learnosity, loadingState, loggerRef, onLoaded]);\n\n // Memoize questions processing to prevent re-render loops\n const questions = useMemo(() => {\n // Extract questions from Learnosity items when data is loaded successfully\n if (loadingState === 'success' && learnosityData?.learnosityItems) {\n loggerRef.current(EVENTS.WORKSHEET_V3_READY);\n\n // Convert learnosityItems to questions using the worksheet helper\n const worksheetQuestions = getQuestionsFromItems(learnosityData.learnosityItems, {\n sectioned: false,\n adaptive: false,\n });\n\n // Extract just the Learnosity questions from worksheet questions\n const learnosityQuestions: ILearnosityQuestion[] = worksheetQuestions.map(q => ({\n response_id: q.response_id,\n type: q.type,\n stimulus: q.stimulus,\n template: q.template,\n stimulus_review: q.stimulus_review,\n options: q.options,\n metadata: q.metadata,\n validation: q.validation,\n // Add other properties as needed\n }));\n\n return learnosityQuestions;\n }\n\n return [];\n }, [loadingState, learnosityData, loggerRef]);\n\n // Force MathJax rendering after questions are loaded and rendered\n // Similar to how useLearnosityAppend does it\n useEffect(() => {\n if (learnosity && questions.length > 0) {\n // Use requestAnimationFrame to ensure DOM is updated before rendering math\n const renderMath = () => {\n try {\n learnosity.renderMath('mathjax');\n } catch (error) {\n onWorksheetErrored({\n message: `MathJax rendering failed: ${\n error instanceof Error ? error.message : 'Unknown error'\n }`,\n });\n }\n };\n\n const animationId = requestAnimationFrame(renderMath);\n\n return () => {\n cancelAnimationFrame(animationId);\n };\n }\n }, [learnosity, onWorksheetErrored, questions]);\n\n const renderQuestionContent = useCallback((question: ILearnosityQuestion) => {\n const { stimulus = '', template = '', response_id: responseId } = question;\n const imageUrl = extractImageFromHTML(stimulus);\n\n return (\n <FlexView\n $background=\"TRANSPARENT\"\n key={responseId}\n $alignItems=\"center\"\n className=\"puzzle-app-view-question-card\"\n >\n {/* Main Image or Interactive Content */}\n {imageUrl && (\n <Image\n src={imageUrl}\n alt=\"Puzzle illustration\"\n width={183}\n height={183}\n withLoader={true}\n />\n )}\n\n <Separator heightX={1} />\n\n {/* Question HTML Content */}\n {template && (\n <Styled.PuzzleQuestionWrapper>\n <div dangerouslySetInnerHTML={{ __html: template }} />\n </Styled.PuzzleQuestionWrapper>\n )}\n </FlexView>\n );\n }, []);\n\n if (!questions.length) return null;\n\n return (\n <Styled.PuzzleContainer\n ref={containerRef}\n $gapX={1}\n $gutterX={1}\n $imageHue={imageHue}\n $background=\"WHITE_1\"\n className=\"puzzle-app-view-container\"\n >\n {questions.map(question => (\n <div key={`question-${question.response_id}`}>{renderQuestionContent(question)}</div>\n ))}\n </Styled.PuzzleContainer>\n );\n};\n\nexport default memo(PuzzleAppView);\n"],"names":["extractImageFromHTML","htmlString","imgMatch","PuzzleAppView","worksheetData","loggerRef","onWorksheetErrored","imageHue","onLoaded","itemsSignedRequest","questionSignedRequest","containerRef","useRef","loadingState","learnosityData","worksheetError","useWorksheetDataHelper","onLearnosityErrored","useCallback","err","learnosity","useLearnosity","useEffect","EVENTS","questions","useMemo","getQuestionsFromItems","q","animationId","error","renderQuestionContent","question","stimulus","template","responseId","imageUrl","jsxs","FlexView","jsx","Image","Separator","Styled.PuzzleQuestionWrapper","Styled.PuzzleContainer","PuzzleAppView$1","memo"],"mappings":"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"}
|
@@ -0,0 +1,82 @@
|
|
1
|
+
import { jsx as e, jsxs as s, Fragment as z } from "react/jsx-runtime";
|
2
|
+
import { memo as S, useState as p, useRef as v, useCallback as a, useEffect as x } from "react";
|
3
|
+
import { ErrorBoundary as T } from "react-error-boundary";
|
4
|
+
import f from "../../ui/error/error.js";
|
5
|
+
import g from "../../ui/layout/flex-view.js";
|
6
|
+
import W from "../../ui/loader/app-loader/app-loader.js";
|
7
|
+
import u from "../../ui/text/text.js";
|
8
|
+
import _ from "../../worksheet/learnosity-preloader/learnosity-preloader.js";
|
9
|
+
import { usePreviewWorksheetGet as U } from "../../worksheet/worksheet-preview/api/get-preview-worksheet.js";
|
10
|
+
import { LEARNOSITY_QUESTIONS_API as y, LEARNOSITY_QUESTIONS_API_FALLBACK as C } from "../../worksheet/worksheet/stories/worksheet-story-container.js";
|
11
|
+
import { PuzzleAppWrapper as F, StyledFeedbackText as N, StyledHintFillIcon as O } from "./puzzle-app-styled.js";
|
12
|
+
import B from "./puzzle-app-view.js";
|
13
|
+
const D = (r) => {
|
14
|
+
console.log("Worksheet Logger:", r);
|
15
|
+
}, G = () => {
|
16
|
+
const r = new URLSearchParams(window.location.search), t = r.get("itemRef") || "", k = r.get("title") || "", l = r.get("imageHue") || "BLUE", c = r.get("feedbackComments") || void 0, A = r.get("tip") || void 0, [$, m] = p(), [o, b] = p(!1), { isProcessing: E, get: d, data: h, error: L } = U(), w = v(() => null), R = A || "Celebrate persistence more than correct answers - it's a life skill worth building.", n = a(() => {
|
17
|
+
d("test", {
|
18
|
+
action: "review",
|
19
|
+
node_type: "PUZZLE_CARD",
|
20
|
+
items: [t]
|
21
|
+
});
|
22
|
+
}, [d, t]);
|
23
|
+
x(() => {
|
24
|
+
n();
|
25
|
+
}, [n]);
|
26
|
+
const P = a((i) => {
|
27
|
+
m(i.message);
|
28
|
+
}, []), I = a(() => {
|
29
|
+
b(!0);
|
30
|
+
}, []);
|
31
|
+
return t ? $ || L ? /* @__PURE__ */ e(f, { height: "100vh", onTryAgain: n }) : E ? /* @__PURE__ */ e(W, { height: "100vh" }) : /* @__PURE__ */ e(
|
32
|
+
T,
|
33
|
+
{
|
34
|
+
fallback: /* @__PURE__ */ e(f, { height: "100vh" }),
|
35
|
+
onError: (i) => m(i.message),
|
36
|
+
children: /* @__PURE__ */ e(
|
37
|
+
_,
|
38
|
+
{
|
39
|
+
apiURL: y,
|
40
|
+
fallbackAPIURL: C,
|
41
|
+
logger: D,
|
42
|
+
children: /* @__PURE__ */ s(
|
43
|
+
F,
|
44
|
+
{
|
45
|
+
className: "puzzle-app-container",
|
46
|
+
$background: `${l}_2`,
|
47
|
+
$alignItems: "center",
|
48
|
+
$flexGapX: 1,
|
49
|
+
$gutterX: 1,
|
50
|
+
$visible: o,
|
51
|
+
$height: "100vh",
|
52
|
+
children: [
|
53
|
+
o && /* @__PURE__ */ e(u, { $renderAs: "ab1-bold", children: k }),
|
54
|
+
h && /* @__PURE__ */ e(
|
55
|
+
B,
|
56
|
+
{
|
57
|
+
onWorksheetErrored: P,
|
58
|
+
worksheetData: h,
|
59
|
+
loggerRef: w,
|
60
|
+
imageHue: l,
|
61
|
+
onLoaded: I
|
62
|
+
}
|
63
|
+
),
|
64
|
+
o && /* @__PURE__ */ e(z, { children: c ? /* @__PURE__ */ s(N, { $renderAs: "ab2", children: [
|
65
|
+
/* @__PURE__ */ e("span", { children: "Tutor Remark:" }),
|
66
|
+
c
|
67
|
+
] }) : /* @__PURE__ */ s(g, { $flexDirection: "row", $alignItems: "center", $flexGap: 8, children: [
|
68
|
+
/* @__PURE__ */ e(g, { $width: 24, $height: 24, children: /* @__PURE__ */ e(O, {}) }),
|
69
|
+
/* @__PURE__ */ e(u, { $renderAs: "ab2", children: R })
|
70
|
+
] }) })
|
71
|
+
]
|
72
|
+
}
|
73
|
+
)
|
74
|
+
}
|
75
|
+
)
|
76
|
+
}
|
77
|
+
) : null;
|
78
|
+
}, re = S(G);
|
79
|
+
export {
|
80
|
+
re as default
|
81
|
+
};
|
82
|
+
//# sourceMappingURL=puzzle-app.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"puzzle-app.js","sources":["../../../../src/features/puzzles/app/puzzle-app.tsx"],"sourcesContent":["import type { THueNames } from '../../ui/types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport Error from '../../ui/error/error';\nimport FlexView from '../../ui/layout/flex-view';\nimport AppLoader from '../../ui/loader/app-loader/app-loader';\nimport Text from '../../ui/text/text';\nimport LearnosityPreloader from '../../worksheet/learnosity-preloader/learnosity-preloader';\nimport { usePreviewWorksheetGet } from '../../worksheet/worksheet-preview/api/get-preview-worksheet';\nimport {\n LEARNOSITY_QUESTIONS_API,\n LEARNOSITY_QUESTIONS_API_FALLBACK,\n} from '../../worksheet/worksheet/stories/worksheet-story-container';\nimport * as Styled from './puzzle-app-styled';\nimport PuzzleAppView from './puzzle-app-view';\n\nconst logger = (eventName: string) => {\n // eslint-disable-next-line no-console\n console.log('Worksheet Logger:', eventName);\n};\n\nconst PuzzleApp: FC = () => {\n // Extract props from URL search parameters\n const urlParams = new URLSearchParams(window.location.search);\n const itemRef = urlParams.get('itemRef') || '';\n const title = urlParams.get('title') || '';\n const imageHue = (urlParams.get('imageHue') || 'BLUE') as THueNames;\n const feedbackComments = urlParams.get('feedbackComments') || undefined;\n const tip = urlParams.get('tip') || undefined;\n\n const [error, setError] = useState<string>();\n const [worksheetRendered, setWorksheetRendered] = useState<boolean>(false);\n\n const { isProcessing, get, data: worksheetData, error: fetchError } = usePreviewWorksheetGet();\n const loggerRef = useRef(() => null);\n\n const tipInfo =\n tip || `Celebrate persistence more than correct answers - it's a life skill worth building.`;\n\n const fetchWorksheet = useCallback(() => {\n get('test', {\n action: 'review',\n node_type: 'PUZZLE_CARD',\n items: [itemRef],\n });\n }, [get, itemRef]);\n\n useEffect(() => {\n fetchWorksheet();\n }, [fetchWorksheet]);\n\n const handleWorksheetErrored = useCallback((err: { code?: number; message: string }) => {\n setError(err.message);\n }, []);\n\n const handleWorksheetLoaded = useCallback(() => {\n setWorksheetRendered(true);\n }, []);\n\n if (!itemRef) return null;\n\n if (error || fetchError) {\n return <Error height=\"100vh\" onTryAgain={fetchWorksheet} />;\n }\n\n if (isProcessing) {\n return <AppLoader height=\"100vh\" />;\n }\n\n return (\n <ErrorBoundary\n fallback={<Error height=\"100vh\" />}\n onError={errorInfo => setError(errorInfo.message)}\n >\n <LearnosityPreloader\n apiURL={LEARNOSITY_QUESTIONS_API}\n fallbackAPIURL={LEARNOSITY_QUESTIONS_API_FALLBACK}\n logger={logger}\n >\n <Styled.PuzzleAppWrapper\n className=\"puzzle-app-container\"\n $background={`${imageHue}_2`}\n $alignItems=\"center\"\n $flexGapX={1}\n $gutterX={1}\n $visible={worksheetRendered}\n $height=\"100vh\"\n >\n {worksheetRendered && <Text $renderAs=\"ab1-bold\">{title}</Text>}\n\n {worksheetData && (\n <PuzzleAppView\n onWorksheetErrored={handleWorksheetErrored}\n worksheetData={worksheetData}\n loggerRef={loggerRef}\n imageHue={imageHue}\n onLoaded={handleWorksheetLoaded}\n />\n )}\n\n {worksheetRendered && (\n <>\n {feedbackComments ? (\n <Styled.StyledFeedbackText $renderAs=\"ab2\">\n <span>Tutor Remark:</span>\n {feedbackComments}\n </Styled.StyledFeedbackText>\n ) : (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGap={8}>\n <FlexView $width={24} $height={24}>\n <Styled.StyledHintFillIcon />\n </FlexView>\n <Text $renderAs=\"ab2\">{tipInfo}</Text>\n </FlexView>\n )}\n </>\n )}\n </Styled.PuzzleAppWrapper>\n </LearnosityPreloader>\n </ErrorBoundary>\n );\n};\n\nexport default memo(PuzzleApp);\n"],"names":["logger","eventName","PuzzleApp","urlParams","itemRef","title","imageHue","feedbackComments","tip","error","setError","useState","worksheetRendered","setWorksheetRendered","isProcessing","get","worksheetData","fetchError","usePreviewWorksheetGet","loggerRef","useRef","tipInfo","fetchWorksheet","useCallback","useEffect","handleWorksheetErrored","err","handleWorksheetLoaded","jsx","Error","AppLoader","ErrorBoundary","errorInfo","LearnosityPreloader","LEARNOSITY_QUESTIONS_API","LEARNOSITY_QUESTIONS_API_FALLBACK","jsxs","Styled.PuzzleAppWrapper","Text","PuzzleAppView","Styled.StyledFeedbackText","FlexView","Styled.StyledHintFillIcon","puzzleApp","memo"],"mappings":"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"}
|
@@ -1,29 +1,29 @@
|
|
1
1
|
import { jsxs as b, jsx as t } from "react/jsx-runtime";
|
2
|
-
import { useCallback as
|
3
|
-
import { useTheme as
|
4
|
-
import
|
5
|
-
import { CheckboxOptionWrapper as W, CheckboxInputWrapper as z, CheckboxInput as A, CheckIcon as
|
6
|
-
const
|
2
|
+
import { useCallback as I } from "react";
|
3
|
+
import { useTheme as g } from "styled-components";
|
4
|
+
import v from "../../text/text.js";
|
5
|
+
import { CheckboxOptionWrapper as W, CheckboxInputWrapper as z, CheckboxInput as A, CheckIcon as T, IndeterminateIcon as y, CheckboxLabelWrapper as L } from "./checkbox-input-styled.js";
|
6
|
+
const O = (h) => {
|
7
7
|
const {
|
8
8
|
size: r,
|
9
9
|
label: i,
|
10
|
-
value:
|
10
|
+
value: o,
|
11
11
|
checked: e,
|
12
12
|
disabled: n,
|
13
|
-
renderAs:
|
13
|
+
renderAs: a,
|
14
14
|
labelWidthX: p,
|
15
|
-
indeterminate:
|
16
|
-
visibleOnCheck:
|
17
|
-
alignTopWithLabel:
|
15
|
+
indeterminate: u,
|
16
|
+
visibleOnCheck: k,
|
17
|
+
alignTopWithLabel: $ = !1,
|
18
18
|
onChange: l
|
19
19
|
} = h, {
|
20
|
-
layout: { gutter:
|
20
|
+
layout: { gutter: C },
|
21
21
|
checkbox: c
|
22
|
-
} =
|
22
|
+
} = g(), { textVariant: m } = c.sizes[r ?? "regular"], { textColorName: x } = c.variants[a ?? "black"], s = k ? e : !0, f = !e && u, d = I(() => {
|
23
23
|
if (n) return null;
|
24
|
-
l(
|
25
|
-
}, [e, n, l,
|
26
|
-
return /* @__PURE__ */ b(W, { $alignTop:
|
24
|
+
l(o, !e);
|
25
|
+
}, [e, n, l, o]);
|
26
|
+
return /* @__PURE__ */ b(W, { $alignTop: $, $disabled: n, children: [
|
27
27
|
/* @__PURE__ */ b(z, { onClick: d, $disabled: n, children: [
|
28
28
|
/* @__PURE__ */ t(
|
29
29
|
A,
|
@@ -32,15 +32,15 @@ const L = (h) => {
|
|
32
32
|
checked: e,
|
33
33
|
disabled: !!n,
|
34
34
|
onChange: () => null,
|
35
|
-
$renderAs:
|
35
|
+
$renderAs: a,
|
36
36
|
$size: r
|
37
37
|
}
|
38
38
|
),
|
39
|
-
e && /* @__PURE__ */ t(
|
40
|
-
f && /* @__PURE__ */ t(
|
39
|
+
e && /* @__PURE__ */ t(T, { $renderAs: a, $size: r }),
|
40
|
+
f && /* @__PURE__ */ t(y, { $disabled: n, $size: C * 1.125 })
|
41
41
|
] }),
|
42
42
|
/* @__PURE__ */ t(
|
43
|
-
|
43
|
+
L,
|
44
44
|
{
|
45
45
|
$labelWidthX: p,
|
46
46
|
$visible: s,
|
@@ -48,7 +48,7 @@ const L = (h) => {
|
|
48
48
|
$disabled: n,
|
49
49
|
$checked: e,
|
50
50
|
children: typeof i == "string" ? /* @__PURE__ */ t(
|
51
|
-
|
51
|
+
v,
|
52
52
|
{
|
53
53
|
$renderAs: m[e ? "active" : "inactive"],
|
54
54
|
$color: x[e ? "active" : "inactive"],
|
@@ -58,7 +58,7 @@ const L = (h) => {
|
|
58
58
|
}
|
59
59
|
)
|
60
60
|
] });
|
61
|
-
}, q =
|
61
|
+
}, q = O;
|
62
62
|
export {
|
63
63
|
q as default
|
64
64
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"checkbox-input.js","sources":["../../../../../src/features/ui/inputs/checkbox-input/checkbox-input.tsx"],"sourcesContent":["import type { ICheckboxOptionProps } from './checkbox-input-types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport * as Styled from './checkbox-input-styled';\n\nconst CheckboxInput = <IDType extends string | number>(props: ICheckboxOptionProps<IDType>) => {\n const {\n size,\n label,\n value,\n checked,\n disabled,\n renderAs,\n labelWidthX,\n indeterminate,\n visibleOnCheck,\n alignTopWithLabel = false,\n onChange,\n } = props;\n\n const {\n layout: { gutter },\n checkbox,\n } = useTheme();\n\n const { textVariant } = checkbox.sizes[size ?? 'regular'];\n const { textColorName } = checkbox.variants[renderAs ?? 'black'];\n\n const renderLabel = visibleOnCheck ? checked : true;\n const renderIndeterminateState = !checked && indeterminate;\n\n const handleOnChange = useCallback(() => {\n if (disabled) return null;\n\n onChange(value, !checked);\n }, [checked, disabled, onChange, value]);\n\n return (\n <Styled.CheckboxOptionWrapper $alignTop={alignTopWithLabel} $disabled={disabled}>\n <Styled.CheckboxInputWrapper onClick={handleOnChange} $disabled={disabled}>\n <Styled.CheckboxInput\n type=\"checkbox\"\n checked={checked}\n disabled={!!disabled}\n onChange={() => null}\n $renderAs={renderAs}\n $size={size}\n />\n {checked && <Styled.CheckIcon $renderAs={renderAs} $size={size} />}\n\n {renderIndeterminateState && (\n <Styled.IndeterminateIcon $disabled={disabled} $size={gutter * 1.125} />\n )}\n </Styled.CheckboxInputWrapper>\n\n <Styled.CheckboxLabelWrapper\n $labelWidthX={labelWidthX}\n $visible={renderLabel}\n onClick={renderLabel ? handleOnChange : () => null}\n $disabled={disabled}\n $checked={checked}\n >\n {typeof label === 'string' ? (\n <Text\n $renderAs={textVariant[checked ? 'active' : 'inactive']}\n $color={textColorName[checked ? 'active' : 'inactive']}\n >\n {label}\n </Text>\n ) : (\n label\n )}\n </Styled.CheckboxLabelWrapper>\n </Styled.CheckboxOptionWrapper>\n );\n};\n\nexport default CheckboxInput;\n"],"names":["CheckboxInput","props","size","label","value","checked","disabled","renderAs","labelWidthX","indeterminate","visibleOnCheck","alignTopWithLabel","onChange","gutter","checkbox","useTheme","textVariant","textColorName","renderLabel","renderIndeterminateState","handleOnChange","useCallback","Styled.CheckboxOptionWrapper","jsxs","Styled.CheckboxInputWrapper","jsx","Styled.CheckboxInput","Styled.CheckIcon","Styled.IndeterminateIcon","Styled.CheckboxLabelWrapper","Text","
|
1
|
+
{"version":3,"file":"checkbox-input.js","sources":["../../../../../src/features/ui/inputs/checkbox-input/checkbox-input.tsx"],"sourcesContent":["import type { ICheckboxOptionProps } from './checkbox-input-types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport * as Styled from './checkbox-input-styled';\n\nconst CheckboxInput = <IDType extends string | number>(props: ICheckboxOptionProps<IDType>) => {\n const {\n size,\n label,\n value,\n checked,\n disabled,\n renderAs,\n labelWidthX,\n indeterminate,\n visibleOnCheck,\n alignTopWithLabel = false,\n onChange,\n } = props;\n\n const {\n layout: { gutter },\n checkbox,\n } = useTheme();\n\n const { textVariant } = checkbox.sizes[size ?? 'regular'];\n const { textColorName } = checkbox.variants[renderAs ?? 'black'];\n\n const renderLabel = visibleOnCheck ? checked : true;\n const renderIndeterminateState = !checked && indeterminate;\n\n const handleOnChange = useCallback(() => {\n if (disabled) return null;\n\n onChange(value, !checked);\n }, [checked, disabled, onChange, value]);\n\n return (\n <Styled.CheckboxOptionWrapper $alignTop={alignTopWithLabel} $disabled={disabled}>\n <Styled.CheckboxInputWrapper onClick={handleOnChange} $disabled={disabled}>\n <Styled.CheckboxInput\n type=\"checkbox\"\n checked={checked}\n disabled={!!disabled}\n onChange={() => null}\n $renderAs={renderAs}\n $size={size}\n />\n {checked && <Styled.CheckIcon $renderAs={renderAs} $size={size} />}\n\n {renderIndeterminateState && (\n <Styled.IndeterminateIcon $disabled={disabled} $size={gutter * 1.125} />\n )}\n </Styled.CheckboxInputWrapper>\n\n <Styled.CheckboxLabelWrapper\n $labelWidthX={labelWidthX}\n $visible={renderLabel}\n onClick={renderLabel ? handleOnChange : () => null}\n $disabled={disabled}\n $checked={checked}\n >\n {typeof label === 'string' ? (\n <Text\n $renderAs={textVariant[checked ? 'active' : 'inactive']}\n $color={textColorName[checked ? 'active' : 'inactive']}\n >\n {label}\n </Text>\n ) : (\n label\n )}\n </Styled.CheckboxLabelWrapper>\n </Styled.CheckboxOptionWrapper>\n );\n};\n\nexport default CheckboxInput;\n"],"names":["CheckboxInput","props","size","label","value","checked","disabled","renderAs","labelWidthX","indeterminate","visibleOnCheck","alignTopWithLabel","onChange","gutter","checkbox","useTheme","textVariant","textColorName","renderLabel","renderIndeterminateState","handleOnChange","useCallback","Styled.CheckboxOptionWrapper","jsxs","Styled.CheckboxInputWrapper","jsx","Styled.CheckboxInput","Styled.CheckIcon","Styled.IndeterminateIcon","Styled.CheckboxLabelWrapper","Text","CheckboxInput$1"],"mappings":";;;;;AAQA,MAAMA,IAAgB,CAAiCC,MAAwC;AACvF,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,EACE,IAAAX,GAEE;AAAA,IACJ,QAAQ,EAAE,QAAAY,EAAO;AAAA,IACjB,UAAAC;AAAA,MACEC,EAAS,GAEP,EAAE,aAAAC,EAAY,IAAIF,EAAS,MAAMZ,KAAQ,SAAS,GAClD,EAAE,eAAAe,EAAc,IAAIH,EAAS,SAASP,KAAY,OAAO,GAEzDW,IAAcR,IAAiBL,IAAU,IACzCc,IAA2B,CAACd,KAAWI,GAEvCW,IAAiBC,EAAY,MAAM;AACvC,QAAIf,EAAiB,QAAA;AAEZ,IAAAM,EAAAR,GAAO,CAACC,CAAO;AAAA,KACvB,CAACA,GAASC,GAAUM,GAAUR,CAAK,CAAC;AAEvC,2BACGkB,GAAA,EAA6B,WAAWX,GAAmB,WAAWL,GACrE,UAAA;AAAA,IAAA,gBAAAiB,EAACC,GAAA,EAA4B,SAASJ,GAAgB,WAAWd,GAC/D,UAAA;AAAA,MAAA,gBAAAmB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAArB;AAAA,UACA,UAAU,CAAC,CAACC;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOL;AAAA,QAAA;AAAA,MACT;AAAA,MACCG,uBAAYsB,GAAA,EAAiB,WAAWpB,GAAU,OAAOL,GAAM;AAAA,MAE/DiB,uBACES,GAAA,EAAyB,WAAWtB,GAAU,OAAOO,IAAS,OAAO;AAAA,IAAA,GAE1E;AAAA,IAEA,gBAAAY;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,cAAcrB;AAAA,QACd,UAAUU;AAAA,QACV,SAASA,IAAcE,IAAiB,MAAM;AAAA,QAC9C,WAAWd;AAAA,QACX,UAAUD;AAAA,QAET,UAAA,OAAOF,KAAU,WAChB,gBAAAsB;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWd,EAAYX,IAAU,WAAW,UAAU;AAAA,YACtD,QAAQY,EAAcZ,IAAU,WAAW,UAAU;AAAA,YAEpD,UAAAF;AAAA,UAAA;AAAA,QAAA,IAGHA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA;AAEJ,GAEA4B,IAAe/B;"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
2
2
|
import { useMemo as g, useCallback as I } from "react";
|
3
3
|
import L from "../../arrow-tooltip/arrow-tooltip.js";
|
4
|
-
import
|
5
|
-
import { CheckboxInputListWrapper as
|
4
|
+
import v from "../checkbox-input/checkbox-input.js";
|
5
|
+
import { CheckboxInputListWrapper as A, CheckboxOptionWrapper as O } from "./checkbox-input-list-styled.js";
|
6
6
|
const $ = (h) => {
|
7
7
|
const {
|
8
8
|
size: a,
|
@@ -24,9 +24,9 @@ const $ = (h) => {
|
|
24
24
|
},
|
25
25
|
[e, i, c, o]
|
26
26
|
);
|
27
|
-
return /* @__PURE__ */ r(
|
27
|
+
return /* @__PURE__ */ r(A, { children: d.map((t) => {
|
28
28
|
const { id: n, label: l } = t, p = o.includes(n), m = c && !p, k = (s == null ? void 0 : s.includes(n)) || m;
|
29
|
-
return /* @__PURE__ */ r(
|
29
|
+
return /* @__PURE__ */ r(O, { $numColumns: C ?? 1, children: /* @__PURE__ */ r(
|
30
30
|
L,
|
31
31
|
{
|
32
32
|
renderAs: "primary",
|
@@ -35,7 +35,7 @@ const $ = (h) => {
|
|
35
35
|
hidden: !m,
|
36
36
|
zIndex: 2,
|
37
37
|
children: /* @__PURE__ */ r(
|
38
|
-
|
38
|
+
v,
|
39
39
|
{
|
40
40
|
value: n,
|
41
41
|
size: a,
|