@cuemath/leap 3.3.2-link.0 → 3.3.2
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/features/trial-session/comps/about-cuemath/about-cuemath-constants.js +1 -1
- package/dist/features/trial-session/comps/about-cuemath/about-cuemath-constants.js.map +1 -1
- package/dist/features/trial-session/comps/student-personalization/student-personalization.js +15 -15
- package/dist/features/trial-session/comps/student-personalization/student-personalization.js.map +1 -1
- package/dist/features/trial-session/left-panel/index.js +1 -1
- package/dist/features/trial-session/left-panel/index.js.map +1 -1
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list-styled.js +4 -12
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list-styled.js.map +1 -1
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js +28 -27
- package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"about-cuemath-constants.js","sources":["../../../../../src/features/trial-session/comps/about-cuemath/about-cuemath-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nconst aboutCuemathData = [\n {\n id: 'rating',\n title: '4.
|
|
1
|
+
{"version":3,"file":"about-cuemath-constants.js","sources":["../../../../../src/features/trial-session/comps/about-cuemath/about-cuemath-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nconst aboutCuemathData = [\n {\n id: 'rating',\n title: '4.9+ Rating',\n subtitle: 'Trustpilot',\n icon: ILLUSTRATIONS.STAR_WITH_GREEN_FILL,\n },\n {\n id: 'countries',\n title: '80+ Countries',\n subtitle: 'School Aligned Curriculum',\n icon: ILLUSTRATIONS.GLOBE_WITH_BLUE_FILL,\n },\n {\n id: 'students',\n title: '200,000+',\n subtitle: 'Students',\n icon: ILLUSTRATIONS.PEOPLE_WITH_ORANGE_FILL,\n },\n {\n id: 'classes',\n title: '30 Million+',\n subtitle: 'Classes Delivered',\n icon: ILLUSTRATIONS.DESKTOP_WITH_PURPLE_FILL,\n },\n];\n\nexport { aboutCuemathData };\n"],"names":["aboutCuemathData","ILLUSTRATIONS"],"mappings":";AAEA,MAAMA,IAAmB;AAAA,EACvB;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAMC,EAAc;AAAA,EACtB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAMA,EAAc;AAAA,EACtB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAMA,EAAc;AAAA,EACtB;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAMA,EAAc;AAAA,EACtB;AACF;"}
|
package/dist/features/trial-session/comps/student-personalization/student-personalization.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { memo as p, useMemo as f, useCallback as u, useEffect as h } from "react";
|
|
3
|
-
import { ILLUSTRATIONS as
|
|
4
|
-
import { COURSE_STREAMS as
|
|
3
|
+
import { ILLUSTRATIONS as C } from "../../../../assets/illustrations/illustrations.js";
|
|
4
|
+
import { COURSE_STREAMS as g, PREFERENCE_CATEGORY as S } from "../../../milestone/constants.js";
|
|
5
5
|
import { getPreferencesFromConfig as E } from "../../../milestone/create/milestone-create-helpers.js";
|
|
6
6
|
import b from "../../../ui/image/image.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
7
|
+
import x from "../../../ui/inputs/checkbox-input-list/checkbox-input-list.js";
|
|
8
|
+
import A from "../../../ui/layout/flex-view.js";
|
|
9
|
+
import $ from "../../../ui/separator/separator.js";
|
|
10
10
|
import L from "../../../ui/text/text.js";
|
|
11
11
|
import { useTrialSessionContext as O } from "../../context/use-trial-session-context.js";
|
|
12
12
|
import R from "../slide-header/index.js";
|
|
@@ -15,20 +15,20 @@ const W = p(() => {
|
|
|
15
15
|
const { formData: m, milestoneConfig: r, updateSlideConfig: t, updateButtonState: i } = O(), { grade: n, personalizedObjectives: a = [] } = m || {}, s = a.length > 0, l = f(
|
|
16
16
|
() => E(r, {
|
|
17
17
|
grade: n ?? "",
|
|
18
|
-
courseStream:
|
|
18
|
+
courseStream: g.MATH,
|
|
19
19
|
preferenceCategory: S.OBJECTIVES
|
|
20
20
|
}),
|
|
21
21
|
[n, r]
|
|
22
|
-
),
|
|
23
|
-
(
|
|
24
|
-
t({ personalizedObjectives:
|
|
22
|
+
), d = u(
|
|
23
|
+
(c) => {
|
|
24
|
+
t({ personalizedObjectives: c });
|
|
25
25
|
},
|
|
26
26
|
[t]
|
|
27
27
|
);
|
|
28
28
|
return h(() => {
|
|
29
29
|
i("right", { isDisabled: !s, isLoading: !1 });
|
|
30
30
|
}, [s, i]), /* @__PURE__ */ o(T, { children: [
|
|
31
|
-
/* @__PURE__ */ e(
|
|
31
|
+
/* @__PURE__ */ e($, { height: 60 }),
|
|
32
32
|
/* @__PURE__ */ e(R, {}),
|
|
33
33
|
/* @__PURE__ */ o(j, { $width: 750, $flexDirection: "row", $justifyContent: "center", children: [
|
|
34
34
|
/* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
|
|
@@ -38,11 +38,11 @@ const W = p(() => {
|
|
|
38
38
|
height: 402,
|
|
39
39
|
width: 302,
|
|
40
40
|
className: "image",
|
|
41
|
-
src:
|
|
41
|
+
src: C.PERSONALIZATION
|
|
42
42
|
}
|
|
43
43
|
) }),
|
|
44
44
|
/* @__PURE__ */ o(
|
|
45
|
-
|
|
45
|
+
A,
|
|
46
46
|
{
|
|
47
47
|
$flexGap: 24,
|
|
48
48
|
$borderColor: "BLACK_1",
|
|
@@ -52,14 +52,14 @@ const W = p(() => {
|
|
|
52
52
|
children: [
|
|
53
53
|
/* @__PURE__ */ e(L, { $renderAs: "ab2-bold", $color: "BLACK_1", children: "What would you like your child to work on?" }),
|
|
54
54
|
/* @__PURE__ */ e(
|
|
55
|
-
|
|
55
|
+
x,
|
|
56
56
|
{
|
|
57
57
|
size: "small",
|
|
58
58
|
renderAs: "black",
|
|
59
59
|
options: l,
|
|
60
60
|
value: a,
|
|
61
|
-
onChange:
|
|
62
|
-
|
|
61
|
+
onChange: d,
|
|
62
|
+
optionFlexGap: 16
|
|
63
63
|
}
|
|
64
64
|
)
|
|
65
65
|
]
|
package/dist/features/trial-session/comps/student-personalization/student-personalization.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"student-personalization.js","sources":["../../../../../src/features/trial-session/comps/student-personalization/student-personalization.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport { COURSE_STREAMS, PREFERENCE_CATEGORY } from '../../../milestone/constants';\nimport { getPreferencesFromConfig } from '../../../milestone/create/milestone-create-helpers';\nimport Image from '../../../ui/image/image';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport SlideHeader from '../slide-header';\nimport * as Styled from './student-personalization-styled';\n\nconst StudentPersonalization = memo(() => {\n const { formData, milestoneConfig, updateSlideConfig, updateButtonState } =\n useTrialSessionContext();\n\n const { grade, personalizedObjectives = [] } = formData || {};\n\n const hasRequiredFields = Boolean(personalizedObjectives.length > 0);\n\n const objectivesList = useMemo(\n () =>\n getPreferencesFromConfig(milestoneConfig, {\n grade: grade ?? '',\n courseStream: COURSE_STREAMS.MATH,\n preferenceCategory: PREFERENCE_CATEGORY.OBJECTIVES,\n }),\n [grade, milestoneConfig],\n );\n\n const handleChangeObjectives = useCallback(\n (value: string[]) => {\n updateSlideConfig({ personalizedObjectives: value });\n },\n [updateSlideConfig],\n );\n\n useEffect(() => {\n updateButtonState('right', { isDisabled: !hasRequiredFields, isLoading: false });\n }, [hasRequiredFields, updateButtonState]);\n\n return (\n <Styled.Container>\n <Separator height={60} />\n <SlideHeader />\n <Styled.ContentWrapper $width={750} $flexDirection=\"row\" $justifyContent=\"center\">\n <Styled.ImageWrapper>\n <Image\n withLoader\n height={402}\n width={302}\n className=\"image\"\n src={ILLUSTRATIONS.PERSONALIZATION}\n />\n </Styled.ImageWrapper>\n <FlexView\n $flexGap={24}\n $borderColor=\"BLACK_1\"\n $background=\"GREEN_1\"\n $gutterX={1.5}\n $justifyContent=\"center\"\n >\n <Text $renderAs=\"ab2-bold\" $color=\"BLACK_1\">\n What would you like your child to work on?\n </Text>\n <CheckboxInputList\n size=\"small\"\n renderAs=\"black\"\n options={objectivesList}\n value={personalizedObjectives}\n onChange={handleChangeObjectives}\n
|
|
1
|
+
{"version":3,"file":"student-personalization.js","sources":["../../../../../src/features/trial-session/comps/student-personalization/student-personalization.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport { COURSE_STREAMS, PREFERENCE_CATEGORY } from '../../../milestone/constants';\nimport { getPreferencesFromConfig } from '../../../milestone/create/milestone-create-helpers';\nimport Image from '../../../ui/image/image';\nimport CheckboxInputList from '../../../ui/inputs/checkbox-input-list/checkbox-input-list';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport SlideHeader from '../slide-header';\nimport * as Styled from './student-personalization-styled';\n\nconst StudentPersonalization = memo(() => {\n const { formData, milestoneConfig, updateSlideConfig, updateButtonState } =\n useTrialSessionContext();\n\n const { grade, personalizedObjectives = [] } = formData || {};\n\n const hasRequiredFields = Boolean(personalizedObjectives.length > 0);\n\n const objectivesList = useMemo(\n () =>\n getPreferencesFromConfig(milestoneConfig, {\n grade: grade ?? '',\n courseStream: COURSE_STREAMS.MATH,\n preferenceCategory: PREFERENCE_CATEGORY.OBJECTIVES,\n }),\n [grade, milestoneConfig],\n );\n\n const handleChangeObjectives = useCallback(\n (value: string[]) => {\n updateSlideConfig({ personalizedObjectives: value });\n },\n [updateSlideConfig],\n );\n\n useEffect(() => {\n updateButtonState('right', { isDisabled: !hasRequiredFields, isLoading: false });\n }, [hasRequiredFields, updateButtonState]);\n\n return (\n <Styled.Container>\n <Separator height={60} />\n <SlideHeader />\n <Styled.ContentWrapper $width={750} $flexDirection=\"row\" $justifyContent=\"center\">\n <Styled.ImageWrapper>\n <Image\n withLoader\n height={402}\n width={302}\n className=\"image\"\n src={ILLUSTRATIONS.PERSONALIZATION}\n />\n </Styled.ImageWrapper>\n <FlexView\n $flexGap={24}\n $borderColor=\"BLACK_1\"\n $background=\"GREEN_1\"\n $gutterX={1.5}\n $justifyContent=\"center\"\n >\n <Text $renderAs=\"ab2-bold\" $color=\"BLACK_1\">\n What would you like your child to work on?\n </Text>\n <CheckboxInputList\n size=\"small\"\n renderAs=\"black\"\n options={objectivesList}\n value={personalizedObjectives}\n onChange={handleChangeObjectives}\n optionFlexGap={16}\n />\n </FlexView>\n </Styled.ContentWrapper>\n </Styled.Container>\n );\n});\n\nexport default StudentPersonalization;\n"],"names":["StudentPersonalization","memo","formData","milestoneConfig","updateSlideConfig","updateButtonState","useTrialSessionContext","grade","personalizedObjectives","hasRequiredFields","objectivesList","useMemo","getPreferencesFromConfig","COURSE_STREAMS","PREFERENCE_CATEGORY","handleChangeObjectives","useCallback","value","useEffect","jsxs","Styled.Container","jsx","Separator","SlideHeader","Styled.ContentWrapper","Styled.ImageWrapper","Image","ILLUSTRATIONS","FlexView","Text","CheckboxInputList"],"mappings":";;;;;;;;;;;;;AAcM,MAAAA,IAAyBC,EAAK,MAAM;AACxC,QAAM,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,mBAAAC,GAAmB,mBAAAC,EAAA,IACpDC,KAEI,EAAE,OAAAC,GAAO,wBAAAC,IAAyB,CAAG,EAAA,IAAIN,KAAY,CAAA,GAErDO,IAA4BD,EAAuB,SAAS,GAE5DE,IAAiBC;AAAA,IACrB,MACEC,EAAyBT,GAAiB;AAAA,MACxC,OAAOI,KAAS;AAAA,MAChB,cAAcM,EAAe;AAAA,MAC7B,oBAAoBC,EAAoB;AAAA,IAAA,CACzC;AAAA,IACH,CAACP,GAAOJ,CAAe;AAAA,EAAA,GAGnBY,IAAyBC;AAAA,IAC7B,CAACC,MAAoB;AACD,MAAAb,EAAA,EAAE,wBAAwBa,EAAA,CAAO;AAAA,IACrD;AAAA,IACA,CAACb,CAAiB;AAAA,EAAA;AAGpB,SAAAc,EAAU,MAAM;AACd,IAAAb,EAAkB,SAAS,EAAE,YAAY,CAACI,GAAmB,WAAW,IAAO;AAAA,EAAA,GAC9E,CAACA,GAAmBJ,CAAiB,CAAC,GAGvC,gBAAAc,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,sBACtBC,GAAY,EAAA;AAAA,IACb,gBAAAJ,EAACK,GAAA,EAAsB,QAAQ,KAAK,gBAAe,OAAM,iBAAgB,UACvE,UAAA;AAAA,MAAC,gBAAAH,EAAAI,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,YAAU;AAAA,UACV,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAU;AAAA,UACV,KAAKC,EAAc;AAAA,QAAA;AAAA,MAAA,GAEvB;AAAA,MACA,gBAAAR;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,UAAU;AAAA,UACV,cAAa;AAAA,UACb,aAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAgB;AAAA,UAEhB,UAAA;AAAA,YAAA,gBAAAP,EAACQ,GAAK,EAAA,WAAU,YAAW,QAAO,WAAU,UAE5C,8CAAA;AAAA,YACA,gBAAAR;AAAA,cAACS;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,SAASpB;AAAA,gBACT,OAAOF;AAAA,gBACP,UAAUO;AAAA,gBACV,eAAe;AAAA,cAAA;AAAA,YACjB;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -33,7 +33,7 @@ const q = () => {
|
|
|
33
33
|
!r && /* @__PURE__ */ t(o, { $gutterX: 0.5, $gapX: 1, $flexRowGapX: 0.5, children: [
|
|
34
34
|
/* @__PURE__ */ e(u, { width: 108, height: 16, color: _().colors.BLACK }),
|
|
35
35
|
/* @__PURE__ */ t(o, { $flexDirection: "row", $alignItems: "center", children: [
|
|
36
|
-
/* @__PURE__ */ e(s, { $renderAs: "ub3-bold", $color: "BLACK_T_60", children: "4.
|
|
36
|
+
/* @__PURE__ */ e(s, { $renderAs: "ub3-bold", $color: "BLACK_T_60", children: "4.9+ Rating on" }),
|
|
37
37
|
/* @__PURE__ */ e($, { withLoader: !0, src: T.STAR_WITH_GREEN_FILL, width: 20, height: 20 }),
|
|
38
38
|
/* @__PURE__ */ e(s, { $renderAs: "ub3-bold", $color: "BLACK_T_60", children: "Trustpilot" })
|
|
39
39
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/features/trial-session/left-panel/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport CuemathLogo from '../../../assets/line-icons/icons/cuemath-logo';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport StudentAVPanel from '../comps/av-panels/student-av-panel/student-av-panel';\nimport TeacherAVPanel from '../comps/av-panels/teacher-av-panel/teacher-av-panel';\nimport Cues from '../comps/cue-tips/cues';\nimport Tips from '../comps/cue-tips/tips';\nimport NavigationBar from '../comps/navigation-bar';\nimport Solutions from '../comps/solutions';\nimport { useTrialSessionContext } from '../context/use-trial-session-context';\nimport {\n STUDENT_LEFT_PANEL_MAX_WIDTH,\n TEACHER_LEFT_PANEL_MAX_WIDTH,\n TrialPageId,\n} from '../trial-session-constants';\nimport * as Styled from './left-panel-styled';\n\nconst LeftPanel: React.FC = () => {\n const { isTeacher, slideConfig, worksheetNavigationPanel, questionsRatingPanel } =\n useTrialSessionContext();\n const { cues = [], dos = [], donts = [], renderAVIn, id, solutions } = slideConfig || {};\n\n if (!isTeacher && renderAVIn !== 'left') {\n return null;\n }\n\n return (\n <Styled.Container\n $maxWidth={isTeacher ? TEACHER_LEFT_PANEL_MAX_WIDTH : STUDENT_LEFT_PANEL_MAX_WIDTH}\n >\n {renderAVIn === 'left' && (\n <FlexView\n $width=\"100%\"\n $flexDirection={isTeacher ? 'row' : 'column'}\n $gutterX={isTeacher ? 0.25 : 0.5}\n $gapX={isTeacher ? 0.25 : 0.5}\n $flexGapX={isTeacher ? 0.25 : 0.5}\n >\n {!isTeacher && (\n <FlexView $gutterX={0.5} $gapX={1} $flexRowGapX={0.5}>\n <CuemathLogo width={108} height={16} color={getTheme().colors.BLACK} />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n 4.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/features/trial-session/left-panel/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ILLUSTRATIONS } from '../../../assets/illustrations/illustrations';\nimport CuemathLogo from '../../../assets/line-icons/icons/cuemath-logo';\nimport Image from '../../ui/image/image';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport { getTheme } from '../../ui/theme/get-theme';\nimport StudentAVPanel from '../comps/av-panels/student-av-panel/student-av-panel';\nimport TeacherAVPanel from '../comps/av-panels/teacher-av-panel/teacher-av-panel';\nimport Cues from '../comps/cue-tips/cues';\nimport Tips from '../comps/cue-tips/tips';\nimport NavigationBar from '../comps/navigation-bar';\nimport Solutions from '../comps/solutions';\nimport { useTrialSessionContext } from '../context/use-trial-session-context';\nimport {\n STUDENT_LEFT_PANEL_MAX_WIDTH,\n TEACHER_LEFT_PANEL_MAX_WIDTH,\n TrialPageId,\n} from '../trial-session-constants';\nimport * as Styled from './left-panel-styled';\n\nconst LeftPanel: React.FC = () => {\n const { isTeacher, slideConfig, worksheetNavigationPanel, questionsRatingPanel } =\n useTrialSessionContext();\n const { cues = [], dos = [], donts = [], renderAVIn, id, solutions } = slideConfig || {};\n\n if (!isTeacher && renderAVIn !== 'left') {\n return null;\n }\n\n return (\n <Styled.Container\n $maxWidth={isTeacher ? TEACHER_LEFT_PANEL_MAX_WIDTH : STUDENT_LEFT_PANEL_MAX_WIDTH}\n >\n {renderAVIn === 'left' && (\n <FlexView\n $width=\"100%\"\n $flexDirection={isTeacher ? 'row' : 'column'}\n $gutterX={isTeacher ? 0.25 : 0.5}\n $gapX={isTeacher ? 0.25 : 0.5}\n $flexGapX={isTeacher ? 0.25 : 0.5}\n >\n {!isTeacher && (\n <FlexView $gutterX={0.5} $gapX={1} $flexRowGapX={0.5}>\n <CuemathLogo width={108} height={16} color={getTheme().colors.BLACK} />\n <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n 4.9+ Rating on\n </Text>\n <Image withLoader src={ILLUSTRATIONS.STAR_WITH_GREEN_FILL} width={20} height={20} />\n <Text $renderAs=\"ub3-bold\" $color=\"BLACK_T_60\">\n Trustpilot\n </Text>\n </FlexView>\n </FlexView>\n )}\n <FlexView $width={isTeacher ? 'calc(50% - 2px)' : '100%'}>\n <TeacherAVPanel />\n </FlexView>\n <FlexView $width={isTeacher ? 'calc(50% - 2px)' : '100%'}>\n <StudentAVPanel insideLeftPanel />\n </FlexView>\n </FlexView>\n )}\n {isTeacher && (\n <>\n <Styled.ContentWrapper\n $background=\"WHITE_3\"\n $justifyContent={renderAVIn === 'left' ? 'flex-start' : 'center'}\n >\n <FlexView $gutterX={0.75} $gapX={1.5} $flexGapX={1.5}>\n {cues.length > 0 && <Cues cues={cues} />}\n {solutions && solutions.length > 0 && <Solutions solutions={solutions} />}\n {dos.length + donts.length > 0 && <Tips dos={dos} donts={donts} />}\n {id === TrialPageId.LEARNING_WORKSHEET && questionsRatingPanel}\n </FlexView>\n </Styled.ContentWrapper>\n {id === TrialPageId.LEARNING_WORKSHEET && worksheetNavigationPanel ? (\n worksheetNavigationPanel\n ) : (\n <NavigationBar />\n )}\n </>\n )}\n </Styled.Container>\n );\n};\n\nexport default LeftPanel;\n"],"names":["LeftPanel","isTeacher","slideConfig","worksheetNavigationPanel","questionsRatingPanel","useTrialSessionContext","cues","dos","donts","renderAVIn","id","solutions","jsxs","Styled.Container","TEACHER_LEFT_PANEL_MAX_WIDTH","STUDENT_LEFT_PANEL_MAX_WIDTH","FlexView","jsx","CuemathLogo","getTheme","Text","Image","ILLUSTRATIONS","TeacherAVPanel","StudentAVPanel","Fragment","Styled.ContentWrapper","Cues","Solutions","Tips","TrialPageId","NavigationBar"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAMA,IAAsB,MAAM;AAChC,QAAM,EAAE,WAAAC,GAAW,aAAAC,GAAa,0BAAAC,GAA0B,sBAAAC,EAAA,IACxDC,KACI,EAAE,MAAAC,IAAO,CAAA,GAAI,KAAAC,IAAM,CAAC,GAAG,OAAAC,IAAQ,IAAI,YAAAC,GAAY,IAAAC,GAAI,WAAAC,MAAcT,KAAe,CAAA;AAElF,SAAA,CAACD,KAAaQ,MAAe,SACxB,OAIP,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWZ,IAAYa,IAA+BC;AAAA,MAErD,UAAA;AAAA,QAAAN,MAAe,UACd,gBAAAG;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,gBAAgBf,IAAY,QAAQ;AAAA,YACpC,UAAUA,IAAY,OAAO;AAAA,YAC7B,OAAOA,IAAY,OAAO;AAAA,YAC1B,WAAWA,IAAY,OAAO;AAAA,YAE7B,UAAA;AAAA,cAAC,CAAAA,uBACCe,GAAS,EAAA,UAAU,KAAK,OAAO,GAAG,cAAc,KAC/C,UAAA;AAAA,gBAAC,gBAAAC,EAAAC,GAAA,EAAY,OAAO,KAAK,QAAQ,IAAI,OAAOC,EAAA,EAAW,OAAO,MAAO,CAAA;AAAA,gBACpE,gBAAAP,EAAAI,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,kBAAA,gBAAAC,EAACG,GAAK,EAAA,WAAU,YAAW,QAAO,cAAa,UAE/C,kBAAA;AAAA,kBACA,gBAAAH,EAACI,GAAM,EAAA,YAAU,IAAC,KAAKC,EAAc,sBAAsB,OAAO,IAAI,QAAQ,GAAI,CAAA;AAAA,oCACjFF,GAAK,EAAA,WAAU,YAAW,QAAO,cAAa,UAE/C,cAAA;AAAA,gBAAA,GACF;AAAA,cAAA,GACF;AAAA,cAEF,gBAAAH,EAACD,KAAS,QAAQf,IAAY,oBAAoB,QAChD,UAAA,gBAAAgB,EAACM,KAAe,EAClB,CAAA;AAAA,cACA,gBAAAN,EAACD,GAAS,EAAA,QAAQf,IAAY,oBAAoB,QAChD,UAAC,gBAAAgB,EAAAO,GAAA,EAAe,iBAAe,GAAA,CAAC,EAClC,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QAEDvB,KAEG,gBAAAW,EAAAa,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAR;AAAA,YAACS;AAAAA,YAAA;AAAA,cACC,aAAY;AAAA,cACZ,iBAAiBjB,MAAe,SAAS,eAAe;AAAA,cAExD,4BAACO,GAAS,EAAA,UAAU,MAAM,OAAO,KAAK,WAAW,KAC9C,UAAA;AAAA,gBAAAV,EAAK,SAAS,KAAM,gBAAAW,EAAAU,GAAA,EAAK,MAAArB,GAAY;AAAA,gBACrCK,KAAaA,EAAU,SAAS,KAAK,gBAAAM,EAACW,KAAU,WAAAjB,GAAsB;AAAA,gBACtEJ,EAAI,SAASC,EAAM,SAAS,KAAM,gBAAAS,EAAAY,GAAA,EAAK,KAAAtB,GAAU,OAAAC,GAAc;AAAA,gBAC/DE,MAAOoB,EAAY,sBAAsB1B;AAAA,cAAA,GAC5C;AAAA,YAAA;AAAA,UACF;AAAA,UACCM,MAAOoB,EAAY,sBAAsB3B,IACxCA,sBAEC4B,GAAc,EAAA;AAAA,QAAA,GAEnB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1,18 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
({ $itemSpacing: e }) => `
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: row;
|
|
6
|
-
flex-wrap: wrap;
|
|
7
|
-
${e ? `gap: ${e}px;` : ""}
|
|
8
|
-
`
|
|
9
|
-
), i = p.div(({ theme: e, $numColumns: r }) => `
|
|
1
|
+
import r from "styled-components";
|
|
2
|
+
const p = r.div(({ theme: t, $numColumns: e }) => `
|
|
10
3
|
display: flex;
|
|
11
4
|
align-items: center;
|
|
12
|
-
flex-basis: calc((100% - ${
|
|
5
|
+
flex-basis: calc((100% - ${t.layout.gutter * 1.5 * (e - 1)}px)/${e});
|
|
13
6
|
`);
|
|
14
7
|
export {
|
|
15
|
-
|
|
16
|
-
i as CheckboxOptionWrapper
|
|
8
|
+
p as CheckboxOptionWrapper
|
|
17
9
|
};
|
|
18
10
|
//# sourceMappingURL=checkbox-input-list-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-input-list-styled.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\
|
|
1
|
+
{"version":3,"file":"checkbox-input-list-styled.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\ninterface ICheckboxOptionProps {\n $numColumns: number;\n}\n\nconst CheckboxOptionWrapper = styled.div<ICheckboxOptionProps>(({ theme, $numColumns }) => {\n return `\n display: flex;\n align-items: center;\n flex-basis: calc((100% - ${theme.layout.gutter * 1.5 * ($numColumns - 1)}px)/${$numColumns});\n `;\n});\n\nexport { CheckboxOptionWrapper };\n"],"names":["CheckboxOptionWrapper","styled","theme","$numColumns"],"mappings":";AAMA,MAAMA,IAAwBC,EAAO,IAA0B,CAAC,EAAE,OAAAC,GAAO,aAAAC,QAChE;AAAA;AAAA;AAAA,+BAGsBD,EAAM,OAAO,SAAS,OAAOC,IAAc,EAAE,OAAOA,CAAW;AAAA,GAE7F;"}
|
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
2
|
+
import { useMemo as $, useCallback as w } from "react";
|
|
3
|
+
import I from "../../arrow-tooltip/arrow-tooltip.js";
|
|
4
|
+
import O from "../../layout/flex-view.js";
|
|
5
|
+
import v from "../checkbox-input/checkbox-input.js";
|
|
6
|
+
import { CheckboxOptionWrapper as A } from "./checkbox-input-list-styled.js";
|
|
7
|
+
const L = (a) => {
|
|
7
8
|
const {
|
|
8
9
|
size: h,
|
|
9
|
-
value:
|
|
10
|
+
value: o,
|
|
10
11
|
options: d,
|
|
11
|
-
disabled:
|
|
12
|
+
disabled: l,
|
|
12
13
|
renderAs: u,
|
|
13
|
-
numColumns:
|
|
14
|
-
|
|
15
|
-
indeterminate:
|
|
14
|
+
numColumns: f,
|
|
15
|
+
optionFlexGap: x,
|
|
16
|
+
indeterminate: C,
|
|
16
17
|
visibleOnCheck: b,
|
|
17
18
|
maximumSelection: e,
|
|
18
19
|
onChange: i
|
|
19
|
-
} = a,
|
|
20
|
-
() => !!(e && e > 1 &&
|
|
21
|
-
[e,
|
|
22
|
-
), k =
|
|
23
|
-
(t,
|
|
24
|
-
|
|
20
|
+
} = a, s = $(
|
|
21
|
+
() => !!(e && e > 1 && o.length >= e),
|
|
22
|
+
[e, o.length]
|
|
23
|
+
), k = w(
|
|
24
|
+
(t, n) => {
|
|
25
|
+
n ? e === 1 ? i([t]) : (!s || !e) && i([...o, t]) : i(o.filter((p) => p !== t));
|
|
25
26
|
},
|
|
26
|
-
[e, i,
|
|
27
|
+
[e, i, s, o]
|
|
27
28
|
);
|
|
28
|
-
return /* @__PURE__ */ r(
|
|
29
|
-
const { id:
|
|
30
|
-
return /* @__PURE__ */ r(A, { $numColumns:
|
|
31
|
-
|
|
29
|
+
return /* @__PURE__ */ r(O, { $flexDirection: "row", $flexGap: x, $flexWrap: !0, children: d.map((t) => {
|
|
30
|
+
const { id: n, label: p } = t, c = o.includes(n), m = s && !c, g = (l == null ? void 0 : l.includes(n)) || m;
|
|
31
|
+
return /* @__PURE__ */ r(A, { $numColumns: f ?? 1, children: /* @__PURE__ */ r(
|
|
32
|
+
I,
|
|
32
33
|
{
|
|
33
34
|
renderAs: "primary",
|
|
34
35
|
position: "top",
|
|
@@ -36,23 +37,23 @@ const S = (a) => {
|
|
|
36
37
|
hidden: !m,
|
|
37
38
|
zIndex: 2,
|
|
38
39
|
children: /* @__PURE__ */ r(
|
|
39
|
-
|
|
40
|
+
v,
|
|
40
41
|
{
|
|
41
|
-
value:
|
|
42
|
+
value: n,
|
|
42
43
|
size: h,
|
|
43
44
|
label: p,
|
|
44
|
-
checked:
|
|
45
|
+
checked: c,
|
|
45
46
|
renderAs: u,
|
|
46
47
|
disabled: g,
|
|
47
48
|
onChange: k,
|
|
48
|
-
indeterminate:
|
|
49
|
+
indeterminate: C,
|
|
49
50
|
visibleOnCheck: b
|
|
50
51
|
}
|
|
51
52
|
)
|
|
52
53
|
}
|
|
53
|
-
) },
|
|
54
|
+
) }, n);
|
|
54
55
|
}) });
|
|
55
|
-
}, W =
|
|
56
|
+
}, W = L;
|
|
56
57
|
export {
|
|
57
58
|
W as default
|
|
58
59
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-input-list.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list.tsx"],"sourcesContent":["import type { ICheckboxInputProps } from './checkbox-input-list-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport ArrowTooltip from '../../arrow-tooltip/arrow-tooltip';\nimport CheckboxOption from '../checkbox-input/checkbox-input';\nimport * as Styled from './checkbox-input-list-styled';\n\nconst CheckboxInputList = <IDType extends string | number>(props: ICheckboxInputProps<IDType>) => {\n const {\n size,\n value,\n options,\n disabled,\n renderAs,\n numColumns,\n
|
|
1
|
+
{"version":3,"file":"checkbox-input-list.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list.tsx"],"sourcesContent":["import type { ICheckboxInputProps } from './checkbox-input-list-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport ArrowTooltip from '../../arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../layout/flex-view';\nimport CheckboxOption from '../checkbox-input/checkbox-input';\nimport * as Styled from './checkbox-input-list-styled';\n\nconst CheckboxInputList = <IDType extends string | number>(props: ICheckboxInputProps<IDType>) => {\n const {\n size,\n value,\n options,\n disabled,\n renderAs,\n numColumns,\n optionFlexGap,\n indeterminate,\n visibleOnCheck,\n maximumSelection,\n onChange,\n } = props;\n\n const reachedMaxLength = useMemo(\n () => !!(maximumSelection && maximumSelection > 1 && value.length >= maximumSelection),\n [maximumSelection, value.length],\n );\n\n const handleOnChange = useCallback(\n (selectedValue: IDType, selected: boolean) => {\n if (!selected) {\n onChange(value.filter(val => val !== selectedValue));\n } else {\n if (maximumSelection === 1) {\n onChange([selectedValue]);\n } else if (!reachedMaxLength || !maximumSelection) {\n onChange([...value, selectedValue]);\n }\n }\n },\n [maximumSelection, onChange, reachedMaxLength, value],\n );\n\n return (\n <FlexView $flexDirection=\"row\" $flexGap={optionFlexGap} $flexWrap>\n {options.map(option => {\n const { id, label } = option;\n\n const checked = value.includes(id);\n const showTooltip = reachedMaxLength && !checked;\n const disableCheck = disabled?.includes(id) || showTooltip;\n\n return (\n <Styled.CheckboxOptionWrapper key={id} $numColumns={numColumns ?? 1}>\n <ArrowTooltip\n renderAs=\"primary\"\n position=\"top\"\n tooltipItem={`${maximumSelection} options already selected`}\n hidden={!showTooltip}\n zIndex={2}\n >\n <CheckboxOption<IDType>\n value={id}\n size={size}\n label={label}\n checked={checked}\n renderAs={renderAs}\n disabled={disableCheck}\n onChange={handleOnChange}\n indeterminate={indeterminate} //* Took this name from Mui.\n visibleOnCheck={visibleOnCheck}\n />\n </ArrowTooltip>\n </Styled.CheckboxOptionWrapper>\n );\n })}\n </FlexView>\n );\n};\n\nexport default CheckboxInputList;\n"],"names":["CheckboxInputList","props","size","value","options","disabled","renderAs","numColumns","optionFlexGap","indeterminate","visibleOnCheck","maximumSelection","onChange","reachedMaxLength","useMemo","handleOnChange","useCallback","selectedValue","selected","val","jsx","FlexView","option","id","label","checked","showTooltip","disableCheck","Styled.CheckboxOptionWrapper","ArrowTooltip","CheckboxOption","CheckboxInputList$1"],"mappings":";;;;;;AASA,MAAMA,IAAoB,CAAiCC,MAAuC;AAC1F,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAX,GAEEY,IAAmBC;AAAA,IACvB,MAAM,CAAC,EAAEH,KAAoBA,IAAmB,KAAKR,EAAM,UAAUQ;AAAA,IACrE,CAACA,GAAkBR,EAAM,MAAM;AAAA,EAAA,GAG3BY,IAAiBC;AAAA,IACrB,CAACC,GAAuBC,MAAsB;AAC5C,MAAKA,IAGCP,MAAqB,IACdC,EAAA,CAACK,CAAa,CAAC,KACf,CAACJ,KAAoB,CAACF,MAC/BC,EAAS,CAAC,GAAGT,GAAOc,CAAa,CAAC,IALpCL,EAAST,EAAM,OAAO,CAAOgB,MAAAA,MAAQF,CAAa,CAAC;AAAA,IAQvD;AAAA,IACA,CAACN,GAAkBC,GAAUC,GAAkBV,CAAK;AAAA,EAAA;AAIpD,SAAA,gBAAAiB,EAACC,GAAS,EAAA,gBAAe,OAAM,UAAUb,GAAe,WAAS,IAC9D,UAAQJ,EAAA,IAAI,CAAUkB,MAAA;AACf,UAAA,EAAE,IAAAC,GAAI,OAAAC,EAAU,IAAAF,GAEhBG,IAAUtB,EAAM,SAASoB,CAAE,GAC3BG,IAAcb,KAAoB,CAACY,GACnCE,KAAetB,KAAA,gBAAAA,EAAU,SAASkB,OAAOG;AAE/C,6BACGE,GAAA,EAAsC,aAAarB,KAAc,GAChE,UAAA,gBAAAa;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,aAAa,GAAGlB,CAAgB;AAAA,QAChC,QAAQ,CAACe;AAAA,QACT,QAAQ;AAAA,QAER,UAAA,gBAAAN;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,OAAOP;AAAA,YACP,MAAArB;AAAA,YACA,OAAAsB;AAAA,YACA,SAAAC;AAAA,YACA,UAAAnB;AAAA,YACA,UAAUqB;AAAA,YACV,UAAUZ;AAAA,YACV,eAAAN;AAAA,YACA,gBAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,KAlB+Ba,CAoBnC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ,GAEAQ,IAAe/B;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1172,7 +1172,7 @@ declare interface ICheckboxInputProps<IDType> {
|
|
|
1172
1172
|
visibleOnCheck?: boolean;
|
|
1173
1173
|
indeterminate?: boolean;
|
|
1174
1174
|
numColumns?: number;
|
|
1175
|
-
|
|
1175
|
+
optionFlexGap?: number;
|
|
1176
1176
|
renderAs?: TCheckboxVariants;
|
|
1177
1177
|
maximumSelection?: number;
|
|
1178
1178
|
size?: TCheckboxSizes;
|