@hitachivantara/uikit-react-lab 3.52.3 → 3.55.0
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/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/ImageCarousel/ImageCarousel.js +615 -0
- package/dist/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/ImageCarousel/index.d.ts +2 -0
- package/dist/ImageCarousel/index.js +16 -0
- package/dist/ImageCarousel/index.js.map +1 -0
- package/dist/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/ImageCarousel/styles.js +238 -0
- package/dist/ImageCarousel/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js +130 -0
- package/dist/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js +196 -0
- package/dist/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js +53 -0
- package/dist/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/DefaultNavigation/index.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js +16 -0
- package/dist/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js +49 -0
- package/dist/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js +173 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js +25 -0
- package/dist/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js +133 -0
- package/dist/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/SimpleNavigation/index.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js +16 -0
- package/dist/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js +31 -0
- package/dist/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/StepNavigation/StepNavigation.js +389 -0
- package/dist/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/StepNavigation/index.d.ts +2 -0
- package/dist/StepNavigation/index.js +16 -0
- package/dist/StepNavigation/index.js.map +1 -0
- package/dist/StepNavigation/styles.js +41 -0
- package/dist/StepNavigation/styles.js.map +1 -0
- package/dist/StepNavigation/utils.js +15 -0
- package/dist/StepNavigation/utils.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +19 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js +574 -0
- package/dist/legacy/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/legacy/ImageCarousel/index.d.ts +2 -0
- package/dist/legacy/ImageCarousel/index.js +2 -0
- package/dist/legacy/ImageCarousel/index.js.map +1 -0
- package/dist/legacy/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/legacy/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/legacy/ImageCarousel/styles.js +228 -0
- package/dist/legacy/ImageCarousel/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js +112 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js +176 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js +45 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/legacy/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js +132 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js +113 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js +8 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/legacy/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/legacy/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/legacy/StepNavigation/StepNavigation.js +353 -0
- package/dist/legacy/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/legacy/StepNavigation/index.d.ts +2 -0
- package/dist/legacy/StepNavigation/index.js +2 -0
- package/dist/legacy/StepNavigation/index.js.map +1 -0
- package/dist/legacy/StepNavigation/styles.js +33 -0
- package/dist/legacy/StepNavigation/styles.js.map +1 -0
- package/dist/legacy/StepNavigation/utils.js +6 -0
- package/dist/legacy/StepNavigation/utils.js.map +1 -0
- package/dist/legacy/index.d.ts +6 -0
- package/dist/legacy/index.js +2 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/ImageCarousel/ImageCarousel.d.ts +11 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js +499 -0
- package/dist/modern/ImageCarousel/ImageCarousel.js.map +1 -0
- package/dist/modern/ImageCarousel/index.d.ts +2 -0
- package/dist/modern/ImageCarousel/index.js +2 -0
- package/dist/modern/ImageCarousel/index.js.map +1 -0
- package/dist/modern/ImageCarousel/stories/resources/Ahsoka.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/AnakinSkywalker.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/BobaFett.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/DarthVader.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/MaceWindu.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/ObiWan.png +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Panoramic.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Revan.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/TheMandalorian.jpg +0 -0
- package/dist/modern/ImageCarousel/stories/resources/Yoda.jpg +0 -0
- package/dist/modern/ImageCarousel/styles.js +241 -0
- package/dist/modern/ImageCarousel/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js +111 -0
- package/dist/modern/StepNavigation/DefaultNavigation/DefaultNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.d.ts +32 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js +175 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/Step.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js +43 -0
- package/dist/modern/StepNavigation/DefaultNavigation/Step/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/DefaultNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/DefaultNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js +41 -0
- package/dist/modern/StepNavigation/DefaultNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.d.ts +10 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js +121 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/Dot.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js +18 -0
- package/dist/modern/StepNavigation/SimpleNavigation/Dot/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.d.ts +58 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js +110 -0
- package/dist/modern/StepNavigation/SimpleNavigation/SimpleNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/SimpleNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js +6 -0
- package/dist/modern/StepNavigation/SimpleNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js +22 -0
- package/dist/modern/StepNavigation/SimpleNavigation/utils.js.map +1 -0
- package/dist/modern/StepNavigation/StepNavigation.d.ts +43 -0
- package/dist/modern/StepNavigation/StepNavigation.js +336 -0
- package/dist/modern/StepNavigation/StepNavigation.js.map +1 -0
- package/dist/modern/StepNavigation/index.d.ts +2 -0
- package/dist/modern/StepNavigation/index.js +2 -0
- package/dist/modern/StepNavigation/index.js.map +1 -0
- package/dist/modern/StepNavigation/styles.js +31 -0
- package/dist/modern/StepNavigation/styles.js.map +1 -0
- package/dist/modern/StepNavigation/utils.js +6 -0
- package/dist/modern/StepNavigation/utils.js.map +1 -0
- package/dist/modern/index.d.ts +6 -0
- package/dist/modern/index.js +2 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
const styles = theme => ({
|
|
2
|
+
root: {
|
|
3
|
+
"&:not(.xs)": {
|
|
4
|
+
background: theme.hv.palette.atmosphere.atmo1,
|
|
5
|
+
display: "flex",
|
|
6
|
+
alignItems: "center",
|
|
7
|
+
flexDirection: "column",
|
|
8
|
+
margin: "0px",
|
|
9
|
+
paddingTop: "15px",
|
|
10
|
+
paddingBottom: "15px"
|
|
11
|
+
},
|
|
12
|
+
"&:not(.nxs)": {
|
|
13
|
+
width: "100%",
|
|
14
|
+
maxWidth: "500px",
|
|
15
|
+
height: "200px",
|
|
16
|
+
padding: "0px"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
fullscreenStyle: {
|
|
20
|
+
width: "100vw",
|
|
21
|
+
height: "100vh",
|
|
22
|
+
position: "fixed",
|
|
23
|
+
padding: "10px 150px 10px 150px",
|
|
24
|
+
top: 0,
|
|
25
|
+
left: 0,
|
|
26
|
+
zIndex: 1300
|
|
27
|
+
},
|
|
28
|
+
closeButton: {
|
|
29
|
+
position: "absolute",
|
|
30
|
+
right: "25px"
|
|
31
|
+
},
|
|
32
|
+
selectedImage: {
|
|
33
|
+
"&:not(.contain)": {
|
|
34
|
+
objectFit: "cover"
|
|
35
|
+
},
|
|
36
|
+
"&:not(.cover)": {
|
|
37
|
+
objectFit: "contain"
|
|
38
|
+
},
|
|
39
|
+
"&:not(.xs)": {
|
|
40
|
+
width: "100%",
|
|
41
|
+
textAlign: "center",
|
|
42
|
+
"&:not(.fullscreen)": {
|
|
43
|
+
[theme.breakpoints.up("xs")]: {
|
|
44
|
+
height: "150px",
|
|
45
|
+
minHeight: "150px"
|
|
46
|
+
},
|
|
47
|
+
[theme.breakpoints.up("sm")]: {
|
|
48
|
+
height: "300px",
|
|
49
|
+
minHeight: "300px"
|
|
50
|
+
},
|
|
51
|
+
[theme.breakpoints.up("lg")]: {
|
|
52
|
+
height: "450px",
|
|
53
|
+
minHeight: "450px"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"&:not(.notFullscreen)": {
|
|
57
|
+
height: "100%"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"&:not(.nxs)": {
|
|
61
|
+
width: "100%",
|
|
62
|
+
textAlign: "center"
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
xsMode: {
|
|
66
|
+
width: "min-content",
|
|
67
|
+
height: "min-content",
|
|
68
|
+
margin: "0px",
|
|
69
|
+
textAlign: "center"
|
|
70
|
+
},
|
|
71
|
+
circles: {
|
|
72
|
+
display: "flex",
|
|
73
|
+
alignItems: "center",
|
|
74
|
+
justifyContent: "center"
|
|
75
|
+
},
|
|
76
|
+
xsCircles: {
|
|
77
|
+
display: "flex",
|
|
78
|
+
alignItems: "center",
|
|
79
|
+
justifyContent: "center",
|
|
80
|
+
position: "relative",
|
|
81
|
+
transform: "translateY(-63px)"
|
|
82
|
+
},
|
|
83
|
+
hidden: {
|
|
84
|
+
visibility: "hidden"
|
|
85
|
+
},
|
|
86
|
+
title: {
|
|
87
|
+
display: "flex",
|
|
88
|
+
alignItems: "flex-start",
|
|
89
|
+
width: "100%",
|
|
90
|
+
justifyContent: "space-between"
|
|
91
|
+
},
|
|
92
|
+
divCounter: {
|
|
93
|
+
width: "100%",
|
|
94
|
+
paddingTop: "10px",
|
|
95
|
+
paddingRight: "15px",
|
|
96
|
+
display: "flex",
|
|
97
|
+
justifyContent: "flex-end",
|
|
98
|
+
position: "relative",
|
|
99
|
+
bottom: "102%",
|
|
100
|
+
"&:not(.nxs)": {
|
|
101
|
+
right: "5%",
|
|
102
|
+
bottom: "262px",
|
|
103
|
+
padding: "0px"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
counter: {
|
|
107
|
+
width: "45px",
|
|
108
|
+
backgroundColor: theme.hv.palette.base.base2
|
|
109
|
+
},
|
|
110
|
+
img: {
|
|
111
|
+
width: "100%",
|
|
112
|
+
height: "70px",
|
|
113
|
+
[theme.breakpoints.up("lg")]: {
|
|
114
|
+
height: "75px"
|
|
115
|
+
},
|
|
116
|
+
textAlign: "center",
|
|
117
|
+
objectFit: "cover"
|
|
118
|
+
},
|
|
119
|
+
thumbnailSelected: {
|
|
120
|
+
width: "100%",
|
|
121
|
+
height: "70px",
|
|
122
|
+
[theme.breakpoints.up("lg")]: {
|
|
123
|
+
height: "75px"
|
|
124
|
+
},
|
|
125
|
+
textAlign: "center",
|
|
126
|
+
objectFit: "cover",
|
|
127
|
+
borderStyle: "solid",
|
|
128
|
+
borderColor: theme.hv.palette.base.base2,
|
|
129
|
+
opacity: "50%"
|
|
130
|
+
},
|
|
131
|
+
thumbnailButton: {
|
|
132
|
+
width: "110px",
|
|
133
|
+
height: "70px",
|
|
134
|
+
padding: "0px 0px",
|
|
135
|
+
[theme.breakpoints.up("lg")]: {
|
|
136
|
+
width: "120px",
|
|
137
|
+
height: "75px"
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
miniCircle: {
|
|
141
|
+
width: "5px",
|
|
142
|
+
height: "5px",
|
|
143
|
+
borderRadius: "50%",
|
|
144
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo4,
|
|
145
|
+
display: "inline-block",
|
|
146
|
+
margin: "10px"
|
|
147
|
+
},
|
|
148
|
+
selectedCircle: {
|
|
149
|
+
width: "10px",
|
|
150
|
+
height: "10px",
|
|
151
|
+
borderRadius: "50%",
|
|
152
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo5,
|
|
153
|
+
display: "inline-block",
|
|
154
|
+
margin: "10px"
|
|
155
|
+
},
|
|
156
|
+
xsSelectedCircle: {
|
|
157
|
+
width: "10px",
|
|
158
|
+
height: "10px",
|
|
159
|
+
borderRadius: "50%",
|
|
160
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo3,
|
|
161
|
+
display: "inline-block",
|
|
162
|
+
margin: "10px"
|
|
163
|
+
},
|
|
164
|
+
lowButtons: {
|
|
165
|
+
width: "95%",
|
|
166
|
+
display: "inline-flex",
|
|
167
|
+
justifyContent: "space-between",
|
|
168
|
+
position: "relative",
|
|
169
|
+
top: "-50%",
|
|
170
|
+
transform: "translateY(-16px)",
|
|
171
|
+
"&:not(.nxs)": {
|
|
172
|
+
width: "90%",
|
|
173
|
+
top: "-99px"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
imageContainer: {
|
|
177
|
+
width: "100%",
|
|
178
|
+
marginTop: "20px",
|
|
179
|
+
margin: "0px",
|
|
180
|
+
textAlign: "center",
|
|
181
|
+
padding: "0px",
|
|
182
|
+
[theme.breakpoints.up("xs")]: {
|
|
183
|
+
height: "150px",
|
|
184
|
+
minHeight: "150px"
|
|
185
|
+
},
|
|
186
|
+
[theme.breakpoints.up("sm")]: {
|
|
187
|
+
height: "300px",
|
|
188
|
+
minHeight: "300px"
|
|
189
|
+
},
|
|
190
|
+
[theme.breakpoints.up("lg")]: {
|
|
191
|
+
height: "450px",
|
|
192
|
+
minHeight: "450px"
|
|
193
|
+
},
|
|
194
|
+
"&:not(.notFullscreen)": {
|
|
195
|
+
height: "85%",
|
|
196
|
+
alignItems: "center"
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
button: {
|
|
200
|
+
backgroundColor: theme.hv.palette.atmosphere.atmo3
|
|
201
|
+
},
|
|
202
|
+
inputImage: {
|
|
203
|
+
width: "110px",
|
|
204
|
+
height: "70px",
|
|
205
|
+
padding: "0px 0px",
|
|
206
|
+
[theme.breakpoints.up("lg")]: {
|
|
207
|
+
width: "120px",
|
|
208
|
+
height: "75px"
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
stack: {
|
|
212
|
+
"&:not(.xs)": {
|
|
213
|
+
width: "100%",
|
|
214
|
+
display: "flex",
|
|
215
|
+
alignSelf: "center",
|
|
216
|
+
height: "100%",
|
|
217
|
+
padding: "0px"
|
|
218
|
+
},
|
|
219
|
+
"&:not(.flag)": {
|
|
220
|
+
overflowX: "hidden"
|
|
221
|
+
},
|
|
222
|
+
"&:not(.nxs)": {
|
|
223
|
+
height: "200px",
|
|
224
|
+
display: "flex",
|
|
225
|
+
padding: "0px"
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
normalButtons: {
|
|
229
|
+
padding: "5px 0px"
|
|
230
|
+
},
|
|
231
|
+
panel: {
|
|
232
|
+
display: "flex",
|
|
233
|
+
width: "100%",
|
|
234
|
+
overflow: "hidden",
|
|
235
|
+
padding: "3px",
|
|
236
|
+
height: "75px"
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
export default styles;
|
|
241
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","names":["styles","theme","root","background","hv","palette","atmosphere","atmo1","display","alignItems","flexDirection","margin","paddingTop","paddingBottom","width","maxWidth","height","padding","fullscreenStyle","position","top","left","zIndex","closeButton","right","selectedImage","objectFit","textAlign","breakpoints","up","minHeight","xsMode","circles","justifyContent","xsCircles","transform","hidden","visibility","title","divCounter","paddingRight","bottom","counter","backgroundColor","base","base2","img","thumbnailSelected","borderStyle","borderColor","opacity","thumbnailButton","miniCircle","borderRadius","atmo4","selectedCircle","atmo5","xsSelectedCircle","atmo3","lowButtons","imageContainer","marginTop","button","inputImage","stack","alignSelf","overflowX","normalButtons","panel","overflow"],"sources":["../../../src/ImageCarousel/styles.js"],"sourcesContent":["const styles = (theme) => ({\n root: {\n \"&:not(.xs)\": {\n background: theme.hv.palette.atmosphere.atmo1,\n display: \"flex\",\n alignItems: \"center\",\n flexDirection: \"column\",\n margin: \"0px\",\n paddingTop: \"15px\",\n paddingBottom: \"15px\",\n },\n \"&:not(.nxs)\": {\n width: \"100%\",\n maxWidth: \"500px\",\n height: \"200px\",\n padding: \"0px\",\n },\n },\n fullscreenStyle: {\n width: \"100vw\",\n height: \"100vh\",\n position: \"fixed\",\n padding: \"10px 150px 10px 150px\",\n top: 0,\n left: 0,\n zIndex: 1300,\n },\n closeButton: {\n position: \"absolute\",\n right: \"25px\",\n },\n selectedImage: {\n \"&:not(.contain)\": {\n objectFit: \"cover\",\n },\n \"&:not(.cover)\": {\n objectFit: \"contain\",\n },\n \"&:not(.xs)\": {\n width: \"100%\",\n textAlign: \"center\",\n \"&:not(.fullscreen)\": {\n [theme.breakpoints.up(\"xs\")]: {\n height: \"150px\",\n minHeight: \"150px\",\n },\n [theme.breakpoints.up(\"sm\")]: {\n height: \"300px\",\n minHeight: \"300px\",\n },\n [theme.breakpoints.up(\"lg\")]: {\n height: \"450px\",\n minHeight: \"450px\",\n },\n },\n \"&:not(.notFullscreen)\": {\n height: \"100%\",\n },\n },\n \"&:not(.nxs)\": {\n width: \"100%\",\n textAlign: \"center\",\n },\n },\n xsMode: {\n width: \"min-content\",\n height: \"min-content\",\n margin: \"0px\",\n textAlign: \"center\",\n },\n circles: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n xsCircles: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n transform: \"translateY(-63px)\",\n },\n hidden: {\n visibility: \"hidden\",\n },\n title: {\n display: \"flex\",\n alignItems: \"flex-start\",\n width: \"100%\",\n justifyContent: \"space-between\",\n },\n divCounter: {\n width: \"100%\",\n paddingTop: \"10px\",\n paddingRight: \"15px\",\n display: \"flex\",\n justifyContent: \"flex-end\",\n position: \"relative\",\n bottom: \"102%\",\n \"&:not(.nxs)\": {\n right: \"5%\",\n bottom: \"262px\",\n padding: \"0px\",\n },\n },\n counter: {\n width: \"45px\",\n backgroundColor: theme.hv.palette.base.base2,\n },\n img: {\n width: \"100%\",\n height: \"70px\",\n [theme.breakpoints.up(\"lg\")]: {\n height: \"75px\",\n },\n textAlign: \"center\",\n objectFit: \"cover\",\n },\n thumbnailSelected: {\n width: \"100%\",\n height: \"70px\",\n [theme.breakpoints.up(\"lg\")]: {\n height: \"75px\",\n },\n textAlign: \"center\",\n objectFit: \"cover\",\n borderStyle: \"solid\",\n borderColor: theme.hv.palette.base.base2,\n opacity: \"50%\",\n },\n thumbnailButton: {\n width: \"110px\",\n height: \"70px\",\n padding: \"0px 0px\",\n [theme.breakpoints.up(\"lg\")]: {\n width: \"120px\",\n height: \"75px\",\n },\n },\n miniCircle: {\n width: \"5px\",\n height: \"5px\",\n borderRadius: \"50%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo4,\n display: \"inline-block\",\n margin: \"10px\",\n },\n selectedCircle: {\n width: \"10px\",\n height: \"10px\",\n borderRadius: \"50%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo5,\n display: \"inline-block\",\n margin: \"10px\",\n },\n xsSelectedCircle: {\n width: \"10px\",\n height: \"10px\",\n borderRadius: \"50%\",\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n display: \"inline-block\",\n margin: \"10px\",\n },\n lowButtons: {\n width: \"95%\",\n display: \"inline-flex\",\n justifyContent: \"space-between\",\n position: \"relative\",\n top: \"-50%\",\n transform: \"translateY(-16px)\",\n \"&:not(.nxs)\": {\n width: \"90%\",\n top: \"-99px\",\n },\n },\n imageContainer: {\n width: \"100%\",\n marginTop: \"20px\",\n margin: \"0px\",\n textAlign: \"center\",\n padding: \"0px\",\n [theme.breakpoints.up(\"xs\")]: {\n height: \"150px\",\n minHeight: \"150px\",\n },\n [theme.breakpoints.up(\"sm\")]: {\n height: \"300px\",\n minHeight: \"300px\",\n },\n [theme.breakpoints.up(\"lg\")]: {\n height: \"450px\",\n minHeight: \"450px\",\n },\n \"&:not(.notFullscreen)\": {\n height: \"85%\",\n alignItems: \"center\",\n },\n },\n button: {\n backgroundColor: theme.hv.palette.atmosphere.atmo3,\n },\n inputImage: {\n width: \"110px\",\n height: \"70px\",\n padding: \"0px 0px\",\n [theme.breakpoints.up(\"lg\")]: {\n width: \"120px\",\n height: \"75px\",\n },\n },\n stack: {\n \"&:not(.xs)\": {\n width: \"100%\",\n display: \"flex\",\n alignSelf: \"center\",\n height: \"100%\",\n padding: \"0px\",\n },\n \"&:not(.flag)\": {\n overflowX: \"hidden\",\n },\n \"&:not(.nxs)\": {\n height: \"200px\",\n display: \"flex\",\n padding: \"0px\",\n },\n },\n normalButtons: {\n padding: \"5px 0px\",\n },\n panel: {\n display: \"flex\",\n width: \"100%\",\n overflow: \"hidden\",\n padding: \"3px\",\n height: \"75px\",\n },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI,EAAE;IACJ,cAAc;MACZC,UAAU,EAAEF,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BC,KAD5B;MAEZC,OAAO,EAAE,MAFG;MAGZC,UAAU,EAAE,QAHA;MAIZC,aAAa,EAAE,QAJH;MAKZC,MAAM,EAAE,KALI;MAMZC,UAAU,EAAE,MANA;MAOZC,aAAa,EAAE;IAPH,CADV;IAUJ,eAAe;MACbC,KAAK,EAAE,MADM;MAEbC,QAAQ,EAAE,OAFG;MAGbC,MAAM,EAAE,OAHK;MAIbC,OAAO,EAAE;IAJI;EAVX,CADmB;EAkBzBC,eAAe,EAAE;IACfJ,KAAK,EAAE,OADQ;IAEfE,MAAM,EAAE,OAFO;IAGfG,QAAQ,EAAE,OAHK;IAIfF,OAAO,EAAE,uBAJM;IAKfG,GAAG,EAAE,CALU;IAMfC,IAAI,EAAE,CANS;IAOfC,MAAM,EAAE;EAPO,CAlBQ;EA2BzBC,WAAW,EAAE;IACXJ,QAAQ,EAAE,UADC;IAEXK,KAAK,EAAE;EAFI,CA3BY;EA+BzBC,aAAa,EAAE;IACb,mBAAmB;MACjBC,SAAS,EAAE;IADM,CADN;IAIb,iBAAiB;MACfA,SAAS,EAAE;IADI,CAJJ;IAOb,cAAc;MACZZ,KAAK,EAAE,MADK;MAEZa,SAAS,EAAE,QAFC;MAGZ,sBAAsB;QACpB,CAAC1B,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;UAC5Bb,MAAM,EAAE,OADoB;UAE5Bc,SAAS,EAAE;QAFiB,CADV;QAKpB,CAAC7B,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;UAC5Bb,MAAM,EAAE,OADoB;UAE5Bc,SAAS,EAAE;QAFiB,CALV;QASpB,CAAC7B,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;UAC5Bb,MAAM,EAAE,OADoB;UAE5Bc,SAAS,EAAE;QAFiB;MATV,CAHV;MAiBZ,yBAAyB;QACvBd,MAAM,EAAE;MADe;IAjBb,CAPD;IA4Bb,eAAe;MACbF,KAAK,EAAE,MADM;MAEba,SAAS,EAAE;IAFE;EA5BF,CA/BU;EAgEzBI,MAAM,EAAE;IACNjB,KAAK,EAAE,aADD;IAENE,MAAM,EAAE,aAFF;IAGNL,MAAM,EAAE,KAHF;IAINgB,SAAS,EAAE;EAJL,CAhEiB;EAsEzBK,OAAO,EAAE;IACPxB,OAAO,EAAE,MADF;IAEPC,UAAU,EAAE,QAFL;IAGPwB,cAAc,EAAE;EAHT,CAtEgB;EA2EzBC,SAAS,EAAE;IACT1B,OAAO,EAAE,MADA;IAETC,UAAU,EAAE,QAFH;IAGTwB,cAAc,EAAE,QAHP;IAITd,QAAQ,EAAE,UAJD;IAKTgB,SAAS,EAAE;EALF,CA3Ec;EAkFzBC,MAAM,EAAE;IACNC,UAAU,EAAE;EADN,CAlFiB;EAqFzBC,KAAK,EAAE;IACL9B,OAAO,EAAE,MADJ;IAELC,UAAU,EAAE,YAFP;IAGLK,KAAK,EAAE,MAHF;IAILmB,cAAc,EAAE;EAJX,CArFkB;EA2FzBM,UAAU,EAAE;IACVzB,KAAK,EAAE,MADG;IAEVF,UAAU,EAAE,MAFF;IAGV4B,YAAY,EAAE,MAHJ;IAIVhC,OAAO,EAAE,MAJC;IAKVyB,cAAc,EAAE,UALN;IAMVd,QAAQ,EAAE,UANA;IAOVsB,MAAM,EAAE,MAPE;IAQV,eAAe;MACbjB,KAAK,EAAE,IADM;MAEbiB,MAAM,EAAE,OAFK;MAGbxB,OAAO,EAAE;IAHI;EARL,CA3Fa;EAyGzByB,OAAO,EAAE;IACP5B,KAAK,EAAE,MADA;IAEP6B,eAAe,EAAE1C,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBuC,IAAjB,CAAsBC;EAFhC,CAzGgB;EA6GzBC,GAAG,EAAE;IACHhC,KAAK,EAAE,MADJ;IAEHE,MAAM,EAAE,MAFL;IAGH,CAACf,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bb,MAAM,EAAE;IADoB,CAH3B;IAMHW,SAAS,EAAE,QANR;IAOHD,SAAS,EAAE;EAPR,CA7GoB;EAsHzBqB,iBAAiB,EAAE;IACjBjC,KAAK,EAAE,MADU;IAEjBE,MAAM,EAAE,MAFS;IAGjB,CAACf,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bb,MAAM,EAAE;IADoB,CAHb;IAMjBW,SAAS,EAAE,QANM;IAOjBD,SAAS,EAAE,OAPM;IAQjBsB,WAAW,EAAE,OARI;IASjBC,WAAW,EAAEhD,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBuC,IAAjB,CAAsBC,KATlB;IAUjBK,OAAO,EAAE;EAVQ,CAtHM;EAkIzBC,eAAe,EAAE;IACfrC,KAAK,EAAE,OADQ;IAEfE,MAAM,EAAE,MAFO;IAGfC,OAAO,EAAE,SAHM;IAIf,CAAChB,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bf,KAAK,EAAE,OADqB;MAE5BE,MAAM,EAAE;IAFoB;EAJf,CAlIQ;EA2IzBoC,UAAU,EAAE;IACVtC,KAAK,EAAE,KADG;IAEVE,MAAM,EAAE,KAFE;IAGVqC,YAAY,EAAE,KAHJ;IAIVV,eAAe,EAAE1C,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BgD,KAJnC;IAKV9C,OAAO,EAAE,cALC;IAMVG,MAAM,EAAE;EANE,CA3Ia;EAmJzB4C,cAAc,EAAE;IACdzC,KAAK,EAAE,MADO;IAEdE,MAAM,EAAE,MAFM;IAGdqC,YAAY,EAAE,KAHA;IAIdV,eAAe,EAAE1C,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BkD,KAJ/B;IAKdhD,OAAO,EAAE,cALK;IAMdG,MAAM,EAAE;EANM,CAnJS;EA2JzB8C,gBAAgB,EAAE;IAChB3C,KAAK,EAAE,MADS;IAEhBE,MAAM,EAAE,MAFQ;IAGhBqC,YAAY,EAAE,KAHE;IAIhBV,eAAe,EAAE1C,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BoD,KAJ7B;IAKhBlD,OAAO,EAAE,cALO;IAMhBG,MAAM,EAAE;EANQ,CA3JO;EAmKzBgD,UAAU,EAAE;IACV7C,KAAK,EAAE,KADG;IAEVN,OAAO,EAAE,aAFC;IAGVyB,cAAc,EAAE,eAHN;IAIVd,QAAQ,EAAE,UAJA;IAKVC,GAAG,EAAE,MALK;IAMVe,SAAS,EAAE,mBAND;IAOV,eAAe;MACbrB,KAAK,EAAE,KADM;MAEbM,GAAG,EAAE;IAFQ;EAPL,CAnKa;EA+KzBwC,cAAc,EAAE;IACd9C,KAAK,EAAE,MADO;IAEd+C,SAAS,EAAE,MAFG;IAGdlD,MAAM,EAAE,KAHM;IAIdgB,SAAS,EAAE,QAJG;IAKdV,OAAO,EAAE,KALK;IAMd,CAAChB,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bb,MAAM,EAAE,OADoB;MAE5Bc,SAAS,EAAE;IAFiB,CANhB;IAUd,CAAC7B,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bb,MAAM,EAAE,OADoB;MAE5Bc,SAAS,EAAE;IAFiB,CAVhB;IAcd,CAAC7B,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bb,MAAM,EAAE,OADoB;MAE5Bc,SAAS,EAAE;IAFiB,CAdhB;IAkBd,yBAAyB;MACvBd,MAAM,EAAE,KADe;MAEvBP,UAAU,EAAE;IAFW;EAlBX,CA/KS;EAsMzBqD,MAAM,EAAE;IACNnB,eAAe,EAAE1C,KAAK,CAACG,EAAN,CAASC,OAAT,CAAiBC,UAAjB,CAA4BoD;EADvC,CAtMiB;EAyMzBK,UAAU,EAAE;IACVjD,KAAK,EAAE,OADG;IAEVE,MAAM,EAAE,MAFE;IAGVC,OAAO,EAAE,SAHC;IAIV,CAAChB,KAAK,CAAC2B,WAAN,CAAkBC,EAAlB,CAAqB,IAArB,CAAD,GAA8B;MAC5Bf,KAAK,EAAE,OADqB;MAE5BE,MAAM,EAAE;IAFoB;EAJpB,CAzMa;EAkNzBgD,KAAK,EAAE;IACL,cAAc;MACZlD,KAAK,EAAE,MADK;MAEZN,OAAO,EAAE,MAFG;MAGZyD,SAAS,EAAE,QAHC;MAIZjD,MAAM,EAAE,MAJI;MAKZC,OAAO,EAAE;IALG,CADT;IAQL,gBAAgB;MACdiD,SAAS,EAAE;IADG,CARX;IAWL,eAAe;MACblD,MAAM,EAAE,OADK;MAEbR,OAAO,EAAE,MAFI;MAGbS,OAAO,EAAE;IAHI;EAXV,CAlNkB;EAmOzBkD,aAAa,EAAE;IACblD,OAAO,EAAE;EADI,CAnOU;EAsOzBmD,KAAK,EAAE;IACL5D,OAAO,EAAE,MADJ;IAELM,KAAK,EAAE,MAFF;IAGLuD,QAAQ,EAAE,QAHL;IAILpD,OAAO,EAAE,KAJJ;IAKLD,MAAM,EAAE;EALH;AAtOkB,CAAZ,CAAf;;AA+OA,eAAehB,MAAf"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@material-ui/core";
|
|
3
|
+
|
|
4
|
+
import { HvStepNavigationProps } from "../StepNavigation";
|
|
5
|
+
import { HvStepProps } from "./Step";
|
|
6
|
+
|
|
7
|
+
export type HvDefaultNavigationClassKey = "root";
|
|
8
|
+
|
|
9
|
+
export type ComponentChildProps = {
|
|
10
|
+
stepsWidth: number;
|
|
11
|
+
navWidth: number;
|
|
12
|
+
separatorValues: {
|
|
13
|
+
minWidth: number;
|
|
14
|
+
maxWidth: number;
|
|
15
|
+
getColor: (state: HvStepProps["state"]) => any;
|
|
16
|
+
height: number;
|
|
17
|
+
};
|
|
18
|
+
stepValues: {
|
|
19
|
+
minSize: number;
|
|
20
|
+
maxSize: number;
|
|
21
|
+
StepComponent: React.ComponentType<HvStepProps>;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export type HvDefaultNavigationProps = StandardProps<
|
|
26
|
+
React.HTMLAttributes<HTMLDivElement>,
|
|
27
|
+
HvDefaultNavigationClassKey
|
|
28
|
+
> &
|
|
29
|
+
Pick<HvStepNavigationProps, "stepSize"> & {
|
|
30
|
+
/**
|
|
31
|
+
* Number of steps to show on the component.
|
|
32
|
+
*/
|
|
33
|
+
numSteps: number;
|
|
34
|
+
/**
|
|
35
|
+
* Returns a JSX.element of the titles container.
|
|
36
|
+
*/
|
|
37
|
+
getTitles: (
|
|
38
|
+
getTitleProps?: (params: {
|
|
39
|
+
state: HvStepProps["state"];
|
|
40
|
+
rawTitle: string;
|
|
41
|
+
number: number;
|
|
42
|
+
}) => { variant: string; title: string }
|
|
43
|
+
) => JSX.Element | null;
|
|
44
|
+
/**
|
|
45
|
+
* Returns dynamic width values of the component (width, titleWidth, separatorWidth).
|
|
46
|
+
*/
|
|
47
|
+
getDynamicValues: (stepsWidth: number) => {
|
|
48
|
+
width: number;
|
|
49
|
+
titleWidth: number;
|
|
50
|
+
separatorWidth: number;
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
|
|
54
|
+
*/
|
|
55
|
+
children: React.FunctionComponent<ComponentChildProps>;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default function HvDefaultNavigation(props: HvDefaultNavigationProps): JSX.Element | null;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
+
const _excluded = ["numSteps", "stepSize", "getTitles", "getDynamicValues", "children"];
|
|
3
|
+
import React from "react";
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
|
+
import { useTheme, withStyles } from "@material-ui/core";
|
|
6
|
+
import HvStep from "./Step";
|
|
7
|
+
import { getColor as getStateColor, stepSizes } from "./utils";
|
|
8
|
+
import styles from "./styles";
|
|
9
|
+
/**
|
|
10
|
+
* Default Navigation
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
const HvDefaultNavigation = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
numSteps,
|
|
16
|
+
stepSize,
|
|
17
|
+
getTitles,
|
|
18
|
+
getDynamicValues,
|
|
19
|
+
children
|
|
20
|
+
} = _ref,
|
|
21
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
22
|
+
|
|
23
|
+
const theme = useTheme(); // step values
|
|
24
|
+
|
|
25
|
+
const {
|
|
26
|
+
container: maxSize,
|
|
27
|
+
avatar: minSize
|
|
28
|
+
} = stepSizes[stepSize];
|
|
29
|
+
const StepComponent = HvStep; //
|
|
30
|
+
|
|
31
|
+
const stepsWidth = maxSize + minSize * (numSteps - 1);
|
|
32
|
+
const {
|
|
33
|
+
width,
|
|
34
|
+
titleWidth,
|
|
35
|
+
separatorWidth
|
|
36
|
+
} = getDynamicValues(stepsWidth); // separator values
|
|
37
|
+
|
|
38
|
+
const getColor = state => getStateColor(state === "Current" ? "Disabled" : state, theme);
|
|
39
|
+
|
|
40
|
+
const maxWidth = Math.max(titleWidth - minSize, separatorWidth);
|
|
41
|
+
const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth); //
|
|
42
|
+
|
|
43
|
+
const Steps = children;
|
|
44
|
+
const titles = getTitles(({
|
|
45
|
+
state
|
|
46
|
+
}) => ({
|
|
47
|
+
variant: state === "Disabled" ? "disabledText" : "highlightText",
|
|
48
|
+
titleWidth
|
|
49
|
+
}));
|
|
50
|
+
return /*#__PURE__*/React.createElement("div", other, /*#__PURE__*/React.createElement(Steps, {
|
|
51
|
+
stepsWidth,
|
|
52
|
+
navWidth: width,
|
|
53
|
+
separatorValues: {
|
|
54
|
+
minWidth,
|
|
55
|
+
maxWidth,
|
|
56
|
+
getColor,
|
|
57
|
+
height: 3
|
|
58
|
+
},
|
|
59
|
+
stepValues: {
|
|
60
|
+
minSize,
|
|
61
|
+
maxSize,
|
|
62
|
+
StepComponent
|
|
63
|
+
}
|
|
64
|
+
}), titles);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
process.env.NODE_ENV !== "production" ? HvDefaultNavigation.propTypes = {
|
|
68
|
+
/**
|
|
69
|
+
* Class names to be applied.
|
|
70
|
+
*/
|
|
71
|
+
className: PropTypes.string,
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* A Jss Object used to override or extend the styles applied.
|
|
75
|
+
*/
|
|
76
|
+
classes: PropTypes.shape({
|
|
77
|
+
/**
|
|
78
|
+
* Styles applied to the component root class.
|
|
79
|
+
*/
|
|
80
|
+
root: PropTypes.string
|
|
81
|
+
}).isRequired,
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Number of steps to show on the component.
|
|
85
|
+
*/
|
|
86
|
+
numSteps: PropTypes.number.isRequired,
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* Sets one of the standard sizes of the steps
|
|
90
|
+
*/
|
|
91
|
+
stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]).isRequired,
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Returns dynamic width values of the component (width, titleWidth, separatorWidth).
|
|
95
|
+
*/
|
|
96
|
+
getDynamicValues: PropTypes.func.isRequired,
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Returns a JSX.element of the titles container.
|
|
100
|
+
*/
|
|
101
|
+
getTitles: PropTypes.func.isRequired,
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}
|
|
105
|
+
*/
|
|
106
|
+
children: PropTypes.elementType.isRequired
|
|
107
|
+
} : void 0;
|
|
108
|
+
export default withStyles(styles, {
|
|
109
|
+
name: "HvDefaultNavigation"
|
|
110
|
+
})(HvDefaultNavigation);
|
|
111
|
+
//# sourceMappingURL=DefaultNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultNavigation.js","names":["React","PropTypes","useTheme","withStyles","HvStep","getColor","getStateColor","stepSizes","styles","HvDefaultNavigation","numSteps","stepSize","getTitles","getDynamicValues","children","other","theme","container","maxSize","avatar","minSize","StepComponent","stepsWidth","width","titleWidth","separatorWidth","state","maxWidth","Math","max","minWidth","Steps","titles","variant","navWidth","separatorValues","height","stepValues","propTypes","className","string","classes","shape","root","isRequired","number","oneOf","func","elementType","name"],"sources":["../../../../src/StepNavigation/DefaultNavigation/DefaultNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { useTheme, withStyles } from \"@material-ui/core\";\n\nimport HvStep from \"./Step\";\nimport { getColor as getStateColor, stepSizes } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Default Navigation\n */\nconst HvDefaultNavigation = ({\n numSteps,\n stepSize,\n getTitles,\n getDynamicValues,\n children,\n ...other\n}) => {\n const theme = useTheme();\n\n // step values\n const { container: maxSize, avatar: minSize } = stepSizes[stepSize];\n const StepComponent = HvStep;\n //\n\n const stepsWidth = maxSize + minSize * (numSteps - 1);\n const { width, titleWidth, separatorWidth } = getDynamicValues(stepsWidth);\n\n // separator values\n const getColor = (state) => getStateColor(state === \"Current\" ? \"Disabled\" : state, theme);\n const maxWidth = Math.max(titleWidth - minSize, separatorWidth);\n const minWidth = Math.max(titleWidth - (maxSize + minSize) * 0.5, separatorWidth);\n //\n\n const Steps = children;\n\n const titles = getTitles(({ state }) => ({\n variant: state === \"Disabled\" ? \"disabledText\" : \"highlightText\",\n titleWidth,\n }));\n\n return (\n <div {...other}>\n <Steps\n {...{\n stepsWidth,\n navWidth: width,\n separatorValues: {\n minWidth,\n maxWidth,\n getColor,\n height: 3,\n },\n stepValues: {\n minSize,\n maxSize,\n StepComponent,\n },\n }}\n />\n {titles}\n </div>\n );\n};\n\nHvDefaultNavigation.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n }).isRequired,\n /**\n * Number of steps to show on the component.\n */\n numSteps: PropTypes.number.isRequired,\n /**\n * Sets one of the standard sizes of the steps\n */\n stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]).isRequired,\n /**\n * Returns dynamic width values of the component (width, titleWidth, separatorWidth).\n */\n getDynamicValues: PropTypes.func.isRequired,\n /**\n * Returns a JSX.element of the titles container.\n */\n getTitles: PropTypes.func.isRequired,\n /**\n * Component to render Step Navigation with props = {separatorValues, stepValues, stepsWidth}\n */\n children: PropTypes.elementType.isRequired,\n};\n\nexport default withStyles(styles, { name: \"HvDefaultNavigation\" })(HvDefaultNavigation);\n"],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StandardProps } from "@material-ui/core";
|
|
3
|
+
import { HvButtonProps } from "@hitachivantara/uikit-react-core";
|
|
4
|
+
|
|
5
|
+
export type HvStepClassKey = "root";
|
|
6
|
+
|
|
7
|
+
export type HvStepProps = StandardProps<React.HTMLAttributes<HTMLDivElement>, HvStepClassKey> &
|
|
8
|
+
Pick<HvButtonProps, "onClick"> & {
|
|
9
|
+
/**
|
|
10
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
11
|
+
*/
|
|
12
|
+
state: "Pending" | "Failed" | "Completed" | "Current" | "Disabled";
|
|
13
|
+
/**
|
|
14
|
+
* Title of the step.
|
|
15
|
+
*/
|
|
16
|
+
title: string;
|
|
17
|
+
/**
|
|
18
|
+
* Sets one of the standard sizes of the step
|
|
19
|
+
*/
|
|
20
|
+
size?: "XS" | "SM" | "MD" | "LG" | "XL";
|
|
21
|
+
/**
|
|
22
|
+
* Number of the step.
|
|
23
|
+
*/
|
|
24
|
+
number?: number;
|
|
25
|
+
/**
|
|
26
|
+
* Define if a step is disabled/enabled.
|
|
27
|
+
* If this property is not defined and the step is on state "Disabled", the step component will be disabled
|
|
28
|
+
*/
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export default function HvStep(props: HvStepProps): JSX.Element | null;
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import "core-js/modules/es.array.includes.js";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import clsx from "clsx";
|
|
5
|
+
import { withStyles } from "@material-ui/core";
|
|
6
|
+
import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
|
|
7
|
+
import { HvAvatar, HvButton } from "@hitachivantara/uikit-react-core";
|
|
8
|
+
import { getColor } from "../utils";
|
|
9
|
+
import styles from "./styles";
|
|
10
|
+
/**
|
|
11
|
+
* Step element of "Default" Step Navigation root component
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
const HvStep = ({
|
|
15
|
+
className,
|
|
16
|
+
classes,
|
|
17
|
+
state,
|
|
18
|
+
title,
|
|
19
|
+
onClick,
|
|
20
|
+
disabled,
|
|
21
|
+
size = "SM",
|
|
22
|
+
number = 1
|
|
23
|
+
}) => {
|
|
24
|
+
const iconSize = {
|
|
25
|
+
XS: "XS",
|
|
26
|
+
SM: "XS",
|
|
27
|
+
MD: "S",
|
|
28
|
+
LG: "M",
|
|
29
|
+
XL: "M"
|
|
30
|
+
}[size];
|
|
31
|
+
const squareL = {
|
|
32
|
+
Pending: 16,
|
|
33
|
+
Failed: 24,
|
|
34
|
+
Completed: 24
|
|
35
|
+
}[state];
|
|
36
|
+
const svgSize = {
|
|
37
|
+
XS: squareL - 8,
|
|
38
|
+
SM: squareL,
|
|
39
|
+
MD: squareL + 8,
|
|
40
|
+
LG: squareL + 16,
|
|
41
|
+
XL: squareL + 24
|
|
42
|
+
}[size];
|
|
43
|
+
const backgroundColor = getColor(state);
|
|
44
|
+
const color = state === "Pending" ? "atmo2" : undefined;
|
|
45
|
+
const semantic = state !== "Pending" ? backgroundColor : undefined;
|
|
46
|
+
const status = state === "Current" ? "atmo5" : undefined;
|
|
47
|
+
const IconComponent = {
|
|
48
|
+
Pending: HourGlass,
|
|
49
|
+
Failed: Level3Bad,
|
|
50
|
+
Completed: Level0Good
|
|
51
|
+
}[state];
|
|
52
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: clsx(className, classes.root, state !== "Current" && classes["not-current"])
|
|
54
|
+
}, /*#__PURE__*/React.createElement(HvButton, {
|
|
55
|
+
className: clsx(classes.ghost, state === "Current" && classes.ghostDisabled),
|
|
56
|
+
"aria-label": `step-${title}`,
|
|
57
|
+
icon: true,
|
|
58
|
+
overrideIconColors: false,
|
|
59
|
+
disabled: disabled !== null && disabled !== void 0 ? disabled : ["Current", "Disabled"].includes(state),
|
|
60
|
+
onClick: onClick
|
|
61
|
+
}, /*#__PURE__*/React.createElement(HvAvatar, {
|
|
62
|
+
className: clsx(classes.avatar, classes[size]),
|
|
63
|
+
backgroundColor: backgroundColor,
|
|
64
|
+
status: status,
|
|
65
|
+
size: size
|
|
66
|
+
}, IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
|
|
67
|
+
color: color,
|
|
68
|
+
semantic: semantic,
|
|
69
|
+
width: svgSize,
|
|
70
|
+
height: svgSize,
|
|
71
|
+
iconSize: iconSize
|
|
72
|
+
}) : number)));
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
process.env.NODE_ENV !== "production" ? HvStep.propTypes = {
|
|
76
|
+
/**
|
|
77
|
+
* Class names to be applied.
|
|
78
|
+
*/
|
|
79
|
+
className: PropTypes.string,
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* A Jss Object used to override or extend the styles applied.
|
|
83
|
+
*/
|
|
84
|
+
classes: PropTypes.shape({
|
|
85
|
+
/**
|
|
86
|
+
* Styles applied to the component root class.
|
|
87
|
+
*/
|
|
88
|
+
root: PropTypes.string,
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Styles applied to the ghost class.
|
|
92
|
+
*/
|
|
93
|
+
ghost: PropTypes.string,
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Styles applied to the ghostDisabled class.
|
|
97
|
+
*/
|
|
98
|
+
ghostDisabled: PropTypes.string,
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* Styles applied to the root element when step is not in "current" state.
|
|
102
|
+
*/
|
|
103
|
+
"not-current": PropTypes.string,
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Styles applied to the root element when size is XS.
|
|
107
|
+
*/
|
|
108
|
+
XS: PropTypes.string,
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Styles applied to the root element when size is SM.
|
|
112
|
+
*/
|
|
113
|
+
SM: PropTypes.string,
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Styles applied to the root element when size is MD.
|
|
117
|
+
*/
|
|
118
|
+
MD: PropTypes.string,
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Styles applied to the root element when size is LG.
|
|
122
|
+
*/
|
|
123
|
+
LG: PropTypes.string,
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Styles applied to the root element when size is XL.
|
|
127
|
+
*/
|
|
128
|
+
XL: PropTypes.string,
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* Styles applied to the avatar element.
|
|
132
|
+
*/
|
|
133
|
+
avatar: PropTypes.string,
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Styles applied to the title of a step element.
|
|
137
|
+
*/
|
|
138
|
+
stepTitle: PropTypes.string
|
|
139
|
+
}).isRequired,
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* Sets one of the standard sizes of the step
|
|
143
|
+
*/
|
|
144
|
+
size: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled"}
|
|
148
|
+
*/
|
|
149
|
+
state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled"]).isRequired,
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Title of the step.
|
|
153
|
+
*/
|
|
154
|
+
title: PropTypes.string.isRequired,
|
|
155
|
+
|
|
156
|
+
/**
|
|
157
|
+
* Number of the step.
|
|
158
|
+
*/
|
|
159
|
+
number: PropTypes.number,
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Event onClick of the step.
|
|
163
|
+
*/
|
|
164
|
+
onClick: PropTypes.func,
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Define if a step is disabled/enabled.
|
|
168
|
+
* If this property is not defined and the step is on state "Disabled", the step component will be disabled
|
|
169
|
+
*/
|
|
170
|
+
disabled: PropTypes.bool
|
|
171
|
+
} : void 0;
|
|
172
|
+
export default withStyles(styles, {
|
|
173
|
+
name: "HvStep"
|
|
174
|
+
})(HvStep);
|
|
175
|
+
//# sourceMappingURL=Step.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Step.js","names":["React","PropTypes","clsx","withStyles","Level0Good","Level3Bad","HourGlass","HvAvatar","HvButton","getColor","styles","HvStep","className","classes","state","title","onClick","disabled","size","number","iconSize","XS","SM","MD","LG","XL","squareL","Pending","Failed","Completed","svgSize","backgroundColor","color","undefined","semantic","status","IconComponent","root","ghost","ghostDisabled","includes","avatar","propTypes","string","shape","stepTitle","isRequired","oneOf","func","bool","name"],"sources":["../../../../../src/StepNavigation/DefaultNavigation/Step/Step.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\n\nimport { Level0Good, Level3Bad, HourGlass } from \"@hitachivantara/uikit-react-icons\";\nimport { HvAvatar, HvButton } from \"@hitachivantara/uikit-react-core\";\n\nimport { getColor } from \"../utils\";\nimport styles from \"./styles\";\n\n/**\n * Step element of \"Default\" Step Navigation root component\n */\nconst HvStep = ({\n className,\n classes,\n state,\n title,\n onClick,\n disabled,\n size = \"SM\",\n number = 1,\n}) => {\n const iconSize = {\n XS: \"XS\",\n SM: \"XS\",\n MD: \"S\",\n LG: \"M\",\n XL: \"M\",\n }[size];\n\n const squareL = {\n Pending: 16,\n Failed: 24,\n Completed: 24,\n }[state];\n\n const svgSize = {\n XS: squareL - 8,\n SM: squareL,\n MD: squareL + 8,\n LG: squareL + 16,\n XL: squareL + 24,\n }[size];\n\n const backgroundColor = getColor(state);\n\n const color = state === \"Pending\" ? \"atmo2\" : undefined;\n\n const semantic = state !== \"Pending\" ? backgroundColor : undefined;\n\n const status = state === \"Current\" ? \"atmo5\" : undefined;\n\n const IconComponent = {\n Pending: HourGlass,\n Failed: Level3Bad,\n Completed: Level0Good,\n }[state];\n\n return (\n <div\n className={clsx(className, classes.root, { [classes[\"not-current\"]]: state !== \"Current\" })}\n >\n <HvButton\n className={clsx(classes.ghost, { [classes.ghostDisabled]: state === \"Current\" })}\n aria-label={`step-${title}`}\n icon\n overrideIconColors={false}\n disabled={disabled ?? [\"Current\", \"Disabled\"].includes(state)}\n onClick={onClick}\n >\n <HvAvatar\n className={clsx(classes.avatar, classes[size])}\n backgroundColor={backgroundColor}\n status={status}\n size={size}\n >\n {IconComponent ? (\n <IconComponent\n color={color}\n semantic={semantic}\n width={svgSize}\n height={svgSize}\n iconSize={iconSize}\n />\n ) : (\n number\n )}\n </HvAvatar>\n </HvButton>\n </div>\n );\n};\n\nHvStep.propTypes = {\n /**\n * Class names to be applied.\n */\n className: PropTypes.string,\n /**\n * A Jss Object used to override or extend the styles applied.\n */\n classes: PropTypes.shape({\n /**\n * Styles applied to the component root class.\n */\n root: PropTypes.string,\n /**\n * Styles applied to the ghost class.\n */\n ghost: PropTypes.string,\n /**\n * Styles applied to the ghostDisabled class.\n */\n ghostDisabled: PropTypes.string,\n /**\n * Styles applied to the root element when step is not in \"current\" state.\n */\n \"not-current\": PropTypes.string,\n /**\n * Styles applied to the root element when size is XS.\n */\n XS: PropTypes.string,\n /**\n * Styles applied to the root element when size is SM.\n */\n SM: PropTypes.string,\n /**\n * Styles applied to the root element when size is MD.\n */\n MD: PropTypes.string,\n /**\n * Styles applied to the root element when size is LG.\n */\n LG: PropTypes.string,\n /**\n * Styles applied to the root element when size is XL.\n */\n XL: PropTypes.string,\n /**\n * Styles applied to the avatar element.\n */\n avatar: PropTypes.string,\n /**\n * Styles applied to the title of a step element.\n */\n stepTitle: PropTypes.string,\n }).isRequired,\n /**\n * Sets one of the standard sizes of the step\n */\n size: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n /**\n * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"}\n */\n state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\"]).isRequired,\n /**\n * Title of the step.\n */\n title: PropTypes.string.isRequired,\n /**\n * Number of the step.\n */\n number: PropTypes.number,\n /**\n * Event onClick of the step.\n */\n onClick: PropTypes.func,\n /**\n * Define if a step is disabled/enabled.\n * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n */\n disabled: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStep\" })(HvStep);\n"],"mappings":"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"}
|