@cuemath/leap 3.2.22 → 3.2.23-j1
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/lottie/lottie.js +1 -1
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js +2 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-constants.js.map +1 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js +8 -8
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map +1 -1
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +82 -60
- package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +1 -1
- package/dist/features/ui/inputs/base-select-input/base-select-input.js +67 -77
- package/dist/features/ui/inputs/base-select-input/base-select-input.js.map +1 -1
- package/dist/features/ui/lottie-animation/lottie-animation.js +27 -24
- package/dist/features/ui/lottie-animation/lottie-animation.js.map +1 -1
- package/dist/index.d.ts +4 -83
- package/dist/index.js +438 -444
- package/dist/index.js.map +1 -1
- package/dist/node_modules/decode-uri-component/index.js.map +1 -0
- package/dist/node_modules/query-string/base.js +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/native.js +7 -0
- package/dist/node_modules/uuid/dist/esm-browser/native.js.map +1 -0
- package/dist/node_modules/uuid/dist/esm-browser/rng.js +3 -2
- package/dist/node_modules/uuid/dist/esm-browser/rng.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/stringify.js +6 -10
- package/dist/node_modules/uuid/dist/esm-browser/stringify.js.map +1 -1
- package/dist/node_modules/uuid/dist/esm-browser/v4.js +12 -9
- package/dist/node_modules/uuid/dist/esm-browser/v4.js.map +1 -1
- package/dist/static/animated-avatar.95f31960.json +1 -0
- package/dist/static/animated-avatar.c3a0fa98.json +1 -0
- package/package.json +1 -2
- package/dist/features/notification/notification.js +0 -129
- package/dist/features/notification/notification.js.map +0 -1
- package/dist/features/ui/carousal/carousal-styles.js +0 -45
- package/dist/features/ui/carousal/carousal-styles.js.map +0 -1
- package/dist/features/ui/carousal/carousal.js +0 -76
- package/dist/features/ui/carousal/carousal.js.map +0 -1
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation-styled.js +0 -9
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation-styled.js.map +0 -1
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation.js +0 -80
- package/dist/features/ui/dot-lottie-animations/dot-lottie-animation.js.map +0 -1
- package/dist/node_modules/@lottiefiles/dotlottie-web/dist/index.js +0 -1881
- package/dist/node_modules/@lottiefiles/dotlottie-web/dist/index.js.map +0 -1
- package/dist/node_modules/query-string/node_modules/decode-uri-component/index.js.map +0 -1
- package/dist/node_modules/uuid/dist/esm-browser/regex.js +0 -5
- package/dist/node_modules/uuid/dist/esm-browser/regex.js.map +0 -1
- package/dist/node_modules/uuid/dist/esm-browser/validate.js +0 -8
- package/dist/node_modules/uuid/dist/esm-browser/validate.js.map +0 -1
- /package/dist/node_modules/{query-string/node_modules/decode-uri-component → decode-uri-component}/index.js +0 -0
@@ -1,129 +0,0 @@
|
|
1
|
-
import { jsxs as w, jsx as l } from "react/jsx-runtime";
|
2
|
-
import { useEffect as e } from "react";
|
3
|
-
import x, { keyframes as A, css as I } from "styled-components";
|
4
|
-
import T from "../../assets/line-icons/icons/cross.js";
|
5
|
-
import W from "../ui/layout/flex-view.js";
|
6
|
-
import k from "../ui/text/text.js";
|
7
|
-
const C = ({ $position: r, $verticalDist: o }) => A`
|
8
|
-
${(r === "top-right" || r === "top-left") && `
|
9
|
-
0% {
|
10
|
-
top: 0;
|
11
|
-
}
|
12
|
-
100% {
|
13
|
-
top: ${o}px;
|
14
|
-
}
|
15
|
-
`};
|
16
|
-
${(r === "bottom-left" || r === "bottom-right") && `
|
17
|
-
0% {
|
18
|
-
bottom: 0;
|
19
|
-
}
|
20
|
-
100% {
|
21
|
-
bottom: ${o}px;
|
22
|
-
}
|
23
|
-
`};
|
24
|
-
`, E = ({ $position: r, $verticalDist: o, $horizontalDist: t }) => I`
|
25
|
-
${r === "top-right" && `
|
26
|
-
top: ${o}px;
|
27
|
-
right: ${t}px;
|
28
|
-
`};
|
29
|
-
${r === "top-left" && `
|
30
|
-
top: ${o}px;
|
31
|
-
left: ${t}px;
|
32
|
-
`};
|
33
|
-
${r === "bottom-left" && `
|
34
|
-
bottom: ${o}px;
|
35
|
-
left: ${t}px;
|
36
|
-
`};
|
37
|
-
${r === "bottom-right" && `
|
38
|
-
bottom: ${o}px;
|
39
|
-
right: ${t}px;
|
40
|
-
`};
|
41
|
-
`, m = x.div`
|
42
|
-
position: fixed;
|
43
|
-
width: 310px;
|
44
|
-
padding: ${({ $gap: r, $gutter: o }) => `${r}px ${o}px`};
|
45
|
-
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05);
|
46
|
-
border-radius: 16px;
|
47
|
-
${E};
|
48
|
-
animation: ${C} 0.5s ease-in;
|
49
|
-
z-index: 105;
|
50
|
-
background: ${({ $notificationTheme: r, theme: o }) => {
|
51
|
-
var t, p;
|
52
|
-
return r === "white" ? (t = o == null ? void 0 : o.colors) == null ? void 0 : t.WHITE : (p = o == null ? void 0 : o.colors) == null ? void 0 : p.BLACK;
|
53
|
-
}};
|
54
|
-
color: ${({ $notificationTheme: r, theme: o }) => {
|
55
|
-
var t, p;
|
56
|
-
return r === "white" ? (t = o == null ? void 0 : o.colors) == null ? void 0 : t.BLACK : (p = o == null ? void 0 : o.colors) == null ? void 0 : p.WHITE;
|
57
|
-
}};
|
58
|
-
`, B = x.div`
|
59
|
-
width: 48px;
|
60
|
-
height: 48px;
|
61
|
-
background: ${({ $src: r }) => `url(${r})`};
|
62
|
-
border-radius: 50%;
|
63
|
-
border: 2px solid #ffffff;
|
64
|
-
position: absolute;
|
65
|
-
bottom: 88%;
|
66
|
-
`, H = x(W)`
|
67
|
-
position: absolute;
|
68
|
-
top: -40px;
|
69
|
-
right: 0;
|
70
|
-
cursor: pointer;
|
71
|
-
`, K = x(k)`
|
72
|
-
white-space: pre-wrap;
|
73
|
-
`, L = ({
|
74
|
-
avatarUrl: r = null,
|
75
|
-
Component: o = null,
|
76
|
-
componentProps: t = {},
|
77
|
-
duration: p = null,
|
78
|
-
gap: f = 24,
|
79
|
-
gutter: u = 16,
|
80
|
-
hideNotification: c = () => null,
|
81
|
-
horizontalDist: $ = 50,
|
82
|
-
notificationTheme: s = "black",
|
83
|
-
position: i = "bottom-right",
|
84
|
-
showCloseIcon: b = !1,
|
85
|
-
text: d = null,
|
86
|
-
verticalDist: a = 60,
|
87
|
-
visible: n = !1
|
88
|
-
}) => (e(() => {
|
89
|
-
if (p && n) {
|
90
|
-
const g = setTimeout(() => {
|
91
|
-
c();
|
92
|
-
}, p * 1e3);
|
93
|
-
return () => {
|
94
|
-
clearTimeout(g);
|
95
|
-
};
|
96
|
-
}
|
97
|
-
return () => {
|
98
|
-
};
|
99
|
-
}, [p, c, n]), n ? /* @__PURE__ */ w(
|
100
|
-
m,
|
101
|
-
{
|
102
|
-
$gap: f,
|
103
|
-
$gutter: u,
|
104
|
-
$horizontalDist: $,
|
105
|
-
$notificationTheme: s,
|
106
|
-
$position: i,
|
107
|
-
$verticalDist: a,
|
108
|
-
children: [
|
109
|
-
b && /* @__PURE__ */ l(
|
110
|
-
H,
|
111
|
-
{
|
112
|
-
onClick: c,
|
113
|
-
$background: s === "white" ? "WHITE" : "BLACK",
|
114
|
-
$borderRadiusX: 10,
|
115
|
-
$gutter: 2,
|
116
|
-
$gap: 2,
|
117
|
-
children: /* @__PURE__ */ l(T, { color: s === "white" ? "BLACK" : "WHITE" })
|
118
|
-
}
|
119
|
-
),
|
120
|
-
r && /* @__PURE__ */ l(B, { $src: r }),
|
121
|
-
d && /* @__PURE__ */ l(K, { $renderAs: "ub3", $color: s === "white" ? "BLACK" : "WHITE", children: d }),
|
122
|
-
o && /* @__PURE__ */ l(o, { ...t })
|
123
|
-
]
|
124
|
-
}
|
125
|
-
) : null), V = L;
|
126
|
-
export {
|
127
|
-
V as default
|
128
|
-
};
|
129
|
-
//# sourceMappingURL=notification.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"notification.js","sources":["../../../src/features/notification/notification.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport styled, { keyframes, css } from 'styled-components';\n\nimport CrossIcon from '../../assets/line-icons/icons/cross';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\ntype Position = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';\ntype NotificationTheme = 'white' | 'black';\n\ninterface SlideProps {\n $position: Position;\n $verticalDist: number;\n}\n\ninterface PositionProps {\n $position: Position;\n $verticalDist: number;\n $horizontalDist: number;\n}\n\ninterface WrapperProps extends PositionProps {\n $gap: number;\n $gutter: number;\n $notificationTheme: NotificationTheme;\n}\n\ninterface AvatarWrapperProps {\n $src: string;\n}\n\ninterface NotificationProps {\n avatarUrl?: string | null;\n Component?: React.ComponentType<Record<string, unknown>> | null;\n componentProps?: Record<string, unknown>;\n duration?: number | null;\n gap?: number;\n gutter?: number;\n hideNotification?: () => void;\n horizontalDist?: number;\n notificationTheme?: NotificationTheme;\n position?: Position;\n showCloseIcon?: boolean;\n text?: string | null;\n verticalDist?: number;\n visible?: boolean;\n}\n\nconst slide = ({ $position, $verticalDist }: SlideProps) => keyframes`\n ${\n ($position === 'top-right' || $position === 'top-left') &&\n `\n 0% {\n top: 0;\n }\n 100% {\n top: ${$verticalDist}px;\n }\n `\n };\n ${\n ($position === 'bottom-left' || $position === 'bottom-right') &&\n `\n 0% {\n bottom: 0;\n }\n 100% {\n bottom: ${$verticalDist}px;\n }\n `\n };\n`;\n\nconst notificationPostion = ({ $position, $verticalDist, $horizontalDist }: PositionProps) => css`\n ${$position === 'top-right' &&\n `\n top: ${$verticalDist}px;\n right: ${$horizontalDist}px;\n `};\n ${$position === 'top-left' &&\n `\n\ttop: ${$verticalDist}px;\n left: ${$horizontalDist}px;\n `};\n ${$position === 'bottom-left' &&\n `\n bottom: ${$verticalDist}px;\n left: ${$horizontalDist}px;\n `};\n ${$position === 'bottom-right' &&\n `\n bottom: ${$verticalDist}px;\n right: ${$horizontalDist}px;\n `};\n`;\n\nconst Wrapper = styled.div<WrapperProps>`\n position: fixed;\n width: 310px;\n padding: ${({ $gap, $gutter }) => `${$gap}px ${$gutter}px`};\n box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.05);\n border-radius: 16px;\n ${notificationPostion};\n animation: ${slide} 0.5s ease-in;\n z-index: 105;\n background: ${({ $notificationTheme, theme }) =>\n $notificationTheme === 'white' ? theme?.colors?.WHITE : theme?.colors?.BLACK};\n color: ${({ $notificationTheme, theme }) =>\n $notificationTheme === 'white' ? theme?.colors?.BLACK : theme?.colors?.WHITE};\n`;\n\nconst AvatarWrapper = styled.div<AvatarWrapperProps>`\n width: 48px;\n height: 48px;\n background: ${({ $src }) => `url(${$src})`};\n border-radius: 50%;\n border: 2px solid #ffffff;\n position: absolute;\n bottom: 88%;\n`;\n\nconst StyledIcon = styled(FlexView)`\n position: absolute;\n top: -40px;\n right: 0;\n cursor: pointer;\n`;\n\nconst StyledText = styled(Text)`\n white-space: pre-wrap;\n`;\n\nconst Notification: React.FC<NotificationProps> = ({\n avatarUrl = null,\n Component = null,\n componentProps = {},\n duration = null,\n gap = 24,\n gutter = 16,\n hideNotification = () => null,\n horizontalDist = 50,\n notificationTheme = 'black',\n position = 'bottom-right',\n showCloseIcon = false,\n text = null,\n verticalDist = 60,\n visible = false,\n}) => {\n useEffect(() => {\n if (duration && visible) {\n const countdown = setTimeout(() => {\n hideNotification();\n }, duration * 1000);\n\n return () => {\n clearTimeout(countdown);\n };\n }\n\n return () => {};\n }, [duration, hideNotification, visible]);\n\n if (!visible) return null;\n\n return (\n <Wrapper\n $gap={gap}\n $gutter={gutter}\n $horizontalDist={horizontalDist}\n $notificationTheme={notificationTheme}\n $position={position}\n $verticalDist={verticalDist}\n >\n {showCloseIcon && (\n <StyledIcon\n onClick={hideNotification}\n $background={notificationTheme === 'white' ? 'WHITE' : 'BLACK'}\n $borderRadiusX={10}\n $gutter={2}\n $gap={2}\n >\n <CrossIcon color={notificationTheme === 'white' ? 'BLACK' : 'WHITE'} />\n </StyledIcon>\n )}\n {avatarUrl && <AvatarWrapper $src={avatarUrl} />}\n {text && (\n <StyledText $renderAs=\"ub3\" $color={notificationTheme === 'white' ? 'BLACK' : 'WHITE'}>\n {text}\n </StyledText>\n )}\n {Component && <Component {...componentProps} />}\n </Wrapper>\n );\n};\n\nexport default Notification;\n"],"names":["slide","$position","$verticalDist","keyframes","notificationPostion","$horizontalDist","css","Wrapper","styled","$gap","$gutter","$notificationTheme","theme","_a","_b","AvatarWrapper","$src","StyledIcon","FlexView","StyledText","Text","Notification","avatarUrl","Component","componentProps","duration","gap","gutter","hideNotification","horizontalDist","notificationTheme","position","showCloseIcon","text","verticalDist","visible","useEffect","countdown","jsxs","jsx","CrossIcon","Notification$1"],"mappings":"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"}
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import n from "styled-components";
|
2
|
-
const a = n.div`
|
3
|
-
margin-left: ${({ theme: t }) => t.layout.gutter}px;
|
4
|
-
overflow: hidden;
|
5
|
-
margin: ${({ $wrapperMargin: t }) => t};
|
6
|
-
`, o = n.div`
|
7
|
-
display: flex;
|
8
|
-
transition: transform 1s ease;
|
9
|
-
transform: ${({ $position: t }) => `translateX(calc(${t} * (-100%)))`};
|
10
|
-
`, s = n.div`
|
11
|
-
padding-right: ${({ theme: t }) => t.layout.gutter}px;
|
12
|
-
display: flex;
|
13
|
-
flex: 1 0 100%;
|
14
|
-
transition: opacity 1s ease;
|
15
|
-
padding: ${({ $carouselSlotPadding: t }) => t};
|
16
|
-
${({ $slideAlign: t }) => t === "center" && `
|
17
|
-
display:flex;
|
18
|
-
justify-content: center;
|
19
|
-
`}
|
20
|
-
`, l = n.div`
|
21
|
-
margin-top: 12px;
|
22
|
-
text-align: center;
|
23
|
-
${({ $flexCenterIndicators: t }) => t && `
|
24
|
-
display: flex;
|
25
|
-
justify-content: center;
|
26
|
-
align-items: center;
|
27
|
-
`}
|
28
|
-
`, d = n.span`
|
29
|
-
background: ${({ $isCurrent: t, $dotColor: e, $inactiveDotColor: i }) => t ? e : i};
|
30
|
-
width: ${({ $isCurrent: t, $activeIndicatorSize: e }) => t ? e : "8px"};
|
31
|
-
height: ${({ $isCurrent: t, $activeIndicatorSize: e }) => t ? e : "8px"};
|
32
|
-
border-radius: 50%;
|
33
|
-
margin-right: 5px;
|
34
|
-
display: inline-block;
|
35
|
-
transition: background 0.5s ease;
|
36
|
-
cursor: pointer;
|
37
|
-
`;
|
38
|
-
export {
|
39
|
-
o as CarouselContainer,
|
40
|
-
s as CarouselSlot,
|
41
|
-
l as Container,
|
42
|
-
d as Dot,
|
43
|
-
a as Wrapper
|
44
|
-
};
|
45
|
-
//# sourceMappingURL=carousal-styles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"carousal-styles.js","sources":["../../../../src/features/ui/carousal/carousal-styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\ninterface WrapperProps {\n $wrapperMargin?: string;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n margin-left: ${({ theme }) => theme.layout.gutter}px;\n overflow: hidden;\n margin: ${({ $wrapperMargin }) => $wrapperMargin};\n`;\n\ninterface CarouselContainerProps {\n $position: number;\n}\nexport const CarouselContainer = styled.div<CarouselContainerProps>`\n display: flex;\n transition: transform 1s ease;\n transform: ${({ $position }) => `translateX(calc(${$position} * (-100%)))`};\n`;\n\ninterface CarouselSlotProps {\n $carouselSlotPadding?: string;\n $slideAlign?: string | null;\n}\nexport const CarouselSlot = styled.div<CarouselSlotProps>`\n padding-right: ${({ theme }) => theme.layout.gutter}px;\n display: flex;\n flex: 1 0 100%;\n transition: opacity 1s ease;\n padding: ${({ $carouselSlotPadding }) => $carouselSlotPadding};\n ${({ $slideAlign }) =>\n $slideAlign === 'center' &&\n `\n display:flex;\n justify-content: center;\n `}\n`;\n\ninterface ContainerProps {\n $flexCenterIndicators?: boolean;\n}\nexport const Container = styled.div<ContainerProps>`\n margin-top: 12px;\n text-align: center;\n ${({ $flexCenterIndicators }) =>\n $flexCenterIndicators &&\n `\n display: flex;\n justify-content: center;\n align-items: center;\n `}\n`;\n\ninterface DotProps {\n $isCurrent: boolean;\n $dotColor: string;\n $inactiveDotColor: string;\n $activeIndicatorSize: string;\n}\nexport const Dot = styled.span<DotProps>`\n background: ${({ $isCurrent, $dotColor, $inactiveDotColor }) =>\n $isCurrent ? $dotColor : $inactiveDotColor};\n width: ${({ $isCurrent, $activeIndicatorSize }) => ($isCurrent ? $activeIndicatorSize : '8px')};\n height: ${({ $isCurrent, $activeIndicatorSize }) => ($isCurrent ? $activeIndicatorSize : '8px')};\n border-radius: 50%;\n margin-right: 5px;\n display: inline-block;\n transition: background 0.5s ease;\n cursor: pointer;\n`;\n"],"names":["Wrapper","styled","theme","$wrapperMargin","CarouselContainer","$position","CarouselSlot","$carouselSlotPadding","$slideAlign","Container","$flexCenterIndicators","Dot","$isCurrent","$dotColor","$inactiveDotColor","$activeIndicatorSize"],"mappings":";AAMO,MAAMA,IAAUC,EAAO;AAAA,iBACb,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA;AAAA,YAEvC,CAAC,EAAE,gBAAAC,EAAe,MAAMA,CAAc;AAAA,GAMrCC,IAAoBH,EAAO;AAAA;AAAA;AAAA,eAGzB,CAAC,EAAE,WAAAI,EAAgB,MAAA,mBAAmBA,CAAS,cAAc;AAAA,GAO/DC,IAAeL,EAAO;AAAA,mBAChB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,EAAE,sBAAAK,EAAqB,MAAMA,CAAoB;AAAA,IAC3D,CAAC,EAAE,aAAAC,EAAY,MACfA,MAAgB,YAChB;AAAA;AAAA;AAAA,GAGD;AAAA,GAMUC,IAAYR,EAAO;AAAA;AAAA;AAAA,IAG5B,CAAC,EAAE,uBAAAS,QACHA,KACA;AAAA;AAAA;AAAA;AAAA,GAID;AAAA,GASUC,IAAMV,EAAO;AAAA,gBACV,CAAC,EAAE,YAAAW,GAAY,WAAAC,GAAW,mBAAAC,QACtCF,IAAaC,IAAYC,CAAiB;AAAA,WACnC,CAAC,EAAE,YAAAF,GAAY,sBAAAG,EAA4B,MAAAH,IAAaG,IAAuB,KAAM;AAAA,YACpF,CAAC,EAAE,YAAAH,GAAY,sBAAAG,EAA4B,MAAAH,IAAaG,IAAuB,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
@@ -1,76 +0,0 @@
|
|
1
|
-
import { jsxs as q, Fragment as G, jsx as u } from "react/jsx-runtime";
|
2
|
-
import { useState as H, useRef as J, useCallback as o, useEffect as L } from "react";
|
3
|
-
import { getTheme as N } from "../theme/get-theme.js";
|
4
|
-
import { Wrapper as Q, CarouselContainer as U, CarouselSlot as _, Container as V, Dot as X } from "./carousal-styles.js";
|
5
|
-
const { colors: j } = N(), Y = ({
|
6
|
-
children: l,
|
7
|
-
initialPosition: B = 0,
|
8
|
-
infinite: p = !1,
|
9
|
-
slideDuration: $ = 8e3,
|
10
|
-
dotColor: K = j.BLACK,
|
11
|
-
changeColor: m = () => null,
|
12
|
-
slideAlign: y = null,
|
13
|
-
inactiveDotColor: b = j.BLACK_T_15,
|
14
|
-
activeIndicatorSize: z = "8px",
|
15
|
-
flexCenterIndicators: D = !1,
|
16
|
-
isTestimonial: i = !1,
|
17
|
-
setColor: n = () => null,
|
18
|
-
setPosition: g = () => null,
|
19
|
-
carouselSlotPadding: x = "",
|
20
|
-
wrapperMargin: E = "",
|
21
|
-
hideIndicators: F = !1,
|
22
|
-
autoScroll: C = !0,
|
23
|
-
nodeRef: e = null,
|
24
|
-
onChange: S = () => null
|
25
|
-
}) => {
|
26
|
-
const [r, M] = H(B), A = J(null), f = o(
|
27
|
-
(t) => {
|
28
|
-
M(t), g(t), e && e.current && (e.current.position = t), S();
|
29
|
-
},
|
30
|
-
[g, e, S]
|
31
|
-
), s = o(
|
32
|
-
(t, c = !1) => {
|
33
|
-
const k = (Array.isArray(l) ? l : [l]).length;
|
34
|
-
let a = r;
|
35
|
-
i && n && n(a), t === "next" ? (a = r + 1, a > k - 1 && (a = c ? 0 : r)) : (a = r - 1, a < 0 && (a = c ? k - 1 : r)), a !== r && f(a);
|
36
|
-
},
|
37
|
-
[r, l, i, n, f]
|
38
|
-
), v = o(() => s("next", p), [s, p]), I = o(() => s("prev", p), [s, p]), W = o(
|
39
|
-
(t) => {
|
40
|
-
i && n && n(r), t !== r && f(t);
|
41
|
-
},
|
42
|
-
[r, i, n, f]
|
43
|
-
);
|
44
|
-
L(() => (e && e.current && (e.current.next = v, e.current.prev = I, e.current.position = r), C && (A.current = setInterval(() => s("next", !0), $)), () => {
|
45
|
-
A.current && clearInterval(A.current);
|
46
|
-
}), [$, C, e, r, v, I, s]), L(() => {
|
47
|
-
m(r);
|
48
|
-
}, [r, m]);
|
49
|
-
const h = Array.isArray(l) ? l.length : 1;
|
50
|
-
return /* @__PURE__ */ q(G, { children: [
|
51
|
-
/* @__PURE__ */ u(Q, { $wrapperMargin: E, children: /* @__PURE__ */ u(U, { $position: r, children: Array.isArray(l) ? l.map((t, c) => /* @__PURE__ */ u(
|
52
|
-
_,
|
53
|
-
{
|
54
|
-
$carouselSlotPadding: x,
|
55
|
-
$slideAlign: y,
|
56
|
-
children: t
|
57
|
-
},
|
58
|
-
c
|
59
|
-
)) : /* @__PURE__ */ u(_, { $carouselSlotPadding: x, $slideAlign: y, children: l }) }) }),
|
60
|
-
h > 1 && !F && /* @__PURE__ */ u(V, { $flexCenterIndicators: D, children: Array.from({ length: h }, (t, c) => /* @__PURE__ */ u(
|
61
|
-
X,
|
62
|
-
{
|
63
|
-
onClick: () => W(c),
|
64
|
-
$isCurrent: c === r,
|
65
|
-
$dotColor: K,
|
66
|
-
$inactiveDotColor: b,
|
67
|
-
$activeIndicatorSize: z
|
68
|
-
},
|
69
|
-
c
|
70
|
-
)) })
|
71
|
-
] });
|
72
|
-
}, T = Y;
|
73
|
-
export {
|
74
|
-
T as default
|
75
|
-
};
|
76
|
-
//# sourceMappingURL=carousal.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"carousal.js","sources":["../../../../src/features/ui/carousal/carousal.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\n\nimport { getTheme } from '../theme/get-theme';\nimport { CarouselContainer, CarouselSlot, Container, Dot, Wrapper } from './carousal-styles';\n\nconst { colors } = getTheme();\n\ninterface CarouselProps {\n children: React.ReactNode[] | React.ReactNode;\n initialPosition?: number;\n infinite?: boolean;\n slideDuration?: number;\n dotColor?: string;\n changeColor?: (position: number) => void;\n slideAlign?: string | null;\n inactiveDotColor?: string;\n activeIndicatorSize?: string;\n flexCenterIndicators?: boolean;\n isTestimonial?: boolean;\n setColor?: (position: number) => void;\n setPosition?: (position: number) => void;\n carouselSlotPadding?: string;\n wrapperMargin?: string;\n hideIndicators?: boolean;\n autoScroll?: boolean;\n nodeRef?: { current?: { next?: () => void; prev?: () => void; position?: number } } | null;\n onChange?: () => void;\n}\n\nconst Carousel: React.FC<CarouselProps> = ({\n children,\n initialPosition = 0,\n infinite = false,\n slideDuration = 8000,\n dotColor = colors.BLACK,\n changeColor = () => null,\n slideAlign = null,\n inactiveDotColor = colors.BLACK_T_15,\n activeIndicatorSize = '8px',\n flexCenterIndicators = false,\n isTestimonial = false,\n setColor = () => null,\n setPosition = () => null,\n carouselSlotPadding = '',\n wrapperMargin = '',\n hideIndicators = false,\n autoScroll = true,\n nodeRef = null,\n onChange = () => null,\n}) => {\n const [position, setPositionState] = useState(initialPosition);\n const autoSlideRef = useRef<NodeJS.Timeout | null>(null);\n\n const slide = useCallback(\n (newPosition: number) => {\n setPositionState(newPosition);\n setPosition(newPosition);\n if (nodeRef && nodeRef.current) {\n nodeRef.current.position = newPosition;\n }\n onChange();\n },\n [setPosition, nodeRef, onChange],\n );\n\n const changeSlide = useCallback(\n (action: 'next' | 'prev', infiniteOverride = false) => {\n const childrenArray = Array.isArray(children) ? children : [children];\n const numItems = childrenArray.length;\n let newPosition = position;\n\n if (isTestimonial && setColor) {\n setColor(newPosition);\n }\n\n if (action === 'next') {\n newPosition = position + 1;\n if (newPosition > numItems - 1) {\n newPosition = infiniteOverride ? 0 : position;\n }\n } else {\n newPosition = position - 1;\n if (newPosition < 0) {\n newPosition = infiniteOverride ? numItems - 1 : position;\n }\n }\n\n if (newPosition !== position) slide(newPosition);\n },\n [position, children, isTestimonial, setColor, slide],\n );\n\n const nextSlide = useCallback(() => changeSlide('next', infinite), [changeSlide, infinite]);\n const prevSlide = useCallback(() => changeSlide('prev', infinite), [changeSlide, infinite]);\n\n const onIndicatorClick = useCallback(\n (newPosition: number) => {\n if (isTestimonial && setColor) {\n setColor(position);\n }\n\n if (newPosition !== position) {\n slide(newPosition);\n }\n },\n [position, isTestimonial, setColor, slide],\n );\n\n useEffect(() => {\n if (nodeRef && nodeRef.current) {\n nodeRef.current.next = nextSlide;\n nodeRef.current.prev = prevSlide;\n nodeRef.current.position = position;\n }\n\n if (autoScroll) {\n autoSlideRef.current = setInterval(() => changeSlide('next', true), slideDuration);\n }\n\n return () => {\n if (autoSlideRef.current) {\n clearInterval(autoSlideRef.current);\n }\n };\n }, [slideDuration, autoScroll, nodeRef, position, nextSlide, prevSlide, changeSlide]);\n\n useEffect(() => {\n changeColor(position);\n }, [position, changeColor]);\n\n const carouselLength = Array.isArray(children) ? children.length : 1;\n\n return (\n <>\n <Wrapper $wrapperMargin={wrapperMargin}>\n <CarouselContainer $position={position}>\n {Array.isArray(children) ? (\n children.map((child, index) => (\n <CarouselSlot\n key={index}\n $carouselSlotPadding={carouselSlotPadding}\n $slideAlign={slideAlign}\n >\n {child}\n </CarouselSlot>\n ))\n ) : (\n <CarouselSlot $carouselSlotPadding={carouselSlotPadding} $slideAlign={slideAlign}>\n {children}\n </CarouselSlot>\n )}\n </CarouselContainer>\n </Wrapper>\n {carouselLength > 1 && !hideIndicators && (\n <Container $flexCenterIndicators={flexCenterIndicators}>\n {Array.from({ length: carouselLength }, (_, index) => (\n <Dot\n key={index}\n onClick={() => onIndicatorClick(index)}\n $isCurrent={index === position}\n $dotColor={dotColor}\n $inactiveDotColor={inactiveDotColor}\n $activeIndicatorSize={activeIndicatorSize}\n />\n ))}\n </Container>\n )}\n </>\n );\n};\n\nexport default Carousel;\n"],"names":["colors","getTheme","Carousel","children","initialPosition","infinite","slideDuration","dotColor","changeColor","slideAlign","inactiveDotColor","activeIndicatorSize","flexCenterIndicators","isTestimonial","setColor","setPosition","carouselSlotPadding","wrapperMargin","hideIndicators","autoScroll","nodeRef","onChange","position","setPositionState","useState","autoSlideRef","useRef","slide","useCallback","newPosition","changeSlide","action","infiniteOverride","numItems","nextSlide","prevSlide","onIndicatorClick","useEffect","carouselLength","jsxs","Fragment","jsx","Wrapper","CarouselContainer","child","index","CarouselSlot","Container","_","Dot","Carousel$1"],"mappings":"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"}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import p from "styled-components";
|
2
|
-
const a = p.canvas`
|
3
|
-
${({ $renderWidth: o }) => typeof o == "number" ? `width: ${o}px;` : `width: ${o};`}
|
4
|
-
${({ $renderHeight: o }) => typeof o == "number" ? `height: ${o}px;` : `height: ${o};`}
|
5
|
-
`;
|
6
|
-
export {
|
7
|
-
a as Canvas
|
8
|
-
};
|
9
|
-
//# sourceMappingURL=dot-lottie-animation-styled.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dot-lottie-animation-styled.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation-styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Canvas = styled.canvas<{\n $renderWidth: string | number;\n $renderHeight: string | number;\n}>`\n ${({ $renderWidth }) =>\n typeof $renderWidth === 'number' ? `width: ${$renderWidth}px;` : `width: ${$renderWidth};`}\n ${({ $renderHeight }) =>\n typeof $renderHeight === 'number' ? `height: ${$renderHeight}px;` : `height: ${$renderHeight};`}\n`;\n"],"names":["Canvas","styled","$renderWidth","$renderHeight"],"mappings":";AAEO,MAAMA,IAASC,EAAO;AAAA,IAIzB,CAAC,EAAE,cAAAC,EAAa,MAChB,OAAOA,KAAiB,WAAW,UAAUA,CAAY,QAAQ,UAAUA,CAAY,GAAG;AAAA,IAC1F,CAAC,EAAE,eAAAC,EAAc,MACjB,OAAOA,KAAkB,WAAW,WAAWA,CAAa,QAAQ,WAAWA,CAAa,GAAG;AAAA;"}
|
@@ -1,80 +0,0 @@
|
|
1
|
-
import { jsx as l } from "react/jsx-runtime";
|
2
|
-
import { DotLottieWorker as v } from "../../../node_modules/@lottiefiles/dotlottie-web/dist/index.js";
|
3
|
-
import { memo as w, forwardRef as x, useRef as p, useImperativeHandle as R, useEffect as h } from "react";
|
4
|
-
import E from "../layout/flex-view.js";
|
5
|
-
import { Canvas as H } from "./dot-lottie-animation-styled.js";
|
6
|
-
const N = x((y, g) => {
|
7
|
-
const {
|
8
|
-
src: m,
|
9
|
-
width: i = "100%",
|
10
|
-
height: a = "100%",
|
11
|
-
settings: f,
|
12
|
-
eventListeners: r,
|
13
|
-
onRender: u,
|
14
|
-
onError: c
|
15
|
-
} = y, s = p(null), t = p(null);
|
16
|
-
return R(
|
17
|
-
g,
|
18
|
-
() => ({
|
19
|
-
playSegments: (e) => {
|
20
|
-
var n, o;
|
21
|
-
(n = t.current) == null || n.setSegment(e[0], e[1]), (o = t.current) == null || o.play();
|
22
|
-
},
|
23
|
-
play: () => {
|
24
|
-
var e;
|
25
|
-
(e = t.current) == null || e.play();
|
26
|
-
},
|
27
|
-
pause: () => {
|
28
|
-
var e;
|
29
|
-
(e = t.current) == null || e.pause();
|
30
|
-
}
|
31
|
-
}),
|
32
|
-
[]
|
33
|
-
), h(() => {
|
34
|
-
if (s.current)
|
35
|
-
try {
|
36
|
-
t.current = new v({
|
37
|
-
src: m,
|
38
|
-
canvas: s.current,
|
39
|
-
autoplay: !0,
|
40
|
-
loop: !1,
|
41
|
-
renderConfig: {
|
42
|
-
autoResize: !0,
|
43
|
-
devicePixelRatio: window.devicePixelRatio,
|
44
|
-
freezeOnOffscreen: !0
|
45
|
-
},
|
46
|
-
...f
|
47
|
-
}), requestAnimationFrame(() => {
|
48
|
-
u == null || u();
|
49
|
-
});
|
50
|
-
} catch (e) {
|
51
|
-
console.log(e), c == null || c();
|
52
|
-
}
|
53
|
-
}, [m, f, u, c]), h(() => (r == null || r.forEach(
|
54
|
-
({ name: e, callback: n }) => {
|
55
|
-
var o;
|
56
|
-
return (o = t.current) == null ? void 0 : o.addEventListener(e, n);
|
57
|
-
}
|
58
|
-
), () => {
|
59
|
-
var e;
|
60
|
-
r == null || r.forEach(
|
61
|
-
({ name: n, callback: o }) => {
|
62
|
-
var d;
|
63
|
-
return (d = t.current) == null ? void 0 : d.removeEventListener(n, o);
|
64
|
-
}
|
65
|
-
), (e = t.current) == null || e.destroy();
|
66
|
-
}), [r]), /* @__PURE__ */ l(E, { $width: i, $height: a, children: /* @__PURE__ */ l(
|
67
|
-
H,
|
68
|
-
{
|
69
|
-
ref: s,
|
70
|
-
$renderWidth: i,
|
71
|
-
$renderHeight: a,
|
72
|
-
width: typeof i == "number" ? i : void 0,
|
73
|
-
height: typeof a == "number" ? a : void 0
|
74
|
-
}
|
75
|
-
) });
|
76
|
-
}), F = w(N);
|
77
|
-
export {
|
78
|
-
F as default
|
79
|
-
};
|
80
|
-
//# sourceMappingURL=dot-lottie-animation.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dot-lottie-animation.js","sources":["../../../../src/features/ui/dot-lottie-animations/dot-lottie-animation.tsx"],"sourcesContent":["import type {\n AnimationSegment,\n ILottieAnimationProps,\n ILottieAnimationRef,\n} from './dot-lottie-types';\n\nimport { DotLottieWorker } from '@lottiefiles/dotlottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport * as Styled from './dot-lottie-animation-styled';\n\nconst DotLottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n const {\n src,\n width = '100%',\n height = '100%',\n settings,\n eventListeners,\n onRender,\n onError,\n } = props;\n\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const animationInstance = useRef<DotLottieWorker | null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n playSegments: (segments: AnimationSegment) => {\n animationInstance.current?.setSegment(segments[0], segments[1]);\n animationInstance.current?.play();\n },\n play: () => {\n animationInstance.current?.play();\n },\n pause: () => {\n animationInstance.current?.pause();\n },\n }),\n [],\n );\n\n useEffect(() => {\n if (!canvasRef.current) return;\n\n try {\n animationInstance.current = new DotLottieWorker({\n src,\n canvas: canvasRef.current,\n autoplay: true,\n loop: false,\n renderConfig: {\n autoResize: true,\n devicePixelRatio: window.devicePixelRatio,\n freezeOnOffscreen: true,\n },\n ...settings,\n });\n\n requestAnimationFrame(() => {\n onRender?.();\n });\n } catch (err) {\n // eslint-disable-next-line no-console\n console.log(err);\n onError?.();\n }\n }, [src, settings, onRender, onError]);\n\n useEffect(() => {\n eventListeners?.forEach(\n ({ name, callback }) => animationInstance.current?.addEventListener(name, callback),\n );\n\n return () => {\n eventListeners?.forEach(\n ({ name, callback }) => animationInstance.current?.removeEventListener(name, callback),\n );\n animationInstance.current?.destroy();\n };\n }, [eventListeners]);\n\n const isNumW = typeof width === 'number';\n const isNumH = typeof height === 'number';\n\n return (\n <FlexView $width={width} $height={height}>\n <Styled.Canvas\n ref={canvasRef}\n $renderWidth={width}\n $renderHeight={height}\n width={isNumW ? width : undefined}\n height={isNumH ? height : undefined}\n />\n </FlexView>\n );\n});\n\nexport default memo(DotLottieAnimation);\n"],"names":["DotLottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListeners","onRender","onError","canvasRef","useRef","animationInstance","useImperativeHandle","segments","_a","_b","useEffect","DotLottieWorker","err","name","callback","jsx","FlexView","Styled.Canvas","dotLottieAnimation","memo"],"mappings":";;;;;AAYA,MAAMA,IAAqBC,EAAuD,CAACC,GAAOC,MAAQ;AAC1F,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAA0B,IAAI,GAC1CC,IAAoBD,EAA+B,IAAI;AAE7D,SAAAE;AAAA,IACEX;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACY,MAA+B;;AAC5C,SAAAC,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B,WAAWD,EAAS,CAAC,GAAGA,EAAS,CAAC,KAC7DE,IAAAJ,EAAkB,YAAlB,QAAAI,EAA2B;AAAA,MAC7B;AAAA,MACA,MAAM,MAAM;;AACV,SAAAD,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,MACA,OAAO,MAAM;;AACX,SAAAA,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,MAC7B;AAAA,IAAA;AAAA,IAEF,CAAC;AAAA,EAAA,GAGHE,EAAU,MAAM;AACV,QAACP,EAAU;AAEX,UAAA;AACgB,QAAAE,EAAA,UAAU,IAAIM,EAAgB;AAAA,UAC9C,KAAAf;AAAA,UACA,QAAQO,EAAU;AAAA,UAClB,UAAU;AAAA,UACV,MAAM;AAAA,UACN,cAAc;AAAA,YACZ,YAAY;AAAA,YACZ,kBAAkB,OAAO;AAAA,YACzB,mBAAmB;AAAA,UACrB;AAAA,UACA,GAAGJ;AAAA,QAAA,CACJ,GAED,sBAAsB,MAAM;AACf,UAAAE,KAAA,QAAAA;AAAA,QAAA,CACZ;AAAA,eACMW,GAAK;AAEZ,gBAAQ,IAAIA,CAAG,GACLV,KAAA,QAAAA;AAAA,MACZ;AAAA,KACC,CAACN,GAAKG,GAAUE,GAAUC,CAAO,CAAC,GAErCQ,EAAU,OACQV,KAAA,QAAAA,EAAA;AAAA,IACd,CAAC,EAAE,MAAAa,GAAM,UAAAC,QAAe;;AAAA,cAAAN,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,iBAAiBK,GAAMC;AAAA;AAAA,KAGrE,MAAM;;AACK,IAAAd,KAAA,QAAAA,EAAA;AAAA,MACd,CAAC,EAAE,MAAAa,GAAM,UAAAC,QAAe;;AAAA,gBAAAN,IAAAH,EAAkB,YAAlB,gBAAAG,EAA2B,oBAAoBK,GAAMC;AAAA;AAAA,QAE/EN,IAAAH,EAAkB,YAAlB,QAAAG,EAA2B;AAAA,EAAQ,IAEpC,CAACR,CAAc,CAAC,GAMhB,gBAAAe,EAAAC,GAAA,EAAS,QAAQnB,GAAO,SAASC,GAChC,UAAA,gBAAAiB;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,KAAKd;AAAA,MACL,cAAcN;AAAA,MACd,eAAeC;AAAA,MACf,OATS,OAAOD,KAAU,WASVA,IAAQ;AAAA,MACxB,QATS,OAAOC,KAAW,WASVA,IAAS;AAAA,IAAA;AAAA,EAE9B,EAAA,CAAA;AAEJ,CAAC,GAEcoB,IAAAC,EAAK3B,CAAkB;"}
|