@spectrum-web-components/meter 0.34.1-rc.0 → 0.35.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 +21 -3
- package/package.json +6 -6
- package/src/Meter.d.ts +2 -0
- package/src/Meter.dev.js +22 -5
- package/src/Meter.dev.js.map +2 -2
- package/src/Meter.js +3 -3
- package/src/Meter.js.map +3 -3
- package/test/meter.test.js +7 -0
- package/test/meter.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-meter.
|
|
7
|
+
"path": "sp-meter.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/Meter.
|
|
22
|
+
"path": "src/Meter.js",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
@@ -97,6 +97,14 @@
|
|
|
97
97
|
"attribute": "label",
|
|
98
98
|
"reflects": true
|
|
99
99
|
},
|
|
100
|
+
{
|
|
101
|
+
"kind": "field",
|
|
102
|
+
"name": "slotEl",
|
|
103
|
+
"type": {
|
|
104
|
+
"text": "HTMLSlotElement"
|
|
105
|
+
},
|
|
106
|
+
"privacy": "private"
|
|
107
|
+
},
|
|
100
108
|
{
|
|
101
109
|
"kind": "field",
|
|
102
110
|
"name": "languageResolver",
|
|
@@ -123,6 +131,16 @@
|
|
|
123
131
|
"privacy": "public",
|
|
124
132
|
"attribute": "static",
|
|
125
133
|
"reflects": true
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "method",
|
|
137
|
+
"name": "handleSlotchange",
|
|
138
|
+
"privacy": "protected",
|
|
139
|
+
"return": {
|
|
140
|
+
"type": {
|
|
141
|
+
"text": "void"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
126
144
|
}
|
|
127
145
|
],
|
|
128
146
|
"attributes": [
|
|
@@ -214,7 +232,7 @@
|
|
|
214
232
|
"name": "Meter",
|
|
215
233
|
"declaration": {
|
|
216
234
|
"name": "Meter",
|
|
217
|
-
"module": "src/Meter.
|
|
235
|
+
"module": "src/Meter.js"
|
|
218
236
|
}
|
|
219
237
|
}
|
|
220
238
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/meter",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.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.35.0",
|
|
61
|
+
"@spectrum-web-components/field-label": "^0.35.0",
|
|
62
|
+
"@spectrum-web-components/shared": "^0.35.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@spectrum-css/progressbar": "^3.0.
|
|
65
|
+
"@spectrum-css/progressbar": "^3.0.54"
|
|
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": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
|
|
74
74
|
}
|
package/src/Meter.d.ts
CHANGED
|
@@ -20,10 +20,12 @@ export declare class Meter extends Meter_base {
|
|
|
20
20
|
negative: boolean;
|
|
21
21
|
positive: boolean;
|
|
22
22
|
label: string;
|
|
23
|
+
private slotEl;
|
|
23
24
|
private languageResolver;
|
|
24
25
|
sideLabel: boolean;
|
|
25
26
|
static: 'white' | undefined;
|
|
26
27
|
protected render(): TemplateResult;
|
|
28
|
+
protected handleSlotchange(): void;
|
|
27
29
|
protected firstUpdated(changes: PropertyValues): void;
|
|
28
30
|
protected updated(changes: PropertyValues): void;
|
|
29
31
|
}
|
package/src/Meter.dev.js
CHANGED
|
@@ -15,7 +15,11 @@ import {
|
|
|
15
15
|
SizedMixin,
|
|
16
16
|
SpectrumElement
|
|
17
17
|
} from "@spectrum-web-components/base";
|
|
18
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
property,
|
|
20
|
+
query
|
|
21
|
+
} from "@spectrum-web-components/base/src/decorators.js";
|
|
22
|
+
import { getLabelFromSlot } from "@spectrum-web-components/shared/src/get-label-from-slot.js";
|
|
19
23
|
import { ObserveSlotText } from "@spectrum-web-components/shared/src/observe-slot-text.js";
|
|
20
24
|
import { LanguageResolutionController } from "@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";
|
|
21
25
|
import "@spectrum-web-components/field-label/sp-field-label.js";
|
|
@@ -40,7 +44,7 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, "")) {
|
|
|
40
44
|
return html`
|
|
41
45
|
<sp-field-label size=${this.size} class="label">
|
|
42
46
|
${this.slotHasContent ? html`` : this.label}
|
|
43
|
-
<slot>${this.label}</slot>
|
|
47
|
+
<slot @slotchange=${this.handleSlotchange}>${this.label}</slot>
|
|
44
48
|
</sp-field-label>
|
|
45
49
|
<sp-field-label size=${this.size} class="percentage">
|
|
46
50
|
${new Intl.NumberFormat(this.languageResolver.language, {
|
|
@@ -56,17 +60,27 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, "")) {
|
|
|
56
60
|
</div>
|
|
57
61
|
`;
|
|
58
62
|
}
|
|
63
|
+
handleSlotchange() {
|
|
64
|
+
const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
|
|
65
|
+
if (labelFromSlot) {
|
|
66
|
+
this.label = labelFromSlot;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
59
69
|
firstUpdated(changes) {
|
|
60
70
|
super.firstUpdated(changes);
|
|
61
|
-
this.setAttribute("role", "progressbar");
|
|
71
|
+
this.setAttribute("role", "meter progressbar");
|
|
62
72
|
}
|
|
63
73
|
updated(changes) {
|
|
64
74
|
super.updated(changes);
|
|
65
75
|
if (changes.has("progress")) {
|
|
66
76
|
this.setAttribute("aria-valuenow", "" + this.progress);
|
|
67
77
|
}
|
|
68
|
-
if (
|
|
69
|
-
this.
|
|
78
|
+
if (changes.has("label")) {
|
|
79
|
+
if (this.label.length) {
|
|
80
|
+
this.setAttribute("aria-label", this.label);
|
|
81
|
+
} else {
|
|
82
|
+
this.removeAttribute("aria-label");
|
|
83
|
+
}
|
|
70
84
|
}
|
|
71
85
|
}
|
|
72
86
|
}
|
|
@@ -88,6 +102,9 @@ __decorateClass([
|
|
|
88
102
|
__decorateClass([
|
|
89
103
|
property({ type: String, reflect: true })
|
|
90
104
|
], Meter.prototype, "label", 2);
|
|
105
|
+
__decorateClass([
|
|
106
|
+
query("slot")
|
|
107
|
+
], Meter.prototype, "slotEl", 2);
|
|
91
108
|
__decorateClass([
|
|
92
109
|
property({ type: Boolean, reflect: true, attribute: "side-label" })
|
|
93
110
|
], Meter.prototype, "sideLabel", 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,
|
|
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 @property({ type: Boolean, reflect: true, attribute: 'over-background' })\n public overBackground = false;\n\n @property({ type: Boolean, reflect: true })\n public notice = false;\n\n @property({ type: Boolean, reflect: true })\n public negative = false;\n\n @property({ type: Boolean, reflect: true })\n public positive = false;\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 ? html`` : 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,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;AAOZ,aAAM,cAAc,WAAW,gBAAgB,iBAAiB,EAAE,CAAC,EAAE;AAAA,EAArE;AAAA;AAMH,SAAO,WAAW;AAGlB,SAAO,iBAAiB;AAGxB,SAAO,SAAS;AAGhB,SAAO,WAAW;AAGlB,SAAO,WAAW;AAGlB,SAAO,QAAQ;AAKf,SAAQ,mBAAmB,IAAI,6BAA6B,IAAI;AAIhE;AAAA,SAAO,YAAY;AAAA;AAAA,EA7BnB,WAA2B,SAAyB;AAChD,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA,EAgCmB,SAAyB;AACxC,WAAO;AAAA,mCACoB,KAAK;AAAA,kBACtB,KAAK,iBAAiB,SAAS,KAAK;AAAA,oCAClB,KAAK,oBAAoB,KAAK;AAAA;AAAA,mCAE/B,KAAK;AAAA,kBACtB,IAAI,KAAK,aAAa,KAAK,iBAAiB,UAAU;AAAA,MACpD,OAAO;AAAA,MACP,aAAa;AAAA,IACjB,CAAC,EAAE,OAAO,KAAK,WAAW,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,oDAKO,KAAK;AAAA;AAAA;AAAA;AAAA,EAIrD;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;AA3EW;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GALjB,MAMF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GAR/D,MASF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAXjC,MAYF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdjC,MAeF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjBjC,MAkBF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GApBhC,MAqBF;AAGC;AAAA,EADP,MAAM,MAAM;AAAA,GAvBJ,MAwBD;AAMD;AAAA,EAFN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,aAAa,CAAC;AAAA,GA5B1D,MA8BF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhChC,MAiCF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Meter.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var t=(a,s,e,i)=>{for(var r=i>1?void 0:i?b(s,e):s,o=a.length-1,p;o>=0;o--)(p=a[o])&&(r=(i?p(s,e,r):p(r))||r);return i&&r&&n(s,e,r),r};import{html as u,SizedMixin as c,SpectrumElement as d}from"@spectrum-web-components/base";import{property as l,query as f}from"@spectrum-web-components/base/src/decorators.js";import{getLabelFromSlot as h}from"@spectrum-web-components/shared/src/get-label-from-slot.js";import{ObserveSlotText as m}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 v from"./meter.css.js";export class Meter extends c(m(d,"")){constructor(){super(...arguments);this.progress=0;this.overBackground=!1;this.notice=!1;this.negative=!1;this.positive=!1;this.label="";this.languageResolver=new g(this);this.sideLabel=!1}static get styles(){return[v]}render(){return u`
|
|
2
2
|
<sp-field-label size=${this.size} class="label">
|
|
3
3
|
${this.slotHasContent?u``:this.label}
|
|
4
|
-
<slot>${this.label}</slot>
|
|
4
|
+
<slot @slotchange=${this.handleSlotchange}>${this.label}</slot>
|
|
5
5
|
</sp-field-label>
|
|
6
6
|
<sp-field-label size=${this.size} class="percentage">
|
|
7
7
|
${new Intl.NumberFormat(this.languageResolver.language,{style:"percent",unitDisplay:"narrow"}).format(this.progress/100)}
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
style="transform: scaleX(calc(${this.progress} / 100));"
|
|
13
13
|
></div>
|
|
14
14
|
</div>
|
|
15
|
-
`}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","progressbar")}updated(e){super.updated(e),e.has("progress")&&this.setAttribute("aria-valuenow",""+this.progress),
|
|
15
|
+
`}handleSlotchange(){const e=h(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"))}}t([l({type:Number})],Meter.prototype,"progress",2),t([l({type:Boolean,reflect:!0,attribute:"over-background"})],Meter.prototype,"overBackground",2),t([l({type:Boolean,reflect:!0})],Meter.prototype,"notice",2),t([l({type:Boolean,reflect:!0})],Meter.prototype,"negative",2),t([l({type:Boolean,reflect:!0})],Meter.prototype,"positive",2),t([l({type:String,reflect:!0})],Meter.prototype,"label",2),t([f("slot")],Meter.prototype,"slotEl",2),t([l({type:Boolean,reflect:!0,attribute:"side-label"})],Meter.prototype,"sideLabel",2),t([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 {
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,
|
|
6
|
-
"names": ["html", "SizedMixin", "SpectrumElement", "property", "ObserveSlotText", "LanguageResolutionController", "styles", "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 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 @property({ type: Boolean, reflect: true, attribute: 'over-background' })\n public overBackground = false;\n\n @property({ type: Boolean, reflect: true })\n public notice = false;\n\n @property({ type: Boolean, reflect: true })\n public negative = false;\n\n @property({ type: Boolean, reflect: true })\n public positive = false;\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 ? html`` : 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,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,iBAOZ,aAAM,cAAcP,EAAWK,EAAgBJ,EAAiB,EAAE,CAAC,CAAE,CAArE,kCAMH,KAAO,SAAW,EAGlB,KAAO,eAAiB,GAGxB,KAAO,OAAS,GAGhB,KAAO,SAAW,GAGlB,KAAO,SAAW,GAGlB,KAAO,MAAQ,GAKf,KAAQ,iBAAmB,IAAIK,EAA6B,IAAI,EAIhE,KAAO,UAAY,GA7BnB,WAA2B,QAAyB,CAChD,MAAO,CAACC,CAAM,CAClB,CAgCmB,QAAyB,CACxC,OAAOR;AAAA,mCACoB,KAAK;AAAA,kBACtB,KAAK,eAAiBA,IAAS,KAAK;AAAA,oCAClB,KAAK,oBAAoB,KAAK;AAAA;AAAA,mCAE/B,KAAK;AAAA,kBACtB,IAAI,KAAK,aAAa,KAAK,iBAAiB,SAAU,CACpD,MAAO,UACP,YAAa,QACjB,CAAC,EAAE,OAAO,KAAK,SAAW,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,oDAKO,KAAK;AAAA;AAAA;AAAA,SAIrD,CAEU,kBAAyB,CAC/B,MAAMS,EAAgBJ,EAAiB,KAAK,MAAO,KAAK,MAAM,EAC1DI,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,CA3EWC,EAAA,CADNR,EAAS,CAAE,KAAM,MAAO,CAAC,GALjB,MAMF,wBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,iBAAkB,CAAC,GAR/D,MASF,8BAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAXjC,MAYF,sBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdjC,MAeF,wBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjBjC,MAkBF,wBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GApBhC,MAqBF,qBAGCQ,EAAA,CADPP,EAAM,MAAM,GAvBJ,MAwBD,sBAMDO,EAAA,CAFNR,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,YAAa,CAAC,GA5B1D,MA8BF,yBAGAQ,EAAA,CADNR,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAhChC,MAiCF",
|
|
6
|
+
"names": ["html", "SizedMixin", "SpectrumElement", "property", "query", "getLabelFromSlot", "ObserveSlotText", "LanguageResolutionController", "styles", "labelFromSlot", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/test/meter.test.js
CHANGED
|
@@ -37,6 +37,13 @@ describe("Meter", () => {
|
|
|
37
37
|
expect(el.hasAttribute("aria-valuenow")).to.be.true;
|
|
38
38
|
expect(el.getAttribute("aria-valuenow")).to.equal("100");
|
|
39
39
|
});
|
|
40
|
+
it("accepts label from `slot`", async () => {
|
|
41
|
+
const el = await fixture(html`
|
|
42
|
+
<sp-meter>Label From Slot</sp-meter>
|
|
43
|
+
`);
|
|
44
|
+
await elementUpdated(el);
|
|
45
|
+
expect(el.getAttribute("label")).to.equal("Label From Slot");
|
|
46
|
+
});
|
|
40
47
|
it("accepts a changing process", async () => {
|
|
41
48
|
const el = await fixture(html`
|
|
42
49
|
<sp-meter>Changing Value</sp-meter>
|
package/test/meter.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["meter.test.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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '@spectrum-web-components/meter/sp-meter.js';\nimport { Meter } from '@spectrum-web-components/meter';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';\n\ndescribe('Meter', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Meter>(\n html`\n <sp-meter label=\"Loading\"></sp-meter>\n `\n )\n );\n it('loads default meter accessibly', async () => {\n const el = await fixture<Meter>(\n html`\n <sp-meter label=\"Loading\"></sp-meter>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n\n it('accepts a changing process w/ [label]', async () => {\n const el = await fixture<Meter>(html`\n <sp-meter label=\"Changing Value\"></sp-meter>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('0');\n\n el.progress = 50;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.progress = 100;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('100');\n });\n\n it('accepts a changing process', async () => {\n const el = await fixture<Meter>(html`\n <sp-meter>Changing Value</sp-meter>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('0');\n\n el.progress = 50;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.progress = 100;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('100');\n });\n\n it('resolves a language (en-US)', async () => {\n const [languageContext] = createLanguageContext('en-US');\n const test = await fixture(html`\n <div @sp-language-context=${languageContext}>\n <sp-meter label=\"Changing Value\" progress=\"45\"></sp-meter>\n </div>\n `);\n const el = test.querySelector('sp-meter') as Meter;\n const percentage = el.shadowRoot.querySelector(\n '.percentage'\n ) as HTMLElement;\n expect(percentage.textContent?.search('%')).to.not.equal(-1);\n });\n\n it('resolves a language (ar-sa)', async () => {\n const [languageContext] = createLanguageContext('ar-sa');\n const test = await fixture(html`\n <div @sp-language-context=${languageContext}>\n <sp-meter label=\"Changing Value\" progress=\"45\"></sp-meter>\n </div>\n `);\n const el = test.querySelector('sp-meter') as Meter;\n const percentage = el.shadowRoot.querySelector(\n '.percentage'\n ) as HTMLElement;\n expect(percentage.textContent?.search('\u066A')).to.not.equal(-1);\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AAEtD,OAAO;AAEP,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AAEtC,SAAS,SAAS,MAAM;AACpB;AAAA,IACI,YACI,MAAM;AAAA,MACF;AAAA;AAAA;AAAA,IAGJ;AAAA,EACR;AACA,KAAG,kCAAkC,YAAY;AAC7C,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AACvB,WAAO,EAAE,EAAE,GAAG,IAAI,GAAG;AAErB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAAA,EACtC,CAAC;AAED,KAAG,yCAAyC,YAAY;AACpD,UAAM,KAAK,MAAM,QAAe;AAAA;AAAA,SAE/B;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,MAAM,GAAG;AAErD,OAAG,WAAW;AAEd,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,MAAM,IAAI;AAEtD,OAAG,WAAW;AAEd,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,MAAM,KAAK;AAAA,EAC3D,CAAC;AAED,KAAG,8BAA8B,YAAY;AACzC,UAAM,KAAK,MAAM,QAAe;AAAA;AAAA,SAE/B;AAED,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,MAAM,GAAG;AAErD,OAAG,WAAW;AAEd,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,MAAM,IAAI;AAEtD,OAAG,WAAW;AAEd,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,GAAG;AAC/C,WAAO,GAAG,aAAa,eAAe,CAAC,EAAE,GAAG,MAAM,KAAK;AAAA,EAC3D,CAAC;AAED,KAAG,+BAA+B,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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '@spectrum-web-components/meter/sp-meter.js';\nimport { Meter } from '@spectrum-web-components/meter';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\nimport { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';\n\ndescribe('Meter', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Meter>(\n html`\n <sp-meter label=\"Loading\"></sp-meter>\n `\n )\n );\n it('loads default meter accessibly', async () => {\n const el = await fixture<Meter>(\n html`\n <sp-meter label=\"Loading\"></sp-meter>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n\n it('accepts a changing process w/ [label]', async () => {\n const el = await fixture<Meter>(html`\n <sp-meter label=\"Changing Value\"></sp-meter>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('0');\n\n el.progress = 50;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.progress = 100;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('100');\n });\n\n it('accepts label from `slot`', async () => {\n const el = await fixture<Meter>(html`\n <sp-meter>Label From Slot</sp-meter>\n `);\n\n await elementUpdated(el);\n\n expect(el.getAttribute('label')).to.equal('Label From Slot');\n });\n it('accepts a changing process', async () => {\n const el = await fixture<Meter>(html`\n <sp-meter>Changing Value</sp-meter>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('0');\n\n el.progress = 50;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.progress = 100;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('100');\n });\n\n it('resolves a language (en-US)', async () => {\n const [languageContext] = createLanguageContext('en-US');\n const test = await fixture(html`\n <div @sp-language-context=${languageContext}>\n <sp-meter label=\"Changing Value\" progress=\"45\"></sp-meter>\n </div>\n `);\n const el = test.querySelector('sp-meter') as Meter;\n const percentage = el.shadowRoot.querySelector(\n '.percentage'\n ) as HTMLElement;\n expect(percentage.textContent?.search('%')).to.not.equal(-1);\n });\n\n it('resolves a language (ar-sa)', async () => {\n const [languageContext] = createLanguageContext('ar-sa');\n const test = await fixture(html`\n <div @sp-language-context=${languageContext}>\n <sp-meter label=\"Changing Value\" progress=\"45\"></sp-meter>\n </div>\n `);\n const el = test.querySelector('sp-meter') as Meter;\n const percentage = el.shadowRoot.querySelector(\n '.percentage'\n ) as HTMLElement;\n expect(percentage.textContent?.search('\u066A')).to.not.equal(-1);\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|