@cuemath/leap 3.0.19-gs1 → 3.0.20-j
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/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js +15 -11
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js.map +1 -1
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js +51 -49
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map +1 -1
- package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js +38 -38
- package/dist/features/chapters-v2/chapter-details/block-sections/block-section-view.js.map +1 -1
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections.js +62 -55
- package/dist/features/chapters-v2/chapter-details/block-sections/block-sections.js.map +1 -1
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js +5 -6
- package/dist/features/chapters-v2/comps/node-card/node-card-styled.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import t from "styled-components";
|
|
2
|
-
import
|
|
3
|
-
const n = t(
|
|
2
|
+
import r from "../../../ui/layout/flex-view.js";
|
|
3
|
+
const n = t(r)`
|
|
4
4
|
position: relative;
|
|
5
|
-
`, s = t(
|
|
5
|
+
`, s = t(r)`
|
|
6
6
|
position: absolute;
|
|
7
7
|
border-radius: 100%;
|
|
8
8
|
top: 216px;
|
|
9
9
|
border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
|
|
10
|
-
`, p = t(
|
|
10
|
+
`, p = t(r)`
|
|
11
11
|
opacity: ${({ $isVisible: o }) => o ? 1 : 0};
|
|
12
12
|
transition: opacity 0.5s ease-in-out;
|
|
13
|
-
`,
|
|
13
|
+
`, a = t.div`
|
|
14
14
|
position: relative;
|
|
15
15
|
`;
|
|
16
|
-
t(
|
|
16
|
+
t(r)`
|
|
17
17
|
position: relative;
|
|
18
18
|
overflow: hidden;
|
|
19
19
|
background: ${({ theme: o }) => o.colors.BLACK_2};
|
|
@@ -30,11 +30,14 @@ t.div`
|
|
|
30
30
|
height: 100%;
|
|
31
31
|
z-index: 2;
|
|
32
32
|
`;
|
|
33
|
-
const
|
|
33
|
+
const l = t(r)`
|
|
34
34
|
position: absolute;
|
|
35
35
|
top: 55%;
|
|
36
36
|
right: 24px;
|
|
37
|
-
`, c = t(
|
|
37
|
+
`, c = t(r)`
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: 642px;
|
|
40
|
+
`, d = t(r)`
|
|
38
41
|
position: absolute;
|
|
39
42
|
top: 55%;
|
|
40
43
|
left: 24px;
|
|
@@ -49,8 +52,9 @@ export {
|
|
|
49
52
|
s as CircularStepContainer,
|
|
50
53
|
n as Container,
|
|
51
54
|
p as ContentWrapper,
|
|
52
|
-
|
|
53
|
-
a as
|
|
54
|
-
|
|
55
|
+
c as FooterWrapper,
|
|
56
|
+
a as InputContainer,
|
|
57
|
+
l as NextButtonWrapper,
|
|
58
|
+
d as PrevButtonWrapper
|
|
55
59
|
};
|
|
56
60
|
//# sourceMappingURL=circular-step-wrapper-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n position: absolute;\n border-radius: 100%;\n top: 216px;\n border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n isVerticallyCentered?: boolean;\n}>`\n position: relative;\n overflow: hidden;\n background: ${({ theme }) => theme.colors.BLACK_2};\n border-radius: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n position: absolute;\n top: 55%;\n right: 24px;\n`;\nconst PrevButtonWrapper = styled(FlexView)`\n position: absolute;\n top: 55%;\n left: 24px;\n button {\n background-color: ${({ theme }) => theme.colors.BLACK_1};\n svg {\n color: ${({ theme }) => theme.colors.WHITE};\n }\n }\n`;\n\nexport {\n NextButtonWrapper,\n PrevButtonWrapper,\n InputContainer,\n Container,\n CircularStepContainer,\n CircularProgressContainer,\n ContentWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n position: absolute;\n border-radius: 100%;\n top: 216px;\n border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n isVerticallyCentered?: boolean;\n}>`\n position: relative;\n overflow: hidden;\n background: ${({ theme }) => theme.colors.BLACK_2};\n border-radius: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n position: absolute;\n top: 55%;\n right: 24px;\n`;\n\nconst FooterWrapper = styled(FlexView)`\n position: absolute;\n top: 642px;\n`;\n\nconst PrevButtonWrapper = styled(FlexView)`\n position: absolute;\n top: 55%;\n left: 24px;\n button {\n background-color: ${({ theme }) => theme.colors.BLACK_1};\n svg {\n color: ${({ theme }) => theme.colors.WHITE};\n }\n }\n`;\n\nexport {\n NextButtonWrapper,\n PrevButtonWrapper,\n InputContainer,\n Container,\n CircularStepContainer,\n CircularProgressContainer,\n ContentWrapper,\n FooterWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","FooterWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMnCO,IAAgBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK/BQ,IAAoBT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKjB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,eAE5C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;"}
|
|
@@ -1,53 +1,54 @@
|
|
|
1
1
|
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { memo as
|
|
2
|
+
import { memo as E, forwardRef as H, useRef as c, useState as g, useCallback as j, useEffect as B, useImperativeHandle as T, useLayoutEffect as F } from "react";
|
|
3
3
|
import P from "../../../../assets/line-icons/icons/back2.js";
|
|
4
4
|
import z from "../../../../assets/line-icons/icons/next2.js";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { Container as
|
|
12
|
-
const
|
|
5
|
+
import M from "../../../ui/animated-arc/animated-arc.js";
|
|
6
|
+
import C from "../../../ui/buttons/icon-button/icon-button.js";
|
|
7
|
+
import N from "../../../ui/layout/flex-view.js";
|
|
8
|
+
import O from "../../../ui/lottie-animation/lottie-animation.js";
|
|
9
|
+
import V from "../../../ui/separator/separator.js";
|
|
10
|
+
import X from "../../../ui/text/text.js";
|
|
11
|
+
import { Container as D, CircularStepContainer as K, ContentWrapper as Y, InputContainer as _, FooterWrapper as q, PrevButtonWrapper as G, NextButtonWrapper as J } from "./circular-step-wrapper-styled.js";
|
|
12
|
+
const Q = {
|
|
13
13
|
autoplay: !1,
|
|
14
14
|
loop: !1,
|
|
15
15
|
renderer: "canvas",
|
|
16
16
|
rendererSettings: {
|
|
17
17
|
preserveAspectRatio: "xMidYMin slice"
|
|
18
18
|
}
|
|
19
|
-
},
|
|
19
|
+
}, U = H(
|
|
20
20
|
({
|
|
21
|
-
children:
|
|
22
|
-
onGoBack:
|
|
23
|
-
onNext:
|
|
21
|
+
children: y,
|
|
22
|
+
onGoBack: I,
|
|
23
|
+
onNext: x,
|
|
24
24
|
label: a,
|
|
25
|
-
showNext:
|
|
26
|
-
showPrevious:
|
|
25
|
+
showNext: A,
|
|
26
|
+
showPrevious: S,
|
|
27
27
|
animation: r,
|
|
28
|
-
introFrames:
|
|
29
|
-
outroFrames:
|
|
28
|
+
introFrames: w,
|
|
29
|
+
outroFrames: R,
|
|
30
30
|
isNextLoading: s,
|
|
31
|
-
progressAngle: l
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
progressAngle: l,
|
|
32
|
+
footerElement: u
|
|
33
|
+
}, W) => {
|
|
34
|
+
const t = c(null), o = c(null), [m, k] = g(), [v, d] = g(!1), i = c(null), L = j(() => {
|
|
35
|
+
r && t.current && (t.current.playSegments(w, !0), d(!0));
|
|
35
36
|
}, [r]);
|
|
36
37
|
return B(() => () => {
|
|
37
38
|
i.current && clearTimeout(i.current);
|
|
38
|
-
}, [r]), T(
|
|
39
|
-
playOutroAndFadeOut: async () => new Promise((
|
|
40
|
-
var f,
|
|
41
|
-
const
|
|
42
|
-
var
|
|
43
|
-
|
|
39
|
+
}, [r]), T(W, () => ({
|
|
40
|
+
playOutroAndFadeOut: async () => new Promise((b) => {
|
|
41
|
+
var f, h;
|
|
42
|
+
const p = () => {
|
|
43
|
+
var $;
|
|
44
|
+
b(), ($ = t.current) == null || $.removeEventListener("complete", p);
|
|
44
45
|
};
|
|
45
|
-
(f = t.current) == null || f.playSegments(
|
|
46
|
+
(f = t.current) == null || f.playSegments(R, !0), i.current = setTimeout(() => d(!1), 400), (h = t.current) == null || h.addEventListener("complete", p);
|
|
46
47
|
})
|
|
47
|
-
})),
|
|
48
|
+
})), F(() => {
|
|
48
49
|
o.current && k(o.current.offsetHeight);
|
|
49
50
|
}, []), /* @__PURE__ */ n(
|
|
50
|
-
|
|
51
|
+
D,
|
|
51
52
|
{
|
|
52
53
|
$flex: 1,
|
|
53
54
|
$flexDirection: "column",
|
|
@@ -57,19 +58,19 @@ const G = {
|
|
|
57
58
|
$height: "100%",
|
|
58
59
|
ref: o,
|
|
59
60
|
children: [
|
|
60
|
-
|
|
61
|
-
|
|
61
|
+
m && /* @__PURE__ */ e(
|
|
62
|
+
O,
|
|
62
63
|
{
|
|
63
64
|
width: 1280,
|
|
64
|
-
height:
|
|
65
|
+
height: m,
|
|
65
66
|
src: r,
|
|
66
67
|
ref: t,
|
|
67
68
|
onRender: L,
|
|
68
|
-
settings:
|
|
69
|
+
settings: Q
|
|
69
70
|
}
|
|
70
71
|
),
|
|
71
72
|
/* @__PURE__ */ n(
|
|
72
|
-
|
|
73
|
+
K,
|
|
73
74
|
{
|
|
74
75
|
$width: 400,
|
|
75
76
|
$height: 400,
|
|
@@ -78,7 +79,7 @@ const G = {
|
|
|
78
79
|
$justifyContent: "center",
|
|
79
80
|
children: [
|
|
80
81
|
l && /* @__PURE__ */ e(
|
|
81
|
-
|
|
82
|
+
M,
|
|
82
83
|
{
|
|
83
84
|
radius: 200,
|
|
84
85
|
strokeWidth: 2,
|
|
@@ -88,35 +89,36 @@ const G = {
|
|
|
88
89
|
duration: 1
|
|
89
90
|
}
|
|
90
91
|
),
|
|
91
|
-
/* @__PURE__ */ n(
|
|
92
|
-
a && /* @__PURE__ */ n(
|
|
93
|
-
/* @__PURE__ */ e(
|
|
94
|
-
/* @__PURE__ */ e(
|
|
92
|
+
/* @__PURE__ */ n(Y, { $isVisible: v, $width: "100%", children: [
|
|
93
|
+
a && /* @__PURE__ */ n(N, { $gutterX: 3.5, children: [
|
|
94
|
+
/* @__PURE__ */ e(X, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: a }),
|
|
95
|
+
/* @__PURE__ */ e(V, { heightX: 1 })
|
|
95
96
|
] }),
|
|
96
|
-
/* @__PURE__ */ e(
|
|
97
|
+
/* @__PURE__ */ e(_, { children: y })
|
|
97
98
|
] })
|
|
98
99
|
]
|
|
99
100
|
}
|
|
100
101
|
),
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
u && /* @__PURE__ */ e(q, { $alignItems: "center", $justifyContent: "center", children: u }),
|
|
103
|
+
S && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
|
|
104
|
+
C,
|
|
103
105
|
{
|
|
104
106
|
Icon: P,
|
|
105
107
|
renderAs: "secondary-dark",
|
|
106
108
|
analyticsLabel: "Prev",
|
|
107
|
-
onClick:
|
|
109
|
+
onClick: I,
|
|
108
110
|
disabled: s,
|
|
109
111
|
size: "small"
|
|
110
112
|
}
|
|
111
113
|
) }),
|
|
112
|
-
|
|
113
|
-
|
|
114
|
+
A && /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(
|
|
115
|
+
C,
|
|
114
116
|
{
|
|
115
117
|
size: "small",
|
|
116
118
|
Icon: z,
|
|
117
119
|
renderAs: "secondary-dark",
|
|
118
120
|
analyticsLabel: "Next",
|
|
119
|
-
onClick:
|
|
121
|
+
onClick: x,
|
|
120
122
|
busy: s
|
|
121
123
|
}
|
|
122
124
|
) })
|
|
@@ -124,8 +126,8 @@ const G = {
|
|
|
124
126
|
}
|
|
125
127
|
);
|
|
126
128
|
}
|
|
127
|
-
),
|
|
129
|
+
), ue = E(U);
|
|
128
130
|
export {
|
|
129
|
-
|
|
131
|
+
ue as default
|
|
130
132
|
};
|
|
131
133
|
//# sourceMappingURL=circular-step-wrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n memo,\n type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n rendererSettings: {\n preserveAspectRatio: 'xMidYMin slice',\n },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n (\n {\n children,\n onGoBack,\n onNext,\n label,\n showNext,\n showPrevious,\n animation,\n introFrames,\n outroFrames,\n isNextLoading,\n progressAngle,\n },\n ref: Ref<ICircularStepRef>,\n ) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerHeight, setContainerHeight] = useState<number | undefined>();\n const [showContent, setShowContent] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const onLottieRender = useCallback(() => {\n if (animation && animationRef.current) {\n animationRef.current.playSegments(introFrames, true);\n setShowContent(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [animation]);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [animation]);\n\n useImperativeHandle(ref, () => ({\n playOutroAndFadeOut: async () => {\n return new Promise<void>(resolve => {\n const handleComplete = () => {\n resolve();\n animationRef.current?.removeEventListener('complete', handleComplete);\n };\n\n animationRef.current?.playSegments(outroFrames, true);\n timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n animationRef.current?.addEventListener('complete', handleComplete);\n });\n },\n }));\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setContainerHeight(containerRef.current.offsetHeight);\n }\n }, []);\n\n return (\n <Styled.Container\n $flex={1}\n $flexDirection=\"column\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n ref={containerRef}\n >\n {containerHeight && (\n <LottieAnimation\n width={1280}\n height={containerHeight}\n src={animation}\n ref={animationRef}\n onRender={onLottieRender}\n settings={animationSettings}\n />\n )}\n <Styled.CircularStepContainer\n $width={400}\n $height={400}\n $background=\"REAL_BLACK\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {progressAngle && (\n <AnimatedArc\n radius={200}\n strokeWidth={2}\n color=\"WHITE\"\n targetAngle={progressAngle}\n mode=\"fade\"\n duration={1}\n />\n )}\n <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n {label && (\n <FlexView $gutterX={3.5}>\n <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n {label}\n </Text>\n <Separator heightX={1} />\n </FlexView>\n )}\n <Styled.InputContainer>{children}</Styled.InputContainer>\n </Styled.ContentWrapper>\n </Styled.CircularStepContainer>\n {showPrevious && (\n <Styled.PrevButtonWrapper>\n <IconButton\n Icon={Back2Icon}\n renderAs=\"secondary-dark\"\n analyticsLabel=\"Prev\"\n onClick={onGoBack}\n disabled={isNextLoading}\n size=\"small\"\n />\n </Styled.PrevButtonWrapper>\n )}\n {showNext && (\n <Styled.NextButtonWrapper>\n <IconButton\n size=\"small\"\n Icon={Next2Icon}\n renderAs=\"secondary-dark\"\n analyticsLabel=\"Next\"\n onClick={onNext}\n busy={isNextLoading}\n />\n </Styled.NextButtonWrapper>\n )}\n </Styled.Container>\n );\n },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":";;;;;;;;;;;AAyBA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,kBAAkB;AAAA,IAChB,qBAAqB;AAAA,EACvB;AACF,GAEMC,IAAsBC;AAAA,EAC1B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAeD,EAAuB,IAAI,GAC1C,CAACE,GAAiBC,CAAkB,IAAIC,EAA6B,GACrE,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAK,GAC9CG,IAAaP,EAA8B,IAAI,GAE/CQ,IAAiBC,EAAY,MAAM;AACnC,
|
|
1
|
+
{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState,\n memo,\n type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport AnimatedArc from '../../../ui/animated-arc/animated-arc';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n rendererSettings: {\n preserveAspectRatio: 'xMidYMin slice',\n },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n (\n {\n children,\n onGoBack,\n onNext,\n label,\n showNext,\n showPrevious,\n animation,\n introFrames,\n outroFrames,\n isNextLoading,\n progressAngle,\n footerElement,\n },\n ref: Ref<ICircularStepRef>,\n ) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerHeight, setContainerHeight] = useState<number | undefined>();\n const [showContent, setShowContent] = useState(false);\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n const onLottieRender = useCallback(() => {\n if (animation && animationRef.current) {\n animationRef.current.playSegments(introFrames, true);\n setShowContent(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [animation]);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, [animation]);\n\n useImperativeHandle(ref, () => ({\n playOutroAndFadeOut: async () => {\n return new Promise<void>(resolve => {\n const handleComplete = () => {\n resolve();\n animationRef.current?.removeEventListener('complete', handleComplete);\n };\n\n animationRef.current?.playSegments(outroFrames, true);\n timeoutRef.current = setTimeout(() => setShowContent(false), 400);\n animationRef.current?.addEventListener('complete', handleComplete);\n });\n },\n }));\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setContainerHeight(containerRef.current.offsetHeight);\n }\n }, []);\n\n return (\n <Styled.Container\n $flex={1}\n $flexDirection=\"column\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n ref={containerRef}\n >\n {containerHeight && (\n <LottieAnimation\n width={1280}\n height={containerHeight}\n src={animation}\n ref={animationRef}\n onRender={onLottieRender}\n settings={animationSettings}\n />\n )}\n <Styled.CircularStepContainer\n $width={400}\n $height={400}\n $background=\"REAL_BLACK\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {progressAngle && (\n <AnimatedArc\n radius={200}\n strokeWidth={2}\n color=\"WHITE\"\n targetAngle={progressAngle}\n mode=\"fade\"\n duration={1}\n />\n )}\n <Styled.ContentWrapper $isVisible={showContent} $width=\"100%\">\n {label && (\n <FlexView $gutterX={3.5}>\n <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n {label}\n </Text>\n <Separator heightX={1} />\n </FlexView>\n )}\n <Styled.InputContainer>{children}</Styled.InputContainer>\n </Styled.ContentWrapper>\n </Styled.CircularStepContainer>\n {footerElement && (\n <Styled.FooterWrapper $alignItems=\"center\" $justifyContent=\"center\">\n {footerElement}\n </Styled.FooterWrapper>\n )}\n {showPrevious && (\n <Styled.PrevButtonWrapper>\n <IconButton\n Icon={Back2Icon}\n renderAs=\"secondary-dark\"\n analyticsLabel=\"Prev\"\n onClick={onGoBack}\n disabled={isNextLoading}\n size=\"small\"\n />\n </Styled.PrevButtonWrapper>\n )}\n {showNext && (\n <Styled.NextButtonWrapper>\n <IconButton\n size=\"small\"\n Icon={Next2Icon}\n renderAs=\"secondary-dark\"\n analyticsLabel=\"Next\"\n onClick={onNext}\n busy={isNextLoading}\n />\n </Styled.NextButtonWrapper>\n )}\n </Styled.Container>\n );\n },\n);\n\nexport default memo(CircularStepWrapper);\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","progressAngle","footerElement","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","timeoutRef","onLottieRender","useCallback","useEffect","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","AnimatedArc","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.FooterWrapper","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","circularStepWrapper","memo"],"mappings":"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"}
|
|
@@ -1,106 +1,106 @@
|
|
|
1
1
|
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import S from "../../../../assets/line-icons/icons/more-vertical.js";
|
|
3
|
+
import I from "../../../../assets/line-icons/icons/skip.js";
|
|
4
|
+
import O from "../../../ui/context-menu/context-menu.js";
|
|
5
5
|
import c from "../../../ui/layout/flex-view.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import u from "../../../ui/text/text.js";
|
|
7
|
+
import T from "../../comps/node-card/node-card.js";
|
|
8
8
|
import j from "../../comps/node-card/node-menu-options/node-menu-options.js";
|
|
9
9
|
import { BLOCK_NAME as k } from "../../constants/block-constants.js";
|
|
10
10
|
import { getSheetNLessonCount as y } from "../../utils/index.js";
|
|
11
|
-
import { BlockSectionWrapper as
|
|
11
|
+
import { BlockSectionWrapper as M, BlockOptionsWrapper as B, BlockSheetContainer as K } from "./block-sections-styled.js";
|
|
12
12
|
const q = ({
|
|
13
13
|
userType: o,
|
|
14
|
-
imageHue:
|
|
15
|
-
blockData:
|
|
16
|
-
lessonIdx:
|
|
17
|
-
isLastBlock:
|
|
14
|
+
imageHue: m,
|
|
15
|
+
blockData: l,
|
|
16
|
+
lessonIdx: s,
|
|
17
|
+
isLastBlock: C,
|
|
18
18
|
isGoalBlock: r,
|
|
19
|
-
onNodeAttempt:
|
|
19
|
+
onNodeAttempt: g,
|
|
20
20
|
onNodeAssignAsHomework: x,
|
|
21
21
|
onNodeMarkAsDone: _,
|
|
22
|
-
onNodeReattempt:
|
|
23
|
-
onNodeReview:
|
|
22
|
+
onNodeReattempt: b,
|
|
23
|
+
onNodeReview: E,
|
|
24
24
|
onNodeView: N,
|
|
25
25
|
onBlockSkipUnskip: i
|
|
26
26
|
}) => {
|
|
27
|
-
const { block_type:
|
|
27
|
+
const { block_type: p, name: a, sheets: d, permissions: w } = l, { can_skip: h, can_un_skip: e } = w, f = k[p], A = y(e, d.length, r, s), L = [
|
|
28
28
|
{
|
|
29
29
|
id: "node-card-skip",
|
|
30
30
|
label: e ? "Revert 'Skip'" : "Skip",
|
|
31
|
-
icon:
|
|
31
|
+
icon: I,
|
|
32
32
|
disabled: !1,
|
|
33
|
-
onClick: () => i == null ? void 0 : i(
|
|
33
|
+
onClick: () => i == null ? void 0 : i(l, h)
|
|
34
34
|
}
|
|
35
35
|
];
|
|
36
36
|
return o === "STUDENT" && e ? null : /* @__PURE__ */ t(
|
|
37
|
-
|
|
37
|
+
M,
|
|
38
38
|
{
|
|
39
|
-
$background: r ?
|
|
39
|
+
$background: r ? `${m}_1` : "WHITE_1",
|
|
40
40
|
$gutterX: 1,
|
|
41
|
-
$lastBlock:
|
|
41
|
+
$lastBlock: C,
|
|
42
42
|
$flexGap: 12,
|
|
43
43
|
children: /* @__PURE__ */ n(c, { $flexGap: 12, children: [
|
|
44
44
|
/* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "space-between", children: [
|
|
45
45
|
/* @__PURE__ */ n(c, { $opacity: e ? 0.5 : 1, children: [
|
|
46
46
|
/* @__PURE__ */ n(
|
|
47
|
-
|
|
47
|
+
u,
|
|
48
48
|
{
|
|
49
49
|
$renderAs: "ac4",
|
|
50
50
|
$color: "BLACK_T_60",
|
|
51
51
|
$textDecoration: e ? "line-through" : "none",
|
|
52
52
|
children: [
|
|
53
|
-
|
|
53
|
+
f === "Puzzles" ? a : f,
|
|
54
54
|
" ",
|
|
55
55
|
A
|
|
56
56
|
]
|
|
57
57
|
}
|
|
58
58
|
),
|
|
59
|
-
!!r && !!
|
|
60
|
-
|
|
59
|
+
!!r && !!s && /* @__PURE__ */ t(
|
|
60
|
+
u,
|
|
61
61
|
{
|
|
62
62
|
$renderAs: "ab2-bold",
|
|
63
63
|
$color: "BLACK_1",
|
|
64
64
|
$textDecoration: e ? "line-through" : "none",
|
|
65
|
-
children:
|
|
65
|
+
children: a
|
|
66
66
|
}
|
|
67
67
|
)
|
|
68
68
|
] }),
|
|
69
|
-
o === "TEACHER" && (
|
|
70
|
-
|
|
69
|
+
o === "TEACHER" && (h || e) && /* @__PURE__ */ t(
|
|
70
|
+
O,
|
|
71
71
|
{
|
|
72
72
|
targetElement: /* @__PURE__ */ t(
|
|
73
|
-
|
|
73
|
+
B,
|
|
74
74
|
{
|
|
75
75
|
$width: 20,
|
|
76
76
|
$height: 20,
|
|
77
77
|
$justifyContent: "center",
|
|
78
78
|
$alignItems: "center",
|
|
79
|
-
children: /* @__PURE__ */ t(
|
|
79
|
+
children: /* @__PURE__ */ t(S, { width: 16, height: 16 })
|
|
80
80
|
}
|
|
81
81
|
),
|
|
82
|
-
menuElement: /* @__PURE__ */ t(j, { options:
|
|
82
|
+
menuElement: /* @__PURE__ */ t(j, { options: L }),
|
|
83
83
|
menuOffset: 5,
|
|
84
84
|
menuZIndex: 4
|
|
85
85
|
}
|
|
86
86
|
)
|
|
87
87
|
] }),
|
|
88
|
-
/* @__PURE__ */ t(
|
|
89
|
-
|
|
88
|
+
/* @__PURE__ */ t(K, { $opacity: e ? 0.5 : 1, children: d.map(($) => /* @__PURE__ */ t(
|
|
89
|
+
T,
|
|
90
90
|
{
|
|
91
|
-
imageHue:
|
|
91
|
+
imageHue: m || "BLUE",
|
|
92
92
|
userType: o,
|
|
93
|
-
nodeData:
|
|
94
|
-
blockType:
|
|
93
|
+
nodeData: $,
|
|
94
|
+
blockType: p,
|
|
95
95
|
isSkipped: e,
|
|
96
|
-
onNodeAttempt:
|
|
96
|
+
onNodeAttempt: g,
|
|
97
97
|
onNodeAssignAsHomework: x,
|
|
98
98
|
onNodeMarkAsDone: _,
|
|
99
|
-
onNodeReattempt:
|
|
100
|
-
onNodeReview:
|
|
99
|
+
onNodeReattempt: b,
|
|
100
|
+
onNodeReview: E,
|
|
101
101
|
onNodeView: N
|
|
102
102
|
},
|
|
103
|
-
|
|
103
|
+
$.node_id
|
|
104
104
|
)) })
|
|
105
105
|
] })
|
|
106
106
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block-section-view.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-section-view.tsx"],"sourcesContent":["import type { INodeMenuOption } from '../../comps/node-card/node-menu-options/node-menu-options-types';\nimport type { IBlockSectionProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport MoreVerticalIcon from '../../../../assets/line-icons/icons/more-vertical';\nimport SkipIcon from '../../../../assets/line-icons/icons/skip';\nimport ContextMenu from '../../../ui/context-menu/context-menu';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport NodeCard from '../../comps/node-card/node-card';\nimport NodeMenuOptions from '../../comps/node-card/node-menu-options/node-menu-options';\nimport { BLOCK_NAME } from '../../constants/block-constants';\nimport { getSheetNLessonCount } from '../../utils';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSectionView: FC<IBlockSectionProps> = ({\n userType,\n imageHue,\n blockData,\n lessonIdx,\n isLastBlock,\n isGoalBlock,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n}) => {\n const { block_type: blockType, name, sheets, permissions } = blockData;\n\n const { can_skip: canSkip, can_un_skip: canUnskip } = permissions;\n const blockName = BLOCK_NAME[blockType];\n\n const sheetNLessonCount = getSheetNLessonCount(canUnskip, sheets.length, isGoalBlock, lessonIdx);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-skip',\n label: canUnskip ? `Revert 'Skip'` : 'Skip',\n icon: SkipIcon,\n disabled: false,\n onClick: () => onBlockSkipUnskip?.(blockData, canSkip),\n },\n ];\n\n if (userType === 'STUDENT' && canUnskip) return null;\n\n return (\n <Styled.BlockSectionWrapper\n $background={isGoalBlock ? `
|
|
1
|
+
{"version":3,"file":"block-section-view.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-section-view.tsx"],"sourcesContent":["import type { INodeMenuOption } from '../../comps/node-card/node-menu-options/node-menu-options-types';\nimport type { IBlockSectionProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport MoreVerticalIcon from '../../../../assets/line-icons/icons/more-vertical';\nimport SkipIcon from '../../../../assets/line-icons/icons/skip';\nimport ContextMenu from '../../../ui/context-menu/context-menu';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport NodeCard from '../../comps/node-card/node-card';\nimport NodeMenuOptions from '../../comps/node-card/node-menu-options/node-menu-options';\nimport { BLOCK_NAME } from '../../constants/block-constants';\nimport { getSheetNLessonCount } from '../../utils';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSectionView: FC<IBlockSectionProps> = ({\n userType,\n imageHue,\n blockData,\n lessonIdx,\n isLastBlock,\n isGoalBlock,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n}) => {\n const { block_type: blockType, name, sheets, permissions } = blockData;\n\n const { can_skip: canSkip, can_un_skip: canUnskip } = permissions;\n const blockName = BLOCK_NAME[blockType];\n\n const sheetNLessonCount = getSheetNLessonCount(canUnskip, sheets.length, isGoalBlock, lessonIdx);\n\n const menuOptions: INodeMenuOption[] = [\n {\n id: 'node-card-skip',\n label: canUnskip ? `Revert 'Skip'` : 'Skip',\n icon: SkipIcon,\n disabled: false,\n onClick: () => onBlockSkipUnskip?.(blockData, canSkip),\n },\n ];\n\n if (userType === 'STUDENT' && canUnskip) return null;\n\n return (\n <Styled.BlockSectionWrapper\n $background={isGoalBlock ? `${imageHue}_1` : 'WHITE_1'}\n $gutterX={1}\n $lastBlock={isLastBlock}\n $flexGap={12}\n >\n <FlexView $flexGap={12}>\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"space-between\">\n <FlexView $opacity={canUnskip ? 0.5 : 1}>\n <Text\n $renderAs=\"ac4\"\n $color=\"BLACK_T_60\"\n $textDecoration={canUnskip ? 'line-through' : 'none'}\n >\n {blockName === 'Puzzles' ? name : blockName} {sheetNLessonCount}\n </Text>\n\n {!!isGoalBlock && !!lessonIdx && (\n <Text\n $renderAs=\"ab2-bold\"\n $color=\"BLACK_1\"\n $textDecoration={canUnskip ? 'line-through' : 'none'}\n >\n {name}\n </Text>\n )}\n </FlexView>\n\n {userType === 'TEACHER' && (canSkip || canUnskip) && (\n <ContextMenu\n targetElement={\n <Styled.BlockOptionsWrapper\n $width={20}\n $height={20}\n $justifyContent=\"center\"\n $alignItems=\"center\"\n >\n <MoreVerticalIcon width={16} height={16} />\n </Styled.BlockOptionsWrapper>\n }\n menuElement={<NodeMenuOptions options={menuOptions} />}\n menuOffset={5}\n menuZIndex={4}\n />\n )}\n </FlexView>\n\n <Styled.BlockSheetContainer $opacity={canUnskip ? 0.5 : 1}>\n {sheets.map(nodeData => (\n <NodeCard\n key={nodeData.node_id}\n imageHue={imageHue || 'BLUE'}\n userType={userType}\n nodeData={nodeData}\n blockType={blockType}\n isSkipped={canUnskip}\n onNodeAttempt={onNodeAttempt}\n onNodeAssignAsHomework={onNodeAssignAsHomework}\n onNodeMarkAsDone={onNodeMarkAsDone}\n onNodeReattempt={onNodeReattempt}\n onNodeReview={onNodeReview}\n onNodeView={onNodeView}\n />\n ))}\n </Styled.BlockSheetContainer>\n </FlexView>\n </Styled.BlockSectionWrapper>\n );\n};\n\nexport default BlockSectionView;\n"],"names":["BlockSectionView","userType","imageHue","blockData","lessonIdx","isLastBlock","isGoalBlock","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","blockType","name","sheets","permissions","canSkip","canUnskip","blockName","BLOCK_NAME","sheetNLessonCount","getSheetNLessonCount","menuOptions","SkipIcon","jsx","Styled.BlockSectionWrapper","jsxs","FlexView","Text","ContextMenu","Styled.BlockOptionsWrapper","MoreVerticalIcon","NodeMenuOptions","Styled.BlockSheetContainer","nodeData","NodeCard"],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsxs as w, jsx as
|
|
1
|
+
import { jsxs as w, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { memo as I, useMemo as x } from "react";
|
|
3
|
-
import
|
|
3
|
+
import _ from "./block-section-view.js";
|
|
4
4
|
import { ChapterDetailsWrapper as R } from "./block-sections-styled.js";
|
|
5
|
-
const L = I((
|
|
5
|
+
const L = I((g) => {
|
|
6
6
|
const {
|
|
7
|
-
blocks:
|
|
8
|
-
imageHue:
|
|
7
|
+
blocks: t,
|
|
8
|
+
imageHue: s,
|
|
9
9
|
userType: l,
|
|
10
|
-
coreBlocksRef:
|
|
10
|
+
coreBlocksRef: h,
|
|
11
11
|
onNodeAttempt: r,
|
|
12
12
|
onNodeAssignAsHomework: i,
|
|
13
13
|
onNodeMarkAsDone: c,
|
|
@@ -15,60 +15,67 @@ const L = I((_) => {
|
|
|
15
15
|
onNodeReview: d,
|
|
16
16
|
onNodeView: k,
|
|
17
17
|
onBlockSkipUnskip: m
|
|
18
|
-
} =
|
|
18
|
+
} = g;
|
|
19
19
|
let u = 0;
|
|
20
|
-
const { goalBlocks: a, nonGoalBlocks:
|
|
21
|
-
() =>
|
|
20
|
+
const { goalBlocks: a, nonGoalBlocks: B } = x(
|
|
21
|
+
() => t.reduce(
|
|
22
22
|
(o, e) => (e.section_code === "GOALS" || e.section_code === "READINESS" ? o.goalBlocks.push(e) : o.nonGoalBlocks.push(e), o),
|
|
23
23
|
{ goalBlocks: [], nonGoalBlocks: [] }
|
|
24
24
|
),
|
|
25
|
-
[
|
|
25
|
+
[t]
|
|
26
|
+
);
|
|
27
|
+
return /* @__PURE__ */ w(
|
|
28
|
+
R,
|
|
29
|
+
{
|
|
30
|
+
$width: "100%",
|
|
31
|
+
$background: B.length ? "WHITE_1" : `${s}_1`,
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ n("div", { ref: h, children: a.map((o, e) => {
|
|
34
|
+
const { block_type: A, block_id: N, permissions: G } = o;
|
|
35
|
+
let f = 0;
|
|
36
|
+
const S = e === a.length - 1;
|
|
37
|
+
return A === "GOAL" && (G.can_un_skip || (u += 1), f = u), /* @__PURE__ */ n(
|
|
38
|
+
_,
|
|
39
|
+
{
|
|
40
|
+
blockData: o,
|
|
41
|
+
userType: l,
|
|
42
|
+
isLastBlock: S,
|
|
43
|
+
lessonIdx: f,
|
|
44
|
+
imageHue: s,
|
|
45
|
+
isGoalBlock: !0,
|
|
46
|
+
onNodeAttempt: r,
|
|
47
|
+
onNodeAssignAsHomework: i,
|
|
48
|
+
onNodeMarkAsDone: c,
|
|
49
|
+
onNodeReattempt: p,
|
|
50
|
+
onNodeReview: d,
|
|
51
|
+
onNodeView: k,
|
|
52
|
+
onBlockSkipUnskip: m
|
|
53
|
+
},
|
|
54
|
+
N
|
|
55
|
+
);
|
|
56
|
+
}) }),
|
|
57
|
+
B.map((o) => {
|
|
58
|
+
const { block_id: e } = o;
|
|
59
|
+
return /* @__PURE__ */ n(
|
|
60
|
+
_,
|
|
61
|
+
{
|
|
62
|
+
blockData: o,
|
|
63
|
+
userType: l,
|
|
64
|
+
imageHue: s,
|
|
65
|
+
onNodeAttempt: r,
|
|
66
|
+
onNodeAssignAsHomework: i,
|
|
67
|
+
onNodeMarkAsDone: c,
|
|
68
|
+
onNodeReattempt: p,
|
|
69
|
+
onNodeReview: d,
|
|
70
|
+
onNodeView: k,
|
|
71
|
+
onBlockSkipUnskip: m
|
|
72
|
+
},
|
|
73
|
+
e
|
|
74
|
+
);
|
|
75
|
+
})
|
|
76
|
+
]
|
|
77
|
+
}
|
|
26
78
|
);
|
|
27
|
-
return /* @__PURE__ */ w(R, { $width: "100%", $background: "WHITE_3", children: [
|
|
28
|
-
/* @__PURE__ */ s("div", { ref: g, children: a.map((o, e) => {
|
|
29
|
-
const { block_type: A, block_id: N, permissions: G } = o;
|
|
30
|
-
let B = 0;
|
|
31
|
-
const S = e === a.length - 1;
|
|
32
|
-
return A === "GOAL" && (G.can_un_skip || (u += 1), B = u), /* @__PURE__ */ s(
|
|
33
|
-
f,
|
|
34
|
-
{
|
|
35
|
-
blockData: o,
|
|
36
|
-
userType: l,
|
|
37
|
-
isLastBlock: S,
|
|
38
|
-
lessonIdx: B,
|
|
39
|
-
imageHue: t,
|
|
40
|
-
isGoalBlock: !0,
|
|
41
|
-
onNodeAttempt: r,
|
|
42
|
-
onNodeAssignAsHomework: i,
|
|
43
|
-
onNodeMarkAsDone: c,
|
|
44
|
-
onNodeReattempt: p,
|
|
45
|
-
onNodeReview: d,
|
|
46
|
-
onNodeView: k,
|
|
47
|
-
onBlockSkipUnskip: m
|
|
48
|
-
},
|
|
49
|
-
N
|
|
50
|
-
);
|
|
51
|
-
}) }),
|
|
52
|
-
h.map((o) => {
|
|
53
|
-
const { block_id: e } = o;
|
|
54
|
-
return /* @__PURE__ */ s(
|
|
55
|
-
f,
|
|
56
|
-
{
|
|
57
|
-
blockData: o,
|
|
58
|
-
userType: l,
|
|
59
|
-
imageHue: t,
|
|
60
|
-
onNodeAttempt: r,
|
|
61
|
-
onNodeAssignAsHomework: i,
|
|
62
|
-
onNodeMarkAsDone: c,
|
|
63
|
-
onNodeReattempt: p,
|
|
64
|
-
onNodeReview: d,
|
|
65
|
-
onNodeView: k,
|
|
66
|
-
onBlockSkipUnskip: m
|
|
67
|
-
},
|
|
68
|
-
e
|
|
69
|
-
);
|
|
70
|
-
})
|
|
71
|
-
] });
|
|
72
79
|
});
|
|
73
80
|
export {
|
|
74
81
|
L as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"block-sections.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-sections.tsx"],"sourcesContent":["import type { IBlockSectionsProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport BlockSectionView from './block-section-view';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSections: FC<IBlockSectionsProps> = memo(props => {\n const {\n blocks,\n imageHue,\n userType,\n coreBlocksRef,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n } = props;\n\n let lessonCount = 0;\n\n const { goalBlocks, nonGoalBlocks } = useMemo(\n () =>\n blocks.reduce(\n (acc, block) => {\n if (block.section_code === 'GOALS' || block.section_code === 'READINESS') {\n acc.goalBlocks.push(block);\n } else {\n acc.nonGoalBlocks.push(block);\n }\n\n return acc;\n },\n { goalBlocks: [] as typeof blocks, nonGoalBlocks: [] as typeof blocks },\n ),\n [blocks],\n );\n\n return (\n <Styled.ChapterDetailsWrapper
|
|
1
|
+
{"version":3,"file":"block-sections.js","sources":["../../../../../src/features/chapters-v2/chapter-details/block-sections/block-sections.tsx"],"sourcesContent":["import type { IBlockSectionsProps } from './block-sections-types';\nimport type { FC } from 'react';\n\nimport { memo, useMemo } from 'react';\n\nimport BlockSectionView from './block-section-view';\nimport * as Styled from './block-sections-styled';\n\nconst BlockSections: FC<IBlockSectionsProps> = memo(props => {\n const {\n blocks,\n imageHue,\n userType,\n coreBlocksRef,\n onNodeAttempt,\n onNodeAssignAsHomework,\n onNodeMarkAsDone,\n onNodeReattempt,\n onNodeReview,\n onNodeView,\n onBlockSkipUnskip,\n } = props;\n\n let lessonCount = 0;\n\n const { goalBlocks, nonGoalBlocks } = useMemo(\n () =>\n blocks.reduce(\n (acc, block) => {\n if (block.section_code === 'GOALS' || block.section_code === 'READINESS') {\n acc.goalBlocks.push(block);\n } else {\n acc.nonGoalBlocks.push(block);\n }\n\n return acc;\n },\n { goalBlocks: [] as typeof blocks, nonGoalBlocks: [] as typeof blocks },\n ),\n [blocks],\n );\n\n return (\n <Styled.ChapterDetailsWrapper\n $width=\"100%\"\n $background={!nonGoalBlocks.length ? `${imageHue}_1` : 'WHITE_1'}\n >\n <div ref={coreBlocksRef}>\n {goalBlocks.map((blockData, idx) => {\n const { block_type: blockType, block_id: blockId, permissions } = blockData;\n let lessonIdx = 0;\n\n const isLastBlock = idx === goalBlocks.length - 1;\n\n if (blockType === 'GOAL') {\n if (!permissions.can_un_skip) {\n lessonCount += 1;\n }\n\n lessonIdx = lessonCount;\n }\n\n return (\n <BlockSectionView\n blockData={blockData}\n userType={userType}\n isLastBlock={isLastBlock}\n key={blockId}\n lessonIdx={lessonIdx}\n imageHue={imageHue}\n isGoalBlock\n onNodeAttempt={onNodeAttempt}\n onNodeAssignAsHomework={onNodeAssignAsHomework}\n onNodeMarkAsDone={onNodeMarkAsDone}\n onNodeReattempt={onNodeReattempt}\n onNodeReview={onNodeReview}\n onNodeView={onNodeView}\n onBlockSkipUnskip={onBlockSkipUnskip}\n />\n );\n })}\n </div>\n\n {nonGoalBlocks.map(blockData => {\n const { block_id: blockId } = blockData;\n\n return (\n <BlockSectionView\n key={blockId}\n blockData={blockData}\n userType={userType}\n imageHue={imageHue}\n onNodeAttempt={onNodeAttempt}\n onNodeAssignAsHomework={onNodeAssignAsHomework}\n onNodeMarkAsDone={onNodeMarkAsDone}\n onNodeReattempt={onNodeReattempt}\n onNodeReview={onNodeReview}\n onNodeView={onNodeView}\n onBlockSkipUnskip={onBlockSkipUnskip}\n />\n );\n })}\n </Styled.ChapterDetailsWrapper>\n );\n});\n\nexport default BlockSections;\n"],"names":["BlockSections","memo","props","blocks","imageHue","userType","coreBlocksRef","onNodeAttempt","onNodeAssignAsHomework","onNodeMarkAsDone","onNodeReattempt","onNodeReview","onNodeView","onBlockSkipUnskip","lessonCount","goalBlocks","nonGoalBlocks","useMemo","acc","block","jsxs","Styled.ChapterDetailsWrapper","jsx","blockData","idx","blockType","blockId","permissions","lessonIdx","isLastBlock","BlockSectionView"],"mappings":";;;;AAQM,MAAAA,IAAyCC,EAAK,CAASC,MAAA;AACrD,QAAA;AAAA,IACJ,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,mBAAAC;AAAA,EACE,IAAAX;AAEJ,MAAIY,IAAc;AAEZ,QAAA,EAAE,YAAAC,GAAY,eAAAC,EAAA,IAAkBC;AAAA,IACpC,MACEd,EAAO;AAAA,MACL,CAACe,GAAKC,OACAA,EAAM,iBAAiB,WAAWA,EAAM,iBAAiB,cACvDD,EAAA,WAAW,KAAKC,CAAK,IAErBD,EAAA,cAAc,KAAKC,CAAK,GAGvBD;AAAA,MAET,EAAE,YAAY,CAAA,GAAqB,eAAe,GAAoB;AAAA,IACxE;AAAA,IACF,CAACf,CAAM;AAAA,EAAA;AAIP,SAAA,gBAAAiB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,aAAcL,EAAc,SAA2B,YAAlB,GAAGZ,CAAQ;AAAA,MAEhD,UAAA;AAAA,QAAA,gBAAAkB,EAAC,SAAI,KAAKhB,GACP,YAAW,IAAI,CAACiB,GAAWC,MAAQ;AAClC,gBAAM,EAAE,YAAYC,GAAW,UAAUC,GAAS,aAAAC,EAAgB,IAAAJ;AAClE,cAAIK,IAAY;AAEV,gBAAAC,IAAcL,MAAQT,EAAW,SAAS;AAEhD,iBAAIU,MAAc,WACXE,EAAY,gBACAb,KAAA,IAGLc,IAAAd,IAIZ,gBAAAQ;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,aAAAwB;AAAA,cAEA,WAAAD;AAAA,cACA,UAAAxB;AAAA,cACA,aAAW;AAAA,cACX,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAaV,CAAA,GACH;AAAA,QAECV,EAAc,IAAI,CAAaO,MAAA;AACxB,gBAAA,EAAE,UAAUG,EAAY,IAAAH;AAG5B,iBAAA,gBAAAD;AAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,WAAAP;AAAA,cACA,UAAAlB;AAAA,cACA,UAAAD;AAAA,cACA,eAAAG;AAAA,cACA,wBAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,iBAAAC;AAAA,cACA,cAAAC;AAAA,cACA,YAAAC;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,YAVKa;AAAA,UAAA;AAAA,QAWP,CAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -4,12 +4,11 @@ import s from "../../../../assets/line-icons/icons/lock2.js";
|
|
|
4
4
|
import e from "../../../ui/layout/flex-view.js";
|
|
5
5
|
import d from "../../../ui/text/text.js";
|
|
6
6
|
const b = t(e)(({ theme: o, $disabled: r }) => {
|
|
7
|
-
const { BLACK: i, BLACK_T_15: n
|
|
7
|
+
const { BLACK: i, BLACK_T_15: n } = o.colors;
|
|
8
8
|
return `
|
|
9
9
|
cursor: ${r ? "not-allowed" : "pointer"};
|
|
10
10
|
position: relative;
|
|
11
11
|
border-image: linear-gradient(to right, ${n} 0%, ${n} 100%);
|
|
12
|
-
outline: 1px solid ${p};
|
|
13
12
|
|
|
14
13
|
.node-card-border {
|
|
15
14
|
position: absolute;
|
|
@@ -59,7 +58,7 @@ t(s)(({}) => `
|
|
|
59
58
|
width: 28px;
|
|
60
59
|
height: 28px;
|
|
61
60
|
`);
|
|
62
|
-
const
|
|
61
|
+
const w = t(e)(({
|
|
63
62
|
theme: o,
|
|
64
63
|
$paddingRight: r,
|
|
65
64
|
$paddingLeft: i
|
|
@@ -78,7 +77,7 @@ const W = t(e)(({
|
|
|
78
77
|
fill: ${p};
|
|
79
78
|
}
|
|
80
79
|
`;
|
|
81
|
-
}),
|
|
80
|
+
}), W = t(d)(() => `
|
|
82
81
|
display: -webkit-box;
|
|
83
82
|
-webkit-box-orient: vertical;
|
|
84
83
|
-webkit-line-clamp: 2;
|
|
@@ -111,11 +110,11 @@ const W = t(e)(({
|
|
|
111
110
|
`);
|
|
112
111
|
export {
|
|
113
112
|
f as IconWrapper,
|
|
114
|
-
|
|
113
|
+
w as InProgressIconWrapper,
|
|
115
114
|
b as NodeCardContainer,
|
|
116
115
|
$ as NodeCardContentWrapper,
|
|
117
116
|
m as NodeCardInfoWrapper,
|
|
118
|
-
|
|
117
|
+
W as NodeCardTitle,
|
|
119
118
|
k as NodeKebabMenuWrapper,
|
|
120
119
|
C as NodeMenuOptionsWrapper,
|
|
121
120
|
I as SheetTagWrapper,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n const { BLACK, BLACK_T_15
|
|
1
|
+
{"version":3,"file":"node-card-styled.js","sources":["../../../../../src/features/chapters-v2/comps/node-card/node-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport ImportantIcon from '../../../../assets/line-icons/icons/important';\nimport Lock2Icon from '../../../../assets/line-icons/icons/lock2';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\ninterface INodeCardContainer {\n $disabled: boolean;\n $isSheetLocked?: boolean;\n}\n\nconst NodeCardContainer = styled(FlexView)<INodeCardContainer>(({ theme, $disabled }) => {\n const { BLACK, BLACK_T_15 } = theme.colors;\n\n return `\n cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n position: relative;\n border-image: linear-gradient(to right, ${BLACK_T_15} 0%, ${BLACK_T_15} 100%);\n\n .node-card-border {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n width: 100%;\n height: 100%;\n pointer-events: none;\n background: transparent;\n }\n\n &:hover {\n ${\n !$disabled &&\n `\n outline: 1px solid ${BLACK};\n `\n } \n }\n `;\n});\n\nconst StyledImportantIcon = styled(ImportantIcon)(({ theme }) => {\n const { layout } = theme;\n\n return `\n width: ${layout.gutter * 0.75}px;\n height: ${layout.gutter * 0.75}px;\n position: absolute;\n top: -2.5px;\n right: -2.5px;\n `;\n});\n\ninterface INodeCardInfoWrapper {\n $bgImage: string;\n}\n\nconst NodeCardInfoWrapper = styled(FlexView)<INodeCardInfoWrapper>(({ $bgImage }) => {\n return `\n background-image: url(${$bgImage});\n\n & .context-menu {\n justify-self: flex-end;\n margin-left: auto;\n }\n `;\n});\n\nconst IconWrapper = styled(FlexView)`\n border-radius: 50%;\n`;\n\nconst NodeCardContentWrapper = styled(FlexView)(() => {\n return `\n position: relative;\n padding: 12px 8px 12px 12px;\n `;\n});\n\ninterface ISheetTagWrapper {\n $top?: number;\n $right?: number;\n}\n\nconst SheetTagWrapper = styled(FlexView)<ISheetTagWrapper>(({ $top, $right }) => {\n return `\n position: absolute;\n top: ${$top ?? 0}px;\n right: ${$right ?? 0}px;\n z-index: 3;\n`;\n});\n\nconst StyledLockIcon = styled(Lock2Icon)(({}) => {\n return `\n width: 28px;\n height: 28px;\n `;\n});\n\nconst InProgressIconWrapper = styled(FlexView)<{ $paddingRight: number; $paddingLeft: number }>(({\n theme,\n $paddingRight,\n $paddingLeft,\n}) => {\n const { BLACK_1, WHITE_1 } = theme.colors;\n\n return `\n position: absolute;\n top: -10px;\n right: -10px;\n padding: 0px;\n padding-left: ${$paddingLeft}px;\n padding-right: ${$paddingRight}px;\n background: ${BLACK_1};\n\n path {\n fill: ${WHITE_1};\n }\n `;\n});\n\nconst NodeCardTitle = styled(Text)(() => {\n return `\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n `;\n});\n\nconst NodeKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n return `\n cursor: pointer;\n \n &:hover {\n border-radius: 50%;\n background: ${theme.colors.WHITE_5}; \n }\n `;\n});\n\ninterface INodeOptionsMenuWrapper {\n $visible: boolean;\n}\n\nconst NodeMenuOptionsWrapper = styled(FlexView)<INodeOptionsMenuWrapper>(({ theme, $visible }) => {\n return `\n cursor: pointer;\n\n position: absolute;\n z-index: 6;\n top: calc(100% + 4px);\n left: 0;\n\n transform-origin: top;\n transform: scaleY(${$visible ? 1 : 0});\n opacity: ${$visible ? 1 : 0};\n transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n \n &:hover {\n border-radius: 50%;\n background: ${theme.colors.WHITE_5}; \n }\n `;\n});\n\nexport {\n NodeCardContainer,\n StyledImportantIcon,\n NodeCardInfoWrapper,\n IconWrapper,\n NodeCardContentWrapper,\n SheetTagWrapper,\n StyledLockIcon,\n InProgressIconWrapper,\n NodeCardTitle,\n NodeKebabMenuWrapper,\n NodeMenuOptionsWrapper,\n};\n"],"names":["NodeCardContainer","styled","FlexView","theme","$disabled","BLACK","BLACK_T_15","StyledImportantIcon","ImportantIcon","layout","NodeCardInfoWrapper","$bgImage","IconWrapper","NodeCardContentWrapper","SheetTagWrapper","$top","$right","Lock2Icon","InProgressIconWrapper","$paddingRight","$paddingLeft","BLACK_1","WHITE_1","NodeCardTitle","Text","NodeKebabMenuWrapper","NodeMenuOptionsWrapper","$visible"],"mappings":";;;;;AAYM,MAAAA,IAAoBC,EAAOC,CAAQ,EAAsB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACvF,QAAM,EAAE,OAAAC,GAAO,YAAAC,MAAeH,EAAM;AAE7B,SAAA;AAAA,cACKC,IAAY,gBAAgB,SAAS;AAAA;AAAA,8CAELE,CAAU,QAAQA,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAelE,CAACF,KACD;AAAA,+BACuBC,CAAK;AAAA,SAE9B;AAAA;AAAA;AAGN,CAAC,GAEKE,IAAsBN,EAAOO,CAAa,EAAE,CAAC,EAAE,OAAAL,QAAY;AACzD,QAAA,EAAE,QAAAM,EAAW,IAAAN;AAEZ,SAAA;AAAA,aACIM,EAAO,SAAS,IAAI;AAAA,cACnBA,EAAO,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAKlC,CAAC,GAMKC,IAAsBT,EAAOC,CAAQ,EAAwB,CAAC,EAAE,UAAAS,QAC7D;AAAA,4BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnC,GAEKC,IAAcX,EAAOC,CAAQ;AAAA;AAAA,GAI7BW,IAAyBZ,EAAOC,CAAQ,EAAE,MACvC;AAAA;AAAA;AAAA,GAIR,GAOKY,IAAkBb,EAAOC,CAAQ,EAAoB,CAAC,EAAE,MAAAa,GAAM,QAAAC,QAC3D;AAAA;AAAA,SAEAD,KAAQ,CAAC;AAAA,WACPC,KAAU,CAAC;AAAA;AAAA,CAGrB;AAEsBf,EAAOgB,CAAS,EAAE,CAAC,OACjC;AAAA;AAAA;AAAA,GAIR;AAED,MAAMC,IAAwBjB,EAAOC,CAAQ,EAAmD,CAAC;AAAA,EAC/F,OAAAC;AAAA,EACA,eAAAgB;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,SAAAC,MAAYnB,EAAM;AAE5B,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWiB,CAAY;AAAA,qBACXD,CAAa;AAAA,kBAChBE,CAAO;AAAA;AAAA;AAAA,cAGXC,CAAO;AAAA;AAAA;AAGrB,CAAC,GAEKC,IAAgBtB,EAAOuB,CAAI,EAAE,MAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAEKC,IAAuBxB,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QACxC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAMKuB,IAAyBzB,EAAOC,CAAQ,EAA2B,CAAC,EAAE,OAAAC,GAAO,UAAAwB,QAC1E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXxB,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC;"}
|
package/dist/index.d.ts
CHANGED