@spectrum-web-components/progress-circle 1.12.0-testing.20260223092154 → 1.12.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/custom-elements.json +374 -2
- package/package.json +4 -4
- package/src/ProgressCircle.base.d.ts +59 -0
- package/src/ProgressCircle.base.dev.js +151 -0
- package/src/ProgressCircle.base.dev.js.map +7 -0
- package/src/ProgressCircle.base.js +2 -0
- package/src/ProgressCircle.base.js.map +7 -0
- package/src/ProgressCircle.d.ts +2 -1
- package/src/ProgressCircle.dev.js +4 -4
- package/src/ProgressCircle.dev.js.map +2 -2
- package/src/ProgressCircle.js +3 -3
- package/src/ProgressCircle.js.map +3 -3
- package/src/ProgressCircle.types.d.ts +17 -0
- package/src/ProgressCircle.types.dev.js +12 -0
- package/src/ProgressCircle.types.dev.js.map +7 -0
- package/src/ProgressCircle.types.js +2 -0
- package/src/ProgressCircle.types.js.map +7 -0
package/custom-elements.json
CHANGED
|
@@ -17,6 +17,159 @@
|
|
|
17
17
|
}
|
|
18
18
|
]
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
"kind": "javascript-module",
|
|
22
|
+
"path": "src/ProgressCircle.base.js",
|
|
23
|
+
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "class",
|
|
26
|
+
"description": "A progress circle component that visually represents the completion progress of a task.\nCan be used in both determinate (with specific progress value) and indeterminate (loading) states.",
|
|
27
|
+
"name": "ProgressCircleBase",
|
|
28
|
+
"slots": [
|
|
29
|
+
{
|
|
30
|
+
"description": "Accessible label for the progress circle.",
|
|
31
|
+
"name": ""
|
|
32
|
+
}
|
|
33
|
+
],
|
|
34
|
+
"members": [
|
|
35
|
+
{
|
|
36
|
+
"kind": "field",
|
|
37
|
+
"name": "indeterminate",
|
|
38
|
+
"type": {
|
|
39
|
+
"text": "boolean"
|
|
40
|
+
},
|
|
41
|
+
"privacy": "public",
|
|
42
|
+
"default": "false",
|
|
43
|
+
"description": "Whether the progress circle shows indeterminate progress (loading state).",
|
|
44
|
+
"attribute": "indeterminate",
|
|
45
|
+
"reflects": true
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"kind": "field",
|
|
49
|
+
"name": "label",
|
|
50
|
+
"type": {
|
|
51
|
+
"text": "string"
|
|
52
|
+
},
|
|
53
|
+
"privacy": "public",
|
|
54
|
+
"default": "''",
|
|
55
|
+
"description": "Accessible label for the progress circle.",
|
|
56
|
+
"attribute": "label"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"kind": "field",
|
|
60
|
+
"name": "progress",
|
|
61
|
+
"type": {
|
|
62
|
+
"text": "number"
|
|
63
|
+
},
|
|
64
|
+
"privacy": "public",
|
|
65
|
+
"default": "0",
|
|
66
|
+
"description": "Progress value from 0 to 100.",
|
|
67
|
+
"attribute": "progress"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"kind": "field",
|
|
71
|
+
"name": "languageResolver",
|
|
72
|
+
"privacy": "private",
|
|
73
|
+
"default": "new LanguageResolutionController(this)"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "method",
|
|
77
|
+
"name": "makeRotation",
|
|
78
|
+
"privacy": "protected",
|
|
79
|
+
"return": {
|
|
80
|
+
"type": {
|
|
81
|
+
"text": "string | undefined"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
"parameters": [
|
|
85
|
+
{
|
|
86
|
+
"name": "rotation",
|
|
87
|
+
"type": {
|
|
88
|
+
"text": "number"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "method",
|
|
95
|
+
"name": "handleSlotchange",
|
|
96
|
+
"privacy": "protected",
|
|
97
|
+
"return": {
|
|
98
|
+
"type": {
|
|
99
|
+
"text": "void"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"kind": "method",
|
|
105
|
+
"name": "formatProgress",
|
|
106
|
+
"privacy": "private",
|
|
107
|
+
"return": {
|
|
108
|
+
"type": {
|
|
109
|
+
"text": "string"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
],
|
|
114
|
+
"attributes": [
|
|
115
|
+
{
|
|
116
|
+
"type": {
|
|
117
|
+
"text": "ElementSize"
|
|
118
|
+
},
|
|
119
|
+
"description": "The size of the progress circle.",
|
|
120
|
+
"name": "size"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"name": "indeterminate",
|
|
124
|
+
"type": {
|
|
125
|
+
"text": "boolean"
|
|
126
|
+
},
|
|
127
|
+
"default": "false",
|
|
128
|
+
"description": "Whether the progress circle shows indeterminate progress (loading state).",
|
|
129
|
+
"fieldName": "indeterminate"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "label",
|
|
133
|
+
"type": {
|
|
134
|
+
"text": "string"
|
|
135
|
+
},
|
|
136
|
+
"default": "''",
|
|
137
|
+
"description": "Accessible label for the progress circle.",
|
|
138
|
+
"fieldName": "label"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "progress",
|
|
142
|
+
"type": {
|
|
143
|
+
"text": "number"
|
|
144
|
+
},
|
|
145
|
+
"default": "0",
|
|
146
|
+
"description": "Progress value from 0 to 100.",
|
|
147
|
+
"fieldName": "progress"
|
|
148
|
+
}
|
|
149
|
+
],
|
|
150
|
+
"mixins": [
|
|
151
|
+
{
|
|
152
|
+
"name": "SizedMixin",
|
|
153
|
+
"package": "@spectrum-web-components/base/src/sizedMixin.js"
|
|
154
|
+
}
|
|
155
|
+
],
|
|
156
|
+
"superclass": {
|
|
157
|
+
"name": "SpectrumElement",
|
|
158
|
+
"package": "@spectrum-web-components/base"
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
],
|
|
162
|
+
"exports": [
|
|
163
|
+
{
|
|
164
|
+
"kind": "js",
|
|
165
|
+
"name": "ProgressCircleBase",
|
|
166
|
+
"declaration": {
|
|
167
|
+
"name": "ProgressCircleBase",
|
|
168
|
+
"module": "src/ProgressCircle.base.js"
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
},
|
|
20
173
|
{
|
|
21
174
|
"kind": "javascript-module",
|
|
22
175
|
"path": "src/ProgressCircle.js",
|
|
@@ -36,6 +189,112 @@
|
|
|
36
189
|
"description": "Static color variant for use on different backgrounds.\n\nWhen set to 'white', the component uses white styling for images with a dark tinted background.",
|
|
37
190
|
"attribute": "static-color",
|
|
38
191
|
"reflects": true
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
"kind": "field",
|
|
195
|
+
"name": "indeterminate",
|
|
196
|
+
"type": {
|
|
197
|
+
"text": "boolean"
|
|
198
|
+
},
|
|
199
|
+
"privacy": "public",
|
|
200
|
+
"default": "false",
|
|
201
|
+
"description": "Whether the progress circle shows indeterminate progress (loading state).",
|
|
202
|
+
"attribute": "indeterminate",
|
|
203
|
+
"reflects": true,
|
|
204
|
+
"inheritedFrom": {
|
|
205
|
+
"name": "ProgressCircleBase",
|
|
206
|
+
"module": "src/ProgressCircle.base.js"
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"kind": "field",
|
|
211
|
+
"name": "label",
|
|
212
|
+
"type": {
|
|
213
|
+
"text": "string"
|
|
214
|
+
},
|
|
215
|
+
"privacy": "public",
|
|
216
|
+
"default": "''",
|
|
217
|
+
"description": "Accessible label for the progress circle.",
|
|
218
|
+
"attribute": "label",
|
|
219
|
+
"inheritedFrom": {
|
|
220
|
+
"name": "ProgressCircleBase",
|
|
221
|
+
"module": "src/ProgressCircle.base.js"
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
{
|
|
225
|
+
"kind": "field",
|
|
226
|
+
"name": "progress",
|
|
227
|
+
"type": {
|
|
228
|
+
"text": "number"
|
|
229
|
+
},
|
|
230
|
+
"privacy": "public",
|
|
231
|
+
"default": "0",
|
|
232
|
+
"description": "Progress value from 0 to 100.",
|
|
233
|
+
"attribute": "progress",
|
|
234
|
+
"inheritedFrom": {
|
|
235
|
+
"name": "ProgressCircleBase",
|
|
236
|
+
"module": "src/ProgressCircle.base.js"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"kind": "field",
|
|
241
|
+
"name": "languageResolver",
|
|
242
|
+
"privacy": "private",
|
|
243
|
+
"default": "new LanguageResolutionController(this)",
|
|
244
|
+
"inheritedFrom": {
|
|
245
|
+
"name": "ProgressCircleBase",
|
|
246
|
+
"module": "src/ProgressCircle.base.js"
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"kind": "method",
|
|
251
|
+
"name": "makeRotation",
|
|
252
|
+
"privacy": "protected",
|
|
253
|
+
"return": {
|
|
254
|
+
"type": {
|
|
255
|
+
"text": "string | undefined"
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
"parameters": [
|
|
259
|
+
{
|
|
260
|
+
"name": "rotation",
|
|
261
|
+
"type": {
|
|
262
|
+
"text": "number"
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
],
|
|
266
|
+
"inheritedFrom": {
|
|
267
|
+
"name": "ProgressCircleBase",
|
|
268
|
+
"module": "src/ProgressCircle.base.js"
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
"kind": "method",
|
|
273
|
+
"name": "handleSlotchange",
|
|
274
|
+
"privacy": "protected",
|
|
275
|
+
"return": {
|
|
276
|
+
"type": {
|
|
277
|
+
"text": "void"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
"inheritedFrom": {
|
|
281
|
+
"name": "ProgressCircleBase",
|
|
282
|
+
"module": "src/ProgressCircle.base.js"
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
"kind": "method",
|
|
287
|
+
"name": "formatProgress",
|
|
288
|
+
"privacy": "private",
|
|
289
|
+
"return": {
|
|
290
|
+
"type": {
|
|
291
|
+
"text": "string"
|
|
292
|
+
}
|
|
293
|
+
},
|
|
294
|
+
"inheritedFrom": {
|
|
295
|
+
"name": "ProgressCircleBase",
|
|
296
|
+
"module": "src/ProgressCircle.base.js"
|
|
297
|
+
}
|
|
39
298
|
}
|
|
40
299
|
],
|
|
41
300
|
"attributes": [
|
|
@@ -46,14 +305,74 @@
|
|
|
46
305
|
},
|
|
47
306
|
"description": "Static color variant for use on different backgrounds.\n\nWhen set to 'white', the component uses white styling for images with a dark tinted background.",
|
|
48
307
|
"fieldName": "staticColor"
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"type": {
|
|
311
|
+
"text": "ElementSize"
|
|
312
|
+
},
|
|
313
|
+
"description": "The size of the progress circle.",
|
|
314
|
+
"name": "size",
|
|
315
|
+
"inheritedFrom": {
|
|
316
|
+
"name": "ProgressCircleBase",
|
|
317
|
+
"module": "src/ProgressCircle.base.ts"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
"name": "indeterminate",
|
|
322
|
+
"type": {
|
|
323
|
+
"text": "boolean"
|
|
324
|
+
},
|
|
325
|
+
"default": "false",
|
|
326
|
+
"description": "Whether the progress circle shows indeterminate progress (loading state).",
|
|
327
|
+
"fieldName": "indeterminate",
|
|
328
|
+
"inheritedFrom": {
|
|
329
|
+
"name": "ProgressCircleBase",
|
|
330
|
+
"module": "src/ProgressCircle.base.ts"
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"name": "label",
|
|
335
|
+
"type": {
|
|
336
|
+
"text": "string"
|
|
337
|
+
},
|
|
338
|
+
"default": "''",
|
|
339
|
+
"description": "Accessible label for the progress circle.",
|
|
340
|
+
"fieldName": "label",
|
|
341
|
+
"inheritedFrom": {
|
|
342
|
+
"name": "ProgressCircleBase",
|
|
343
|
+
"module": "src/ProgressCircle.base.ts"
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"name": "progress",
|
|
348
|
+
"type": {
|
|
349
|
+
"text": "number"
|
|
350
|
+
},
|
|
351
|
+
"default": "0",
|
|
352
|
+
"description": "Progress value from 0 to 100.",
|
|
353
|
+
"fieldName": "progress",
|
|
354
|
+
"inheritedFrom": {
|
|
355
|
+
"name": "ProgressCircleBase",
|
|
356
|
+
"module": "src/ProgressCircle.base.ts"
|
|
357
|
+
}
|
|
49
358
|
}
|
|
50
359
|
],
|
|
51
360
|
"superclass": {
|
|
52
361
|
"name": "ProgressCircleBase",
|
|
53
|
-
"
|
|
362
|
+
"module": "/src/ProgressCircle.base.js"
|
|
54
363
|
},
|
|
55
364
|
"tagName": "sp-progress-circle",
|
|
56
|
-
"customElement": true
|
|
365
|
+
"customElement": true,
|
|
366
|
+
"slots": [
|
|
367
|
+
{
|
|
368
|
+
"description": "Accessible label for the progress circle.",
|
|
369
|
+
"name": "",
|
|
370
|
+
"inheritedFrom": {
|
|
371
|
+
"name": "ProgressCircleBase",
|
|
372
|
+
"module": "src/ProgressCircle.base.ts"
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
]
|
|
57
376
|
}
|
|
58
377
|
],
|
|
59
378
|
"exports": [
|
|
@@ -66,6 +385,59 @@
|
|
|
66
385
|
}
|
|
67
386
|
}
|
|
68
387
|
]
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"kind": "javascript-module",
|
|
391
|
+
"path": "src/ProgressCircle.types.js",
|
|
392
|
+
"declarations": [
|
|
393
|
+
{
|
|
394
|
+
"kind": "variable",
|
|
395
|
+
"name": "PROGRESS_CIRCLE_VALID_SIZES",
|
|
396
|
+
"default": "[ 's', 'm', 'l', ] as const satisfies ElementSize[]"
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"kind": "variable",
|
|
400
|
+
"name": "PROGRESS_CIRCLE_STATIC_COLORS_S1",
|
|
401
|
+
"type": {
|
|
402
|
+
"text": "['white']"
|
|
403
|
+
},
|
|
404
|
+
"default": "['white']"
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"kind": "variable",
|
|
408
|
+
"name": "PROGRESS_CIRCLE_STATIC_COLORS_S2",
|
|
409
|
+
"type": {
|
|
410
|
+
"text": "[\n ...PROGRESS_CIRCLE_STATIC_COLORS_S1,\n 'black',\n]"
|
|
411
|
+
},
|
|
412
|
+
"default": "[ ...PROGRESS_CIRCLE_STATIC_COLORS_S1, 'black', ]"
|
|
413
|
+
}
|
|
414
|
+
],
|
|
415
|
+
"exports": [
|
|
416
|
+
{
|
|
417
|
+
"kind": "js",
|
|
418
|
+
"name": "PROGRESS_CIRCLE_VALID_SIZES",
|
|
419
|
+
"declaration": {
|
|
420
|
+
"name": "PROGRESS_CIRCLE_VALID_SIZES",
|
|
421
|
+
"module": "src/ProgressCircle.types.js"
|
|
422
|
+
}
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"kind": "js",
|
|
426
|
+
"name": "PROGRESS_CIRCLE_STATIC_COLORS_S1",
|
|
427
|
+
"declaration": {
|
|
428
|
+
"name": "PROGRESS_CIRCLE_STATIC_COLORS_S1",
|
|
429
|
+
"module": "src/ProgressCircle.types.js"
|
|
430
|
+
}
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
"kind": "js",
|
|
434
|
+
"name": "PROGRESS_CIRCLE_STATIC_COLORS_S2",
|
|
435
|
+
"declaration": {
|
|
436
|
+
"name": "PROGRESS_CIRCLE_STATIC_COLORS_S2",
|
|
437
|
+
"module": "src/ProgressCircle.types.js"
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
]
|
|
69
441
|
}
|
|
70
442
|
]
|
|
71
443
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/progress-circle",
|
|
3
|
-
"version": "1.12.0
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Adobe",
|
|
@@ -54,9 +54,9 @@
|
|
|
54
54
|
],
|
|
55
55
|
"types": "./src/index.d.ts",
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@spectrum-web-components/base": "1.12.0
|
|
58
|
-
"@spectrum-web-components/
|
|
59
|
-
"@spectrum-web-components/shared": "1.12.0
|
|
57
|
+
"@spectrum-web-components/base": "1.12.0",
|
|
58
|
+
"@spectrum-web-components/reactive-controllers": "1.12.0",
|
|
59
|
+
"@spectrum-web-components/shared": "1.12.0"
|
|
60
60
|
},
|
|
61
61
|
"keywords": [
|
|
62
62
|
"design-system",
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2026 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import { PropertyValues, SpectrumElement } from '@spectrum-web-components/base';
|
|
13
|
+
import { ProgressCircleStaticColor } from './ProgressCircle.types.js';
|
|
14
|
+
declare const ProgressCircleBase_base: typeof SpectrumElement & import("@spectrum-web-components/base").Constructor<import("@spectrum-web-components/base").SizedElementInterface> & import("@spectrum-web-components/base").SizedElementConstructor;
|
|
15
|
+
/**
|
|
16
|
+
* A progress circle component that visually represents the completion progress of a task.
|
|
17
|
+
* Can be used in both determinate (with specific progress value) and indeterminate (loading) states.
|
|
18
|
+
*
|
|
19
|
+
* @attribute {ElementSize} size - The size of the progress circle.
|
|
20
|
+
*
|
|
21
|
+
* @slot - Accessible label for the progress circle.
|
|
22
|
+
*/
|
|
23
|
+
export declare abstract class ProgressCircleBase extends ProgressCircleBase_base {
|
|
24
|
+
/**
|
|
25
|
+
* @internal
|
|
26
|
+
*
|
|
27
|
+
* A readonly array of the valid static colors for the progress circle.
|
|
28
|
+
*/
|
|
29
|
+
static readonly STATIC_COLORS: readonly string[];
|
|
30
|
+
/**
|
|
31
|
+
* @internal
|
|
32
|
+
*
|
|
33
|
+
* Static color variant for use on different backgrounds.
|
|
34
|
+
*/
|
|
35
|
+
staticColor?: ProgressCircleStaticColor;
|
|
36
|
+
/**
|
|
37
|
+
* Whether the progress circle shows indeterminate progress (loading state).
|
|
38
|
+
*/
|
|
39
|
+
indeterminate: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Accessible label for the progress circle.
|
|
42
|
+
*/
|
|
43
|
+
label: string;
|
|
44
|
+
/**
|
|
45
|
+
* Progress value from 0 to 100.
|
|
46
|
+
*/
|
|
47
|
+
progress: number;
|
|
48
|
+
private languageResolver;
|
|
49
|
+
/**
|
|
50
|
+
* @internal
|
|
51
|
+
*/
|
|
52
|
+
private slotEl;
|
|
53
|
+
protected makeRotation(rotation: number): string | undefined;
|
|
54
|
+
protected handleSlotchange(): void;
|
|
55
|
+
protected firstUpdated(changes: PropertyValues): void;
|
|
56
|
+
private formatProgress;
|
|
57
|
+
protected updated(changes: PropertyValues): void;
|
|
58
|
+
}
|
|
59
|
+
export {};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import { SpectrumElement } from "@spectrum-web-components/base";
|
|
13
|
+
import {
|
|
14
|
+
property,
|
|
15
|
+
query
|
|
16
|
+
} from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
+
import { SizedMixin } from "@spectrum-web-components/base/src/sizedMixin.js";
|
|
18
|
+
import {
|
|
19
|
+
LanguageResolutionController,
|
|
20
|
+
languageResolverUpdatedSymbol
|
|
21
|
+
} from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
|
|
22
|
+
import { getLabelFromSlot } from "@spectrum-web-components/shared/src/get-label-from-slot.js";
|
|
23
|
+
import {
|
|
24
|
+
PROGRESS_CIRCLE_VALID_SIZES
|
|
25
|
+
} from "./ProgressCircle.types.dev.js";
|
|
26
|
+
export class ProgressCircleBase extends SizedMixin(SpectrumElement, {
|
|
27
|
+
validSizes: PROGRESS_CIRCLE_VALID_SIZES
|
|
28
|
+
}) {
|
|
29
|
+
constructor() {
|
|
30
|
+
super(...arguments);
|
|
31
|
+
this.indeterminate = false;
|
|
32
|
+
this.label = "";
|
|
33
|
+
this.progress = 0;
|
|
34
|
+
this.languageResolver = new LanguageResolutionController(this);
|
|
35
|
+
}
|
|
36
|
+
makeRotation(rotation) {
|
|
37
|
+
return this.indeterminate ? void 0 : `transform: rotate(${rotation}deg);`;
|
|
38
|
+
}
|
|
39
|
+
handleSlotchange() {
|
|
40
|
+
const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
|
|
41
|
+
if (labelFromSlot) {
|
|
42
|
+
this.label = labelFromSlot;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
firstUpdated(changes) {
|
|
46
|
+
super.firstUpdated(changes);
|
|
47
|
+
if (!this.hasAttribute("role")) {
|
|
48
|
+
this.setAttribute("role", "progressbar");
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
formatProgress() {
|
|
52
|
+
return new Intl.NumberFormat(this.languageResolver.language, {
|
|
53
|
+
style: "percent",
|
|
54
|
+
unitDisplay: "narrow"
|
|
55
|
+
}).format(this.progress / 100);
|
|
56
|
+
}
|
|
57
|
+
updated(changes) {
|
|
58
|
+
var _a, _b, _c;
|
|
59
|
+
super.updated(changes);
|
|
60
|
+
if (changes.has("indeterminate")) {
|
|
61
|
+
if (this.indeterminate) {
|
|
62
|
+
this.removeAttribute("aria-valuemin");
|
|
63
|
+
this.removeAttribute("aria-valuemax");
|
|
64
|
+
this.removeAttribute("aria-valuenow");
|
|
65
|
+
this.removeAttribute("aria-valuetext");
|
|
66
|
+
} else {
|
|
67
|
+
this.setAttribute("aria-valuemin", "0");
|
|
68
|
+
this.setAttribute("aria-valuemax", "100");
|
|
69
|
+
this.setAttribute("aria-valuenow", "" + this.progress);
|
|
70
|
+
this.setAttribute("aria-valuetext", this.formatProgress());
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
if (!this.indeterminate && changes.has("progress")) {
|
|
74
|
+
this.setAttribute("aria-valuenow", "" + this.progress);
|
|
75
|
+
this.setAttribute("aria-valuetext", this.formatProgress());
|
|
76
|
+
}
|
|
77
|
+
if (!this.indeterminate && changes.has(languageResolverUpdatedSymbol)) {
|
|
78
|
+
this.setAttribute("aria-valuetext", this.formatProgress());
|
|
79
|
+
}
|
|
80
|
+
if (changes.has("label")) {
|
|
81
|
+
if (this.label.length) {
|
|
82
|
+
this.setAttribute("aria-label", this.label);
|
|
83
|
+
} else if (changes.get("label") === this.getAttribute("aria-label")) {
|
|
84
|
+
this.removeAttribute("aria-label");
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
const hasAccessibleName = () => {
|
|
88
|
+
return Boolean(
|
|
89
|
+
this.label || this.getAttribute("aria-label") || this.getAttribute("aria-labelledby") || this.slotEl.assignedNodes().length
|
|
90
|
+
);
|
|
91
|
+
};
|
|
92
|
+
if (true) {
|
|
93
|
+
if (changes.has("indeterminate") && this.indeterminate) {
|
|
94
|
+
window.__swc.warn(
|
|
95
|
+
this,
|
|
96
|
+
`<${this.localName}> the "indeterminate" attribute is deprecated and will be removed in Spectrum 2. Omit the "progress" attribute (or set it to null) to indicate indeterminate progress.`,
|
|
97
|
+
"https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/progress-circle-consumer-migration-guide--docs",
|
|
98
|
+
{ level: "deprecation" }
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
const hasLightDomChildren = Array.from(
|
|
102
|
+
(_b = (_a = this.slotEl) == null ? void 0 : _a.assignedNodes()) != null ? _b : []
|
|
103
|
+
).some(
|
|
104
|
+
(node) => {
|
|
105
|
+
var _a2;
|
|
106
|
+
return node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && ((_a2 = node.textContent) == null ? void 0 : _a2.trim());
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
if (hasLightDomChildren) {
|
|
110
|
+
window.__swc.warn(
|
|
111
|
+
this,
|
|
112
|
+
`<${this.localName}> light DOM children are deprecated as a labelling mechanism and will not be rendered in Spectrum 2. Use the "label" attribute or "aria-label" on the host instead.`,
|
|
113
|
+
"https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/progress-circle-consumer-migration-guide--docs",
|
|
114
|
+
{ level: "deprecation" }
|
|
115
|
+
);
|
|
116
|
+
}
|
|
117
|
+
if (!hasAccessibleName() && this.getAttribute("role") === "progressbar") {
|
|
118
|
+
(_c = window.__swc) == null ? void 0 : _c.warn(
|
|
119
|
+
this,
|
|
120
|
+
"<sp-progress-circle> elements need one of the following to be accessible:",
|
|
121
|
+
"https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility",
|
|
122
|
+
{
|
|
123
|
+
type: "accessibility",
|
|
124
|
+
issues: [
|
|
125
|
+
'value supplied to the "label" attribute, which will be displayed visually as part of the element, or',
|
|
126
|
+
"text content supplied directly to the <sp-progress-circle> element, or",
|
|
127
|
+
'value supplied to the "aria-label" attribute, which will only be provided to screen readers, or',
|
|
128
|
+
'an element ID reference supplied to the "aria-labelledby" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.'
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
__decorateClass([
|
|
137
|
+
property({ type: String, reflect: true, attribute: "static-color" })
|
|
138
|
+
], ProgressCircleBase.prototype, "staticColor", 2);
|
|
139
|
+
__decorateClass([
|
|
140
|
+
property({ type: Boolean, reflect: true })
|
|
141
|
+
], ProgressCircleBase.prototype, "indeterminate", 2);
|
|
142
|
+
__decorateClass([
|
|
143
|
+
property({ type: String })
|
|
144
|
+
], ProgressCircleBase.prototype, "label", 2);
|
|
145
|
+
__decorateClass([
|
|
146
|
+
property({ type: Number })
|
|
147
|
+
], ProgressCircleBase.prototype, "progress", 2);
|
|
148
|
+
__decorateClass([
|
|
149
|
+
query("slot")
|
|
150
|
+
], ProgressCircleBase.prototype, "slotEl", 2);
|
|
151
|
+
//# sourceMappingURL=ProgressCircle.base.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["ProgressCircle.base.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { PropertyValues, SpectrumElement } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { SizedMixin } from '@spectrum-web-components/base/src/sizedMixin.js';\nimport {\n LanguageResolutionController,\n languageResolverUpdatedSymbol,\n} from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\n\nimport {\n PROGRESS_CIRCLE_VALID_SIZES,\n ProgressCircleStaticColor,\n} from './ProgressCircle.types.dev.js'\n\n/**\n * A progress circle component that visually represents the completion progress of a task.\n * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.\n *\n * @attribute {ElementSize} size - The size of the progress circle.\n *\n * @slot - Accessible label for the progress circle.\n */\nexport abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {\n validSizes: PROGRESS_CIRCLE_VALID_SIZES,\n}) {\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // API TO OVERRIDE\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * @internal\n *\n * A readonly array of the valid static colors for the progress circle.\n */\n static readonly STATIC_COLORS: readonly string[];\n\n /**\n * @internal\n *\n * Static color variant for use on different backgrounds.\n */\n @property({ type: String, reflect: true, attribute: 'static-color' })\n public staticColor?: ProgressCircleStaticColor;\n\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // SHARED API\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * Whether the progress circle shows indeterminate progress (loading state).\n */\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n /**\n * Accessible label for the progress circle.\n */\n @property({ type: String })\n public label = '';\n\n /**\n * Progress value from 0 to 100.\n */\n @property({ type: Number })\n public progress = 0;\n\n private languageResolver = new LanguageResolutionController(this);\n\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // IMPLEMENTATION\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * @internal\n */\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n protected makeRotation(rotation: number): string | undefined {\n return this.indeterminate\n ? undefined\n : `transform: rotate(${rotation}deg);`;\n }\n\n protected handleSlotchange(): void {\n const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);\n if (labelFromSlot) {\n this.label = labelFromSlot;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'progressbar');\n }\n }\n\n private formatProgress(): string {\n return new Intl.NumberFormat(this.languageResolver.language, {\n style: 'percent',\n unitDisplay: 'narrow',\n }).format(this.progress / 100);\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('indeterminate')) {\n if (this.indeterminate) {\n this.removeAttribute('aria-valuemin');\n this.removeAttribute('aria-valuemax');\n this.removeAttribute('aria-valuenow');\n this.removeAttribute('aria-valuetext');\n } else {\n this.setAttribute('aria-valuemin', '0');\n this.setAttribute('aria-valuemax', '100');\n this.setAttribute('aria-valuenow', '' + this.progress);\n this.setAttribute('aria-valuetext', this.formatProgress());\n }\n }\n if (!this.indeterminate && changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n this.setAttribute('aria-valuetext', this.formatProgress());\n }\n if (!this.indeterminate && changes.has(languageResolverUpdatedSymbol)) {\n this.setAttribute('aria-valuetext', this.formatProgress());\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else if (changes.get('label') === this.getAttribute('aria-label')) {\n this.removeAttribute('aria-label');\n }\n }\n\n const hasAccessibleName = (): boolean => {\n return Boolean(\n this.label ||\n this.getAttribute('aria-label') ||\n this.getAttribute('aria-labelledby') ||\n this.slotEl.assignedNodes().length\n );\n };\n\n if (window.__swc?.DEBUG) {\n if (changes.has('indeterminate') && this.indeterminate) {\n window.__swc.warn(\n this,\n `<${this.localName}> the \"indeterminate\" attribute is deprecated and will be removed in Spectrum 2. Omit the \"progress\" attribute (or set it to null) to indicate indeterminate progress.`,\n 'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/progress-circle-consumer-migration-guide--docs',\n { level: 'deprecation' }\n );\n }\n const hasLightDomChildren = Array.from(\n this.slotEl?.assignedNodes() ?? []\n ).some(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n );\n if (hasLightDomChildren) {\n window.__swc.warn(\n this,\n `<${this.localName}> light DOM children are deprecated as a labelling mechanism and will not be rendered in Spectrum 2. Use the \"label\" attribute or \"aria-label\" on the host instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/progress-circle-consumer-migration-guide--docs',\n { level: 'deprecation' }\n );\n }\n if (!hasAccessibleName() && this.getAttribute('role') === 'progressbar') {\n window.__swc?.warn(\n this,\n '<sp-progress-circle> elements need one of the following to be accessible:',\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',\n {\n type: 'accessibility',\n issues: [\n 'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n 'text content supplied directly to the <sp-progress-circle> element, or',\n 'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n 'an element ID reference supplied to the \"aria-labelledby\" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',\n ],\n }\n );\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["_a"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(o,r,e,a)=>{for(var t=a>1?void 0:a?p(r,e):r,l=o.length-1,n;l>=0;l--)(n=o[l])&&(t=(a?n(r,e,t):n(t))||t);return a&&t&&d(r,e,t),t};import{SpectrumElement as u}from"@spectrum-web-components/base";import{property as s,query as h}from"@spectrum-web-components/base/src/decorators.js";import{SizedMixin as c}from"@spectrum-web-components/base/src/sizedMixin.js";import{LanguageResolutionController as m,languageResolverUpdatedSymbol as b}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import{getLabelFromSlot as g}from"@spectrum-web-components/shared/src/get-label-from-slot.js";import{PROGRESS_CIRCLE_VALID_SIZES as f}from"./ProgressCircle.types.js";export class ProgressCircleBase extends c(u,{validSizes:f}){constructor(){super(...arguments);this.indeterminate=!1;this.label="";this.progress=0;this.languageResolver=new m(this)}makeRotation(e){return this.indeterminate?void 0:`transform: rotate(${e}deg);`}handleSlotchange(){const e=g(this.label,this.slotEl);e&&(this.label=e)}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("role")||this.setAttribute("role","progressbar")}formatProgress(){return new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.progress/100)}updated(e){super.updated(e),e.has("indeterminate")&&(this.indeterminate?(this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext")):(this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax","100"),this.setAttribute("aria-valuenow",""+this.progress),this.setAttribute("aria-valuetext",this.formatProgress()))),!this.indeterminate&&e.has("progress")&&(this.setAttribute("aria-valuenow",""+this.progress),this.setAttribute("aria-valuetext",this.formatProgress())),!this.indeterminate&&e.has(b)&&this.setAttribute("aria-valuetext",this.formatProgress()),e.has("label")&&(this.label.length?this.setAttribute("aria-label",this.label):e.get("label")===this.getAttribute("aria-label")&&this.removeAttribute("aria-label"));const a=()=>!!(this.label||this.getAttribute("aria-label")||this.getAttribute("aria-labelledby")||this.slotEl.assignedNodes().length)}}i([s({type:String,reflect:!0,attribute:"static-color"})],ProgressCircleBase.prototype,"staticColor",2),i([s({type:Boolean,reflect:!0})],ProgressCircleBase.prototype,"indeterminate",2),i([s({type:String})],ProgressCircleBase.prototype,"label",2),i([s({type:Number})],ProgressCircleBase.prototype,"progress",2),i([h("slot")],ProgressCircleBase.prototype,"slotEl",2);
|
|
2
|
+
//# sourceMappingURL=ProgressCircle.base.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["ProgressCircle.base.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { PropertyValues, SpectrumElement } from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { SizedMixin } from '@spectrum-web-components/base/src/sizedMixin.js';\nimport {\n LanguageResolutionController,\n languageResolverUpdatedSymbol,\n} from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\n\nimport {\n PROGRESS_CIRCLE_VALID_SIZES,\n ProgressCircleStaticColor,\n} from './ProgressCircle.types.js';\n\n/**\n * A progress circle component that visually represents the completion progress of a task.\n * Can be used in both determinate (with specific progress value) and indeterminate (loading) states.\n *\n * @attribute {ElementSize} size - The size of the progress circle.\n *\n * @slot - Accessible label for the progress circle.\n */\nexport abstract class ProgressCircleBase extends SizedMixin(SpectrumElement, {\n validSizes: PROGRESS_CIRCLE_VALID_SIZES,\n}) {\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // API TO OVERRIDE\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * @internal\n *\n * A readonly array of the valid static colors for the progress circle.\n */\n static readonly STATIC_COLORS: readonly string[];\n\n /**\n * @internal\n *\n * Static color variant for use on different backgrounds.\n */\n @property({ type: String, reflect: true, attribute: 'static-color' })\n public staticColor?: ProgressCircleStaticColor;\n\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // SHARED API\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * Whether the progress circle shows indeterminate progress (loading state).\n */\n @property({ type: Boolean, reflect: true })\n public indeterminate = false;\n\n /**\n * Accessible label for the progress circle.\n */\n @property({ type: String })\n public label = '';\n\n /**\n * Progress value from 0 to 100.\n */\n @property({ type: Number })\n public progress = 0;\n\n private languageResolver = new LanguageResolutionController(this);\n\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // IMPLEMENTATION\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * @internal\n */\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n protected makeRotation(rotation: number): string | undefined {\n return this.indeterminate\n ? undefined\n : `transform: rotate(${rotation}deg);`;\n }\n\n protected handleSlotchange(): void {\n const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);\n if (labelFromSlot) {\n this.label = labelFromSlot;\n }\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'progressbar');\n }\n }\n\n private formatProgress(): string {\n return new Intl.NumberFormat(this.languageResolver.language, {\n style: 'percent',\n unitDisplay: 'narrow',\n }).format(this.progress / 100);\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('indeterminate')) {\n if (this.indeterminate) {\n this.removeAttribute('aria-valuemin');\n this.removeAttribute('aria-valuemax');\n this.removeAttribute('aria-valuenow');\n this.removeAttribute('aria-valuetext');\n } else {\n this.setAttribute('aria-valuemin', '0');\n this.setAttribute('aria-valuemax', '100');\n this.setAttribute('aria-valuenow', '' + this.progress);\n this.setAttribute('aria-valuetext', this.formatProgress());\n }\n }\n if (!this.indeterminate && changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n this.setAttribute('aria-valuetext', this.formatProgress());\n }\n if (!this.indeterminate && changes.has(languageResolverUpdatedSymbol)) {\n this.setAttribute('aria-valuetext', this.formatProgress());\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else if (changes.get('label') === this.getAttribute('aria-label')) {\n this.removeAttribute('aria-label');\n }\n }\n\n const hasAccessibleName = (): boolean => {\n return Boolean(\n this.label ||\n this.getAttribute('aria-label') ||\n this.getAttribute('aria-labelledby') ||\n this.slotEl.assignedNodes().length\n );\n };\n\n if (window.__swc?.DEBUG) {\n if (changes.has('indeterminate') && this.indeterminate) {\n window.__swc.warn(\n this,\n `<${this.localName}> the \"indeterminate\" attribute is deprecated and will be removed in Spectrum 2. Omit the \"progress\" attribute (or set it to null) to indicate indeterminate progress.`,\n 'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/progress-circle-consumer-migration-guide--docs',\n { level: 'deprecation' }\n );\n }\n const hasLightDomChildren = Array.from(\n this.slotEl?.assignedNodes() ?? []\n ).some(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n );\n if (hasLightDomChildren) {\n window.__swc.warn(\n this,\n `<${this.localName}> light DOM children are deprecated as a labelling mechanism and will not be rendered in Spectrum 2. Use the \"label\" attribute or \"aria-label\" on the host instead.`,\n 'https://opensource.adobe.com/spectrum-web-components/second-gen/?path=/docs/progress-circle-consumer-migration-guide--docs',\n { level: 'deprecation' }\n );\n }\n if (!hasAccessibleName() && this.getAttribute('role') === 'progressbar') {\n window.__swc?.warn(\n this,\n '<sp-progress-circle> elements need one of the following to be accessible:',\n 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#accessibility',\n {\n type: 'accessibility',\n issues: [\n 'value supplied to the \"label\" attribute, which will be displayed visually as part of the element, or',\n 'text content supplied directly to the <sp-progress-circle> element, or',\n 'value supplied to the \"aria-label\" attribute, which will only be provided to screen readers, or',\n 'an element ID reference supplied to the \"aria-labelledby\" attribute, which will be provided by screen readers and will need to be managed manually by the parent application.',\n ],\n }\n );\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAWA,OAAyB,mBAAAA,MAAuB,gCAChD,OACE,YAAAC,EACA,SAAAC,MACK,kDACP,OAAS,cAAAC,MAAkB,kDAC3B,OACE,gCAAAC,EACA,iCAAAC,MACK,0EACP,OAAS,oBAAAC,MAAwB,6DAEjC,OACE,+BAAAC,MAEK,4BAUA,aAAe,2BAA2BJ,EAAWH,EAAiB,CAC3E,WAAYO,CACd,CAAC,CAAE,CAFI,kCA8BL,KAAO,cAAgB,GAMvB,KAAO,MAAQ,GAMf,KAAO,SAAW,EAElB,KAAQ,iBAAmB,IAAIH,EAA6B,IAAI,EAYtD,aAAaI,EAAsC,CAC3D,OAAO,KAAK,cACR,OACA,qBAAqBA,CAAQ,OACnC,CAEU,kBAAyB,CACjC,MAAMC,EAAgBH,EAAiB,KAAK,MAAO,KAAK,MAAM,EAC1DG,IACF,KAAK,MAAQA,EAEjB,CAEmB,aAAaC,EAA+B,CAC7D,MAAM,aAAaA,CAAO,EACrB,KAAK,aAAa,MAAM,GAC3B,KAAK,aAAa,OAAQ,aAAa,CAE3C,CAEQ,gBAAyB,CAC/B,OAAO,IAAI,KAAK,aAAa,KAAK,iBAAiB,SAAU,CAC3D,MAAO,UACP,YAAa,QACf,CAAC,EAAE,OAAO,KAAK,SAAW,GAAG,CAC/B,CAEmB,QAAQA,EAA+B,CACxD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,eAAe,IACzB,KAAK,eACP,KAAK,gBAAgB,eAAe,EACpC,KAAK,gBAAgB,eAAe,EACpC,KAAK,gBAAgB,eAAe,EACpC,KAAK,gBAAgB,gBAAgB,IAErC,KAAK,aAAa,gBAAiB,GAAG,EACtC,KAAK,aAAa,gBAAiB,KAAK,EACxC,KAAK,aAAa,gBAAiB,GAAK,KAAK,QAAQ,EACrD,KAAK,aAAa,iBAAkB,KAAK,eAAe,CAAC,IAGzD,CAAC,KAAK,eAAiBA,EAAQ,IAAI,UAAU,IAC/C,KAAK,aAAa,gBAAiB,GAAK,KAAK,QAAQ,EACrD,KAAK,aAAa,iBAAkB,KAAK,eAAe,CAAC,GAEvD,CAAC,KAAK,eAAiBA,EAAQ,IAAIL,CAA6B,GAClE,KAAK,aAAa,iBAAkB,KAAK,eAAe,CAAC,EAEvDK,EAAQ,IAAI,OAAO,IACjB,KAAK,MAAM,OACb,KAAK,aAAa,aAAc,KAAK,KAAK,EACjCA,EAAQ,IAAI,OAAO,IAAM,KAAK,aAAa,YAAY,GAChE,KAAK,gBAAgB,YAAY,GAIrC,MAAMC,EAAoB,IACjB,GACL,KAAK,OACL,KAAK,aAAa,YAAY,GAC9B,KAAK,aAAa,iBAAiB,GACnC,KAAK,OAAO,cAAc,EAAE,OA6ClC,CACF,CAhJSC,EAAA,CADNX,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,cAAe,CAAC,GAnBhD,mBAoBb,2BAUAW,EAAA,CADNX,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BtB,mBA8Bb,6BAMAW,EAAA,CADNX,EAAS,CAAE,KAAM,MAAO,CAAC,GAnCN,mBAoCb,qBAMAW,EAAA,CADNX,EAAS,CAAE,KAAM,MAAO,CAAC,GAzCN,mBA0Cb,wBAYCW,EAAA,CADPV,EAAM,MAAM,GArDO,mBAsDZ",
|
|
6
|
+
"names": ["SpectrumElement", "property", "query", "SizedMixin", "LanguageResolutionController", "languageResolverUpdatedSymbol", "getLabelFromSlot", "PROGRESS_CIRCLE_VALID_SIZES", "rotation", "labelFromSlot", "changes", "hasAccessibleName", "__decorateClass"]
|
|
7
|
+
}
|
package/src/ProgressCircle.d.ts
CHANGED
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
|
|
13
|
-
import { ProgressCircleBase
|
|
13
|
+
import { ProgressCircleBase } from './ProgressCircle.base.js';
|
|
14
|
+
import { type ProgressCircleStaticColorS1 } from './ProgressCircle.types.js';
|
|
14
15
|
/**
|
|
15
16
|
* @element sp-progress-circle
|
|
16
17
|
*/
|
|
@@ -14,11 +14,11 @@ import {
|
|
|
14
14
|
} from "@spectrum-web-components/base";
|
|
15
15
|
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
16
16
|
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
17
|
-
import {
|
|
18
|
-
PROGRESS_CIRCLE_STATIC_COLORS_S1,
|
|
19
|
-
ProgressCircleBase
|
|
20
|
-
} from "@spectrum-web-components/core/components/progress-circle";
|
|
21
17
|
import progressCircleStyles from "./progress-circle.css.js";
|
|
18
|
+
import { ProgressCircleBase } from "./ProgressCircle.base.dev.js";
|
|
19
|
+
import {
|
|
20
|
+
PROGRESS_CIRCLE_STATIC_COLORS_S1
|
|
21
|
+
} from "./ProgressCircle.types.dev.js";
|
|
22
22
|
export class ProgressCircle extends ProgressCircleBase {
|
|
23
23
|
// ──────────────────────────────
|
|
24
24
|
// RENDERING & STYLING
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ProgressCircle.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n PROGRESS_CIRCLE_STATIC_COLORS_S1,\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEE;AAAA,OAEK;AACP,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport progressCircleStyles from './progress-circle.css.js';\nimport { ProgressCircleBase } from './ProgressCircle.base.dev.js'\nimport {\n PROGRESS_CIRCLE_STATIC_COLORS_S1,\n type ProgressCircleStaticColorS1,\n} from './ProgressCircle.types.dev.js'\n\n/**\n * @element sp-progress-circle\n */\nexport class ProgressCircle extends ProgressCircleBase {\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // API OVERRIDES\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * @internal\n */\n static override readonly STATIC_COLORS = PROGRESS_CIRCLE_STATIC_COLORS_S1;\n\n /**\n * Static color variant for use on different backgrounds.\n *\n * When set to 'white', the component uses white styling for images with a dark tinted background.\n */\n @property({ type: String, reflect: true, attribute: 'static-color' })\n public override staticColor?: ProgressCircleStaticColorS1;\n\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // RENDERING & STYLING\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n public static override get styles(): CSSResultArray {\n return [progressCircleStyles];\n }\n\n protected override render(): TemplateResult {\n const styles = [\n this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),\n this.makeRotation(-180 + (180 / 50) * Math.max(this.progress - 50, 0)),\n ];\n const masks = ['Mask1', 'Mask2'];\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n <div class=\"track\"></div>\n <div class=\"fills\">\n ${masks.map(\n (mask, index) => html`\n <div class=\"fill${mask}\">\n <div class=\"fillSub${mask}\" style=${ifDefined(styles[index])}>\n <div class=\"fill\"></div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEE;AAAA,OAEK;AACP,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,OAAO,0BAA0B;AACjC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AAKA,aAAM,uBAAuB,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAsBrD,WAA2B,SAAyB;AAClD,WAAO,CAAC,oBAAoB;AAAA,EAC9B;AAAA,EAEmB,SAAyB;AAC1C,UAAM,SAAS;AAAA,MACb,KAAK,aAAa,OAAQ,MAAM,KAAM,KAAK,IAAI,KAAK,UAAU,EAAE,CAAC;AAAA,MACjE,KAAK,aAAa,OAAQ,MAAM,KAAM,KAAK,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC;AAAA,IACvE;AACA,UAAM,QAAQ,CAAC,SAAS,OAAO;AAC/B,WAAO;AAAA,0BACe,KAAK,gBAAgB;AAAA;AAAA;AAAA,UAGrC,MAAM;AAAA,MACN,CAAC,MAAM,UAAU;AAAA,8BACG,IAAI;AAAA,mCACC,IAAI,WAAW,UAAU,OAAO,KAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlE,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAhDa,eAQc,gBAAgB;AAQzB;AAAA,EADf,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,eAAe,CAAC;AAAA,GAfzD,eAgBK;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ProgressCircle.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,e,s,r)=>{for(var t=r>1?void 0:r?m(e,s):e,o=i.length-1,l;o>=0;o--)(l=i[o])&&(t=(r?l(e,s,t):l(t))||t);return r&&t&&d(e,s,t),t};import{html as c}from"@spectrum-web-components/base";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as S}from"@spectrum-web-components/base/src/directives.js";import n from"./progress-circle.css.js";import{ProgressCircleBase as v}from"./ProgressCircle.base.js";import{PROGRESS_CIRCLE_STATIC_COLORS_S1 as C}from"./ProgressCircle.types.js";export class ProgressCircle extends v{static get styles(){return[n]}render(){const e=[this.makeRotation(-180+3.6*Math.min(this.progress,50)),this.makeRotation(-180+3.6*Math.max(this.progress-50,0))],s=["Mask1","Mask2"];return c`
|
|
2
2
|
<slot @slotchange=${this.handleSlotchange}></slot>
|
|
3
3
|
<div class="track"></div>
|
|
4
4
|
<div class="fills">
|
|
5
5
|
${s.map((r,t)=>c`
|
|
6
6
|
<div class="fill${r}">
|
|
7
|
-
<div class="fillSub${r}" style=${
|
|
7
|
+
<div class="fillSub${r}" style=${S(e[t])}>
|
|
8
8
|
<div class="fill"></div>
|
|
9
9
|
</div>
|
|
10
10
|
</div>
|
|
11
11
|
`)}
|
|
12
12
|
</div>
|
|
13
|
-
`}}ProgressCircle.STATIC_COLORS=
|
|
13
|
+
`}}ProgressCircle.STATIC_COLORS=C,a([p({type:String,reflect:!0,attribute:"static-color"})],ProgressCircle.prototype,"staticColor",2);
|
|
14
14
|
//# sourceMappingURL=ProgressCircle.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ProgressCircle.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport {\n PROGRESS_CIRCLE_STATIC_COLORS_S1,\n
|
|
5
|
-
"mappings": "qNAYA,OAEE,QAAAA,MAEK,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,aAAAC,MAAiB,
|
|
6
|
-
"names": ["html", "property", "ifDefined", "
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n CSSResultArray,\n html,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport progressCircleStyles from './progress-circle.css.js';\nimport { ProgressCircleBase } from './ProgressCircle.base.js';\nimport {\n PROGRESS_CIRCLE_STATIC_COLORS_S1,\n type ProgressCircleStaticColorS1,\n} from './ProgressCircle.types.js';\n\n/**\n * @element sp-progress-circle\n */\nexport class ProgressCircle extends ProgressCircleBase {\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // API OVERRIDES\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n /**\n * @internal\n */\n static override readonly STATIC_COLORS = PROGRESS_CIRCLE_STATIC_COLORS_S1;\n\n /**\n * Static color variant for use on different backgrounds.\n *\n * When set to 'white', the component uses white styling for images with a dark tinted background.\n */\n @property({ type: String, reflect: true, attribute: 'static-color' })\n public override staticColor?: ProgressCircleStaticColorS1;\n\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n // RENDERING & STYLING\n // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n public static override get styles(): CSSResultArray {\n return [progressCircleStyles];\n }\n\n protected override render(): TemplateResult {\n const styles = [\n this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),\n this.makeRotation(-180 + (180 / 50) * Math.max(this.progress - 50, 0)),\n ];\n const masks = ['Mask1', 'Mask2'];\n return html`\n <slot @slotchange=${this.handleSlotchange}></slot>\n <div class=\"track\"></div>\n <div class=\"fills\">\n ${masks.map(\n (mask, index) => html`\n <div class=\"fill${mask}\">\n <div class=\"fillSub${mask}\" style=${ifDefined(styles[index])}>\n <div class=\"fill\"></div>\n </div>\n </div>\n `\n )}\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEE,QAAAA,MAEK,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,aAAAC,MAAiB,kDAE1B,OAAOC,MAA0B,2BACjC,OAAS,sBAAAC,MAA0B,2BACnC,OACE,oCAAAC,MAEK,4BAKA,aAAM,uBAAuBD,CAAmB,CAsBrD,WAA2B,QAAyB,CAClD,MAAO,CAACD,CAAoB,CAC9B,CAEmB,QAAyB,CAC1C,MAAMG,EAAS,CACb,KAAK,aAAa,KAAQ,IAAY,KAAK,IAAI,KAAK,SAAU,EAAE,CAAC,EACjE,KAAK,aAAa,KAAQ,IAAY,KAAK,IAAI,KAAK,SAAW,GAAI,CAAC,CAAC,CACvE,EACMC,EAAQ,CAAC,QAAS,OAAO,EAC/B,OAAOP;AAAA,0BACe,KAAK,gBAAgB;AAAA;AAAA;AAAA,UAGrCO,EAAM,IACN,CAACC,EAAMC,IAAUT;AAAA,8BACGQ,CAAI;AAAA,mCACCA,CAAI,WAAWN,EAAUI,EAAOG,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,WAKlE,CAAC;AAAA;AAAA,KAGP,CACF,CAhDa,eAQc,cAAgBJ,EAQzBK,EAAA,CADfT,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,cAAe,CAAC,GAfzD,eAgBK",
|
|
6
|
+
"names": ["html", "property", "ifDefined", "progressCircleStyles", "ProgressCircleBase", "PROGRESS_CIRCLE_STATIC_COLORS_S1", "styles", "masks", "mask", "index", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2026 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
export declare const PROGRESS_CIRCLE_VALID_SIZES: ["s", "m", "l"];
|
|
13
|
+
export declare const PROGRESS_CIRCLE_STATIC_COLORS_S1: readonly ["white"];
|
|
14
|
+
export declare const PROGRESS_CIRCLE_STATIC_COLORS_S2: readonly ["white", "black"];
|
|
15
|
+
export type ProgressCircleStaticColorS1 = (typeof PROGRESS_CIRCLE_STATIC_COLORS_S1)[number];
|
|
16
|
+
export type ProgressCircleStaticColorS2 = (typeof PROGRESS_CIRCLE_STATIC_COLORS_S2)[number];
|
|
17
|
+
export type ProgressCircleStaticColor = ProgressCircleStaticColorS1 | ProgressCircleStaticColorS2;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
export const PROGRESS_CIRCLE_VALID_SIZES = [
|
|
3
|
+
"s",
|
|
4
|
+
"m",
|
|
5
|
+
"l"
|
|
6
|
+
];
|
|
7
|
+
export const PROGRESS_CIRCLE_STATIC_COLORS_S1 = ["white"];
|
|
8
|
+
export const PROGRESS_CIRCLE_STATIC_COLORS_S2 = [
|
|
9
|
+
...PROGRESS_CIRCLE_STATIC_COLORS_S1,
|
|
10
|
+
"black"
|
|
11
|
+
];
|
|
12
|
+
//# sourceMappingURL=ProgressCircle.types.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["ProgressCircle.types.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ElementSize } from '@spectrum-web-components/base/src/sizedMixin.js';\n\nexport const PROGRESS_CIRCLE_VALID_SIZES = [\n 's',\n 'm',\n 'l',\n] as const satisfies ElementSize[];\nexport const PROGRESS_CIRCLE_STATIC_COLORS_S1 = ['white'] as const;\nexport const PROGRESS_CIRCLE_STATIC_COLORS_S2 = [\n ...PROGRESS_CIRCLE_STATIC_COLORS_S1,\n 'black',\n] as const;\n\nexport type ProgressCircleStaticColorS1 =\n (typeof PROGRESS_CIRCLE_STATIC_COLORS_S1)[number];\nexport type ProgressCircleStaticColorS2 =\n (typeof PROGRESS_CIRCLE_STATIC_COLORS_S2)[number];\nexport type ProgressCircleStaticColor =\n | ProgressCircleStaticColorS1\n | ProgressCircleStaticColorS2;\n"],
|
|
5
|
+
"mappings": ";AAcO,aAAM,8BAA8B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF;AACO,aAAM,mCAAmC,CAAC,OAAO;AACjD,aAAM,mCAAmC;AAAA,EAC9C,GAAG;AAAA,EACH;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["ProgressCircle.types.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2026 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport type { ElementSize } from '@spectrum-web-components/base/src/sizedMixin.js';\n\nexport const PROGRESS_CIRCLE_VALID_SIZES = [\n 's',\n 'm',\n 'l',\n] as const satisfies ElementSize[];\nexport const PROGRESS_CIRCLE_STATIC_COLORS_S1 = ['white'] as const;\nexport const PROGRESS_CIRCLE_STATIC_COLORS_S2 = [\n ...PROGRESS_CIRCLE_STATIC_COLORS_S1,\n 'black',\n] as const;\n\nexport type ProgressCircleStaticColorS1 =\n (typeof PROGRESS_CIRCLE_STATIC_COLORS_S1)[number];\nexport type ProgressCircleStaticColorS2 =\n (typeof PROGRESS_CIRCLE_STATIC_COLORS_S2)[number];\nexport type ProgressCircleStaticColor =\n | ProgressCircleStaticColorS1\n | ProgressCircleStaticColorS2;\n"],
|
|
5
|
+
"mappings": "aAcO,aAAM,4BAA8B,CACzC,IACA,IACA,GACF,EACa,iCAAmC,CAAC,OAAO,EAC3C,iCAAmC,CAC9C,GAAG,iCACH,OACF",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|