@spectrum-web-components/swatch 0.1.2-devmode.0 → 0.1.2
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 +8 -5
- package/sp-swatch-group.js +14 -3
- package/sp-swatch-group.js.map +1 -7
- package/sp-swatch.js +14 -3
- package/sp-swatch.js.map +1 -7
- package/src/Swatch.js +170 -165
- package/src/Swatch.js.map +1 -7
- package/src/SwatchGroup.js +216 -201
- package/src/SwatchGroup.js.map +1 -7
- package/src/index.js +14 -3
- package/src/index.js.map +1 -7
- package/src/spectrum-swatch-group.css.js +14 -3
- package/src/spectrum-swatch-group.css.js.map +1 -7
- package/src/spectrum-swatch.css.js +14 -3
- package/src/spectrum-swatch.css.js.map +1 -7
- package/src/swatch-group.css.js +14 -3
- package/src/swatch-group.css.js.map +1 -7
- package/src/swatch.css.js +14 -3
- package/src/swatch.css.js.map +1 -7
- package/stories/swatch-group.stories.js +133 -124
- package/stories/swatch-group.stories.js.map +1 -7
- package/stories/swatch-sizes.stories.js +21 -15
- package/stories/swatch-sizes.stories.js.map +1 -7
- package/stories/swatch.stories.js +73 -69
- package/stories/swatch.stories.js.map +1 -7
- package/test/benchmark/basic-test.js +16 -5
- package/test/benchmark/basic-test.js.map +1 -7
- package/test/swatch-group.test-vrt.js +15 -4
- package/test/swatch-group.test-vrt.js.map +1 -7
- package/test/swatch-group.test.js +240 -229
- package/test/swatch-group.test.js.map +1 -7
- package/test/swatch-sizes.test-vrt.js +15 -4
- package/test/swatch-sizes.test-vrt.js.map +1 -7
- package/test/swatch.test-vrt.js +15 -4
- package/test/swatch.test-vrt.js.map +1 -7
- package/test/swatch.test.js +135 -124
- package/test/swatch.test.js.map +1 -7
- package/sp-swatch-group.dev.js +0 -3
- package/sp-swatch-group.dev.js.map +0 -7
- package/sp-swatch.dev.js +0 -3
- package/sp-swatch.dev.js.map +0 -7
- package/src/Swatch.dev.js +0 -219
- package/src/Swatch.dev.js.map +0 -7
- package/src/SwatchGroup.dev.js +0 -220
- package/src/SwatchGroup.dev.js.map +0 -7
- package/src/index.dev.js +0 -3
- package/src/index.dev.js.map +0 -7
- package/src/spectrum-swatch-group.css.dev.js +0 -10
- package/src/spectrum-swatch-group.css.dev.js.map +0 -7
- package/src/spectrum-swatch.css.dev.js +0 -66
- package/src/spectrum-swatch.css.dev.js.map +0 -7
- package/src/swatch-group.css.dev.js +0 -10
- package/src/swatch-group.css.dev.js.map +0 -7
- package/src/swatch.css.dev.js +0 -66
- package/src/swatch.css.dev.js.map +0 -7
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import * as stories from '../stories/swatch-sizes.stories.js';
|
|
13
|
+
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
+
regressVisuals('SwatchSizesStories', stories);
|
|
15
|
+
//# sourceMappingURL=swatch-sizes.test-vrt.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["swatch-sizes.test-vrt.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 * as stories from '../stories/swatch-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('SwatchSizesStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA;AACA;AAEA,eAAe,sBAAsB,OAAO;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"swatch-sizes.test-vrt.js","sourceRoot":"","sources":["swatch-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/swatch-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('SwatchSizesStories', stories);\n"]}
|
package/test/swatch.test-vrt.js
CHANGED
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import * as stories from '../stories/swatch.stories.js';
|
|
13
|
+
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
+
regressVisuals('SwatchStories', stories);
|
|
15
|
+
//# sourceMappingURL=swatch.test-vrt.js.map
|
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["swatch.test-vrt.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 * as stories from '../stories/swatch.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('SwatchStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA;AACA;AAEA,eAAe,iBAAiB,OAAO;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"swatch.test-vrt.js","sourceRoot":"","sources":["swatch.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC","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 * as stories from '../stories/swatch.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('SwatchStories', stories);\n"]}
|
package/test/swatch.test.js
CHANGED
|
@@ -1,137 +1,148 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2022 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
|
13
|
+
import { spy } from 'sinon';
|
|
14
|
+
import { sendKeys } from '@web/test-runner-commands';
|
|
15
|
+
import '../sp-swatch.js';
|
|
16
|
+
describe('Swatch', () => {
|
|
17
|
+
let el;
|
|
18
|
+
beforeEach(async () => {
|
|
19
|
+
el = await fixture(html `
|
|
9
20
|
<sp-swatch color="red" label="Red"></sp-swatch>
|
|
10
21
|
`);
|
|
11
|
-
|
|
12
|
-
});
|
|
13
|
-
it(`loads default swatch accessibly`, async () => {
|
|
14
|
-
await expect(el).to.be.accessible();
|
|
15
|
-
});
|
|
16
|
-
it("loads [nothing] swatch accessibly", async () => {
|
|
17
|
-
el.nothing = true;
|
|
18
|
-
el.removeAttribute("color");
|
|
19
|
-
el.label = "Transparent";
|
|
20
|
-
await expect(el).to.be.accessible();
|
|
21
|
-
expect(el.getAttribute("aria-label")).to.equal("Transparent");
|
|
22
|
-
});
|
|
23
|
-
["xs", "s", "m", "l"].map((size) => {
|
|
24
|
-
it(`loads [mixed-value] swatch accessibly as [size=${size}]`, async () => {
|
|
25
|
-
el.mixedValue = true;
|
|
26
|
-
el.removeAttribute("color");
|
|
27
|
-
el.label = "Mixed Value";
|
|
28
|
-
el.size = size;
|
|
29
|
-
await expect(el).to.be.accessible();
|
|
30
|
-
expect(el.getAttribute("aria-label")).to.equal("Mixed Value");
|
|
22
|
+
await elementUpdated(el);
|
|
31
23
|
});
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
expect(el.selected).to.be.false;
|
|
35
|
-
el.click();
|
|
36
|
-
expect(el.selected).to.be.true;
|
|
37
|
-
await expect(el).to.be.accessible();
|
|
38
|
-
});
|
|
39
|
-
it('toggles on `click` as [role="checkbox"]', async () => {
|
|
40
|
-
el.role = "checkbox";
|
|
41
|
-
await elementUpdated(el);
|
|
42
|
-
expect(el.selected).to.be.false;
|
|
43
|
-
await expect(el).to.be.accessible();
|
|
44
|
-
el.click();
|
|
45
|
-
expect(el.selected).to.be.true;
|
|
46
|
-
await expect(el).to.be.accessible();
|
|
47
|
-
});
|
|
48
|
-
it("toggles on `Space`", async () => {
|
|
49
|
-
expect(el.selected).to.be.false;
|
|
50
|
-
el.focus();
|
|
51
|
-
await sendKeys({
|
|
52
|
-
press: "Space"
|
|
24
|
+
it(`loads default swatch accessibly`, async () => {
|
|
25
|
+
await expect(el).to.be.accessible();
|
|
53
26
|
});
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
press: "Enter"
|
|
27
|
+
it('loads [nothing] swatch accessibly', async () => {
|
|
28
|
+
el.nothing = true;
|
|
29
|
+
el.removeAttribute('color');
|
|
30
|
+
el.label = 'Transparent';
|
|
31
|
+
await expect(el).to.be.accessible();
|
|
32
|
+
expect(el.getAttribute('aria-label')).to.equal('Transparent');
|
|
61
33
|
});
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
34
|
+
['xs', 's', 'm', 'l'].map((size) => {
|
|
35
|
+
it(`loads [mixed-value] swatch accessibly as [size=${size}]`, async () => {
|
|
36
|
+
el.mixedValue = true;
|
|
37
|
+
el.removeAttribute('color');
|
|
38
|
+
el.label = 'Mixed Value';
|
|
39
|
+
el.size = size;
|
|
40
|
+
await expect(el).to.be.accessible();
|
|
41
|
+
expect(el.getAttribute('aria-label')).to.equal('Mixed Value');
|
|
42
|
+
});
|
|
65
43
|
});
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
el.click();
|
|
72
|
-
expect(changeSpy.calledOnce).to.be.true;
|
|
73
|
-
});
|
|
74
|
-
it("does not dispatch `change` when [disabled]", async () => {
|
|
75
|
-
const changeSpy = spy();
|
|
76
|
-
el.addEventListener("change", () => changeSpy());
|
|
77
|
-
el.disabled = true;
|
|
78
|
-
await elementUpdated(el);
|
|
79
|
-
el.click();
|
|
80
|
-
expect(changeSpy.calledOnce).to.be.false;
|
|
81
|
-
});
|
|
82
|
-
it("does not dispatch `change` when [mixed-value]", async () => {
|
|
83
|
-
const changeSpy = spy();
|
|
84
|
-
el.addEventListener("change", () => changeSpy());
|
|
85
|
-
el.mixedValue = true;
|
|
86
|
-
await elementUpdated(el);
|
|
87
|
-
el.click();
|
|
88
|
-
expect(changeSpy.calledOnce).to.be.false;
|
|
89
|
-
});
|
|
90
|
-
it("can have `change` prevented", async () => {
|
|
91
|
-
el.addEventListener("change", (event) => {
|
|
92
|
-
event.preventDefault();
|
|
44
|
+
it('toggles on `click`', async () => {
|
|
45
|
+
expect(el.selected).to.be.false;
|
|
46
|
+
el.click();
|
|
47
|
+
expect(el.selected).to.be.true;
|
|
48
|
+
await expect(el).to.be.accessible();
|
|
93
49
|
});
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
el.insertAdjacentElement("afterend", inputAfter);
|
|
103
|
-
inputBefore.focus();
|
|
104
|
-
expect(document.activeElement === el).to.be.false;
|
|
105
|
-
await sendKeys({
|
|
106
|
-
press: "Tab"
|
|
50
|
+
it('toggles on `click` as [role="checkbox"]', async () => {
|
|
51
|
+
el.role = 'checkbox';
|
|
52
|
+
await elementUpdated(el);
|
|
53
|
+
expect(el.selected).to.be.false;
|
|
54
|
+
await expect(el).to.be.accessible();
|
|
55
|
+
el.click();
|
|
56
|
+
expect(el.selected).to.be.true;
|
|
57
|
+
await expect(el).to.be.accessible();
|
|
107
58
|
});
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
59
|
+
it('toggles on `Space`', async () => {
|
|
60
|
+
expect(el.selected).to.be.false;
|
|
61
|
+
el.focus();
|
|
62
|
+
await sendKeys({
|
|
63
|
+
press: 'Space',
|
|
64
|
+
});
|
|
65
|
+
expect(el.selected).to.be.true;
|
|
111
66
|
});
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
67
|
+
it('toggles on `Enter`', async () => {
|
|
68
|
+
expect(el.selected).to.be.false;
|
|
69
|
+
el.focus();
|
|
70
|
+
await sendKeys({
|
|
71
|
+
press: 'Enter',
|
|
72
|
+
});
|
|
73
|
+
expect(el.selected).to.be.true;
|
|
74
|
+
await sendKeys({
|
|
75
|
+
press: 'NumpadEnter',
|
|
76
|
+
});
|
|
77
|
+
expect(el.selected).to.be.false;
|
|
115
78
|
});
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
el.insertAdjacentElement("beforebegin", inputBefore);
|
|
122
|
-
el.insertAdjacentElement("afterend", inputAfter);
|
|
123
|
-
inputBefore.focus();
|
|
124
|
-
el.disabled = true;
|
|
125
|
-
await elementUpdated(el);
|
|
126
|
-
expect(document.activeElement === el).to.be.false;
|
|
127
|
-
await sendKeys({
|
|
128
|
-
press: "Tab"
|
|
79
|
+
it('dispatches `change`', async () => {
|
|
80
|
+
const changeSpy = spy();
|
|
81
|
+
el.addEventListener('change', () => changeSpy());
|
|
82
|
+
el.click();
|
|
83
|
+
expect(changeSpy.calledOnce).to.be.true;
|
|
129
84
|
});
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
85
|
+
it('does not dispatch `change` when [disabled]', async () => {
|
|
86
|
+
const changeSpy = spy();
|
|
87
|
+
el.addEventListener('change', () => changeSpy());
|
|
88
|
+
el.disabled = true;
|
|
89
|
+
await elementUpdated(el);
|
|
90
|
+
el.click();
|
|
91
|
+
expect(changeSpy.calledOnce).to.be.false;
|
|
92
|
+
});
|
|
93
|
+
it('does not dispatch `change` when [mixed-value]', async () => {
|
|
94
|
+
const changeSpy = spy();
|
|
95
|
+
el.addEventListener('change', () => changeSpy());
|
|
96
|
+
el.mixedValue = true;
|
|
97
|
+
await elementUpdated(el);
|
|
98
|
+
el.click();
|
|
99
|
+
expect(changeSpy.calledOnce).to.be.false;
|
|
100
|
+
});
|
|
101
|
+
it('can have `change` prevented', async () => {
|
|
102
|
+
el.addEventListener('change', (event) => {
|
|
103
|
+
event.preventDefault();
|
|
104
|
+
});
|
|
105
|
+
expect(el.selected).to.false;
|
|
106
|
+
el.click();
|
|
107
|
+
expect(el.selected).to.false;
|
|
108
|
+
});
|
|
109
|
+
it('is in the tab order', async () => {
|
|
110
|
+
const inputBefore = document.createElement('input');
|
|
111
|
+
const inputAfter = document.createElement('input');
|
|
112
|
+
el.insertAdjacentElement('beforebegin', inputBefore);
|
|
113
|
+
el.insertAdjacentElement('afterend', inputAfter);
|
|
114
|
+
inputBefore.focus();
|
|
115
|
+
expect(document.activeElement === el).to.be.false;
|
|
116
|
+
await sendKeys({
|
|
117
|
+
press: 'Tab',
|
|
118
|
+
});
|
|
119
|
+
expect(document.activeElement === el).to.be.true;
|
|
120
|
+
await sendKeys({
|
|
121
|
+
press: 'Tab',
|
|
122
|
+
});
|
|
123
|
+
expect(document.activeElement === el).to.be.false;
|
|
124
|
+
await sendKeys({
|
|
125
|
+
press: 'Shift+Tab',
|
|
126
|
+
});
|
|
127
|
+
expect(document.activeElement === el).to.be.true;
|
|
128
|
+
});
|
|
129
|
+
it('is not in the tab order when [disabled]', async () => {
|
|
130
|
+
const inputBefore = document.createElement('input');
|
|
131
|
+
const inputAfter = document.createElement('input');
|
|
132
|
+
el.insertAdjacentElement('beforebegin', inputBefore);
|
|
133
|
+
el.insertAdjacentElement('afterend', inputAfter);
|
|
134
|
+
inputBefore.focus();
|
|
135
|
+
el.disabled = true;
|
|
136
|
+
await elementUpdated(el);
|
|
137
|
+
expect(document.activeElement === el).to.be.false;
|
|
138
|
+
await sendKeys({
|
|
139
|
+
press: 'Tab',
|
|
140
|
+
});
|
|
141
|
+
expect(document.activeElement === el).to.be.false;
|
|
142
|
+
await sendKeys({
|
|
143
|
+
press: 'Shift+Tab',
|
|
144
|
+
});
|
|
145
|
+
expect(document.activeElement === el).to.be.false;
|
|
133
146
|
});
|
|
134
|
-
expect(document.activeElement === el).to.be.false;
|
|
135
|
-
});
|
|
136
147
|
});
|
|
137
|
-
//# sourceMappingURL=swatch.test.js.map
|
|
148
|
+
//# sourceMappingURL=swatch.test.js.map
|
package/test/swatch.test.js.map
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["swatch.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '../sp-swatch.js';\nimport { Swatch } from '../src/Swatch.js';\nimport { ElementSize } from '@spectrum-web-components/base';\n\ndescribe('Swatch', () => {\n let el: Swatch;\n beforeEach(async () => {\n el = await fixture<Swatch>(\n html`\n <sp-swatch color=\"red\" label=\"Red\"></sp-swatch>\n `\n );\n\n await elementUpdated(el);\n });\n it(`loads default swatch accessibly`, async () => {\n await expect(el).to.be.accessible();\n });\n it('loads [nothing] swatch accessibly', async () => {\n el.nothing = true;\n el.removeAttribute('color');\n el.label = 'Transparent';\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Transparent');\n });\n (['xs', 's', 'm', 'l'] as ElementSize[]).map((size) => {\n it(`loads [mixed-value] swatch accessibly as [size=${size}]`, async () => {\n el.mixedValue = true;\n el.removeAttribute('color');\n el.label = 'Mixed Value';\n el.size = size;\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Mixed Value');\n });\n });\n it('toggles on `click`', async () => {\n expect(el.selected).to.be.false;\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `click` as [role=\"checkbox\"]', async () => {\n el.role = 'checkbox';\n await elementUpdated(el);\n\n expect(el.selected).to.be.false;\n await expect(el).to.be.accessible();\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `Space`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Space',\n });\n\n expect(el.selected).to.be.true;\n });\n it('toggles on `Enter`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Enter',\n });\n\n expect(el.selected).to.be.true;\n\n await sendKeys({\n press: 'NumpadEnter',\n });\n\n expect(el.selected).to.be.false;\n });\n it('dispatches `change`', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n });\n it('does not dispatch `change` when [disabled]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.disabled = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('does not dispatch `change` when [mixed-value]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.mixedValue = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('can have `change` prevented', async () => {\n el.addEventListener('change', (event: Event) => {\n event.preventDefault();\n });\n\n expect(el.selected).to.false;\n\n el.click();\n\n expect(el.selected).to.false;\n });\n it('is in the tab order', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.true;\n });\n it('is not in the tab order when [disabled]', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n el.disabled = true;\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.false;\n });\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
1
|
+
{"version":3,"file":"swatch.test.js","sourceRoot":"","sources":["swatch.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2022 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 { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { spy } from 'sinon';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '../sp-swatch.js';\nimport { Swatch } from '../src/Swatch.js';\nimport { ElementSize } from '@spectrum-web-components/base';\n\ndescribe('Swatch', () => {\n let el: Swatch;\n beforeEach(async () => {\n el = await fixture<Swatch>(\n html`\n <sp-swatch color=\"red\" label=\"Red\"></sp-swatch>\n `\n );\n\n await elementUpdated(el);\n });\n it(`loads default swatch accessibly`, async () => {\n await expect(el).to.be.accessible();\n });\n it('loads [nothing] swatch accessibly', async () => {\n el.nothing = true;\n el.removeAttribute('color');\n el.label = 'Transparent';\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Transparent');\n });\n (['xs', 's', 'm', 'l'] as ElementSize[]).map((size) => {\n it(`loads [mixed-value] swatch accessibly as [size=${size}]`, async () => {\n el.mixedValue = true;\n el.removeAttribute('color');\n el.label = 'Mixed Value';\n el.size = size;\n\n await expect(el).to.be.accessible();\n expect(el.getAttribute('aria-label')).to.equal('Mixed Value');\n });\n });\n it('toggles on `click`', async () => {\n expect(el.selected).to.be.false;\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `click` as [role=\"checkbox\"]', async () => {\n el.role = 'checkbox';\n await elementUpdated(el);\n\n expect(el.selected).to.be.false;\n await expect(el).to.be.accessible();\n\n el.click();\n\n expect(el.selected).to.be.true;\n await expect(el).to.be.accessible();\n });\n it('toggles on `Space`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Space',\n });\n\n expect(el.selected).to.be.true;\n });\n it('toggles on `Enter`', async () => {\n expect(el.selected).to.be.false;\n\n el.focus();\n await sendKeys({\n press: 'Enter',\n });\n\n expect(el.selected).to.be.true;\n\n await sendKeys({\n press: 'NumpadEnter',\n });\n\n expect(el.selected).to.be.false;\n });\n it('dispatches `change`', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n });\n it('does not dispatch `change` when [disabled]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.disabled = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('does not dispatch `change` when [mixed-value]', async () => {\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n el.mixedValue = true;\n await elementUpdated(el);\n\n el.click();\n\n expect(changeSpy.calledOnce).to.be.false;\n });\n it('can have `change` prevented', async () => {\n el.addEventListener('change', (event: Event) => {\n event.preventDefault();\n });\n\n expect(el.selected).to.false;\n\n el.click();\n\n expect(el.selected).to.false;\n });\n it('is in the tab order', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.true;\n });\n it('is not in the tab order when [disabled]', async () => {\n const inputBefore = document.createElement('input');\n const inputAfter = document.createElement('input');\n el.insertAdjacentElement('beforebegin', inputBefore);\n el.insertAdjacentElement('afterend', inputAfter);\n inputBefore.focus();\n el.disabled = true;\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el).to.be.false;\n });\n});\n"]}
|
package/sp-swatch-group.dev.js
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["sp-swatch-group.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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 { SwatchGroup } from './src/SwatchGroup.dev.js'\n\ncustomElements.define('sp-swatch-group', SwatchGroup);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-swatch-group': SwatchGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAWA;AAEA,eAAe,OAAO,mBAAmB,WAAW;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/sp-swatch.dev.js
DELETED
package/sp-swatch.dev.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["sp-swatch.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2022 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 { Swatch } from './src/Swatch.dev.js'\n\ncustomElements.define('sp-swatch', Swatch);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-swatch': Swatch;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAWA;AAEA,eAAe,OAAO,aAAa,MAAM;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/src/Swatch.dev.js
DELETED
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SizedMixin
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
16
|
-
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
-
import { when } from "@spectrum-web-components/base/src/directives.js";
|
|
18
|
-
import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
|
|
19
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js";
|
|
20
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash100.js";
|
|
21
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash200.js";
|
|
22
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js";
|
|
23
|
-
import styles from "./swatch.css.js";
|
|
24
|
-
import dashStyles from "@spectrum-web-components/icon/src/spectrum-icon-dash.css.js";
|
|
25
|
-
const dashIcon = {
|
|
26
|
-
xs: () => html`
|
|
27
|
-
<sp-icon-dash75
|
|
28
|
-
slot="icon"
|
|
29
|
-
class="mixedValueIcon spectrum-UIIcon-Dash75"
|
|
30
|
-
></sp-icon-dash75>
|
|
31
|
-
`,
|
|
32
|
-
s: () => html`
|
|
33
|
-
<sp-icon-dash100
|
|
34
|
-
slot="icon"
|
|
35
|
-
class="mixedValueIcon spectrum-UIIcon-Dash100"
|
|
36
|
-
></sp-icon-dash100>
|
|
37
|
-
`,
|
|
38
|
-
m: () => html`
|
|
39
|
-
<sp-icon-dash200
|
|
40
|
-
slot="icon"
|
|
41
|
-
class="mixedValueIcon spectrum-UIIcon-Dash200"
|
|
42
|
-
></sp-icon-dash200>
|
|
43
|
-
`,
|
|
44
|
-
l: () => html`
|
|
45
|
-
<sp-icon-dash300
|
|
46
|
-
slot="icon"
|
|
47
|
-
class="mixedValueIcon spectrum-UIIcon-Dash300"
|
|
48
|
-
></sp-icon-dash300>
|
|
49
|
-
`
|
|
50
|
-
};
|
|
51
|
-
export class Swatch extends SizedMixin(Focusable, {
|
|
52
|
-
validSizes: ["xs", "s", "m", "l"]
|
|
53
|
-
}) {
|
|
54
|
-
constructor() {
|
|
55
|
-
super(...arguments);
|
|
56
|
-
this.color = "";
|
|
57
|
-
this.label = "";
|
|
58
|
-
this.mixedValue = false;
|
|
59
|
-
this.nothing = false;
|
|
60
|
-
this.role = "button";
|
|
61
|
-
this.selected = false;
|
|
62
|
-
this.renderDisabled = () => {
|
|
63
|
-
return html`
|
|
64
|
-
<svg
|
|
65
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
-
class="disabledIcon"
|
|
67
|
-
viewBox="0 0 20 20"
|
|
68
|
-
>
|
|
69
|
-
<path
|
|
70
|
-
d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
|
|
71
|
-
stroke="none"
|
|
72
|
-
fill="var(--spectrum-swatch-disabled-icon-color)"
|
|
73
|
-
/>
|
|
74
|
-
<path
|
|
75
|
-
d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
|
|
76
|
-
stroke="none"
|
|
77
|
-
fill="var(--spectrum-swatch-disabled-icon-stroke-color)"
|
|
78
|
-
/>
|
|
79
|
-
</svg>
|
|
80
|
-
`;
|
|
81
|
-
};
|
|
82
|
-
this.renderMixedValue = () => {
|
|
83
|
-
return dashIcon[this.size]();
|
|
84
|
-
};
|
|
85
|
-
}
|
|
86
|
-
static get styles() {
|
|
87
|
-
return [styles, dashStyles];
|
|
88
|
-
}
|
|
89
|
-
get value() {
|
|
90
|
-
return this._value || this.color || this.label;
|
|
91
|
-
}
|
|
92
|
-
set value(value) {
|
|
93
|
-
if (value === this._value)
|
|
94
|
-
return;
|
|
95
|
-
const oldValue = this.value;
|
|
96
|
-
this._value = value;
|
|
97
|
-
this.requestUpdate("value", oldValue);
|
|
98
|
-
}
|
|
99
|
-
get focusElement() {
|
|
100
|
-
return this;
|
|
101
|
-
}
|
|
102
|
-
toggle(force) {
|
|
103
|
-
this.selected = force != null ? force : !this.selected;
|
|
104
|
-
}
|
|
105
|
-
handleClick() {
|
|
106
|
-
if (this.disabled || this.mixedValue)
|
|
107
|
-
return;
|
|
108
|
-
this.toggle();
|
|
109
|
-
const applyDefault = this.dispatchEvent(new Event("change", {
|
|
110
|
-
cancelable: true,
|
|
111
|
-
bubbles: true
|
|
112
|
-
}));
|
|
113
|
-
if (!applyDefault) {
|
|
114
|
-
this.toggle();
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
handleKeydown(event) {
|
|
118
|
-
const { code } = event;
|
|
119
|
-
switch (code) {
|
|
120
|
-
case "Space":
|
|
121
|
-
event.preventDefault();
|
|
122
|
-
this.addEventListener("keyup", this.handleKeyup);
|
|
123
|
-
break;
|
|
124
|
-
default:
|
|
125
|
-
break;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
handleKeypress(event) {
|
|
129
|
-
const { code } = event;
|
|
130
|
-
switch (code) {
|
|
131
|
-
case "Enter":
|
|
132
|
-
case "NumpadEnter":
|
|
133
|
-
this.click();
|
|
134
|
-
break;
|
|
135
|
-
default:
|
|
136
|
-
break;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
handleKeyup(event) {
|
|
140
|
-
const { code } = event;
|
|
141
|
-
switch (code) {
|
|
142
|
-
case "Space":
|
|
143
|
-
this.removeEventListener("keyup", this.handleKeyup);
|
|
144
|
-
this.click();
|
|
145
|
-
break;
|
|
146
|
-
default:
|
|
147
|
-
break;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
render() {
|
|
151
|
-
return html`
|
|
152
|
-
<div class="fill" style="--spectrum-picked-color: ${this.color}">
|
|
153
|
-
<slot name="image"></slot>
|
|
154
|
-
${when(this.disabled, this.renderDisabled)}
|
|
155
|
-
${when(this.mixedValue, this.renderMixedValue)}
|
|
156
|
-
</div>
|
|
157
|
-
`;
|
|
158
|
-
}
|
|
159
|
-
willUpdate(changes) {
|
|
160
|
-
if (!this.getAttribute("role")) {
|
|
161
|
-
this.setAttribute("role", "button");
|
|
162
|
-
}
|
|
163
|
-
if (changes.has("selected") || changes.has("role")) {
|
|
164
|
-
const selectedAttribute = this.role === "button" ? "aria-pressed" : "aria-checked";
|
|
165
|
-
const removedSelectedAttribute = this.role === "button" ? "aria-checked" : "aria-pressed";
|
|
166
|
-
if (changes.has("role")) {
|
|
167
|
-
this.removeAttribute(removedSelectedAttribute);
|
|
168
|
-
}
|
|
169
|
-
this.setAttribute(selectedAttribute, this.selected ? "true" : "false");
|
|
170
|
-
}
|
|
171
|
-
if (changes.has("label")) {
|
|
172
|
-
if (this.label) {
|
|
173
|
-
this.setAttribute("aria-label", this.label);
|
|
174
|
-
} else {
|
|
175
|
-
this.removeAttribute("aria-label");
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
firstUpdated(changes) {
|
|
180
|
-
super.firstUpdated(changes);
|
|
181
|
-
this.addEventListener("click", this.handleClick);
|
|
182
|
-
this.addEventListener("keydown", this.handleKeydown);
|
|
183
|
-
this.addEventListener("keypress", this.handleKeypress);
|
|
184
|
-
if (!this.hasAttribute("tabindex")) {
|
|
185
|
-
this.tabIndex = 0;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
__decorateClass([
|
|
190
|
-
property({ reflect: true })
|
|
191
|
-
], Swatch.prototype, "border", 2);
|
|
192
|
-
__decorateClass([
|
|
193
|
-
property()
|
|
194
|
-
], Swatch.prototype, "color", 2);
|
|
195
|
-
__decorateClass([
|
|
196
|
-
property()
|
|
197
|
-
], Swatch.prototype, "label", 2);
|
|
198
|
-
__decorateClass([
|
|
199
|
-
property({ type: Boolean, reflect: true, attribute: "mixed-value" })
|
|
200
|
-
], Swatch.prototype, "mixedValue", 2);
|
|
201
|
-
__decorateClass([
|
|
202
|
-
property({ type: Boolean, reflect: true })
|
|
203
|
-
], Swatch.prototype, "nothing", 2);
|
|
204
|
-
__decorateClass([
|
|
205
|
-
property({ reflect: true })
|
|
206
|
-
], Swatch.prototype, "role", 2);
|
|
207
|
-
__decorateClass([
|
|
208
|
-
property({ reflect: true })
|
|
209
|
-
], Swatch.prototype, "rounding", 2);
|
|
210
|
-
__decorateClass([
|
|
211
|
-
property({ type: Boolean, reflect: true })
|
|
212
|
-
], Swatch.prototype, "selected", 2);
|
|
213
|
-
__decorateClass([
|
|
214
|
-
property({ reflect: true })
|
|
215
|
-
], Swatch.prototype, "shape", 2);
|
|
216
|
-
__decorateClass([
|
|
217
|
-
property()
|
|
218
|
-
], Swatch.prototype, "value", 1);
|
|
219
|
-
//# sourceMappingURL=Swatch.dev.js.map
|