@cloudscape-design/components 3.0.499 → 3.0.501
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/app-layout/visual-refresh/mobile-toolbar.d.ts.map +1 -1
- package/app-layout/visual-refresh/mobile-toolbar.js +2 -1
- package/app-layout/visual-refresh/mobile-toolbar.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +81 -80
- package/app-layout/visual-refresh/styles.scoped.css +177 -171
- package/app-layout/visual-refresh/styles.selectors.js +81 -80
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +2 -1
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/cards/index.d.ts.map +1 -1
- package/cards/index.js +3 -2
- package/cards/index.js.map +1 -1
- package/cards/styles.css.js +40 -39
- package/cards/styles.scoped.css +52 -49
- package/cards/styles.selectors.js +40 -39
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +3 -2
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +30 -29
- package/container/styles.scoped.css +65 -52
- package/container/styles.selectors.js +30 -29
- package/internal/context/single-tab-stop-navigation-context.d.ts +5 -6
- package/internal/context/single-tab-stop-navigation-context.d.ts.map +1 -1
- package/internal/context/single-tab-stop-navigation-context.js +7 -8
- package/internal/context/single-tab-stop-navigation-context.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/internal/utils/content-header-utils.d.ts +1 -0
- package/internal/utils/content-header-utils.d.ts.map +1 -1
- package/internal/utils/content-header-utils.js +2 -3
- package/internal/utils/content-header-utils.js.map +1 -1
- package/package.json +1 -1
- package/table/table-role/grid-navigation.d.ts.map +1 -1
- package/table/table-role/grid-navigation.js +36 -37
- package/table/table-role/grid-navigation.js.map +1 -1
- package/table/table-role/interfaces.d.ts +0 -2
- package/table/table-role/interfaces.d.ts.map +1 -1
- package/table/table-role/interfaces.js.map +1 -1
- package/table/table-role/utils.d.ts +1 -0
- package/table/table-role/utils.d.ts.map +1 -1
- package/table/table-role/utils.js +3 -0
- package/table/table-role/utils.js.map +1 -1
- package/wizard/internal.d.ts.map +1 -1
- package/wizard/internal.js +3 -2
- package/wizard/internal.js.map +1 -1
- package/wizard/styles.css.js +32 -31
- package/wizard/styles.scoped.css +76 -65
- package/wizard/styles.selectors.js +32 -31
- package/wizard/wizard-form-header.d.ts.map +1 -1
- package/wizard/wizard-form-header.js +2 -1
- package/wizard/wizard-form-header.js.map +1 -1
- package/wizard/wizard-navigation.d.ts.map +1 -1
- package/wizard/wizard-navigation.js +3 -2
- package/wizard/wizard-navigation.js.map +1 -1
package/wizard/styles.scoped.css
CHANGED
|
@@ -91,7 +91,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
93
|
/* stylelint-disable selector-max-universal, selector-max-type */
|
|
94
|
-
.
|
|
94
|
+
.awsui_root_1xupv_157fb_94:not(#\9) {
|
|
95
95
|
border-collapse: separate;
|
|
96
96
|
border-spacing: 0;
|
|
97
97
|
box-sizing: border-box;
|
|
@@ -127,41 +127,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
127
127
|
-moz-osx-font-smoothing: auto;
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
.
|
|
130
|
+
.awsui_wizard_1xupv_157fb_129.awsui_refresh_1xupv_157fb_129:not(#\9) {
|
|
131
131
|
column-gap: var(--space-xl-lmui9r, 24px);
|
|
132
132
|
display: grid;
|
|
133
133
|
grid-template-columns: auto minmax(0, 1fr);
|
|
134
134
|
grid-template-rows: auto 1fr;
|
|
135
|
-
row-gap: var(--space-scaled-
|
|
135
|
+
row-gap: var(--space-scaled-xxs-7597g1, 4px);
|
|
136
136
|
}
|
|
137
|
-
.
|
|
137
|
+
.awsui_wizard_1xupv_157fb_129.awsui_refresh_1xupv_157fb_129.awsui_small-container_1xupv_157fb_136:not(#\9) {
|
|
138
138
|
grid-template-columns: minmax(0, 1fr) 0;
|
|
139
139
|
row-gap: var(--space-scaled-l-0hpmd7, 20px);
|
|
140
140
|
}
|
|
141
|
+
.awsui_wizard_1xupv_157fb_129.awsui_refresh_1xupv_157fb_129:not(#\9):not(.awsui_remove-high-contrast-header_1xupv_157fb_140) {
|
|
142
|
+
row-gap: var(--space-scaled-xl-kswcw7, 24px);
|
|
143
|
+
}
|
|
141
144
|
|
|
142
|
-
.
|
|
145
|
+
.awsui_wizard_1xupv_157fb_129:not(#\9):not(.awsui_refresh_1xupv_157fb_129) {
|
|
143
146
|
display: flex;
|
|
144
147
|
}
|
|
145
148
|
|
|
146
|
-
.
|
|
149
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129:not(#\9) {
|
|
147
150
|
grid-column: 1;
|
|
148
151
|
grid-row: 1/span 2;
|
|
149
152
|
padding-top: var(--awsui-container-first-gap-y98gph, 0px);
|
|
150
153
|
}
|
|
151
|
-
.
|
|
154
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129:not(#\9) {
|
|
152
155
|
background: var(--color-background-container-content-4un1ap, #ffffff);
|
|
153
156
|
position: relative;
|
|
157
|
+
margin: 0;
|
|
158
|
+
padding: var(--space-scaled-xxs-7597g1, 4px) 0 0 0;
|
|
159
|
+
width: 260px;
|
|
160
|
+
box-sizing: border-box;
|
|
161
|
+
}
|
|
162
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129:not(#\9):not(.awsui_remove-high-contrast-header_1xupv_157fb_140) {
|
|
154
163
|
border-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
155
164
|
box-sizing: border-box;
|
|
156
|
-
margin: 0;
|
|
157
165
|
padding: var(--space-scaled-m-mo5yse, 16px) var(--space-l-t419sm, 20px) var(--space-scaled-l-0hpmd7, 20px) var(--space-m-udix3p, 16px);
|
|
158
166
|
width: 280px;
|
|
159
|
-
box-sizing: border-box;
|
|
160
167
|
}
|
|
161
|
-
.
|
|
168
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129:not(#\9):not(.awsui_remove-high-contrast-header_1xupv_157fb_140).awsui_refresh_1xupv_157fb_129 {
|
|
162
169
|
border: solid var(--border-divider-section-width-1061zr, 1px) var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
163
170
|
}
|
|
164
|
-
.
|
|
171
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129:not(#\9):not(.awsui_remove-high-contrast-header_1xupv_157fb_140):not(.awsui_refresh_1xupv_157fb_129)::before {
|
|
165
172
|
content: "";
|
|
166
173
|
position: absolute;
|
|
167
174
|
left: 0px;
|
|
@@ -176,7 +183,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
176
183
|
border-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
177
184
|
z-index: 1;
|
|
178
185
|
}
|
|
179
|
-
.
|
|
186
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129:not(#\9):not(.awsui_remove-high-contrast-header_1xupv_157fb_140):not(.awsui_refresh_1xupv_157fb_129)::after {
|
|
180
187
|
content: "";
|
|
181
188
|
position: absolute;
|
|
182
189
|
left: 0px;
|
|
@@ -189,27 +196,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
189
196
|
border-radius: var(--border-radius-container-wqv1zi, 16px);
|
|
190
197
|
box-shadow: var(--shadow-container-fxmdn3, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
|
|
191
198
|
}
|
|
192
|
-
.
|
|
199
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li:not(#\9) {
|
|
193
200
|
display: grid;
|
|
194
201
|
column-gap: var(--space-xs-zb16t3, 8px);
|
|
195
202
|
grid-template-columns: var(--space-l-t419sm, 20px) 1fr;
|
|
196
203
|
grid-template-rows: repeat(2, auto);
|
|
197
204
|
padding: 0;
|
|
198
205
|
}
|
|
199
|
-
.
|
|
206
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li > hr:not(#\9) {
|
|
200
207
|
background-color: var(--color-border-divider-default-j74lyz, #b6bec9);
|
|
201
208
|
border: 0;
|
|
202
209
|
grid-column: 1;
|
|
203
210
|
height: 100%;
|
|
204
211
|
width: var(--space-xxxs-zbmxqb, 2px);
|
|
205
212
|
}
|
|
206
|
-
.
|
|
213
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li > .awsui_number_1xupv_157fb_212:not(#\9) {
|
|
207
214
|
color: var(--color-text-small-zfvvfc, #5f6b7a);
|
|
208
215
|
font-size: var(--font-size-body-s-asqx2i, 12px);
|
|
209
216
|
grid-column: 2;
|
|
210
217
|
grid-row: 1;
|
|
211
218
|
}
|
|
212
|
-
.
|
|
219
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li > a:not(#\9) {
|
|
213
220
|
align-items: start;
|
|
214
221
|
column-gap: var(--space-xs-zb16t3, 8px);
|
|
215
222
|
cursor: pointer;
|
|
@@ -219,7 +226,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
219
226
|
grid-row: 2;
|
|
220
227
|
grid-template-columns: var(--space-l-t419sm, 20px) 1fr;
|
|
221
228
|
}
|
|
222
|
-
.
|
|
229
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li > a > .awsui_circle_1xupv_157fb_228:not(#\9) {
|
|
223
230
|
border-radius: 100%;
|
|
224
231
|
grid-column: 1;
|
|
225
232
|
height: 10px;
|
|
@@ -227,12 +234,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
227
234
|
margin-top: 6px;
|
|
228
235
|
width: 10px;
|
|
229
236
|
}
|
|
230
|
-
.
|
|
237
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li > a > .awsui_title_1xupv_157fb_236:not(#\9) {
|
|
231
238
|
min-width: 0;
|
|
232
239
|
word-break: break-word;
|
|
233
240
|
grid-column: 2;
|
|
234
241
|
}
|
|
235
|
-
body[data-awsui-focus-visible=true] .
|
|
242
|
+
body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li > a:not(#\9):focus {
|
|
236
243
|
outline: thin dotted;
|
|
237
244
|
outline: var(--border-link-focus-ring-outline-kkfop6, 0);
|
|
238
245
|
outline-offset: 2px;
|
|
@@ -240,58 +247,58 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_4d72d_145.awsui_refr
|
|
|
240
247
|
border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
|
|
241
248
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-v8hkrl, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
242
249
|
}
|
|
243
|
-
.
|
|
250
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li:not(#\9):first-child > hr {
|
|
244
251
|
grid-row: 2/span 2;
|
|
245
252
|
}
|
|
246
|
-
.
|
|
253
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li:not(#\9):not(:first-child) > .awsui_number_1xupv_157fb_212 {
|
|
247
254
|
margin-top: var(--space-m-udix3p, 16px);
|
|
248
255
|
}
|
|
249
|
-
.
|
|
256
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li:not(#\9):last-child > hr {
|
|
250
257
|
grid-row: 1;
|
|
251
258
|
}
|
|
252
|
-
.
|
|
259
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li:not(#\9):only-of-type > hr {
|
|
253
260
|
display: none;
|
|
254
261
|
}
|
|
255
|
-
.
|
|
262
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li:not(#\9):not(:first-child):not(:last-child) > hr {
|
|
256
263
|
grid-row: 1/span 3;
|
|
257
264
|
}
|
|
258
|
-
.
|
|
265
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_active_1xupv_157fb_264 > a:not(#\9) {
|
|
259
266
|
cursor: text;
|
|
260
267
|
}
|
|
261
|
-
.
|
|
268
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_active_1xupv_157fb_264 > a > .awsui_circle_1xupv_157fb_228:not(#\9) {
|
|
262
269
|
background-color: var(--color-background-control-checked-w517i0, #0972d3);
|
|
263
270
|
box-shadow: 0 0 0 3px var(--color-background-container-content-4un1ap, #ffffff), 0 0 0 5px var(--color-background-control-checked-w517i0, #0972d3), 0 0 0 7px var(--color-background-container-content-4un1ap, #ffffff);
|
|
264
271
|
}
|
|
265
|
-
.
|
|
272
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_active_1xupv_157fb_264 > a > .awsui_title_1xupv_157fb_236:not(#\9) {
|
|
266
273
|
color: var(--color-background-control-checked-w517i0, #0972d3);
|
|
267
274
|
font-weight: 700;
|
|
268
275
|
}
|
|
269
|
-
.
|
|
276
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_disabled_1xupv_157fb_275 > a:not(#\9) {
|
|
270
277
|
cursor: text;
|
|
271
278
|
}
|
|
272
|
-
.
|
|
279
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_disabled_1xupv_157fb_275 > a > .awsui_circle_1xupv_157fb_228:not(#\9) {
|
|
273
280
|
background-color: var(--color-background-container-content-4un1ap, #ffffff);
|
|
274
281
|
box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-z7a3t4, #9ba7b6), 0 0 0 4px var(--color-background-container-content-4un1ap, #ffffff);
|
|
275
282
|
}
|
|
276
|
-
.
|
|
283
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_disabled_1xupv_157fb_275 > a > .awsui_title_1xupv_157fb_236:not(#\9) {
|
|
277
284
|
color: var(--color-text-status-inactive-m7co45, #5f6b7a);
|
|
278
285
|
}
|
|
279
|
-
.
|
|
286
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_enabled_1xupv_157fb_285 > a > .awsui_circle_1xupv_157fb_228:not(#\9) {
|
|
280
287
|
background-color: var(--color-text-interactive-default-lnx6lk, #414d5c);
|
|
281
288
|
box-shadow: 0 0 0 2px var(--color-text-interactive-default-lnx6lk, #414d5c), 0 0 0 4px var(--color-background-container-content-4un1ap, #ffffff);
|
|
282
289
|
}
|
|
283
|
-
.
|
|
290
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_enabled_1xupv_157fb_285 > a > .awsui_title_1xupv_157fb_236:not(#\9) {
|
|
284
291
|
color: var(--color-text-interactive-default-lnx6lk, #414d5c);
|
|
285
292
|
}
|
|
286
|
-
.
|
|
293
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_enabled_1xupv_157fb_285 > a:not(#\9):hover > .awsui_circle_1xupv_157fb_228 {
|
|
287
294
|
background-color: var(--color-background-control-checked-w517i0, #0972d3);
|
|
288
295
|
box-shadow: 0 0 0 2px var(--color-background-control-checked-w517i0, #0972d3), 0 0 0 4px var(--color-background-container-content-4un1ap, #ffffff);
|
|
289
296
|
}
|
|
290
|
-
.
|
|
297
|
+
.awsui_navigation_1xupv_157fb_148.awsui_refresh_1xupv_157fb_129 > ul.awsui_refresh_1xupv_157fb_129 > li.awsui_enabled_1xupv_157fb_285 > a:not(#\9):hover > .awsui_title_1xupv_157fb_236 {
|
|
291
298
|
color: var(--color-background-control-checked-w517i0, #0972d3);
|
|
292
299
|
}
|
|
293
300
|
|
|
294
|
-
.
|
|
301
|
+
.awsui_navigation_1xupv_157fb_148:not(#\9):not(.awsui_refresh_1xupv_157fb_129) {
|
|
295
302
|
color: var(--color-text-disabled-f4c52h, #9ba7b6);
|
|
296
303
|
display: inline-block;
|
|
297
304
|
margin-right: calc(2 * var(--space-xxxl-4x2gki, 40px));
|
|
@@ -299,86 +306,90 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_4d72d_145.awsui_refr
|
|
|
299
306
|
padding-top: var(--space-xxs-p8yyaw, 4px);
|
|
300
307
|
width: 200px;
|
|
301
308
|
}
|
|
302
|
-
.
|
|
309
|
+
.awsui_navigation_1xupv_157fb_148:not(#\9):not(.awsui_refresh_1xupv_157fb_129) > ul:not(.awsui_refresh_1xupv_157fb_129) {
|
|
303
310
|
list-style: none;
|
|
304
311
|
padding: 0;
|
|
305
312
|
margin: 0;
|
|
306
313
|
}
|
|
307
|
-
.
|
|
314
|
+
.awsui_navigation_1xupv_157fb_148:not(#\9):not(.awsui_refresh_1xupv_157fb_129) > ul:not(.awsui_refresh_1xupv_157fb_129) > li {
|
|
308
315
|
min-width: 0;
|
|
309
316
|
word-break: break-word;
|
|
310
317
|
padding-bottom: var(--space-scaled-m-mo5yse, 16px);
|
|
311
318
|
padding-top: 0;
|
|
312
319
|
}
|
|
313
|
-
.
|
|
320
|
+
.awsui_navigation_1xupv_157fb_148:not(#\9):not(.awsui_refresh_1xupv_157fb_129) > ul:not(.awsui_refresh_1xupv_157fb_129) > li:not(:first-child) {
|
|
314
321
|
margin-top: var(--space-scaled-m-mo5yse, 16px);
|
|
315
322
|
}
|
|
316
|
-
.
|
|
323
|
+
.awsui_navigation_1xupv_157fb_148:not(#\9):not(.awsui_refresh_1xupv_157fb_129) > ul:not(.awsui_refresh_1xupv_157fb_129) > li:not(:last-child) {
|
|
317
324
|
border-bottom: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-layout-ownedw, #d1d5db);
|
|
318
325
|
}
|
|
319
326
|
|
|
320
|
-
.
|
|
327
|
+
.awsui_form_1xupv_157fb_326:not(#\9):not(.awsui_refresh_1xupv_157fb_129) {
|
|
321
328
|
min-width: 0;
|
|
322
329
|
word-break: break-word;
|
|
323
330
|
width: 100%;
|
|
324
331
|
}
|
|
325
|
-
.
|
|
332
|
+
.awsui_form_1xupv_157fb_326:not(#\9):not(.awsui_refresh_1xupv_157fb_129) > .awsui_form-header_1xupv_157fb_331 {
|
|
326
333
|
position: relative;
|
|
327
334
|
margin-bottom: var(--space-scaled-m-mo5yse, 16px);
|
|
328
335
|
}
|
|
329
336
|
|
|
330
|
-
.
|
|
337
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129:not(#\9) {
|
|
331
338
|
min-width: 0;
|
|
332
339
|
word-break: break-word;
|
|
333
340
|
display: contents;
|
|
334
341
|
}
|
|
335
|
-
.
|
|
342
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129 > .awsui_background_1xupv_157fb_341:not(#\9) {
|
|
336
343
|
background-color: var(--color-background-layout-main-nx09lr, #ffffff);
|
|
337
344
|
grid-column: 1/span 2;
|
|
338
345
|
grid-row: 1;
|
|
339
346
|
color: var(--color-text-body-default-at06ol, #000716);
|
|
340
347
|
}
|
|
341
|
-
.
|
|
348
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129 > .awsui_form-header_1xupv_157fb_331:not(#\9) {
|
|
342
349
|
background-color: var(--color-background-layout-main-nx09lr, #ffffff);
|
|
343
350
|
grid-column: 2;
|
|
344
351
|
grid-row: 1;
|
|
345
352
|
color: var(--color-text-body-default-at06ol, #000716);
|
|
346
353
|
}
|
|
347
|
-
.
|
|
354
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129 > .awsui_form-header_1xupv_157fb_331 > .awsui_form-header-content_1xupv_157fb_353:not(#\9) {
|
|
355
|
+
padding-top: calc(var(--awsui-container-first-gap-y98gph, 0px) + var(--space-m-udix3p, 16px) - var(--space-xxxs-zbmxqb, 2px));
|
|
356
|
+
padding-bottom: var(--space-scaled-s-aqzyko, 12px);
|
|
357
|
+
}
|
|
358
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129:not(#\9):not(.awsui_remove-high-contrast-header_1xupv_157fb_140) > .awsui_form-header_1xupv_157fb_331 > .awsui_form-header-content_1xupv_157fb_353 {
|
|
348
359
|
padding-top: calc(var(--awsui-container-first-gap-y98gph, 0px) + var(--space-s-34lx8l, 12px));
|
|
349
360
|
padding-bottom: var(--space-scaled-m-mo5yse, 16px);
|
|
350
361
|
}
|
|
351
|
-
.
|
|
362
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129 > .awsui_form-component_1xupv_157fb_361:not(#\9) {
|
|
352
363
|
grid-column: 2;
|
|
353
364
|
grid-row: 2;
|
|
354
365
|
}
|
|
355
|
-
.
|
|
366
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129.awsui_small-container_1xupv_157fb_136 > .awsui_form-header_1xupv_157fb_331:not(#\9) {
|
|
356
367
|
grid-column: 1/span 2;
|
|
357
368
|
}
|
|
358
|
-
.
|
|
369
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129.awsui_small-container_1xupv_157fb_136 > .awsui_form-header_1xupv_157fb_331 > .awsui_form-header-content_1xupv_157fb_353:not(#\9) {
|
|
359
370
|
padding-top: 0;
|
|
360
371
|
}
|
|
361
|
-
.
|
|
372
|
+
.awsui_form_1xupv_157fb_326.awsui_refresh_1xupv_157fb_129.awsui_small-container_1xupv_157fb_136 > .awsui_form-component_1xupv_157fb_361:not(#\9) {
|
|
362
373
|
grid-column: 1/span 2;
|
|
363
374
|
}
|
|
364
375
|
|
|
365
|
-
.
|
|
376
|
+
.awsui_navigation_1xupv_157fb_148.awsui_hidden_1xupv_157fb_375:not(#\9) {
|
|
366
377
|
display: none;
|
|
367
378
|
}
|
|
368
379
|
|
|
369
|
-
.awsui_collapsed-
|
|
380
|
+
.awsui_collapsed-steps_1xupv_157fb_379:not(#\9) {
|
|
370
381
|
color: var(--color-text-heading-secondary-37b2tq, #414d5c);
|
|
371
382
|
font-weight: 700;
|
|
372
383
|
padding-top: var(--space-scaled-xxs-7597g1, 4px);
|
|
373
384
|
}
|
|
374
|
-
.awsui_collapsed-steps-
|
|
385
|
+
.awsui_collapsed-steps-hidden_1xupv_157fb_384:not(#\9) {
|
|
375
386
|
display: none;
|
|
376
387
|
}
|
|
377
388
|
|
|
378
|
-
.awsui_form-header-component-
|
|
389
|
+
.awsui_form-header-component-wrapper_1xupv_157fb_388:not(#\9) {
|
|
379
390
|
outline: none;
|
|
380
391
|
}
|
|
381
|
-
body[data-awsui-focus-visible=true] .awsui_form-header-component-
|
|
392
|
+
body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_157fb_388:not(#\9):focus {
|
|
382
393
|
outline: thin dotted;
|
|
383
394
|
outline: var(--border-link-focus-ring-outline-kkfop6, 0);
|
|
384
395
|
outline-offset: 2px;
|
|
@@ -387,30 +398,30 @@ body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_4
|
|
|
387
398
|
box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-v8hkrl, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
388
399
|
}
|
|
389
400
|
|
|
390
|
-
.awsui_form-header-
|
|
391
|
-
.awsui_navigation-
|
|
392
|
-
.awsui_navigation-link-
|
|
393
|
-
.awsui_navigation-link-
|
|
401
|
+
.awsui_form-header-component_1xupv_157fb_388:not(#\9),
|
|
402
|
+
.awsui_navigation-link_1xupv_157fb_401:not(#\9),
|
|
403
|
+
.awsui_navigation-link-item_1xupv_157fb_402:not(#\9),
|
|
404
|
+
.awsui_navigation-link-label_1xupv_157fb_403:not(#\9) {
|
|
394
405
|
/* used in test-utils */
|
|
395
406
|
}
|
|
396
407
|
|
|
397
|
-
.awsui_navigation-link-
|
|
408
|
+
.awsui_navigation-link-active_1xupv_157fb_407:not(#\9) {
|
|
398
409
|
font-weight: 700;
|
|
399
410
|
color: var(--color-text-body-default-at06ol, #000716);
|
|
400
411
|
}
|
|
401
412
|
|
|
402
|
-
.awsui_navigation-link-
|
|
413
|
+
.awsui_navigation-link-disabled_1xupv_157fb_412:not(#\9) {
|
|
403
414
|
color: var(--color-text-status-inactive-m7co45, #5f6b7a);
|
|
404
415
|
}
|
|
405
416
|
|
|
406
|
-
.awsui_cancel-
|
|
407
|
-
.awsui_previous-
|
|
408
|
-
.awsui_primary-
|
|
409
|
-
.awsui_skip-to-
|
|
417
|
+
.awsui_cancel-button_1xupv_157fb_416:not(#\9),
|
|
418
|
+
.awsui_previous-button_1xupv_157fb_417:not(#\9),
|
|
419
|
+
.awsui_primary-button_1xupv_157fb_418:not(#\9),
|
|
420
|
+
.awsui_skip-to-button_1xupv_157fb_419:not(#\9) {
|
|
410
421
|
/* used in test-utils */
|
|
411
422
|
}
|
|
412
423
|
|
|
413
|
-
.awsui_action-
|
|
424
|
+
.awsui_action-buttons_1xupv_157fb_423:not(#\9) {
|
|
414
425
|
display: flex;
|
|
415
426
|
justify-content: flex-end;
|
|
416
427
|
}
|
|
@@ -2,36 +2,37 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"wizard": "
|
|
7
|
-
"refresh": "
|
|
8
|
-
"small-container": "awsui_small-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"form
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"form-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"collapsed-steps
|
|
24
|
-
"
|
|
25
|
-
"form-header-component": "awsui_form-header-
|
|
26
|
-
"
|
|
27
|
-
"navigation-link
|
|
28
|
-
"navigation-link-
|
|
29
|
-
"navigation-link-
|
|
30
|
-
"navigation-link-
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
5
|
+
"root": "awsui_root_1xupv_157fb_94",
|
|
6
|
+
"wizard": "awsui_wizard_1xupv_157fb_129",
|
|
7
|
+
"refresh": "awsui_refresh_1xupv_157fb_129",
|
|
8
|
+
"small-container": "awsui_small-container_1xupv_157fb_136",
|
|
9
|
+
"remove-high-contrast-header": "awsui_remove-high-contrast-header_1xupv_157fb_140",
|
|
10
|
+
"navigation": "awsui_navigation_1xupv_157fb_148",
|
|
11
|
+
"number": "awsui_number_1xupv_157fb_212",
|
|
12
|
+
"circle": "awsui_circle_1xupv_157fb_228",
|
|
13
|
+
"title": "awsui_title_1xupv_157fb_236",
|
|
14
|
+
"active": "awsui_active_1xupv_157fb_264",
|
|
15
|
+
"disabled": "awsui_disabled_1xupv_157fb_275",
|
|
16
|
+
"enabled": "awsui_enabled_1xupv_157fb_285",
|
|
17
|
+
"form": "awsui_form_1xupv_157fb_326",
|
|
18
|
+
"form-header": "awsui_form-header_1xupv_157fb_331",
|
|
19
|
+
"background": "awsui_background_1xupv_157fb_341",
|
|
20
|
+
"form-header-content": "awsui_form-header-content_1xupv_157fb_353",
|
|
21
|
+
"form-component": "awsui_form-component_1xupv_157fb_361",
|
|
22
|
+
"hidden": "awsui_hidden_1xupv_157fb_375",
|
|
23
|
+
"collapsed-steps": "awsui_collapsed-steps_1xupv_157fb_379",
|
|
24
|
+
"collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_157fb_384",
|
|
25
|
+
"form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_157fb_388",
|
|
26
|
+
"form-header-component": "awsui_form-header-component_1xupv_157fb_388",
|
|
27
|
+
"navigation-link": "awsui_navigation-link_1xupv_157fb_401",
|
|
28
|
+
"navigation-link-item": "awsui_navigation-link-item_1xupv_157fb_402",
|
|
29
|
+
"navigation-link-label": "awsui_navigation-link-label_1xupv_157fb_403",
|
|
30
|
+
"navigation-link-active": "awsui_navigation-link-active_1xupv_157fb_407",
|
|
31
|
+
"navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_157fb_412",
|
|
32
|
+
"cancel-button": "awsui_cancel-button_1xupv_157fb_416",
|
|
33
|
+
"previous-button": "awsui_previous-button_1xupv_157fb_417",
|
|
34
|
+
"primary-button": "awsui_primary-button_1xupv_157fb_418",
|
|
35
|
+
"skip-to-button": "awsui_skip-to-button_1xupv_157fb_419",
|
|
36
|
+
"action-buttons": "awsui_action-buttons_1xupv_157fb_423"
|
|
36
37
|
};
|
|
37
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-form-header.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-form-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"wizard-form-header.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-form-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,qBAAqB,eAsB5F"}
|
|
@@ -5,9 +5,10 @@ import React from 'react';
|
|
|
5
5
|
import { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';
|
|
6
6
|
import { contentHeaderClassName } from '../internal/utils/content-header-utils';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
|
+
import { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';
|
|
8
9
|
export default function WizardFormHeader({ children, isVisualRefresh }) {
|
|
9
10
|
const overlapElement = useDynamicOverlap();
|
|
10
11
|
return (React.createElement("div", { className: clsx(styles['form-header'], isVisualRefresh && styles['form-header-refresh'], isVisualRefresh && contentHeaderClassName), ref: overlapElement },
|
|
11
|
-
React.createElement("div", { className: clsx(styles['form-header-content']) }, children)));
|
|
12
|
+
React.createElement("div", { className: clsx(styles['form-header-content'], shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']) }, children)));
|
|
12
13
|
}
|
|
13
14
|
//# sourceMappingURL=wizard-form-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-form-header.js","sourceRoot":"lib/default/","sources":["wizard/wizard-form-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"wizard-form-header.js","sourceRoot":"lib/default/","sources":["wizard/wizard-form-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAQxF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAyB;IAC3F,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,CAAC,EACrB,eAAe,IAAI,MAAM,CAAC,qBAAqB,CAAC,EAChD,eAAe,IAAI,sBAAsB,CAC1C,EACD,GAAG,EAAE,cAAc;QAEnB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,qBAAqB,CAAC,EAC7B,8BAA8B,IAAI,MAAM,CAAC,6BAA6B,CAAC,CACxE,IAEA,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { useDynamicOverlap } from '../internal/hooks/use-dynamic-overlap';\nimport { contentHeaderClassName } from '../internal/utils/content-header-utils';\nimport styles from './styles.css.js';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\ninterface WizardFormHeaderProps {\n children: React.ReactNode;\n isMobile: boolean;\n isVisualRefresh: boolean;\n}\n\nexport default function WizardFormHeader({ children, isVisualRefresh }: WizardFormHeaderProps) {\n const overlapElement = useDynamicOverlap();\n\n return (\n <div\n className={clsx(\n styles['form-header'],\n isVisualRefresh && styles['form-header-refresh'],\n isVisualRefresh && contentHeaderClassName\n )}\n ref={overlapElement}\n >\n <div\n className={clsx(\n styles['form-header-content'],\n shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']\n )}\n >\n {children}\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-navigation.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-navigation.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"wizard-navigation.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-navigation.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI3C,UAAU,eAAe;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;CACxC;AAkBD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,MAAM,EACN,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,KAAK,GACN,EAAE,eAAe,eAsEjB"}
|
|
@@ -5,6 +5,7 @@ import clsx from 'clsx';
|
|
|
5
5
|
import InternalLink from '../link/internal';
|
|
6
6
|
import InternalBox from '../box/internal';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
|
+
import { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';
|
|
8
9
|
var Statuses;
|
|
9
10
|
(function (Statuses) {
|
|
10
11
|
Statuses["Active"] = "active";
|
|
@@ -13,8 +14,8 @@ var Statuses;
|
|
|
13
14
|
Statuses["Next"] = "next";
|
|
14
15
|
})(Statuses || (Statuses = {}));
|
|
15
16
|
export default function Navigation({ activeStepIndex, farthestStepIndex, allowSkipTo, hidden, i18nStrings, isVisualRefresh, isLoadingNextStep, onStepClick, onSkipToClick, steps, }) {
|
|
16
|
-
return (React.createElement("nav", { className: clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh), "aria-label": i18nStrings.navigationAriaLabel },
|
|
17
|
-
React.createElement("ul", { className: clsx(isVisualRefresh && styles.refresh) }, steps.map((step, index) => isVisualRefresh ? (React.createElement(NavigationStepVisualRefresh, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: getStatus(index), step: step })) : (React.createElement(NavigationStepClassic, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: getStatus(index), step: step }))))));
|
|
17
|
+
return (React.createElement("nav", { className: clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh, shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']), "aria-label": i18nStrings.navigationAriaLabel },
|
|
18
|
+
React.createElement("ul", { className: clsx(isVisualRefresh && styles.refresh, shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']) }, steps.map((step, index) => isVisualRefresh ? (React.createElement(NavigationStepVisualRefresh, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: getStatus(index), step: step })) : (React.createElement(NavigationStepClassic, { i18nStrings: i18nStrings, index: index, key: index, onStepClick: onStepClick, onSkipToClick: onSkipToClick, status: getStatus(index), step: step }))))));
|
|
18
19
|
function getStatus(index) {
|
|
19
20
|
if (activeStepIndex === index) {
|
|
20
21
|
return Statuses.Active;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-navigation.js","sourceRoot":"lib/default/","sources":["wizard/wizard-navigation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAwBrC,IAAK,QAKJ;AALD,WAAK,QAAQ;IACX,6BAAiB,CAAA;IACjB,mCAAuB,CAAA;IACvB,+BAAmB,CAAA;IACnB,yBAAa,CAAA;AACf,CAAC,EALI,QAAQ,KAAR,QAAQ,QAKZ;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,MAAM,EACN,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,KAAK,GACW;IAChB,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,eAAe,IAAI,MAAM,CAAC,OAAO,CAAC,gBAClF,WAAW,CAAC,mBAAmB;QAE3C,4BAAI,SAAS,EAAE,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,OAAO,CAAC,IACnD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAa,EAAE,EAAE,CACjC,eAAe,CAAC,CAAC,CAAC,CAChB,oBAAC,2BAA2B,IAC1B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,KAAK,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,qBAAqB,IACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,KAAK,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CACF,CACE,CACD,CACP,CAAC;IAEF,SAAS,SAAS,CAAC,KAAa;QAC9B,IAAI,eAAe,KAAK,KAAK,EAAE;YAC7B,OAAO,QAAQ,CAAC,MAAM,CAAC;SACxB;QACD,IAAI,iBAAiB,EAAE;YACrB,OAAO,QAAQ,CAAC,SAAS,CAAC;SAC3B;QACD,IAAI,iBAAiB,IAAI,KAAK,EAAE;YAC9B,OAAO,QAAQ,CAAC,OAAO,CAAC;SACzB;QACD,IAAI,WAAW,IAAI,OAAO,CAAC,eAAe,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE;YACtD,OAAO,QAAQ,CAAC,IAAI,CAAC;SACtB;QACD,OAAO,QAAQ,CAAC,SAAS,CAAC;IAC5B,CAAC;IAED,SAAS,OAAO,CAAC,SAAiB,EAAE,OAAe;QACjD,IAAI,KAAK,GAAG,SAAS,CAAC;QACtB,GAAG;YACD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,UAAU,EAAE;gBAC5B,OAAO,KAAK,CAAC;aACd;YACD,KAAK,EAAE,CAAC;SACT,QAAQ,KAAK,GAAG,OAAO,EAAE;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,SAAS,2BAA2B,CAAC,EACnC,WAAW,EACX,KAAK,EACL,WAAW,EACX,aAAa,EACb,MAAM,EACN,IAAI,GACgB;IACpB,SAAS,qBAAqB;QAC5B,IAAI,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE;YAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;SACpB;QACD,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,EAAE;YAC5B,aAAa,CAAC,KAAK,CAAC,CAAC;SACtB;IACH,CAAC;IAED,MAAM,KAAK,GAAG;QACZ,MAAM,EAAE,QAAQ;QAChB,SAAS,EAAE,UAAU;QACrB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB,CAAC,MAAM,CAAC,CAAC;IAEV,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,EAAE;QACpD,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,MAAM,KAAK,QAAQ,CAAC,MAAM;QAC9D,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,MAAM,KAAK,QAAQ,CAAC,SAAS;KACpE,CAAC,CAAC;IAEH,OAAO,CACL,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,sBAAsB,CAAC,CAAC;QACrE,+BAAM;QAEN,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,uBAAuB,CAAC,CAAC;YAClE,WAAW,CAAC,eAAe,IAAI,WAAW,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC;YACrE,IAAI,CAAC,UAAU,IAAI,+BAAI,MAAM,WAAW,CAAC,QAAQ,EAAE,CAAK,CACpD;QAEP,2BACE,SAAS,EAAE,aAAa,kBACV,MAAM,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC9C,MAAM,KAAK,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACjE,OAAO,EAAE,KAAK,CAAC,EAAE;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,qBAAqB,EAAE,CAAC;YAC1B,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,EAAE;gBACjB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;oBAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;iBACxB;gBACD,4DAA4D;gBAC5D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;oBACzB,qBAAqB,EAAE,CAAC;iBACzB;YACH,CAAC,EACD,OAAO,EAAE,KAAK,CAAC,EAAE;gBACf,sDAAsD;gBACtD,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;oBACrB,qBAAqB,EAAE,CAAC;iBACzB;YACH,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,MAAM,KAAK,QAAQ,CAAC,OAAO,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAEjF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAI;YAEvC,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAG,IAAI,CAAC,KAAK,CAAQ,CACtD,CACD,CACN,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,EAAuB;IAClH,MAAM,aAAa,GAAG,IAAI,CACxB,MAAM,CAAC,iBAAiB,CAAC,EACzB,MAAM,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,0BAA0B,CAAC,CACnG,CAAC;IAEF,OAAO,CACL,4BAAI,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QAC3C,oBAAC,WAAW,IACV,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAC1C,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;YAExB,WAAW,CAAC,eAAe,IAAI,WAAW,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC;YACrE,IAAI,CAAC,UAAU,IAAI,+BAAI,MAAM,WAAW,CAAC,QAAQ,EAAE,CAAK,CAC7C;QACd,iCACG,MAAM,KAAK,QAAQ,CAAC,OAAO,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CACzD,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAC1C,QAAQ,EAAE,GAAG,CAAC,EAAE;gBACd,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,MAAM,KAAK,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1E,CAAC,EACD,OAAO,EAAC,SAAS,IAEhB,IAAI,CAAC,KAAK,CACE,CAChB,CAAC,CAAC,CAAC,CACF,8BACE,SAAS,EAAE,aAAa,kBACV,MAAM,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC9C,MAAM,KAAK,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,IAE7D,IAAI,CAAC,KAAK,CACN,CACR,CACG,CACH,CACN,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport InternalLink from '../link/internal';\nimport InternalBox from '../box/internal';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface NavigationProps {\n activeStepIndex: number;\n farthestStepIndex: number;\n allowSkipTo: boolean;\n hidden: boolean;\n i18nStrings: WizardProps.I18nStrings;\n isVisualRefresh: boolean;\n isLoadingNextStep: boolean;\n onStepClick: (stepIndex: number) => void;\n onSkipToClick: (stepIndex: number) => void;\n steps: ReadonlyArray<WizardProps.Step>;\n}\n\ninterface NavigationStepProps {\n i18nStrings: WizardProps.I18nStrings;\n index: number;\n onStepClick: (stepIndex: number) => void;\n onSkipToClick: (stepIndex: number) => void;\n status: string;\n step: WizardProps.Step;\n}\n\nenum Statuses {\n Active = 'active',\n Unvisited = 'unvisited',\n Visited = 'visited',\n Next = 'next',\n}\n\nexport default function Navigation({\n activeStepIndex,\n farthestStepIndex,\n allowSkipTo,\n hidden,\n i18nStrings,\n isVisualRefresh,\n isLoadingNextStep,\n onStepClick,\n onSkipToClick,\n steps,\n}: NavigationProps) {\n return (\n <nav\n className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}\n aria-label={i18nStrings.navigationAriaLabel}\n >\n <ul className={clsx(isVisualRefresh && styles.refresh)}>\n {steps.map((step, index: number) =>\n isVisualRefresh ? (\n <NavigationStepVisualRefresh\n i18nStrings={i18nStrings}\n index={index}\n key={index}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n status={getStatus(index)}\n step={step}\n />\n ) : (\n <NavigationStepClassic\n i18nStrings={i18nStrings}\n index={index}\n key={index}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n status={getStatus(index)}\n step={step}\n />\n )\n )}\n </ul>\n </nav>\n );\n\n function getStatus(index: number) {\n if (activeStepIndex === index) {\n return Statuses.Active;\n }\n if (isLoadingNextStep) {\n return Statuses.Unvisited;\n }\n if (farthestStepIndex >= index) {\n return Statuses.Visited;\n }\n if (allowSkipTo && canSkip(activeStepIndex + 1, index)) {\n return Statuses.Next;\n }\n return Statuses.Unvisited;\n }\n\n function canSkip(fromIndex: number, toIndex: number) {\n let index = fromIndex;\n do {\n if (!steps[index].isOptional) {\n return false;\n }\n index++;\n } while (index < toIndex);\n return true;\n }\n}\n\nfunction NavigationStepVisualRefresh({\n i18nStrings,\n index,\n onStepClick,\n onSkipToClick,\n status,\n step,\n}: NavigationStepProps) {\n function handleStepInteraction() {\n if (status === Statuses.Visited) {\n onStepClick(index);\n }\n if (status === Statuses.Next) {\n onSkipToClick(index);\n }\n }\n\n const state = {\n active: 'active',\n unvisited: 'disabled',\n visited: 'enabled',\n next: 'enabled',\n }[status];\n\n const linkClassName = clsx(styles['navigation-link'], {\n [styles['navigation-link-active']]: status === Statuses.Active,\n [styles['navigation-link-disabled']]: status === Statuses.Unvisited,\n });\n\n return (\n <li className={clsx(styles[`${state}`], styles['navigation-link-item'])}>\n <hr />\n\n <span className={clsx(styles.number, styles['navigation-link-label'])}>\n {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </span>\n\n <a\n className={linkClassName}\n aria-current={status === Statuses.Active ? 'step' : undefined}\n aria-disabled={status === Statuses.Unvisited ? 'true' : undefined}\n onClick={event => {\n event.preventDefault();\n handleStepInteraction();\n }}\n onKeyDown={event => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n }\n // Enter activates the button on key down instead of key up.\n if (event.key === 'Enter') {\n handleStepInteraction();\n }\n }}\n onKeyUp={event => {\n // Emulate button behavior, which also fires on space.\n if (event.key === ' ') {\n handleStepInteraction();\n }\n }}\n role=\"button\"\n tabIndex={status === Statuses.Visited || status === Statuses.Next ? 0 : undefined}\n >\n <div className={clsx(styles.circle)} />\n\n <span className={clsx(styles.title)}>{step.title}</span>\n </a>\n </li>\n );\n}\n\nfunction NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }: NavigationStepProps) {\n const spanClassName = clsx(\n styles['navigation-link'],\n status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']\n );\n\n return (\n <li className={styles['navigation-link-item']}>\n <InternalBox\n variant=\"small\"\n className={styles['navigation-link-label']}\n display=\"block\"\n margin={{ bottom: 'xxs' }}\n >\n {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </InternalBox>\n <div>\n {status === Statuses.Visited || status === Statuses.Next ? (\n <InternalLink\n className={clsx(styles['navigation-link'])}\n onFollow={evt => {\n evt.preventDefault();\n status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index);\n }}\n variant=\"primary\"\n >\n {step.title}\n </InternalLink>\n ) : (\n <span\n className={spanClassName}\n aria-current={status === Statuses.Active ? 'step' : undefined}\n aria-disabled={status === Statuses.Active ? undefined : 'true'}\n >\n {step.title}\n </span>\n )}\n </div>\n </li>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"wizard-navigation.js","sourceRoot":"lib/default/","sources":["wizard/wizard-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport InternalLink from '../link/internal';\nimport InternalBox from '../box/internal';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { shouldRemoveHighContrastHeader } from '../internal/utils/content-header-utils';\n\ninterface NavigationProps {\n activeStepIndex: number;\n farthestStepIndex: number;\n allowSkipTo: boolean;\n hidden: boolean;\n i18nStrings: WizardProps.I18nStrings;\n isVisualRefresh: boolean;\n isLoadingNextStep: boolean;\n onStepClick: (stepIndex: number) => void;\n onSkipToClick: (stepIndex: number) => void;\n steps: ReadonlyArray<WizardProps.Step>;\n}\n\ninterface NavigationStepProps {\n i18nStrings: WizardProps.I18nStrings;\n index: number;\n onStepClick: (stepIndex: number) => void;\n onSkipToClick: (stepIndex: number) => void;\n status: string;\n step: WizardProps.Step;\n}\n\nenum Statuses {\n Active = 'active',\n Unvisited = 'unvisited',\n Visited = 'visited',\n Next = 'next',\n}\n\nexport default function Navigation({\n activeStepIndex,\n farthestStepIndex,\n allowSkipTo,\n hidden,\n i18nStrings,\n isVisualRefresh,\n isLoadingNextStep,\n onStepClick,\n onSkipToClick,\n steps,\n}: NavigationProps) {\n return (\n <nav\n className={clsx(\n styles.navigation,\n hidden && styles.hidden,\n isVisualRefresh && styles.refresh,\n shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']\n )}\n aria-label={i18nStrings.navigationAriaLabel}\n >\n <ul\n className={clsx(\n isVisualRefresh && styles.refresh,\n shouldRemoveHighContrastHeader && styles['remove-high-contrast-header']\n )}\n >\n {steps.map((step, index: number) =>\n isVisualRefresh ? (\n <NavigationStepVisualRefresh\n i18nStrings={i18nStrings}\n index={index}\n key={index}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n status={getStatus(index)}\n step={step}\n />\n ) : (\n <NavigationStepClassic\n i18nStrings={i18nStrings}\n index={index}\n key={index}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n status={getStatus(index)}\n step={step}\n />\n )\n )}\n </ul>\n </nav>\n );\n\n function getStatus(index: number) {\n if (activeStepIndex === index) {\n return Statuses.Active;\n }\n if (isLoadingNextStep) {\n return Statuses.Unvisited;\n }\n if (farthestStepIndex >= index) {\n return Statuses.Visited;\n }\n if (allowSkipTo && canSkip(activeStepIndex + 1, index)) {\n return Statuses.Next;\n }\n return Statuses.Unvisited;\n }\n\n function canSkip(fromIndex: number, toIndex: number) {\n let index = fromIndex;\n do {\n if (!steps[index].isOptional) {\n return false;\n }\n index++;\n } while (index < toIndex);\n return true;\n }\n}\n\nfunction NavigationStepVisualRefresh({\n i18nStrings,\n index,\n onStepClick,\n onSkipToClick,\n status,\n step,\n}: NavigationStepProps) {\n function handleStepInteraction() {\n if (status === Statuses.Visited) {\n onStepClick(index);\n }\n if (status === Statuses.Next) {\n onSkipToClick(index);\n }\n }\n\n const state = {\n active: 'active',\n unvisited: 'disabled',\n visited: 'enabled',\n next: 'enabled',\n }[status];\n\n const linkClassName = clsx(styles['navigation-link'], {\n [styles['navigation-link-active']]: status === Statuses.Active,\n [styles['navigation-link-disabled']]: status === Statuses.Unvisited,\n });\n\n return (\n <li className={clsx(styles[`${state}`], styles['navigation-link-item'])}>\n <hr />\n\n <span className={clsx(styles.number, styles['navigation-link-label'])}>\n {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </span>\n\n <a\n className={linkClassName}\n aria-current={status === Statuses.Active ? 'step' : undefined}\n aria-disabled={status === Statuses.Unvisited ? 'true' : undefined}\n onClick={event => {\n event.preventDefault();\n handleStepInteraction();\n }}\n onKeyDown={event => {\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault();\n }\n // Enter activates the button on key down instead of key up.\n if (event.key === 'Enter') {\n handleStepInteraction();\n }\n }}\n onKeyUp={event => {\n // Emulate button behavior, which also fires on space.\n if (event.key === ' ') {\n handleStepInteraction();\n }\n }}\n role=\"button\"\n tabIndex={status === Statuses.Visited || status === Statuses.Next ? 0 : undefined}\n >\n <div className={clsx(styles.circle)} />\n\n <span className={clsx(styles.title)}>{step.title}</span>\n </a>\n </li>\n );\n}\n\nfunction NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }: NavigationStepProps) {\n const spanClassName = clsx(\n styles['navigation-link'],\n status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']\n );\n\n return (\n <li className={styles['navigation-link-item']}>\n <InternalBox\n variant=\"small\"\n className={styles['navigation-link-label']}\n display=\"block\"\n margin={{ bottom: 'xxs' }}\n >\n {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </InternalBox>\n <div>\n {status === Statuses.Visited || status === Statuses.Next ? (\n <InternalLink\n className={clsx(styles['navigation-link'])}\n onFollow={evt => {\n evt.preventDefault();\n status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index);\n }}\n variant=\"primary\"\n >\n {step.title}\n </InternalLink>\n ) : (\n <span\n className={spanClassName}\n aria-current={status === Statuses.Active ? 'step' : undefined}\n aria-disabled={status === Statuses.Active ? undefined : 'true'}\n >\n {step.title}\n </span>\n )}\n </div>\n </li>\n );\n}\n"]}
|