@spectrum-web-components/tags 0.47.2 → 0.48.0-beta.1
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 +6 -6
- package/test/tags.test.js +93 -116
- package/test/tags.test.js.map +2 -2
- package/custom-elements.json +0 -275
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tags",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.48.0-beta.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -66,10 +66,10 @@
|
|
|
66
66
|
"lit-html"
|
|
67
67
|
],
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@spectrum-web-components/base": "^0.
|
|
70
|
-
"@spectrum-web-components/button": "^0.
|
|
71
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
72
|
-
"@spectrum-web-components/shared": "^0.
|
|
69
|
+
"@spectrum-web-components/base": "^0.48.0-beta.1",
|
|
70
|
+
"@spectrum-web-components/button": "^0.48.0-beta.1",
|
|
71
|
+
"@spectrum-web-components/reactive-controllers": "^0.48.0-beta.1",
|
|
72
|
+
"@spectrum-web-components/shared": "^0.48.0-beta.1"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@spectrum-css/tag": "^9.1.0",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"./sp-*.js",
|
|
82
82
|
"./**/*.dev.js"
|
|
83
83
|
],
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "6659bda5743c40a00cd8143e020fd73d8f911514"
|
|
85
85
|
}
|
package/test/tags.test.js
CHANGED
|
@@ -6,7 +6,6 @@ import "@spectrum-web-components/tags/sp-tags.js";
|
|
|
6
6
|
import {
|
|
7
7
|
arrowDownEvent,
|
|
8
8
|
arrowLeftEvent,
|
|
9
|
-
arrowRightEvent,
|
|
10
9
|
arrowUpEvent,
|
|
11
10
|
endEvent,
|
|
12
11
|
enterEvent,
|
|
@@ -19,37 +18,31 @@ import { sendKeys } from "@web/test-runner-commands";
|
|
|
19
18
|
import { nextFrame } from "@spectrum-web-components/overlay/src/AbstractOverlay.js";
|
|
20
19
|
describe("Tags", () => {
|
|
21
20
|
testForLitDevWarnings(
|
|
22
|
-
async () => await fixture(
|
|
23
|
-
html`
|
|
24
|
-
<sp-tags>
|
|
25
|
-
<sp-tag>Tag 1</sp-tag>
|
|
26
|
-
<sp-tag invalid>Tag 2</sp-tag>
|
|
27
|
-
<sp-tag disabled>Tag 3</sp-tag>
|
|
28
|
-
</sp-tags>
|
|
29
|
-
`
|
|
30
|
-
)
|
|
31
|
-
);
|
|
32
|
-
it("loads default tags accessibly", async () => {
|
|
33
|
-
const el = await fixture(
|
|
34
|
-
html`
|
|
21
|
+
async () => await fixture(html`
|
|
35
22
|
<sp-tags>
|
|
36
23
|
<sp-tag>Tag 1</sp-tag>
|
|
37
24
|
<sp-tag invalid>Tag 2</sp-tag>
|
|
38
25
|
<sp-tag disabled>Tag 3</sp-tag>
|
|
39
26
|
</sp-tags>
|
|
40
|
-
`
|
|
41
|
-
|
|
27
|
+
`)
|
|
28
|
+
);
|
|
29
|
+
it("loads default tags accessibly", async () => {
|
|
30
|
+
const el = await fixture(html`
|
|
31
|
+
<sp-tags>
|
|
32
|
+
<sp-tag>Tag 1</sp-tag>
|
|
33
|
+
<sp-tag invalid>Tag 2</sp-tag>
|
|
34
|
+
<sp-tag disabled>Tag 3</sp-tag>
|
|
35
|
+
</sp-tags>
|
|
36
|
+
`);
|
|
42
37
|
await elementUpdated(el);
|
|
43
38
|
await expect(el).to.be.accessible();
|
|
44
39
|
expect(el.hasAttribute("role")).to.be.true;
|
|
45
40
|
expect(el.hasAttribute("aria-label")).to.be.true;
|
|
46
41
|
});
|
|
47
42
|
it("does not accept focus when empty", async () => {
|
|
48
|
-
const el = await fixture(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
`
|
|
52
|
-
);
|
|
43
|
+
const el = await fixture(html`
|
|
44
|
+
<sp-tags></sp-tags>
|
|
45
|
+
`);
|
|
53
46
|
await elementUpdated(el);
|
|
54
47
|
expect(document.activeElement === el).to.be.false;
|
|
55
48
|
el.focus();
|
|
@@ -57,15 +50,13 @@ describe("Tags", () => {
|
|
|
57
50
|
expect(document.activeElement === el).to.be.false;
|
|
58
51
|
});
|
|
59
52
|
it("does not accept focus when no tag has `deletable`", async () => {
|
|
60
|
-
const el = await fixture(
|
|
61
|
-
|
|
62
|
-
<sp-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
`
|
|
68
|
-
);
|
|
53
|
+
const el = await fixture(html`
|
|
54
|
+
<sp-tags>
|
|
55
|
+
<sp-tag>Tag 1</sp-tag>
|
|
56
|
+
<sp-tag invalid>Tag 2</sp-tag>
|
|
57
|
+
<sp-tag disabled>Tag 3</sp-tag>
|
|
58
|
+
</sp-tags>
|
|
59
|
+
`);
|
|
69
60
|
await elementUpdated(el);
|
|
70
61
|
const tag1 = el.querySelector("sp-tag:nth-child(1)");
|
|
71
62
|
const tag2 = el.querySelector("sp-tag:nth-child(2)");
|
|
@@ -79,32 +70,28 @@ describe("Tags", () => {
|
|
|
79
70
|
expect(document.activeElement === tag3).to.be.false;
|
|
80
71
|
});
|
|
81
72
|
it("loads default tags with `role` and `aria-label` from the outside", async () => {
|
|
82
|
-
const el = await fixture(
|
|
83
|
-
|
|
84
|
-
<sp-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
`
|
|
90
|
-
);
|
|
73
|
+
const el = await fixture(html`
|
|
74
|
+
<sp-tags>
|
|
75
|
+
<sp-tag>Tag 1</sp-tag>
|
|
76
|
+
<sp-tag invalid>Tag 2</sp-tag>
|
|
77
|
+
<sp-tag disabled>Tag 3</sp-tag>
|
|
78
|
+
</sp-tags>
|
|
79
|
+
`);
|
|
91
80
|
await elementUpdated(el);
|
|
92
81
|
await expect(el).to.be.accessible();
|
|
93
82
|
expect(el.hasAttribute("role")).to.be.true;
|
|
94
83
|
expect(el.hasAttribute("aria-label")).to.be.true;
|
|
95
84
|
});
|
|
96
85
|
it("accepts keyboard events while focused", async () => {
|
|
97
|
-
const el = await fixture(
|
|
98
|
-
|
|
99
|
-
<sp-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
`
|
|
107
|
-
);
|
|
86
|
+
const el = await fixture(html`
|
|
87
|
+
<sp-tags>
|
|
88
|
+
<sp-tag deletable>Tag 1</sp-tag>
|
|
89
|
+
<sp-tag deletable>Tag 2</sp-tag>
|
|
90
|
+
<sp-tag deletable>Tag 3</sp-tag>
|
|
91
|
+
<sp-tag deletable>Tag 4</sp-tag>
|
|
92
|
+
<sp-tag deletable>Tag 5</sp-tag>
|
|
93
|
+
</sp-tags>
|
|
94
|
+
`);
|
|
108
95
|
await elementUpdated(el);
|
|
109
96
|
const tag1 = el.querySelector("sp-tag:nth-child(1)");
|
|
110
97
|
const tag2 = el.querySelector("sp-tag:nth-child(2)");
|
|
@@ -114,7 +101,7 @@ describe("Tags", () => {
|
|
|
114
101
|
tag1.focus();
|
|
115
102
|
await elementUpdated(el);
|
|
116
103
|
el.dispatchEvent(pageUpEvent());
|
|
117
|
-
|
|
104
|
+
await sendKeys({ press: "ArrowRight" });
|
|
118
105
|
await elementUpdated(el);
|
|
119
106
|
expect(document.activeElement === tag2).to.be.true;
|
|
120
107
|
el.dispatchEvent(arrowDownEvent());
|
|
@@ -135,17 +122,15 @@ describe("Tags", () => {
|
|
|
135
122
|
tag1.blur();
|
|
136
123
|
});
|
|
137
124
|
it("handles focus when Tag is deleted", async () => {
|
|
138
|
-
const el = await fixture(
|
|
139
|
-
|
|
140
|
-
<sp-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
`
|
|
148
|
-
);
|
|
125
|
+
const el = await fixture(html`
|
|
126
|
+
<sp-tags>
|
|
127
|
+
<sp-tag deletable id="t1">Tag 1</sp-tag>
|
|
128
|
+
<sp-tag deletable id="t2">Tag 2</sp-tag>
|
|
129
|
+
<sp-tag deletable id="t3">Tag 3</sp-tag>
|
|
130
|
+
<sp-tag deletable id="t4">Tag 4</sp-tag>
|
|
131
|
+
<sp-tag deletable id="t5">Tag 5</sp-tag>
|
|
132
|
+
</sp-tags>
|
|
133
|
+
`);
|
|
149
134
|
await elementUpdated(el);
|
|
150
135
|
const tag1 = el.querySelector("sp-tag#t1");
|
|
151
136
|
const tag2 = el.querySelector("sp-tag#t2");
|
|
@@ -190,17 +175,15 @@ describe("Tags", () => {
|
|
|
190
175
|
expect(document.activeElement === tag4).to.be.true;
|
|
191
176
|
});
|
|
192
177
|
it("will not focus [disabled] children", async () => {
|
|
193
|
-
const el = await fixture(
|
|
194
|
-
|
|
195
|
-
<sp-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
`
|
|
203
|
-
);
|
|
178
|
+
const el = await fixture(html`
|
|
179
|
+
<sp-tags>
|
|
180
|
+
<sp-tag disabled deletable>Tag 1</sp-tag>
|
|
181
|
+
<sp-tag deletable>Tag 2</sp-tag>
|
|
182
|
+
<sp-tag deletable>Tag 3</sp-tag>
|
|
183
|
+
<sp-tag deletable>Tag 4</sp-tag>
|
|
184
|
+
<sp-tag disabled deletable>Tag 5</sp-tag>
|
|
185
|
+
</sp-tags>
|
|
186
|
+
`);
|
|
204
187
|
await elementUpdated(el);
|
|
205
188
|
const tag2 = el.querySelector("sp-tag:nth-child(2)");
|
|
206
189
|
const tag4 = el.querySelector("sp-tag:nth-child(4)");
|
|
@@ -221,17 +204,15 @@ describe("Tags", () => {
|
|
|
221
204
|
expect(document.activeElement === tag2).to.be.true;
|
|
222
205
|
});
|
|
223
206
|
it("will only tab index [deletable] children", async () => {
|
|
224
|
-
const el = await fixture(
|
|
225
|
-
|
|
226
|
-
<sp-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
`
|
|
234
|
-
);
|
|
207
|
+
const el = await fixture(html`
|
|
208
|
+
<sp-tags>
|
|
209
|
+
<sp-tag deletable>Tag 1</sp-tag>
|
|
210
|
+
<sp-tag>Tag 2</sp-tag>
|
|
211
|
+
<sp-tag>Tag 3</sp-tag>
|
|
212
|
+
<sp-tag>Tag 4</sp-tag>
|
|
213
|
+
<sp-tag deletable>Tag 5</sp-tag>
|
|
214
|
+
</sp-tags>
|
|
215
|
+
`);
|
|
235
216
|
await elementUpdated(el);
|
|
236
217
|
const tag1 = el.querySelector("sp-tag:nth-child(1)");
|
|
237
218
|
const tag5 = el.querySelector("sp-tag:nth-child(5)");
|
|
@@ -252,21 +233,19 @@ describe("Tags", () => {
|
|
|
252
233
|
expect(document.activeElement === tag1).to.be.true;
|
|
253
234
|
});
|
|
254
235
|
it("utilises floating tab index for [deletable] children", async () => {
|
|
255
|
-
const el = await fixture(
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
<sp-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
<sp-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
`
|
|
269
|
-
);
|
|
236
|
+
const el = await fixture(html`
|
|
237
|
+
<div>
|
|
238
|
+
<a href="#">Heyo</a>
|
|
239
|
+
<sp-tags>
|
|
240
|
+
<sp-tag deletable>Tag 1</sp-tag>
|
|
241
|
+
<sp-tag deletable>Tag 2</sp-tag>
|
|
242
|
+
</sp-tags>
|
|
243
|
+
<sp-tags>
|
|
244
|
+
<sp-tag deletable>Tag A</sp-tag>
|
|
245
|
+
<sp-tag deletable>Tag B</sp-tag>
|
|
246
|
+
</sp-tags>
|
|
247
|
+
</div>
|
|
248
|
+
`);
|
|
270
249
|
const anchor = el.querySelector("a");
|
|
271
250
|
anchor.focus();
|
|
272
251
|
expect(document.activeElement === anchor).to.be.true;
|
|
@@ -287,23 +266,21 @@ describe("Tags", () => {
|
|
|
287
266
|
expect(document.activeElement === tagB).to.be.true;
|
|
288
267
|
});
|
|
289
268
|
it('loads accepts "PageUp" and "PageDown" keys', async () => {
|
|
290
|
-
const el = await fixture(
|
|
291
|
-
|
|
292
|
-
<
|
|
293
|
-
<sp-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
<sp-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
<sp-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
`
|
|
306
|
-
);
|
|
269
|
+
const el = await fixture(html`
|
|
270
|
+
<div>
|
|
271
|
+
<sp-tags>
|
|
272
|
+
<sp-tag deletable>Tag 1</sp-tag>
|
|
273
|
+
</sp-tags>
|
|
274
|
+
<sp-tags>
|
|
275
|
+
<sp-tag deletable>Tag 2</sp-tag>
|
|
276
|
+
</sp-tags>
|
|
277
|
+
<sp-tags></sp-tags>
|
|
278
|
+
<sp-tags>
|
|
279
|
+
<sp-tag disabled deletable>Tag 3</sp-tag>
|
|
280
|
+
<sp-tag deletable>Tag 4</sp-tag>
|
|
281
|
+
</sp-tags>
|
|
282
|
+
</div>
|
|
283
|
+
`);
|
|
307
284
|
const tags1 = el.querySelector("sp-tags:nth-child(1)");
|
|
308
285
|
const tags2 = el.querySelector("sp-tags:nth-child(2)");
|
|
309
286
|
const tags4 = el.querySelector("sp-tags:nth-child(4)");
|
package/test/tags.test.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tags.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 } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\nimport '@spectrum-web-components/tags/sp-tag.js';\nimport '@spectrum-web-components/tags/sp-tags.js';\nimport { Tag, Tags } from '@spectrum-web-components/tags';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n pageDownEvent,\n pageUpEvent,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\n\ndescribe('Tags', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n )\n );\n it('loads default tags accessibly', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('does not accept focus when empty', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags></sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept focus when no tag has `deletable`', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(document.activeElement === tag1).to.be.false;\n expect(document.activeElement === tag2).to.be.false;\n expect(document.activeElement === tag3).to.be.false;\n });\n it('loads default tags with `role` and `aria-label` from the outside', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('accepts keyboard events while focused', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(pageUpEvent());\n el.dispatchEvent(arrowRightEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.blur();\n });\n\n it('handles focus when Tag is deleted', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable id=\"t1\">Tag 1</sp-tag>\n <sp-tag deletable id=\"t2\">Tag 2</sp-tag>\n <sp-tag deletable id=\"t3\">Tag 3</sp-tag>\n <sp-tag deletable id=\"t4\">Tag 4</sp-tag>\n <sp-tag deletable id=\"t5\">Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag#t1') as Tag;\n const tag2 = el.querySelector('sp-tag#t2') as Tag;\n const tag3 = el.querySelector('sp-tag#t3') as Tag;\n const tag4 = el.querySelector('sp-tag#t4') as Tag;\n const tag5 = el.querySelector('sp-tag#t5') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag2).to.be.true;\n\n await sendKeys({\n press: 'Delete',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag3).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag5).to.be.true;\n\n await sendKeys({\n press: 'Delete',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag4).to.be.true;\n });\n\n it('will not focus [disabled] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag disabled deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag disabled deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n\n tag2.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n });\n it('will only tab index [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag>Tag 2</sp-tag>\n <sp-tag>Tag 3</sp-tag>\n <sp-tag>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `\n );\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n });\n it('utilises floating tab index for [deletable] children', async () => {\n const el = await fixture<Tags>(\n html`\n <div>\n <a href=\"#\">Heyo</a>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag A</sp-tag>\n <sp-tag deletable>Tag B</sp-tag>\n </sp-tags>\n </div>\n `\n );\n const anchor = el.querySelector('a') as HTMLElement;\n\n anchor.focus();\n expect(document.activeElement === anchor).to.be.true;\n\n const tagset1 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tagset2 = el.querySelector('sp-tags:nth-child(3)') as Tags;\n\n const tag1 = tagset1.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagA = tagset2.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagB = tagset2.querySelector('sp-tag:nth-child(2)') as Tag;\n\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === tag1).to.be.true;\n\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === tagA).to.be.true;\n\n tagset2.dispatchEvent(arrowDownEvent());\n expect(document.activeElement === tagB).to.be.true;\n });\n it('loads accepts \"PageUp\" and \"PageDown\" keys', async () => {\n const el = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags></sp-tags>\n <sp-tags>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n </div>\n `\n );\n\n const tags1 = el.querySelector('sp-tags:nth-child(1)') as Tags;\n const tags2 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tags4 = el.querySelector('sp-tags:nth-child(4)') as Tags;\n\n const tag1 = tags1.querySelector('sp-tag') as Tag;\n const tag2 = tags2.querySelector('sp-tag') as Tag;\n const tag4 = tags4.querySelector('sp-tag:not([disabled])') as Tag;\n\n tag1.focus();\n tag1.dispatchEvent(pageUpEvent());\n\n expect(document.activeElement === tag4).to.be.true;\n\n tag4.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag2).to.be.true;\n\n tag2.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,gBAAgB,QAAQ,eAAe;AAChD,SAAS,YAAY;AAErB,OAAO;AACP,OAAO;AAEP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,
|
|
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 } from '@open-wc/testing';\nimport { html } from 'lit/static-html.js';\n\nimport '@spectrum-web-components/tags/sp-tag.js';\nimport '@spectrum-web-components/tags/sp-tags.js';\nimport { Tag, Tags } from '@spectrum-web-components/tags';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n pageDownEvent,\n pageUpEvent,\n testForLitDevWarnings,\n} from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\nimport { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\n\ndescribe('Tags', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Tags>(html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `)\n );\n it('loads default tags accessibly', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('does not accept focus when empty', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags></sp-tags>\n `);\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept focus when no tag has `deletable`', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `);\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n expect(document.activeElement === tag1).to.be.false;\n expect(document.activeElement === tag2).to.be.false;\n expect(document.activeElement === tag3).to.be.false;\n });\n it('loads default tags with `role` and `aria-label` from the outside', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag>Tag 1</sp-tag>\n <sp-tag invalid>Tag 2</sp-tag>\n <sp-tag disabled>Tag 3</sp-tag>\n </sp-tags>\n `);\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n expect(el.hasAttribute('role')).to.be.true;\n expect(el.hasAttribute('aria-label')).to.be.true;\n });\n it('accepts keyboard events while focused', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `);\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag3 = el.querySelector('sp-tag:nth-child(3)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(pageUpEvent());\n await sendKeys({ press: 'ArrowRight' });\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag3).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.blur();\n });\n\n it('handles focus when Tag is deleted', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag deletable id=\"t1\">Tag 1</sp-tag>\n <sp-tag deletable id=\"t2\">Tag 2</sp-tag>\n <sp-tag deletable id=\"t3\">Tag 3</sp-tag>\n <sp-tag deletable id=\"t4\">Tag 4</sp-tag>\n <sp-tag deletable id=\"t5\">Tag 5</sp-tag>\n </sp-tags>\n `);\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag#t1') as Tag;\n const tag2 = el.querySelector('sp-tag#t2') as Tag;\n const tag3 = el.querySelector('sp-tag#t3') as Tag;\n const tag4 = el.querySelector('sp-tag#t4') as Tag;\n const tag5 = el.querySelector('sp-tag#t5') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag2).to.be.true;\n\n await sendKeys({\n press: 'Delete',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag3).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag5).to.be.true;\n\n await sendKeys({\n press: 'Delete',\n });\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(document.activeElement === tag4).to.be.true;\n });\n\n it('will not focus [disabled] children', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag disabled deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n <sp-tag deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n <sp-tag disabled deletable>Tag 5</sp-tag>\n </sp-tags>\n `);\n\n await elementUpdated(el);\n\n const tag2 = el.querySelector('sp-tag:nth-child(2)') as Tag;\n const tag4 = el.querySelector('sp-tag:nth-child(4)') as Tag;\n\n tag2.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag4).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag2).to.be.true;\n });\n it('will only tab index [deletable] children', async () => {\n const el = await fixture<Tags>(html`\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag>Tag 2</sp-tag>\n <sp-tag>Tag 3</sp-tag>\n <sp-tag>Tag 4</sp-tag>\n <sp-tag deletable>Tag 5</sp-tag>\n </sp-tags>\n `);\n\n await elementUpdated(el);\n\n const tag1 = el.querySelector('sp-tag:nth-child(1)') as Tag;\n const tag5 = el.querySelector('sp-tag:nth-child(5)') as Tag;\n\n tag1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag5).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === tag1).to.be.true;\n });\n it('utilises floating tab index for [deletable] children', async () => {\n const el = await fixture<Tags>(html`\n <div>\n <a href=\"#\">Heyo</a>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag A</sp-tag>\n <sp-tag deletable>Tag B</sp-tag>\n </sp-tags>\n </div>\n `);\n const anchor = el.querySelector('a') as HTMLElement;\n\n anchor.focus();\n expect(document.activeElement === anchor).to.be.true;\n\n const tagset1 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tagset2 = el.querySelector('sp-tags:nth-child(3)') as Tags;\n\n const tag1 = tagset1.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagA = tagset2.querySelector('sp-tag:nth-child(1)') as Tag;\n const tagB = tagset2.querySelector('sp-tag:nth-child(2)') as Tag;\n\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === tag1).to.be.true;\n\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === tagA).to.be.true;\n\n tagset2.dispatchEvent(arrowDownEvent());\n expect(document.activeElement === tagB).to.be.true;\n });\n it('loads accepts \"PageUp\" and \"PageDown\" keys', async () => {\n const el = await fixture<HTMLDivElement>(html`\n <div>\n <sp-tags>\n <sp-tag deletable>Tag 1</sp-tag>\n </sp-tags>\n <sp-tags>\n <sp-tag deletable>Tag 2</sp-tag>\n </sp-tags>\n <sp-tags></sp-tags>\n <sp-tags>\n <sp-tag disabled deletable>Tag 3</sp-tag>\n <sp-tag deletable>Tag 4</sp-tag>\n </sp-tags>\n </div>\n `);\n\n const tags1 = el.querySelector('sp-tags:nth-child(1)') as Tags;\n const tags2 = el.querySelector('sp-tags:nth-child(2)') as Tags;\n const tags4 = el.querySelector('sp-tags:nth-child(4)') as Tags;\n\n const tag1 = tags1.querySelector('sp-tag') as Tag;\n const tag2 = tags2.querySelector('sp-tag') as Tag;\n const tag4 = tags4.querySelector('sp-tag:not([disabled])') as Tag;\n\n tag1.focus();\n tag1.dispatchEvent(pageUpEvent());\n\n expect(document.activeElement === tag4).to.be.true;\n\n tag4.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag1).to.be.true;\n\n tag1.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag2).to.be.true;\n\n tag2.dispatchEvent(pageDownEvent());\n\n expect(document.activeElement === tag4, 'Focuses `tag4`').to.be.true;\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/custom-elements.json
DELETED
|
@@ -1,275 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schemaVersion": "1.0.0",
|
|
3
|
-
"readme": "",
|
|
4
|
-
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-tag.js",
|
|
8
|
-
"declarations": [],
|
|
9
|
-
"exports": [
|
|
10
|
-
{
|
|
11
|
-
"kind": "custom-element-definition",
|
|
12
|
-
"name": "sp-tag",
|
|
13
|
-
"declaration": {
|
|
14
|
-
"name": "Tag",
|
|
15
|
-
"module": "/src/Tag.js"
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
]
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
"kind": "javascript-module",
|
|
22
|
-
"path": "sp-tags.js",
|
|
23
|
-
"declarations": [],
|
|
24
|
-
"exports": [
|
|
25
|
-
{
|
|
26
|
-
"kind": "custom-element-definition",
|
|
27
|
-
"name": "sp-tags",
|
|
28
|
-
"declaration": {
|
|
29
|
-
"name": "Tags",
|
|
30
|
-
"module": "/src/Tags.js"
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
]
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"kind": "javascript-module",
|
|
37
|
-
"path": "src/Tag.js",
|
|
38
|
-
"declarations": [
|
|
39
|
-
{
|
|
40
|
-
"kind": "class",
|
|
41
|
-
"description": "",
|
|
42
|
-
"name": "Tag",
|
|
43
|
-
"slots": [
|
|
44
|
-
{
|
|
45
|
-
"description": "text content for labeling the tag",
|
|
46
|
-
"name": ""
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
"description": "an avatar element to display within the Tag",
|
|
50
|
-
"name": "avatar"
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
"description": "an icon element to display within the Tag",
|
|
54
|
-
"name": "icon"
|
|
55
|
-
}
|
|
56
|
-
],
|
|
57
|
-
"members": [
|
|
58
|
-
{
|
|
59
|
-
"kind": "field",
|
|
60
|
-
"name": "deletable",
|
|
61
|
-
"type": {
|
|
62
|
-
"text": "boolean"
|
|
63
|
-
},
|
|
64
|
-
"privacy": "public",
|
|
65
|
-
"default": "false",
|
|
66
|
-
"attribute": "deletable",
|
|
67
|
-
"reflects": true
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"kind": "field",
|
|
71
|
-
"name": "disabled",
|
|
72
|
-
"type": {
|
|
73
|
-
"text": "boolean"
|
|
74
|
-
},
|
|
75
|
-
"privacy": "public",
|
|
76
|
-
"default": "false",
|
|
77
|
-
"attribute": "disabled",
|
|
78
|
-
"reflects": true
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
"kind": "field",
|
|
82
|
-
"name": "readonly",
|
|
83
|
-
"type": {
|
|
84
|
-
"text": "boolean"
|
|
85
|
-
},
|
|
86
|
-
"privacy": "public",
|
|
87
|
-
"default": "false",
|
|
88
|
-
"attribute": "readonly",
|
|
89
|
-
"reflects": true
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
"kind": "field",
|
|
93
|
-
"name": "handleFocusin",
|
|
94
|
-
"privacy": "private"
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
"kind": "field",
|
|
98
|
-
"name": "handleFocusout",
|
|
99
|
-
"privacy": "private"
|
|
100
|
-
},
|
|
101
|
-
{
|
|
102
|
-
"kind": "field",
|
|
103
|
-
"name": "handleKeydown",
|
|
104
|
-
"privacy": "private"
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"kind": "method",
|
|
108
|
-
"name": "delete",
|
|
109
|
-
"privacy": "private",
|
|
110
|
-
"return": {
|
|
111
|
-
"type": {
|
|
112
|
-
"text": "void"
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
],
|
|
117
|
-
"events": [
|
|
118
|
-
{
|
|
119
|
-
"name": "delete",
|
|
120
|
-
"type": {
|
|
121
|
-
"text": "Event"
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
],
|
|
125
|
-
"attributes": [
|
|
126
|
-
{
|
|
127
|
-
"name": "deletable",
|
|
128
|
-
"type": {
|
|
129
|
-
"text": "boolean"
|
|
130
|
-
},
|
|
131
|
-
"default": "false",
|
|
132
|
-
"fieldName": "deletable"
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
"name": "disabled",
|
|
136
|
-
"type": {
|
|
137
|
-
"text": "boolean"
|
|
138
|
-
},
|
|
139
|
-
"default": "false",
|
|
140
|
-
"fieldName": "disabled"
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
"name": "readonly",
|
|
144
|
-
"type": {
|
|
145
|
-
"text": "boolean"
|
|
146
|
-
},
|
|
147
|
-
"default": "false",
|
|
148
|
-
"fieldName": "readonly"
|
|
149
|
-
}
|
|
150
|
-
],
|
|
151
|
-
"mixins": [
|
|
152
|
-
{
|
|
153
|
-
"name": "SizedMixin",
|
|
154
|
-
"package": "@spectrum-web-components/base"
|
|
155
|
-
}
|
|
156
|
-
],
|
|
157
|
-
"superclass": {
|
|
158
|
-
"name": "SpectrumElement",
|
|
159
|
-
"package": "@spectrum-web-components/base"
|
|
160
|
-
},
|
|
161
|
-
"tagName": "sp-tag",
|
|
162
|
-
"customElement": true
|
|
163
|
-
}
|
|
164
|
-
],
|
|
165
|
-
"exports": [
|
|
166
|
-
{
|
|
167
|
-
"kind": "js",
|
|
168
|
-
"name": "Tag",
|
|
169
|
-
"declaration": {
|
|
170
|
-
"name": "Tag",
|
|
171
|
-
"module": "src/Tag.js"
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
]
|
|
175
|
-
},
|
|
176
|
-
{
|
|
177
|
-
"kind": "javascript-module",
|
|
178
|
-
"path": "src/Tags.js",
|
|
179
|
-
"declarations": [
|
|
180
|
-
{
|
|
181
|
-
"kind": "class",
|
|
182
|
-
"description": "",
|
|
183
|
-
"name": "Tags",
|
|
184
|
-
"slots": [
|
|
185
|
-
{
|
|
186
|
-
"description": "Tag elements to manage as a group",
|
|
187
|
-
"name": ""
|
|
188
|
-
}
|
|
189
|
-
],
|
|
190
|
-
"members": [
|
|
191
|
-
{
|
|
192
|
-
"kind": "field",
|
|
193
|
-
"name": "defaultNodes",
|
|
194
|
-
"type": {
|
|
195
|
-
"text": "Node[]"
|
|
196
|
-
},
|
|
197
|
-
"privacy": "public"
|
|
198
|
-
},
|
|
199
|
-
{
|
|
200
|
-
"kind": "field",
|
|
201
|
-
"name": "tags",
|
|
202
|
-
"type": {
|
|
203
|
-
"text": "Tag[]"
|
|
204
|
-
},
|
|
205
|
-
"privacy": "public",
|
|
206
|
-
"readonly": true
|
|
207
|
-
},
|
|
208
|
-
{
|
|
209
|
-
"kind": "field",
|
|
210
|
-
"name": "rovingTabindexController",
|
|
211
|
-
"default": "new RovingTabindexController<Tag>(this, {\n focusInIndex: (elements: Tag[]) => {\n return elements.findIndex((el) => {\n return !el.disabled && el.deletable;\n });\n },\n elements: () => this.tags,\n isFocusableElement: (el: Tag) => !el.disabled && el.deletable,\n })"
|
|
212
|
-
},
|
|
213
|
-
{
|
|
214
|
-
"kind": "method",
|
|
215
|
-
"name": "focus",
|
|
216
|
-
"privacy": "public",
|
|
217
|
-
"return": {
|
|
218
|
-
"type": {
|
|
219
|
-
"text": "void"
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"kind": "field",
|
|
225
|
-
"name": "handleFocusin",
|
|
226
|
-
"privacy": "private"
|
|
227
|
-
},
|
|
228
|
-
{
|
|
229
|
-
"kind": "field",
|
|
230
|
-
"name": "handleKeydown",
|
|
231
|
-
"privacy": "private"
|
|
232
|
-
},
|
|
233
|
-
{
|
|
234
|
-
"kind": "field",
|
|
235
|
-
"name": "handleFocusout",
|
|
236
|
-
"privacy": "private"
|
|
237
|
-
},
|
|
238
|
-
{
|
|
239
|
-
"kind": "method",
|
|
240
|
-
"name": "handleSlotchange",
|
|
241
|
-
"privacy": "private",
|
|
242
|
-
"return": {
|
|
243
|
-
"type": {
|
|
244
|
-
"text": "void"
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
],
|
|
249
|
-
"mixins": [
|
|
250
|
-
{
|
|
251
|
-
"name": "FocusVisiblePolyfillMixin",
|
|
252
|
-
"package": "@spectrum-web-components/shared/src/focus-visible.js"
|
|
253
|
-
}
|
|
254
|
-
],
|
|
255
|
-
"superclass": {
|
|
256
|
-
"name": "SpectrumElement",
|
|
257
|
-
"package": "@spectrum-web-components/base"
|
|
258
|
-
},
|
|
259
|
-
"tagName": "sp-tags",
|
|
260
|
-
"customElement": true
|
|
261
|
-
}
|
|
262
|
-
],
|
|
263
|
-
"exports": [
|
|
264
|
-
{
|
|
265
|
-
"kind": "js",
|
|
266
|
-
"name": "Tags",
|
|
267
|
-
"declaration": {
|
|
268
|
-
"name": "Tags",
|
|
269
|
-
"module": "src/Tags.js"
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
]
|
|
273
|
-
}
|
|
274
|
-
]
|
|
275
|
-
}
|