@spectrum-web-components/progress-circle 1.12.3 → 1.12.4
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/progress-circle",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.4",
|
|
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.
|
|
58
|
-
"@spectrum-web-components/reactive-controllers": "1.12.
|
|
59
|
-
"@spectrum-web-components/shared": "1.12.
|
|
57
|
+
"@spectrum-web-components/base": "1.12.4",
|
|
58
|
+
"@spectrum-web-components/reactive-controllers": "1.12.4",
|
|
59
|
+
"@spectrum-web-components/shared": "1.12.4"
|
|
60
60
|
},
|
|
61
61
|
"keywords": [
|
|
62
62
|
"design-system",
|
|
@@ -94,7 +94,7 @@ export class ProgressCircleBase extends SizedMixin(SpectrumElement, {
|
|
|
94
94
|
window.__swc.warn(
|
|
95
95
|
this,
|
|
96
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://
|
|
97
|
+
"https://spectrum-web-components.adobe.com/?path=/docs/progress-circle-consumer-migration-guide--docs",
|
|
98
98
|
{ level: "deprecation" }
|
|
99
99
|
);
|
|
100
100
|
}
|
|
@@ -110,7 +110,7 @@ export class ProgressCircleBase extends SizedMixin(SpectrumElement, {
|
|
|
110
110
|
window.__swc.warn(
|
|
111
111
|
this,
|
|
112
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://
|
|
113
|
+
"https://spectrum-web-components.adobe.com/?path=/docs/progress-circle-consumer-migration-guide--docs",
|
|
114
114
|
{ level: "deprecation" }
|
|
115
115
|
);
|
|
116
116
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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://
|
|
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://spectrum-web-components.adobe.com/?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://spectrum-web-components.adobe.com/?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
5
|
"mappings": "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",
|
|
6
6
|
"names": ["_a"]
|
|
7
7
|
}
|
|
@@ -1,2 +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
|
|
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 m}from"@spectrum-web-components/base/src/sizedMixin.js";import{LanguageResolutionController as b,languageResolverUpdatedSymbol as c}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 m(u,{validSizes:f}){constructor(){super(...arguments);this.indeterminate=!1;this.label="";this.progress=0;this.languageResolver=new b(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(c)&&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
2
|
//# sourceMappingURL=ProgressCircle.base.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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://
|
|
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://spectrum-web-components.adobe.com/?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://spectrum-web-components.adobe.com/?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
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
6
|
"names": ["SpectrumElement", "property", "query", "SizedMixin", "LanguageResolutionController", "languageResolverUpdatedSymbol", "getLabelFromSlot", "PROGRESS_CIRCLE_VALID_SIZES", "rotation", "labelFromSlot", "changes", "hasAccessibleName", "__decorateClass"]
|
|
7
7
|
}
|