@spectrum-web-components/meter 0.37.0 → 0.39.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/README.md +30 -7
- package/custom-elements.json +44 -61
- package/package.json +6 -6
- package/src/Meter.d.ts +11 -4
- package/src/Meter.dev.js +30 -17
- package/src/Meter.dev.js.map +2 -2
- package/src/Meter.js +3 -3
- package/src/Meter.js.map +3 -3
- package/src/meter.css.dev.js +27 -23
- package/src/meter.css.dev.js.map +2 -2
- package/src/meter.css.js +27 -23
- package/src/meter.css.js.map +2 -2
- package/src/spectrum-config.js +11 -9
- package/src/spectrum-meter.css.dev.js +27 -23
- package/src/spectrum-meter.css.dev.js.map +2 -2
- package/src/spectrum-meter.css.js +27 -23
- package/src/spectrum-meter.css.js.map +2 -2
- package/stories/meter.stories.js +3 -3
- package/stories/meter.stories.js.map +1 -1
- package/test/meter.test.js +31 -0
- package/test/meter.test.js.map +2 -2
package/README.md
CHANGED
|
@@ -63,16 +63,39 @@ import { Meter } from '@spectrum-web-components/meter';
|
|
|
63
63
|
|
|
64
64
|
## Variants
|
|
65
65
|
|
|
66
|
-
###
|
|
66
|
+
### Informative
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
By default, the informative variant can be used to represent a neutral or non-semantic value, such as the number of tutorials completed.
|
|
69
69
|
|
|
70
70
|
```html
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
<sp-meter progress="50">Storage Space</sp-meter>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Positive
|
|
75
|
+
|
|
76
|
+
The positive variant can be used to represent a positive semantic value, such as when there’s a lot of space remaining.
|
|
77
|
+
Use value `variant="positive"` to define a positive variant.
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<sp-meter variant="positive" progress="50">Storage Space</sp-meter>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Notice
|
|
84
|
+
|
|
85
|
+
The notice variant can be used to warn users about a situation that may need to be addressed soon, such as when space remaining is becoming limited.
|
|
86
|
+
Use value `variant="notice"` to define a notice variant.
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<sp-meter variant="notice" progress="73">Storage Space</sp-meter>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Negative
|
|
93
|
+
|
|
94
|
+
The negative variant can be used to warn users about a critical situation that needs their urgent attention, such as when space remaining is becoming very limited.
|
|
95
|
+
Use value `variant="negative"` to define a negative variant.
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<sp-meter variant="negative" progress="92">Storage Space</sp-meter>
|
|
76
99
|
```
|
|
77
100
|
|
|
78
101
|
### Side Label
|
package/custom-elements.json
CHANGED
|
@@ -21,6 +21,14 @@
|
|
|
21
21
|
"kind": "javascript-module",
|
|
22
22
|
"path": "src/Meter.js",
|
|
23
23
|
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "variable",
|
|
26
|
+
"name": "meterVariants",
|
|
27
|
+
"type": {
|
|
28
|
+
"text": "array"
|
|
29
|
+
},
|
|
30
|
+
"default": "[\n 'positive',\n 'notice',\n 'negative',\n]"
|
|
31
|
+
},
|
|
24
32
|
{
|
|
25
33
|
"kind": "class",
|
|
26
34
|
"description": "",
|
|
@@ -44,47 +52,30 @@
|
|
|
44
52
|
},
|
|
45
53
|
{
|
|
46
54
|
"kind": "field",
|
|
47
|
-
"name": "
|
|
48
|
-
"type": {
|
|
49
|
-
"text": "boolean"
|
|
50
|
-
},
|
|
51
|
-
"privacy": "public",
|
|
52
|
-
"default": "false",
|
|
53
|
-
"attribute": "over-background",
|
|
54
|
-
"reflects": true
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"kind": "field",
|
|
58
|
-
"name": "notice",
|
|
59
|
-
"type": {
|
|
60
|
-
"text": "boolean"
|
|
61
|
-
},
|
|
55
|
+
"name": "variant",
|
|
62
56
|
"privacy": "public",
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
57
|
+
"description": "The variant applies specific styling when set to `negative`, `positive`, `notice`\n`variant` attribute is removed when not matching one of the above.",
|
|
58
|
+
"parameters": [
|
|
59
|
+
{
|
|
60
|
+
"name": "variant",
|
|
61
|
+
"type": {
|
|
62
|
+
"text": "String"
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
],
|
|
70
66
|
"type": {
|
|
71
|
-
"text": "
|
|
67
|
+
"text": "MeterVariants"
|
|
72
68
|
},
|
|
73
|
-
"
|
|
74
|
-
"default": "false",
|
|
75
|
-
"attribute": "negative",
|
|
76
|
-
"reflects": true
|
|
69
|
+
"attribute": "variant"
|
|
77
70
|
},
|
|
78
71
|
{
|
|
79
72
|
"kind": "field",
|
|
80
|
-
"name": "
|
|
73
|
+
"name": "_variant",
|
|
81
74
|
"type": {
|
|
82
|
-
"text": "
|
|
75
|
+
"text": "MeterVariants"
|
|
83
76
|
},
|
|
84
|
-
"privacy": "
|
|
85
|
-
"default": "
|
|
86
|
-
"attribute": "positive",
|
|
87
|
-
"reflects": true
|
|
77
|
+
"privacy": "private",
|
|
78
|
+
"default": "''"
|
|
88
79
|
},
|
|
89
80
|
{
|
|
90
81
|
"kind": "field",
|
|
@@ -153,36 +144,20 @@
|
|
|
153
144
|
"fieldName": "progress"
|
|
154
145
|
},
|
|
155
146
|
{
|
|
156
|
-
"name": "
|
|
157
|
-
"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
"text": "boolean"
|
|
167
|
-
},
|
|
168
|
-
"default": "false",
|
|
169
|
-
"fieldName": "notice"
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
"name": "negative",
|
|
173
|
-
"type": {
|
|
174
|
-
"text": "boolean"
|
|
175
|
-
},
|
|
176
|
-
"default": "false",
|
|
177
|
-
"fieldName": "negative"
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
"name": "positive",
|
|
147
|
+
"name": "variant",
|
|
148
|
+
"description": "The variant applies specific styling when set to `negative`, `positive`, `notice`\n`variant` attribute is removed when not matching one of the above.",
|
|
149
|
+
"parameters": [
|
|
150
|
+
{
|
|
151
|
+
"name": "variant",
|
|
152
|
+
"type": {
|
|
153
|
+
"text": "String"
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
],
|
|
181
157
|
"type": {
|
|
182
|
-
"text": "
|
|
158
|
+
"text": "MeterVariants"
|
|
183
159
|
},
|
|
184
|
-
"
|
|
185
|
-
"fieldName": "positive"
|
|
160
|
+
"fieldName": "variant"
|
|
186
161
|
},
|
|
187
162
|
{
|
|
188
163
|
"name": "label",
|
|
@@ -227,6 +202,14 @@
|
|
|
227
202
|
}
|
|
228
203
|
],
|
|
229
204
|
"exports": [
|
|
205
|
+
{
|
|
206
|
+
"kind": "js",
|
|
207
|
+
"name": "meterVariants",
|
|
208
|
+
"declaration": {
|
|
209
|
+
"name": "meterVariants",
|
|
210
|
+
"module": "src/Meter.js"
|
|
211
|
+
}
|
|
212
|
+
},
|
|
230
213
|
{
|
|
231
214
|
"kind": "js",
|
|
232
215
|
"name": "Meter",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/meter",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.39.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,12 +57,12 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/field-label": "^0.
|
|
62
|
-
"@spectrum-web-components/shared": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.39.0",
|
|
61
|
+
"@spectrum-web-components/field-label": "^0.39.0",
|
|
62
|
+
"@spectrum-web-components/shared": "^0.39.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@spectrum-css/progressbar": "^3.0.
|
|
65
|
+
"@spectrum-css/progressbar": "^3.0.73"
|
|
66
66
|
},
|
|
67
67
|
"types": "./src/index.d.ts",
|
|
68
68
|
"customElements": "custom-elements.json",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"./sp-*.js",
|
|
71
71
|
"./**/*.dev.js"
|
|
72
72
|
],
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
|
|
74
74
|
}
|
package/src/Meter.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import '@spectrum-web-components/field-label/sp-field-label.js';
|
|
3
|
+
export declare const meterVariants: string[];
|
|
4
|
+
export declare type MeterVariants = typeof meterVariants[number];
|
|
3
5
|
declare const Meter_base: typeof SpectrumElement & {
|
|
4
6
|
new (...args: any[]): import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
5
7
|
prototype: import("@spectrum-web-components/shared/src/observe-slot-text.js").SlotTextObservingInterface;
|
|
@@ -15,10 +17,15 @@ declare const Meter_base: typeof SpectrumElement & {
|
|
|
15
17
|
export declare class Meter extends Meter_base {
|
|
16
18
|
static get styles(): CSSResultArray;
|
|
17
19
|
progress: number;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
/**
|
|
21
|
+
* The variant applies specific styling when set to `negative`, `positive`, `notice`
|
|
22
|
+
* `variant` attribute is removed when not matching one of the above.
|
|
23
|
+
*
|
|
24
|
+
* @param {String} variant
|
|
25
|
+
*/
|
|
26
|
+
set variant(variant: MeterVariants);
|
|
27
|
+
get variant(): MeterVariants;
|
|
28
|
+
private _variant;
|
|
22
29
|
label: string;
|
|
23
30
|
private slotEl;
|
|
24
31
|
private languageResolver;
|
package/src/Meter.dev.js
CHANGED
|
@@ -12,6 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
12
12
|
};
|
|
13
13
|
import {
|
|
14
14
|
html,
|
|
15
|
+
nothing,
|
|
15
16
|
SizedMixin,
|
|
16
17
|
SpectrumElement
|
|
17
18
|
} from "@spectrum-web-components/base";
|
|
@@ -24,14 +25,18 @@ import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slo
|
|
|
24
25
|
import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
|
|
25
26
|
import "@spectrum-web-components/field-label/sp-field-label.js";
|
|
26
27
|
import styles from "./meter.css.js";
|
|
27
|
-
export
|
|
28
|
+
export const meterVariants = [
|
|
29
|
+
"positive",
|
|
30
|
+
"notice",
|
|
31
|
+
"negative"
|
|
32
|
+
];
|
|
33
|
+
export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, ""), {
|
|
34
|
+
noDefaultSize: true
|
|
35
|
+
}) {
|
|
28
36
|
constructor() {
|
|
29
37
|
super(...arguments);
|
|
30
38
|
this.progress = 0;
|
|
31
|
-
this.
|
|
32
|
-
this.notice = false;
|
|
33
|
-
this.negative = false;
|
|
34
|
-
this.positive = false;
|
|
39
|
+
this._variant = "";
|
|
35
40
|
this.label = "";
|
|
36
41
|
this.languageResolver = new LanguageResolutionController(this);
|
|
37
42
|
// called sideLabel
|
|
@@ -40,10 +45,27 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, "")) {
|
|
|
40
45
|
static get styles() {
|
|
41
46
|
return [styles];
|
|
42
47
|
}
|
|
48
|
+
set variant(variant) {
|
|
49
|
+
if (variant === this.variant) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
const oldValue = this.variant;
|
|
53
|
+
if (meterVariants.includes(variant)) {
|
|
54
|
+
this.setAttribute("variant", variant);
|
|
55
|
+
this._variant = variant;
|
|
56
|
+
} else {
|
|
57
|
+
this.removeAttribute("variant");
|
|
58
|
+
this._variant = "";
|
|
59
|
+
}
|
|
60
|
+
this.requestUpdate("variant", oldValue);
|
|
61
|
+
}
|
|
62
|
+
get variant() {
|
|
63
|
+
return this._variant;
|
|
64
|
+
}
|
|
43
65
|
render() {
|
|
44
66
|
return html`
|
|
45
67
|
<sp-field-label size=${this.size} class="label">
|
|
46
|
-
${this.slotHasContent ?
|
|
68
|
+
${this.slotHasContent ? nothing : this.label}
|
|
47
69
|
<slot @slotchange=${this.handleSlotchange}>${this.label}</slot>
|
|
48
70
|
</sp-field-label>
|
|
49
71
|
<sp-field-label size=${this.size} class="percentage">
|
|
@@ -88,17 +110,8 @@ __decorateClass([
|
|
|
88
110
|
property({ type: Number })
|
|
89
111
|
], Meter.prototype, "progress", 2);
|
|
90
112
|
__decorateClass([
|
|
91
|
-
property({ type:
|
|
92
|
-
], Meter.prototype, "
|
|
93
|
-
__decorateClass([
|
|
94
|
-
property({ type: Boolean, reflect: true })
|
|
95
|
-
], Meter.prototype, "notice", 2);
|
|
96
|
-
__decorateClass([
|
|
97
|
-
property({ type: Boolean, reflect: true })
|
|
98
|
-
], Meter.prototype, "negative", 2);
|
|
99
|
-
__decorateClass([
|
|
100
|
-
property({ type: Boolean, reflect: true })
|
|
101
|
-
], Meter.prototype, "positive", 2);
|
|
113
|
+
property({ type: String })
|
|
114
|
+
], Meter.prototype, "variant", 1);
|
|
102
115
|
__decorateClass([
|
|
103
116
|
property({ type: String, reflect: true })
|
|
104
117
|
], Meter.prototype, "label", 2);
|
package/src/Meter.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Meter.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport styles from './meter.css.js';\n\n/**\n * @element sp-meter\n *\n * @slot - text labeling the Meter\n */\nexport class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Number })\n public progress = 0;\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,OAAO;AACP,OAAO,YAAY;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport styles from './meter.css.js';\n\nexport const meterVariants = [\n 'positive',\n 'notice',\n 'negative',\n];\n\nexport type MeterVariants = typeof meterVariants[number];\n\n/**\n * @element sp-meter\n *\n * @slot - text labeling the Meter\n */\nexport class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, ''), {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Number })\n public progress = 0;\n\n /**\n * The variant applies specific styling when set to `negative`, `positive`, `notice`\n * `variant` attribute is removed when not matching one of the above.\n *\n * @param {String} variant\n */\n @property({ type: String })\n public set variant(variant: MeterVariants) {\n if (variant === this.variant) {\n return;\n }\n const oldValue = this.variant;\n if (meterVariants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldValue);\n }\n\n public get variant(): MeterVariants {\n return this._variant;\n }\n\n private _variant: MeterVariants = '';\n\n @property({ type: String, reflect: true })\n public label = '';\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n private languageResolver = new LanguageResolutionController(this);\n\n @property({ type: Boolean, reflect: true, attribute: 'side-label' })\n // called sideLabel\n public sideLabel = false;\n\n @property({ type: String, reflect: true })\n public static: 'white' | undefined;\n\n protected override render(): TemplateResult {\n return html`\n <sp-field-label size=${this.size} class=\"label\">\n ${this.slotHasContent ? nothing : this.label}\n <slot @slotchange=${this.handleSlotchange}>${this.label}</slot>\n </sp-field-label>\n <sp-field-label size=${this.size} class=\"percentage\">\n ${new Intl.NumberFormat(this.languageResolver.language, {\n style: 'percent',\n unitDisplay: 'narrow',\n }).format(this.progress / 100)}\n </sp-field-label>\n <div class=\"track\">\n <div\n class=\"fill\"\n style=\"transform: scaleX(calc(${this.progress} / 100));\"\n ></div>\n </div>\n `;\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 this.setAttribute('role', 'meter progressbar');\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AAEP,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,oCAAoC;AAC7C,OAAO;AACP,OAAO,YAAY;AAEZ,aAAM,gBAAgB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACJ;AASO,aAAM,cAAc,WAAW,gBAAgB,iBAAiB,EAAE,GAAG;AAAA,EACxE,eAAe;AACnB,CAAC,EAAE;AAAA,EAFI;AAAA;AAQH,SAAO,WAAW;AA4BlB,SAAQ,WAA0B;AAGlC,SAAO,QAAQ;AAKf,SAAQ,mBAAmB,IAAI,6BAA6B,IAAI;AAIhE;AAAA,SAAO,YAAY;AAAA;AAAA,EA7CnB,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAYA,IAAW,QAAQ,SAAwB;AACvC,QAAI,YAAY,KAAK,SAAS;AAC1B;AAAA,IACJ;AACA,UAAM,WAAW,KAAK;AACtB,QAAI,cAAc,SAAS,OAAO,GAAG;AACjC,WAAK,aAAa,WAAW,OAAO;AACpC,WAAK,WAAW;AAAA,IACpB,OAAO;AACH,WAAK,gBAAgB,SAAS;AAC9B,WAAK,WAAW;AAAA,IACpB;AACA,SAAK,cAAc,WAAW,QAAQ;AAAA,EAC1C;AAAA,EAEA,IAAW,UAAyB;AAChC,WAAO,KAAK;AAAA,EAChB;AAAA,EAmBmB,SAAyB;AACxC,WAAO;AAAA,mCACoB,KAAK,IAAI;AAAA,kBAC1B,KAAK,iBAAiB,UAAU,KAAK,KAAK;AAAA,oCACxB,KAAK,gBAAgB,IAAI,KAAK,KAAK;AAAA;AAAA,mCAEpC,KAAK,IAAI;AAAA,kBAC1B,IAAI,KAAK,aAAa,KAAK,iBAAiB,UAAU;AAAA,MACpD,OAAO;AAAA,MACP,aAAa;AAAA,IACjB,CAAC,EAAE,OAAO,KAAK,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oDAKM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI7D;AAAA,EAEU,mBAAyB;AAC/B,UAAM,gBAAgB,iBAAiB,KAAK,OAAO,KAAK,MAAM;AAC9D,QAAI,eAAe;AACf,WAAK,QAAQ;AAAA,IACjB;AAAA,EACJ;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,aAAa,QAAQ,mBAAmB;AAAA,EACjD;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK,aAAa,iBAAiB,KAAK,KAAK,QAAQ;AAAA,IACzD;AACA,QAAI,QAAQ,IAAI,OAAO,GAAG;AACtB,UAAI,KAAK,MAAM,QAAQ;AACnB,aAAK,aAAa,cAAc,KAAK,KAAK;AAAA,MAC9C,OAAO;AACH,aAAK,gBAAgB,YAAY;AAAA,MACrC;AAAA,IACJ;AAAA,EACJ;AACJ;AA3FW;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPjB,MAQF;AASI;AAAA,EADV,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhBjB,MAiBE;AAsBJ;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtChC,MAuCF;AAGC;AAAA,EADP,MAAM,MAAM;AAAA,GAzCJ,MA0CD;AAMD;AAAA,EAFN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,aAAa,CAAC;AAAA,GA9C1D,MAgDF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlDhC,MAmDF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Meter.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(a,s,e,i)=>{for(var t=i>1?void 0:i?u(s,e):s,o=a.length-1,n;o>=0;o--)(n=a[o])&&(t=(i?n(s,e,t):n(t))||t);return i&&t&&p(s,e,t),t};import{html as d,nothing as b,SizedMixin as h,SpectrumElement as c}from"@spectrum-web-components/base";import{property as l,query as m}from"@spectrum-web-components/base/src/decorators.js";import{getLabelFromSlot as v}from"@spectrum-web-components/shared/src/get-label-from-slot.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import{LanguageResolutionController as g}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import"@spectrum-web-components/field-label/sp-field-label.js";import y from"./meter.css.js";export const meterVariants=["positive","notice","negative"];export class Meter extends h(f(c,""),{noDefaultSize:!0}){constructor(){super(...arguments);this.progress=0;this._variant="";this.label="";this.languageResolver=new g(this);this.sideLabel=!1}static get styles(){return[y]}set variant(e){if(e===this.variant)return;const i=this.variant;meterVariants.includes(e)?(this.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",i)}get variant(){return this._variant}render(){return d`
|
|
2
2
|
<sp-field-label size=${this.size} class="label">
|
|
3
|
-
${this.slotHasContent?
|
|
3
|
+
${this.slotHasContent?b:this.label}
|
|
4
4
|
<slot @slotchange=${this.handleSlotchange}>${this.label}</slot>
|
|
5
5
|
</sp-field-label>
|
|
6
6
|
<sp-field-label size=${this.size} class="percentage">
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
style="transform: scaleX(calc(${this.progress} / 100));"
|
|
13
13
|
></div>
|
|
14
14
|
</div>
|
|
15
|
-
`}handleSlotchange(){const e=
|
|
15
|
+
`}handleSlotchange(){const e=v(this.label,this.slotEl);e&&(this.label=e)}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","meter progressbar")}updated(e){super.updated(e),e.has("progress")&&this.setAttribute("aria-valuenow",""+this.progress),e.has("label")&&(this.label.length?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}r([l({type:Number})],Meter.prototype,"progress",2),r([l({type:String})],Meter.prototype,"variant",1),r([l({type:String,reflect:!0})],Meter.prototype,"label",2),r([m("slot")],Meter.prototype,"slotEl",2),r([l({type:Boolean,reflect:!0,attribute:"side-label"})],Meter.prototype,"sideLabel",2),r([l({type:String,reflect:!0})],Meter.prototype,"static",2);
|
|
16
16
|
//# sourceMappingURL=Meter.js.map
|
package/src/Meter.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Meter.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport styles from './meter.css.js';\n\n/**\n * @element sp-meter\n *\n * @slot - text labeling the Meter\n */\nexport class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Number })\n public progress = 0;\n\n
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,oBAAAC,MAAwB,6DACjC,OAAS,mBAAAC,MAAuB,2DAChC,OAAS,gCAAAC,MAAoC,0EAC7C,MAAO,yDACP,OAAOC,MAAY,
|
|
6
|
-
"names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "getLabelFromSlot", "ObserveSlotText", "LanguageResolutionController", "styles", "labelFromSlot", "changes", "__decorateClass"]
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { getLabelFromSlot } from '@spectrum-web-components/shared/src/get-label-from-slot.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport styles from './meter.css.js';\n\nexport const meterVariants = [\n 'positive',\n 'notice',\n 'negative',\n];\n\nexport type MeterVariants = typeof meterVariants[number];\n\n/**\n * @element sp-meter\n *\n * @slot - text labeling the Meter\n */\nexport class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, ''), {\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ type: Number })\n public progress = 0;\n\n /**\n * The variant applies specific styling when set to `negative`, `positive`, `notice`\n * `variant` attribute is removed when not matching one of the above.\n *\n * @param {String} variant\n */\n @property({ type: String })\n public set variant(variant: MeterVariants) {\n if (variant === this.variant) {\n return;\n }\n const oldValue = this.variant;\n if (meterVariants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldValue);\n }\n\n public get variant(): MeterVariants {\n return this._variant;\n }\n\n private _variant: MeterVariants = '';\n\n @property({ type: String, reflect: true })\n public label = '';\n\n @query('slot')\n private slotEl!: HTMLSlotElement;\n\n private languageResolver = new LanguageResolutionController(this);\n\n @property({ type: Boolean, reflect: true, attribute: 'side-label' })\n // called sideLabel\n public sideLabel = false;\n\n @property({ type: String, reflect: true })\n public static: 'white' | undefined;\n\n protected override render(): TemplateResult {\n return html`\n <sp-field-label size=${this.size} class=\"label\">\n ${this.slotHasContent ? nothing : this.label}\n <slot @slotchange=${this.handleSlotchange}>${this.label}</slot>\n </sp-field-label>\n <sp-field-label size=${this.size} class=\"percentage\">\n ${new Intl.NumberFormat(this.languageResolver.language, {\n style: 'percent',\n unitDisplay: 'narrow',\n }).format(this.progress / 100)}\n </sp-field-label>\n <div class=\"track\">\n <div\n class=\"fill\"\n style=\"transform: scaleX(calc(${this.progress} / 100));\"\n ></div>\n </div>\n `;\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 this.setAttribute('role', 'meter progressbar');\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('progress')) {\n this.setAttribute('aria-valuenow', '' + this.progress);\n }\n if (changes.has('label')) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,oBAAAC,MAAwB,6DACjC,OAAS,mBAAAC,MAAuB,2DAChC,OAAS,gCAAAC,MAAoC,0EAC7C,MAAO,yDACP,OAAOC,MAAY,iBAEZ,aAAM,cAAgB,CACzB,WACA,SACA,UACJ,EASO,aAAM,cAAcP,EAAWK,EAAgBJ,EAAiB,EAAE,EAAG,CACxE,cAAe,EACnB,CAAC,CAAE,CAFI,kCAQH,KAAO,SAAW,EA4BlB,KAAQ,SAA0B,GAGlC,KAAO,MAAQ,GAKf,KAAQ,iBAAmB,IAAIK,EAA6B,IAAI,EAIhE,KAAO,UAAY,GA7CnB,WAA2B,QAAyB,CAChD,MAAO,CAACC,CAAM,CAClB,CAYA,IAAW,QAAQC,EAAwB,CACvC,GAAIA,IAAY,KAAK,QACjB,OAEJ,MAAMC,EAAW,KAAK,QAClB,cAAc,SAASD,CAAO,GAC9B,KAAK,aAAa,UAAWA,CAAO,EACpC,KAAK,SAAWA,IAEhB,KAAK,gBAAgB,SAAS,EAC9B,KAAK,SAAW,IAEpB,KAAK,cAAc,UAAWC,CAAQ,CAC1C,CAEA,IAAW,SAAyB,CAChC,OAAO,KAAK,QAChB,CAmBmB,QAAyB,CACxC,OAAOX;AAAA,mCACoB,KAAK,IAAI;AAAA,kBAC1B,KAAK,eAAiBC,EAAU,KAAK,KAAK;AAAA,oCACxB,KAAK,gBAAgB,IAAI,KAAK,KAAK;AAAA;AAAA,mCAEpC,KAAK,IAAI;AAAA,kBAC1B,IAAI,KAAK,aAAa,KAAK,iBAAiB,SAAU,CACpD,MAAO,UACP,YAAa,QACjB,CAAC,EAAE,OAAO,KAAK,SAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oDAKM,KAAK,QAAQ;AAAA;AAAA;AAAA,SAI7D,CAEU,kBAAyB,CAC/B,MAAMW,EAAgBN,EAAiB,KAAK,MAAO,KAAK,MAAM,EAC1DM,IACA,KAAK,MAAQA,EAErB,CAEmB,aAAaC,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,mBAAmB,CACjD,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,UAAU,GACtB,KAAK,aAAa,gBAAiB,GAAK,KAAK,QAAQ,EAErDA,EAAQ,IAAI,OAAO,IACf,KAAK,MAAM,OACX,KAAK,aAAa,aAAc,KAAK,KAAK,EAE1C,KAAK,gBAAgB,YAAY,EAG7C,CACJ,CA3FWC,EAAA,CADNV,EAAS,CAAE,KAAM,MAAO,CAAC,GAPjB,MAQF,wBASIU,EAAA,CADVV,EAAS,CAAE,KAAM,MAAO,CAAC,GAhBjB,MAiBE,uBAsBJU,EAAA,CADNV,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAtChC,MAuCF,qBAGCU,EAAA,CADPT,EAAM,MAAM,GAzCJ,MA0CD,sBAMDS,EAAA,CAFNV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,YAAa,CAAC,GA9C1D,MAgDF,yBAGAU,EAAA,CADNV,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAlDhC,MAmDF",
|
|
6
|
+
"names": ["html", "nothing", "SizedMixin", "SpectrumElement", "property", "query", "getLabelFromSlot", "ObserveSlotText", "LanguageResolutionController", "styles", "variant", "oldValue", "labelFromSlot", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/meter.css.dev.js
CHANGED
|
@@ -5,7 +5,7 @@ const styles = css`
|
|
|
5
5
|
--spectrum-animation-ease-in-out
|
|
6
6
|
);--spectrum-progressbar-animation-duration-indeterminate:var(
|
|
7
7
|
--spectrum-animation-duration-2000
|
|
8
|
-
);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-
|
|
8
|
+
);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-progressbar-min-size:var(--spectrum-progress-bar-minimum-width);--spectrum-progressbar-max-size:var(--spectrum-progress-bar-maximum-width);--spectrum-progressbar-thickness:var(
|
|
9
9
|
--spectrum-progress-bar-thickness-medium
|
|
10
10
|
);--spectrum-progressbar-line-height:var(--spectrum-line-height-100);--spectrum-progressbar-spacing-label-to-progressbar:var(
|
|
11
11
|
--spectrum-spacing-75
|
|
@@ -21,11 +21,11 @@ const styles = css`
|
|
|
21
21
|
--spectrum-negative-visual-color
|
|
22
22
|
);--spectrum-progressbar-label-and-value-white:var(--spectrum-white);--spectrum-progressbar-track-color-white:var(
|
|
23
23
|
--spectrum-transparent-white-300
|
|
24
|
-
);--spectrum-progressbar-fill-color-white:var(--spectrum-white)}:host([size=s]){--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2400);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
24
|
+
);--spectrum-progressbar-fill-color-white:var(--spectrum-white);--spectrum-meter-min-width:var(--spectrum-meter-minimum-width);--spectrum-meter-max-width:var(--spectrum-meter-maximum-width);--spectrum-meter-inline-size:var(--spectrum-meter-default-width);--spectrum-meter-thickness-s:var(--spectrum-meter-thickness-small);--spectrum-meter-thickness-l:var(--spectrum-meter-thickness-large);--spectrum-meter-top-to-text:var(--spectrum-component-top-to-text)}:host([size=s]){--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2400);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
25
25
|
--spectrum-progress-bar-thickness-small
|
|
26
26
|
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
27
27
|
--spectrum-component-top-to-text-75
|
|
28
|
-
)}:host
|
|
28
|
+
)}:host{--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2400);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(
|
|
29
29
|
--spectrum-progress-bar-thickness-large
|
|
30
30
|
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
31
31
|
--spectrum-component-top-to-text-75
|
|
@@ -37,7 +37,25 @@ const styles = css`
|
|
|
37
37
|
--spectrum-progress-bar-thickness-extra-large
|
|
38
38
|
);--spectrum-progressbar-spacing-top-to-text:var(
|
|
39
39
|
--spectrum-component-top-to-text-300
|
|
40
|
-
)}
|
|
40
|
+
)}:host{--spectrum-progressbar-size-default:var(
|
|
41
|
+
--mod-meter-inline-size,var(--spectrum-meter-inline-size)
|
|
42
|
+
);--spectrum-progressbar-max-size:var(
|
|
43
|
+
--mod-meter-max-width,var(--spectrum-meter-max-width)
|
|
44
|
+
);--spectrum-progressbar-min-size:var(
|
|
45
|
+
--mod-meter-min-width,var(--spectrum-meter-min-width)
|
|
46
|
+
)}:host([variant=positive]) .fill{background-color:var(
|
|
47
|
+
--highcontrast-progressbar-fill-color,var(
|
|
48
|
+
--mod-progressbar-fill-color-positive,var(--spectrum-progressbar-fill-color-positive)
|
|
49
|
+
)
|
|
50
|
+
)}:host([variant=notice]) .fill{background-color:var(
|
|
51
|
+
--highcontrast-progressbar-fill-color,var(
|
|
52
|
+
--mod-progressbar-fill-color-notice,var(--spectrum-progressbar-fill-color-notice)
|
|
53
|
+
)
|
|
54
|
+
)}:host([variant=negative]) .fill{background-color:var(
|
|
55
|
+
--highcontrast-progressbar-fill-color,var(
|
|
56
|
+
--mod-progressbar-fill-color-negative,var(--spectrum-progressbar-fill-color-negative)
|
|
57
|
+
)
|
|
58
|
+
)}:host{align-items:center;display:inline-flex;flex-flow:wrap;font-size:var(
|
|
41
59
|
--mod-progressbar-font-size,var(--spectrum-progressbar-font-size)
|
|
42
60
|
);inline-size:var(
|
|
43
61
|
--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)
|
|
@@ -57,30 +75,16 @@ const styles = css`
|
|
|
57
75
|
--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk)
|
|
58
76
|
)}.label{flex:1}.percentage{align-self:flex-start;margin-inline-start:var(
|
|
59
77
|
--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
60
|
-
)}.track{background:var(
|
|
78
|
+
)}.track{background-color:var(
|
|
61
79
|
--highcontrast-progressbar-track-color,var(
|
|
62
80
|
--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)
|
|
63
81
|
)
|
|
64
|
-
);block-size:var(
|
|
82
|
+
);border-radius:var(--spectrum-progressbar-corner-radius);inline-size:100%;overflow:hidden}.fill,.track{block-size:var(
|
|
65
83
|
--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)
|
|
66
|
-
)
|
|
67
|
-
--highcontrast-progressbar-fill-color,var(
|
|
68
|
-
--mod-progressbar-fill-color-positive,var(--spectrum-progressbar-fill-color-positive)
|
|
69
|
-
)
|
|
70
|
-
)}:host([notice]) .fill{background:var(
|
|
71
|
-
--highcontrast-progressbar-fill-color,var(
|
|
72
|
-
--mod-progressbar-fill-color-notice,var(--spectrum-progressbar-fill-color-notice)
|
|
73
|
-
)
|
|
74
|
-
)}:host([negative]) .fill{background:var(
|
|
75
|
-
--highcontrast-progressbar-fill-color,var(
|
|
76
|
-
--mod-progressbar-fill-color-negative,var(--spectrum-progressbar-fill-color-negative)
|
|
77
|
-
)
|
|
78
|
-
)}.fill{background:var(
|
|
84
|
+
)}.fill{background-color:var(
|
|
79
85
|
--highcontrast-progressbar-fill-color,var(
|
|
80
86
|
--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)
|
|
81
87
|
)
|
|
82
|
-
);block-size:var(
|
|
83
|
-
--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)
|
|
84
88
|
);border:none;transition:width 1s}:host([indeterminate]) .fill{animation-timing-function:var(
|
|
85
89
|
--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate)
|
|
86
90
|
);inline-size:var(
|
|
@@ -91,7 +95,7 @@ const styles = css`
|
|
|
91
95
|
--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
92
96
|
)}:host([side-label]) .percentage{margin-block-end:0;margin-inline-start:var(
|
|
93
97
|
--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)
|
|
94
|
-
);order:3;text-align:end}:host([static=white]) .fill{background:var(
|
|
98
|
+
);order:3;text-align:end}:host([static=white]) .fill{background-color:var(
|
|
95
99
|
--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white)
|
|
96
100
|
);color:var(
|
|
97
101
|
--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)
|
|
@@ -111,7 +115,7 @@ var(--spectrum-progressbar-fill-size-indeterminate)
|
|
|
111
115
|
))}to{transform:translate(calc(var(
|
|
112
116
|
--mod-progressbar-size-default,
|
|
113
117
|
var(--spectrum-progressbar-size-default)
|
|
114
|
-
)*-1))}}.fill{transform-origin:left}:host([dir=rtl]) .fill{transform-origin:right}
|
|
118
|
+
)*-1))}}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;border:1px solid ButtonText;forced-color-adjust:none}}.fill{transform-origin:left}:host([dir=rtl]) .fill{transform-origin:right}
|
|
115
119
|
`;
|
|
116
120
|
export default styles;
|
|
117
121
|
//# sourceMappingURL=meter.css.dev.js.map
|
package/src/meter.css.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["meter.css.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(\n--spectrum-animation-ease-in-out\n);--spectrum-progressbar-animation-duration-indeterminate:var(\n--spectrum-animation-duration-2000\n);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-
|
|
5
|
-
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-progressbar-animation-ease-in-out-indeterminate:var(\n--spectrum-animation-ease-in-out\n);--spectrum-progressbar-animation-duration-indeterminate:var(\n--spectrum-animation-duration-2000\n);--spectrum-progressbar-corner-radius:var(--spectrum-corner-radius-100);--spectrum-progressbar-fill-size-indeterminate:70%;--spectrum-progressbar-size-2400:192px;--spectrum-progressbar-size-2500:200px;--spectrum-progressbar-size-2800:224px;--spectrum-progressbar-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-progressbar-min-size:var(--spectrum-progress-bar-minimum-width);--spectrum-progressbar-max-size:var(--spectrum-progress-bar-maximum-width);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-medium\n);--spectrum-progressbar-line-height:var(--spectrum-line-height-100);--spectrum-progressbar-spacing-label-to-progressbar:var(\n--spectrum-spacing-75\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-100\n);--spectrum-progressbar-spacing-label-to-text:var(--spectrum-spacing-200);--spectrum-progressbar-text-color:var(\n--spectrum-neutral-content-color-default\n);--spectrum-progressbar-track-color:var(--spectrum-gray-300);--spectrum-progressbar-fill-color:var(--spectrum-accent-color-900);--spectrum-progressbar-fill-color-positive:var(\n--spectrum-positive-visual-color\n);--spectrum-progressbar-fill-color-notice:var(\n--spectrum-notice-visual-color\n);--spectrum-progressbar-fill-color-negative:var(\n--spectrum-negative-visual-color\n);--spectrum-progressbar-label-and-value-white:var(--spectrum-white);--spectrum-progressbar-track-color-white:var(\n--spectrum-transparent-white-300\n);--spectrum-progressbar-fill-color-white:var(--spectrum-white);--spectrum-meter-min-width:var(--spectrum-meter-minimum-width);--spectrum-meter-max-width:var(--spectrum-meter-maximum-width);--spectrum-meter-inline-size:var(--spectrum-meter-default-width);--spectrum-meter-thickness-s:var(--spectrum-meter-thickness-small);--spectrum-meter-thickness-l:var(--spectrum-meter-thickness-large);--spectrum-meter-top-to-text:var(--spectrum-component-top-to-text)}:host([size=s]){--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2400);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-small\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n)}:host{--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2400);--spectrum-progressbar-font-size:var(--spectrum-font-size-75);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-large\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-75\n)}:host([size=l]){--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2500);--spectrum-progressbar-font-size:var(--spectrum-font-size-100);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-large\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-200\n)}:host([size=xl]){--spectrum-progressbar-size-default:var(--spectrum-progressbar-size-2800);--spectrum-progressbar-font-size:var(--spectrum-font-size-200);--spectrum-progressbar-thickness:var(\n--spectrum-progress-bar-thickness-extra-large\n);--spectrum-progressbar-spacing-top-to-text:var(\n--spectrum-component-top-to-text-300\n)}:host{--spectrum-progressbar-size-default:var(\n--mod-meter-inline-size,var(--spectrum-meter-inline-size)\n);--spectrum-progressbar-max-size:var(\n--mod-meter-max-width,var(--spectrum-meter-max-width)\n);--spectrum-progressbar-min-size:var(\n--mod-meter-min-width,var(--spectrum-meter-min-width)\n)}:host([variant=positive]) .fill{background-color:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color-positive,var(--spectrum-progressbar-fill-color-positive)\n)\n)}:host([variant=notice]) .fill{background-color:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color-notice,var(--spectrum-progressbar-fill-color-notice)\n)\n)}:host([variant=negative]) .fill{background-color:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color-negative,var(--spectrum-progressbar-fill-color-negative)\n)\n)}:host{align-items:center;display:inline-flex;flex-flow:wrap;font-size:var(\n--mod-progressbar-font-size,var(--spectrum-progressbar-font-size)\n);inline-size:var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)\n);justify-content:space-between;max-inline-size:var(\n--mod-progressbar-max-size,var(--spectrum-progressbar-max-size)\n);min-inline-size:var(\n--mod-progressbar-min-size,var(--spectrum-progressbar-min-size)\n);position:relative;vertical-align:top}.label,.percentage{color:var(\n--mod-progressbar-text-color,var(--spectrum-progressbar-text-color)\n);line-height:var(\n--mod-progressbar-line-height,var(--spectrum-progressbar-line-height)\n);margin-block-end:var(\n--mod-progressbar-spacing-label-to-progressbar,var(--spectrum-progressbar-spacing-label-to-progressbar)\n);margin-block-start:var(\n--mod-progressbar-spacing-top-to-text,var(--spectrum-progressbar-spacing-top-to-text)\n);text-align:start}.label:lang(ja),.label:lang(ko),.label:lang(zh),.percentage:lang(ja),.percentage:lang(ko),.percentage:lang(zh){line-height:var(\n--mod-progressbar-line-height-cjk,var(--spectrum-progressbar-line-height-cjk)\n)}.label{flex:1}.percentage{align-self:flex-start;margin-inline-start:var(\n--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)\n)}.track{background-color:var(\n--highcontrast-progressbar-track-color,var(\n--mod-progressbar-track-color,var(--spectrum-progressbar-track-color)\n)\n);border-radius:var(--spectrum-progressbar-corner-radius);inline-size:100%;overflow:hidden}.fill,.track{block-size:var(\n--mod-progressbar-thickness,var(--spectrum-progressbar-thickness)\n)}.fill{background-color:var(\n--highcontrast-progressbar-fill-color,var(\n--mod-progressbar-fill-color,var(--spectrum-progressbar-fill-color)\n)\n);border:none;transition:width 1s}:host([indeterminate]) .fill{animation-timing-function:var(\n--mod-progressbar-animation-ease-in-out-indeterminate,var(--spectrum-progressbar-animation-ease-in-out-indeterminate)\n);inline-size:var(\n--mod-progressbar-fill-size-indeterminate,var(--spectrum-progressbar-fill-size-indeterminate)\n);position:relative;will-change:transform}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between}:host([side-label]) .track{flex:1 1 var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)\n)}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(\n--mod-progressbar-spacing-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)\n)}:host([side-label]) .percentage{margin-block-end:0;margin-inline-start:var(\n--mod-spacing-progressbar-label-to-text,var(--spectrum-progressbar-spacing-label-to-text)\n);order:3;text-align:end}:host([static=white]) .fill{background-color:var(\n--mod-progressbar-fill-color-white,var(--spectrum-progressbar-fill-color-white)\n);color:var(\n--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)\n)}:host([static=white]) .label,:host([static=white]) .percentage{color:var(\n--mod-progressbar-label-and-value-white,var(--spectrum-progressbar-label-and-value-white)\n)}:host([static=white]) .track{background-color:var(--spectrum-progressbar-track-color-white)}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(\n--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)\n) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(\n--mod-progressbar-animation-duration-indeterminate,var(--spectrum-progressbar-animation-duration-indeterminate)\n) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(var(\n--mod-progressbar-fill-size-indeterminate,\nvar(--spectrum-progressbar-fill-size-indeterminate)\n)*-1))}to{transform:translate(var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-size-default)\n))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(\n--mod-progressbar-size-default,var(--spectrum-progressbar-fill-size-indeterminate)\n))}to{transform:translate(calc(var(\n--mod-progressbar-size-default,\nvar(--spectrum-progressbar-size-default)\n)*-1))}}@media (forced-colors:active){.track{--highcontrast-progressbar-fill-color:ButtonText;--highcontrast-progressbar-track-color:ButtonFace;border:1px solid ButtonText;forced-color-adjust:none}}.fill{transform-origin:left}:host([dir=rtl]) .fill{transform-origin:right}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqHf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|