@spectrum-web-components/swatch 0.41.2 → 0.42.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.
Files changed (11) hide show
  1. package/custom-elements.json +30 -15
  2. package/package.json +10 -10
  3. package/src/SwatchGroup.d.ts +5 -2
  4. package/src/SwatchGroup.dev.js +53 -21
  5. package/src/SwatchGroup.dev.js.map +2 -2
  6. package/src/SwatchGroup.js +2 -2
  7. package/src/SwatchGroup.js.map +3 -3
  8. package/stories/swatch-group.stories.js +18 -18
  9. package/stories/swatch-group.stories.js.map +2 -2
  10. package/test/swatch-group.test.js +44 -2
  11. package/test/swatch-group.test.js.map +2 -2
package/custom-elements.json CHANGED
@@ -390,6 +390,16 @@
390
390
  "attribute": "border",
391
391
  "reflects": true
392
392
  },
393
+ {
394
+ "kind": "field",
395
+ "name": "density",
396
+ "type": {
397
+ "text": "'compact' | 'spacious' | undefined"
398
+ },
399
+ "privacy": "public",
400
+ "attribute": "density",
401
+ "reflects": true
402
+ },
393
403
  {
394
404
  "kind": "field",
395
405
  "name": "rounding",
@@ -407,9 +417,17 @@
407
417
  "text": "string[]"
408
418
  },
409
419
  "privacy": "public",
410
- "default": "[]",
411
420
  "attribute": "selected"
412
421
  },
422
+ {
423
+ "kind": "field",
424
+ "name": "_selected",
425
+ "type": {
426
+ "text": "string[]"
427
+ },
428
+ "privacy": "private",
429
+ "default": "[]"
430
+ },
413
431
  {
414
432
  "kind": "field",
415
433
  "name": "selects",
@@ -437,18 +455,16 @@
437
455
  },
438
456
  {
439
457
  "kind": "field",
440
- "name": "density",
458
+ "name": "swatches",
441
459
  "type": {
442
- "text": "'compact' | 'spacious' | undefined"
460
+ "text": "Swatch[]"
443
461
  },
444
- "privacy": "public",
445
- "attribute": "density",
446
- "reflects": true
462
+ "privacy": "public"
447
463
  },
448
464
  {
449
465
  "kind": "field",
450
466
  "name": "rovingTabindexController",
451
- "default": "new RovingTabindexController<Swatch>(this, {\n focusInIndex: (elements: Swatch[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => [...this.children] as Swatch[],\n isFocusableElement: (el: Swatch) => !el.disabled,\n })"
467
+ "default": "new RovingTabindexController<Swatch>(this, {\n focusInIndex: (elements: Swatch[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.swatches,\n isFocusableElement: (el: Swatch) => !el.disabled,\n })"
452
468
  },
453
469
  {
454
470
  "kind": "method",
@@ -545,6 +561,13 @@
545
561
  },
546
562
  "fieldName": "border"
547
563
  },
564
+ {
565
+ "name": "density",
566
+ "type": {
567
+ "text": "'compact' | 'spacious' | undefined"
568
+ },
569
+ "fieldName": "density"
570
+ },
548
571
  {
549
572
  "name": "rounding",
550
573
  "type": {
@@ -557,7 +580,6 @@
557
580
  "type": {
558
581
  "text": "string[]"
559
582
  },
560
- "default": "[]",
561
583
  "fieldName": "selected"
562
584
  },
563
585
  {
@@ -573,13 +595,6 @@
573
595
  "text": "SwatchShape"
574
596
  },
575
597
  "fieldName": "shape"
576
- },
577
- {
578
- "name": "density",
579
- "type": {
580
- "text": "'compact' | 'spacious' | undefined"
581
- },
582
- "fieldName": "density"
583
598
  }
584
599
  ],
585
600
  "mixins": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/swatch",
3
- "version": "0.41.2",
3
+ "version": "0.42.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -67,16 +67,16 @@
67
67
  ],
68
68
  "dependencies": {
69
69
  "@lit-labs/observers": "^2.0.0",
70
- "@spectrum-web-components/base": "^0.41.2",
71
- "@spectrum-web-components/icon": "^0.41.2",
72
- "@spectrum-web-components/icons-ui": "^0.41.2",
73
- "@spectrum-web-components/opacity-checkerboard": "^0.41.2",
74
- "@spectrum-web-components/reactive-controllers": "^0.41.2",
75
- "@spectrum-web-components/shared": "^0.41.2"
70
+ "@spectrum-web-components/base": "^0.42.1",
71
+ "@spectrum-web-components/icon": "^0.42.1",
72
+ "@spectrum-web-components/icons-ui": "^0.42.1",
73
+ "@spectrum-web-components/opacity-checkerboard": "^0.42.1",
74
+ "@spectrum-web-components/reactive-controllers": "^0.42.1",
75
+ "@spectrum-web-components/shared": "^0.42.1"
76
76
  },
77
77
  "devDependencies": {
78
- "@spectrum-css/swatch": "^5.1.3",
79
- "@spectrum-css/swatchgroup": "^2.1.3"
78
+ "@spectrum-css/swatch": "^5.1.5",
79
+ "@spectrum-css/swatchgroup": "^2.1.5"
80
80
  },
81
81
  "types": "./src/index.d.ts",
82
82
  "customElements": "custom-elements.json",
@@ -84,5 +84,5 @@
84
84
  "./sp-*.js",
85
85
  "./**/*.dev.js"
86
86
  ],
87
- "gitHead": "78c3f16b08c9133c9e5ca88d0c9fef5ea7d2ab87"
87
+ "gitHead": "c7ab5516e86d20194e92114afd04affa490b7248"
88
88
  }
package/src/SwatchGroup.d.ts CHANGED
@@ -15,12 +15,15 @@ declare const SwatchGroup_base: typeof SpectrumElement & {
15
15
  export declare class SwatchGroup extends SwatchGroup_base {
16
16
  static get styles(): CSSResultArray;
17
17
  border: SwatchBorder;
18
+ density: 'compact' | 'spacious' | undefined;
18
19
  rounding: SwatchRounding;
19
- selected: string[];
20
+ get selected(): string[];
21
+ set selected(selected: string[]);
22
+ private _selected;
20
23
  selects: SwatchSelects;
21
24
  private selectedSet;
22
25
  shape: SwatchShape;
23
- density: 'compact' | 'spacious' | undefined;
26
+ swatches: Swatch[];
24
27
  constructor();
25
28
  rovingTabindexController: RovingTabindexController<Swatch>;
26
29
  focus(options?: FocusOptions): void;
package/src/SwatchGroup.dev.js CHANGED
@@ -15,7 +15,10 @@ import {
15
15
  SizedMixin,
16
16
  SpectrumElement
17
17
  } from "@spectrum-web-components/base";
18
- import { property } from "@spectrum-web-components/base/src/decorators.js";
18
+ import {
19
+ property,
20
+ queryAssignedElements
21
+ } from "@spectrum-web-components/base/src/decorators.js";
19
22
  import { RovingTabindexController } from "@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";
20
23
  import { MutationController } from "@lit-labs/observers/mutation-controller.js";
21
24
  import styles from "./swatch-group.css.js";
@@ -25,7 +28,9 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
25
28
  }) {
26
29
  constructor() {
27
30
  super();
28
- this.selected = [];
31
+ // Specifically surface `_selected` internally so that change can be made to this value internally
32
+ // without triggering the update lifecycle directly.
33
+ this._selected = [];
29
34
  this.selectedSet = /* @__PURE__ */ new Set();
30
35
  this.rovingTabindexController = new RovingTabindexController(this, {
31
36
  focusInIndex: (elements) => {
@@ -38,14 +43,14 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
38
43
  });
39
44
  return elements[firstSelectedIndex] ? firstSelectedIndex : firstEnabledIndex;
40
45
  },
41
- elements: () => [...this.children],
46
+ elements: () => this.swatches,
42
47
  isFocusableElement: (el) => !el.disabled
43
48
  });
44
- this.manageChange = () => {
49
+ this.manageChange = async () => {
45
50
  const presentSet = /* @__PURE__ */ new Set();
46
51
  this.selectedSet = new Set(this.selected);
47
- const swatches = [...this.children];
48
- swatches.forEach((swatch) => {
52
+ await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));
53
+ this.swatches.forEach((swatch) => {
49
54
  presentSet.add(swatch.value);
50
55
  if (swatch.selected) {
51
56
  this.selectedSet.add(swatch.value);
@@ -56,7 +61,8 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
56
61
  this.selectedSet.delete(value);
57
62
  }
58
63
  });
59
- this.selected = [...this.selectedSet];
64
+ this._selected = [...this.selectedSet];
65
+ this.rovingTabindexController.clearElementCache();
60
66
  };
61
67
  new MutationController(this, {
62
68
  config: {
@@ -72,6 +78,16 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
72
78
  static get styles() {
73
79
  return [styles];
74
80
  }
81
+ get selected() {
82
+ return this._selected;
83
+ }
84
+ set selected(selected) {
85
+ if (selected === this.selected)
86
+ return;
87
+ const oldSelected = this.selected;
88
+ this._selected = selected;
89
+ this.requestUpdate("selected", oldSelected);
90
+ }
75
91
  focus(options) {
76
92
  this.rovingTabindexController.focus(options);
77
93
  }
@@ -104,7 +120,7 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
104
120
  this.selectedSet.delete(target.value);
105
121
  }
106
122
  }
107
- this.selected = [...this.selectedSet];
123
+ this._selected = [...this.selectedSet];
108
124
  const applyDefault = this.dispatchEvent(
109
125
  new Event("change", {
110
126
  cancelable: true,
@@ -112,7 +128,7 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
112
128
  })
113
129
  );
114
130
  if (!applyDefault) {
115
- this.selected = oldSelected;
131
+ this._selected = oldSelected;
116
132
  event.preventDefault();
117
133
  }
118
134
  }
@@ -195,7 +211,7 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
195
211
  ...this.getPassthroughSwatchActions(changes),
196
212
  ...this.getSelectionSwatchActions(changes)
197
213
  ];
198
- const nextSelected = new Set(this.selected);
214
+ let nextSelected = new Set(this.selected);
199
215
  const currentValues = /* @__PURE__ */ new Set();
200
216
  if (changes.has("selected")) {
201
217
  swatchActions.push((swatch) => {
@@ -207,28 +223,44 @@ export class SwatchGroup extends SizedMixin(SpectrumElement, {
207
223
  }
208
224
  });
209
225
  }
210
- this.rovingTabindexController.elements.forEach((swatch) => {
211
- swatchActions.forEach((action) => {
212
- action(swatch);
226
+ const doActions = () => {
227
+ nextSelected = new Set(this.selected);
228
+ this.swatches.forEach((swatch) => {
229
+ swatchActions.forEach((action) => {
230
+ action(swatch);
231
+ });
213
232
  });
214
- });
215
- if (changes.has("selected")) {
216
- this.selected = [...nextSelected].filter(
217
- (selectedValue) => currentValues.has(selectedValue)
233
+ if (changes.has("selected")) {
234
+ this._selected = [...nextSelected.values()].filter(
235
+ (selectedValue) => currentValues.has(selectedValue)
236
+ );
237
+ }
238
+ };
239
+ if (this.hasUpdated) {
240
+ doActions();
241
+ } else {
242
+ this.shadowRoot.addEventListener(
243
+ "slotchange",
244
+ () => {
245
+ requestAnimationFrame(doActions);
246
+ },
247
+ { once: true }
218
248
  );
219
- this.rovingTabindexController.clearElementCache();
220
249
  }
221
250
  }
222
251
  }
223
252
  __decorateClass([
224
253
  property({ reflect: true })
225
254
  ], SwatchGroup.prototype, "border", 2);
255
+ __decorateClass([
256
+ property({ reflect: true })
257
+ ], SwatchGroup.prototype, "density", 2);
226
258
  __decorateClass([
227
259
  property({ reflect: true })
228
260
  ], SwatchGroup.prototype, "rounding", 2);
229
261
  __decorateClass([
230
262
  property({ type: Array })
231
- ], SwatchGroup.prototype, "selected", 2);
263
+ ], SwatchGroup.prototype, "selected", 1);
232
264
  __decorateClass([
233
265
  property()
234
266
  ], SwatchGroup.prototype, "selects", 2);
@@ -236,6 +268,6 @@ __decorateClass([
236
268
  property({ reflect: true })
237
269
  ], SwatchGroup.prototype, "shape", 2);
238
270
  __decorateClass([
239
- property({ reflect: true })
240
- ], SwatchGroup.prototype, "density", 2);
271
+ queryAssignedElements({ flatten: true })
272
+ ], SwatchGroup.prototype, "swatches", 2);
241
273
  //# sourceMappingURL=SwatchGroup.dev.js.map
package/src/SwatchGroup.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["SwatchGroup.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*/\n\nimport {\n CSSResultArray,\n ElementSize,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n Swatch,\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from './Swatch.dev.js'\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Array })\n public selected: string[] = [];\n\n @property()\n public selects: SwatchSelects;\n\n private selectedSet = new Set<string>();\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @property({ reflect: true })\n public density: 'compact' | 'spacious' | undefined;\n\n constructor() {\n super();\n\n new MutationController(this, {\n config: {\n attributes: true,\n childList: true,\n subtree: true,\n },\n callback: () => {\n this.manageChange();\n },\n });\n }\n\n rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n focusInIndex: (elements: Swatch[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => [...this.children] as Swatch[],\n isFocusableElement: (el: Swatch) => !el.disabled,\n });\n\n public override focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected handleChange(event: Event & { target: Swatch }): void {\n event.stopPropagation();\n const oldSelected = this.selected;\n if (!this.selects) {\n event.preventDefault();\n return;\n }\n if (this.selects === 'single') {\n const { target } = event;\n target.tabIndex = 0;\n target.selected = true;\n if (this.selectedSet.has(target.value)) {\n return;\n }\n this.selectedSet.clear();\n this.selectedSet.add(target.value);\n this.rovingTabindexController.elements.forEach((child) => {\n if (child === target) return;\n child.selected = false;\n });\n } else if (this.selects === 'multiple') {\n const { target } = event;\n if (target.selected) {\n this.selectedSet.add(target.value);\n } else {\n this.selectedSet.delete(target.value);\n }\n }\n this.selected = [...this.selectedSet];\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this.selected = oldSelected;\n event.preventDefault();\n }\n }\n\n private manageChange = (): void => {\n const presentSet = new Set();\n this.selectedSet = new Set(this.selected);\n const swatches = [...this.children] as Swatch[];\n swatches.forEach((swatch) => {\n presentSet.add(swatch.value);\n if (swatch.selected) {\n this.selectedSet.add(swatch.value);\n }\n });\n this.selectedSet.forEach((value) => {\n if (!presentSet.has(value)) {\n this.selectedSet.delete(value);\n }\n });\n this.selected = [...this.selectedSet];\n };\n\n private getPassthroughSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const targetValues: {\n border?: SwatchBorder;\n rounding?: SwatchRounding;\n shape?: SwatchShape;\n size?: SwatchGroupSizes;\n selects?: SwatchSelects;\n } = {};\n if (\n changes.has('selects') &&\n (this.selects || typeof changes.get('selects') !== 'undefined')\n ) {\n targetValues.selects = this.selects;\n }\n if (\n changes.has('border') &&\n (this.border || typeof changes.get('border') !== 'undefined')\n ) {\n targetValues.border = this.border;\n }\n if (\n changes.has('rounding') &&\n (this.rounding || typeof changes.get('rounding') !== 'undefined')\n ) {\n targetValues.rounding = this.rounding;\n }\n if (\n changes.has('size') &&\n (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n ) {\n targetValues.size = this.size as SwatchGroupSizes;\n }\n if (\n changes.has('shape') &&\n (this.shape || typeof changes.get('shape') !== 'undefined')\n ) {\n targetValues.shape = this.shape;\n }\n const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (Object.keys(targetValues).length) {\n passThroughSwatchActions.push((swatch) => {\n if (window.__swc.DEBUG) {\n if (\n 'selects' in targetValues &&\n targetValues.selects !== 'multiple' &&\n swatch.mixedValue\n ) {\n window.__swc.warn(\n this,\n `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n 'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n {\n type: 'accessibility',\n }\n );\n }\n }\n if ('border' in targetValues)\n swatch.border = targetValues.border;\n if ('rounding' in targetValues)\n swatch.rounding = targetValues.rounding;\n if ('shape' in targetValues) swatch.shape = targetValues.shape;\n if ('size' in targetValues)\n swatch.size = targetValues.size as SwatchGroupSizes;\n });\n }\n return passThroughSwatchActions;\n }\n\n private getSelectionSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (!changes.has('selects')) return selectionSwatchActions;\n if (this.selects) {\n this.setAttribute(\n 'role',\n this.selects === 'single' ? 'radiogroup' : 'group'\n );\n } else {\n this.removeAttribute('role');\n }\n const swatchRoles = {\n single: 'radio',\n multiple: 'checkbox',\n };\n const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n selectionSwatchActions.push((swatch) => {\n swatch.setAttribute('role', swatchRole);\n });\n return selectionSwatchActions;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @change=${this.handleChange}\n @slotchange=${this.manageChange}\n ></slot>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n const swatchActions = [\n ...this.getPassthroughSwatchActions(changes),\n ...this.getSelectionSwatchActions(changes),\n ];\n\n // Create Swatch actions that build state to be applied later.\n const nextSelected = new Set(this.selected);\n const currentValues = new Set();\n if (changes.has('selected')) {\n swatchActions.push((swatch) => {\n currentValues.add(swatch.value);\n if (\n nextSelected.has(swatch.value) ||\n (!this.hasUpdated && swatch.selected)\n ) {\n swatch.selected = true;\n } else {\n swatch.selected = false;\n }\n });\n }\n\n // Do Swatch actions to each Swach in the collection.\n this.rovingTabindexController.elements.forEach((swatch) => {\n swatchActions.forEach((action) => {\n action(swatch);\n });\n });\n\n // Apply state built in actions back to the Swatch Group\n if (changes.has('selected')) {\n this.selected = [...nextSelected].filter((selectedValue) =>\n currentValues.has(selectedValue)\n );\n this.rovingTabindexController.clearElementCache();\n }\n }\n}\n"],
5
- "mappings": "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",
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*/\n\nimport {\n CSSResultArray,\n ElementSize,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedElements,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n Swatch,\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from './Swatch.dev.js'\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property({ reflect: true })\n public density: 'compact' | 'spacious' | undefined;\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Array })\n public get selected(): string[] {\n return this._selected;\n }\n\n public set selected(selected: string[]) {\n if (selected === this.selected) return;\n\n const oldSelected = this.selected;\n this._selected = selected;\n this.requestUpdate('selected', oldSelected);\n }\n\n // Specifically surface `_selected` internally so that change can be made to this value internally\n // without triggering the update lifecycle directly.\n private _selected: string[] = [];\n\n @property()\n public selects: SwatchSelects;\n\n private selectedSet = new Set<string>();\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @queryAssignedElements({ flatten: true })\n public swatches!: Swatch[];\n\n constructor() {\n super();\n\n new MutationController(this, {\n config: {\n attributes: true,\n childList: true,\n subtree: true,\n },\n callback: () => {\n this.manageChange();\n },\n });\n }\n\n rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n focusInIndex: (elements: Swatch[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.swatches,\n isFocusableElement: (el: Swatch) => !el.disabled,\n });\n\n public override focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected handleChange(event: Event & { target: Swatch }): void {\n event.stopPropagation();\n const oldSelected = this.selected;\n if (!this.selects) {\n event.preventDefault();\n return;\n }\n if (this.selects === 'single') {\n const { target } = event;\n target.tabIndex = 0;\n target.selected = true;\n if (this.selectedSet.has(target.value)) {\n return;\n }\n this.selectedSet.clear();\n this.selectedSet.add(target.value);\n this.rovingTabindexController.elements.forEach((child) => {\n if (child === target) return;\n child.selected = false;\n });\n } else if (this.selects === 'multiple') {\n const { target } = event;\n if (target.selected) {\n this.selectedSet.add(target.value);\n } else {\n this.selectedSet.delete(target.value);\n }\n }\n this._selected = [...this.selectedSet];\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this._selected = oldSelected;\n event.preventDefault();\n }\n }\n\n private manageChange = async (): Promise<void> => {\n const presentSet = new Set();\n this.selectedSet = new Set(this.selected);\n await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));\n this.swatches.forEach((swatch) => {\n presentSet.add(swatch.value);\n if (swatch.selected) {\n this.selectedSet.add(swatch.value);\n }\n });\n this.selectedSet.forEach((value) => {\n if (!presentSet.has(value)) {\n this.selectedSet.delete(value);\n }\n });\n this._selected = [...this.selectedSet];\n this.rovingTabindexController.clearElementCache();\n };\n\n private getPassthroughSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const targetValues: {\n border?: SwatchBorder;\n rounding?: SwatchRounding;\n shape?: SwatchShape;\n size?: SwatchGroupSizes;\n selects?: SwatchSelects;\n } = {};\n if (\n changes.has('selects') &&\n (this.selects || typeof changes.get('selects') !== 'undefined')\n ) {\n targetValues.selects = this.selects;\n }\n if (\n changes.has('border') &&\n (this.border || typeof changes.get('border') !== 'undefined')\n ) {\n targetValues.border = this.border;\n }\n if (\n changes.has('rounding') &&\n (this.rounding || typeof changes.get('rounding') !== 'undefined')\n ) {\n targetValues.rounding = this.rounding;\n }\n if (\n changes.has('size') &&\n (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n ) {\n targetValues.size = this.size as SwatchGroupSizes;\n }\n if (\n changes.has('shape') &&\n (this.shape || typeof changes.get('shape') !== 'undefined')\n ) {\n targetValues.shape = this.shape;\n }\n const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (Object.keys(targetValues).length) {\n passThroughSwatchActions.push((swatch) => {\n if (window.__swc.DEBUG) {\n if (\n 'selects' in targetValues &&\n targetValues.selects !== 'multiple' &&\n swatch.mixedValue\n ) {\n window.__swc.warn(\n this,\n `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n 'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n {\n type: 'accessibility',\n }\n );\n }\n }\n if ('border' in targetValues)\n swatch.border = targetValues.border;\n if ('rounding' in targetValues)\n swatch.rounding = targetValues.rounding;\n if ('shape' in targetValues) swatch.shape = targetValues.shape;\n if ('size' in targetValues)\n swatch.size = targetValues.size as SwatchGroupSizes;\n });\n }\n return passThroughSwatchActions;\n }\n\n private getSelectionSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (!changes.has('selects')) return selectionSwatchActions;\n if (this.selects) {\n this.setAttribute(\n 'role',\n this.selects === 'single' ? 'radiogroup' : 'group'\n );\n } else {\n this.removeAttribute('role');\n }\n const swatchRoles = {\n single: 'radio',\n multiple: 'checkbox',\n };\n const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n selectionSwatchActions.push((swatch) => {\n swatch.setAttribute('role', swatchRole);\n });\n return selectionSwatchActions;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @change=${this.handleChange}\n @slotchange=${this.manageChange}\n ></slot>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n const swatchActions = [\n ...this.getPassthroughSwatchActions(changes),\n ...this.getSelectionSwatchActions(changes),\n ];\n\n // Create Swatch actions that build state to be applied later.\n let nextSelected = new Set(this.selected);\n const currentValues = new Set();\n if (changes.has('selected')) {\n swatchActions.push((swatch) => {\n currentValues.add(swatch.value);\n if (\n nextSelected.has(swatch.value) ||\n (!this.hasUpdated && swatch.selected)\n ) {\n swatch.selected = true;\n } else {\n swatch.selected = false;\n }\n });\n }\n\n const doActions = (): void => {\n nextSelected = new Set(this.selected);\n\n // Do Swatch actions to each Swatch in the collection.\n this.swatches.forEach((swatch) => {\n swatchActions.forEach((action) => {\n action(swatch);\n });\n });\n\n // Apply state built in actions back to the Swatch Group\n if (changes.has('selected')) {\n this._selected = [...nextSelected.values()].filter(\n (selectedValue) => currentValues.has(selectedValue)\n );\n }\n };\n\n if (this.hasUpdated) {\n // Do actions immediately when the element has already updated.\n doActions();\n } else {\n // On first update wait for a `slotchange` event, which is not currently managed\n // by the element lifecycle before allowing Swatch actions to be commited.\n this.shadowRoot.addEventListener(\n 'slotchange',\n () => {\n requestAnimationFrame(doActions);\n },\n { once: true }\n );\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/src/SwatchGroup.js CHANGED
@@ -1,7 +1,7 @@
1
- "use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(c,a,e,t)=>{for(var i=t>1?void 0:t?h(a,e):a,s=c.length-1,r;s>=0;s--)(r=c[s])&&(i=(t?r(a,e,i):r(i))||i);return t&&i&&d(a,e,i),i};import{html as u,SizedMixin as p,SpectrumElement as S}from"@spectrum-web-components/base";import{property as o}from"@spectrum-web-components/base/src/decorators.js";import{RovingTabindexController as f}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{MutationController as g}from"@lit-labs/observers/mutation-controller.js";import w from"./swatch-group.css.js";export class SwatchGroup extends p(S,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super();this.selected=[];this.selectedSet=new Set;this.rovingTabindexController=new f(this,{focusInIndex:e=>{let t=-1;const i=e.findIndex((s,r)=>(!e[t]&&!s.disabled&&(t=r),s.selected&&!s.disabled));return e[i]?i:t},elements:()=>[...this.children],isFocusableElement:e=>!e.disabled});this.manageChange=()=>{const e=new Set;this.selectedSet=new Set(this.selected),[...this.children].forEach(i=>{e.add(i.value),i.selected&&this.selectedSet.add(i.value)}),this.selectedSet.forEach(i=>{e.has(i)||this.selectedSet.delete(i)}),this.selected=[...this.selectedSet]};new g(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[w]}focus(e){this.rovingTabindexController.focus(e)}handleChange(e){e.stopPropagation();const t=this.selected;if(!this.selects){e.preventDefault();return}if(this.selects==="single"){const{target:s}=e;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(r=>{r!==s&&(r.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=e;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this.selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this.selected=t,e.preventDefault())}getPassthroughSwatchActions(e){const t={};e.has("selects")&&(this.selects||typeof e.get("selects")!="undefined")&&(t.selects=this.selects),e.has("border")&&(this.border||typeof e.get("border")!="undefined")&&(t.border=this.border),e.has("rounding")&&(this.rounding||typeof e.get("rounding")!="undefined")&&(t.rounding=this.rounding),e.has("size")&&(this.size!=="m"||typeof e.get("size")!="undefined")&&(t.size=this.size),e.has("shape")&&(this.shape||typeof e.get("shape")!="undefined")&&(t.shape=this.shape);const i=[];return Object.keys(t).length&&i.push(s=>{"border"in t&&(s.border=t.border),"rounding"in t&&(s.rounding=t.rounding),"shape"in t&&(s.shape=t.shape),"size"in t&&(s.size=t.size)}),i}getSelectionSwatchActions(e){const t=[];if(!e.has("selects"))return t;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const i={single:"radio",multiple:"checkbox"},s=this.selects?i[this.selects]:"button";return t.push(r=>{r.setAttribute("role",s)}),t}render(){return u`
1
+ "use strict";var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=(n,o,t,e)=>{for(var i=e>1?void 0:e?u(o,t):o,s=n.length-1,r;s>=0;s--)(r=n[s])&&(i=(e?r(o,t,i):r(i))||i);return e&&i&&h(o,t,i),i};import{html as p,SizedMixin as f,SpectrumElement as S}from"@spectrum-web-components/base";import{property as c,queryAssignedElements as g}from"@spectrum-web-components/base/src/decorators.js";import{RovingTabindexController as w}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";import{MutationController as m}from"@lit-labs/observers/mutation-controller.js";import b from"./swatch-group.css.js";export class SwatchGroup extends f(S,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super();this._selected=[];this.selectedSet=new Set;this.rovingTabindexController=new w(this,{focusInIndex:t=>{let e=-1;const i=t.findIndex((s,r)=>(!t[e]&&!s.disabled&&(e=r),s.selected&&!s.disabled));return t[i]?i:e},elements:()=>this.swatches,isFocusableElement:t=>!t.disabled});this.manageChange=async()=>{const t=new Set;this.selectedSet=new Set(this.selected),await Promise.all(this.swatches.map(e=>e.updateComplete)),this.swatches.forEach(e=>{t.add(e.value),e.selected&&this.selectedSet.add(e.value)}),this.selectedSet.forEach(e=>{t.has(e)||this.selectedSet.delete(e)}),this._selected=[...this.selectedSet],this.rovingTabindexController.clearElementCache()};new m(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[b]}get selected(){return this._selected}set selected(t){if(t===this.selected)return;const e=this.selected;this._selected=t,this.requestUpdate("selected",e)}focus(t){this.rovingTabindexController.focus(t)}handleChange(t){t.stopPropagation();const e=this.selected;if(!this.selects){t.preventDefault();return}if(this.selects==="single"){const{target:s}=t;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(r=>{r!==s&&(r.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=t;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this._selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this._selected=e,t.preventDefault())}getPassthroughSwatchActions(t){const e={};t.has("selects")&&(this.selects||typeof t.get("selects")!="undefined")&&(e.selects=this.selects),t.has("border")&&(this.border||typeof t.get("border")!="undefined")&&(e.border=this.border),t.has("rounding")&&(this.rounding||typeof t.get("rounding")!="undefined")&&(e.rounding=this.rounding),t.has("size")&&(this.size!=="m"||typeof t.get("size")!="undefined")&&(e.size=this.size),t.has("shape")&&(this.shape||typeof t.get("shape")!="undefined")&&(e.shape=this.shape);const i=[];return Object.keys(e).length&&i.push(s=>{"border"in e&&(s.border=e.border),"rounding"in e&&(s.rounding=e.rounding),"shape"in e&&(s.shape=e.shape),"size"in e&&(s.size=e.size)}),i}getSelectionSwatchActions(t){const e=[];if(!t.has("selects"))return e;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const i={single:"radio",multiple:"checkbox"},s=this.selects?i[this.selects]:"button";return e.push(r=>{r.setAttribute("role",s)}),e}render(){return p`
2
2
  <slot
3
3
  @change=${this.handleChange}
4
4
  @slotchange=${this.manageChange}
5
5
  ></slot>
6
- `}willUpdate(e){const t=[...this.getPassthroughSwatchActions(e),...this.getSelectionSwatchActions(e)],i=new Set(this.selected),s=new Set;e.has("selected")&&t.push(r=>{s.add(r.value),i.has(r.value)||!this.hasUpdated&&r.selected?r.selected=!0:r.selected=!1}),this.rovingTabindexController.elements.forEach(r=>{t.forEach(n=>{n(r)})}),e.has("selected")&&(this.selected=[...i].filter(r=>s.has(r)),this.rovingTabindexController.clearElementCache())}}l([o({reflect:!0})],SwatchGroup.prototype,"border",2),l([o({reflect:!0})],SwatchGroup.prototype,"rounding",2),l([o({type:Array})],SwatchGroup.prototype,"selected",2),l([o()],SwatchGroup.prototype,"selects",2),l([o({reflect:!0})],SwatchGroup.prototype,"shape",2),l([o({reflect:!0})],SwatchGroup.prototype,"density",2);
6
+ `}willUpdate(t){const e=[...this.getPassthroughSwatchActions(t),...this.getSelectionSwatchActions(t)];let i=new Set(this.selected);const s=new Set;t.has("selected")&&e.push(l=>{s.add(l.value),i.has(l.value)||!this.hasUpdated&&l.selected?l.selected=!0:l.selected=!1});const r=()=>{i=new Set(this.selected),this.swatches.forEach(l=>{e.forEach(d=>{d(l)})}),t.has("selected")&&(this._selected=[...i.values()].filter(l=>s.has(l)))};this.hasUpdated?r():this.shadowRoot.addEventListener("slotchange",()=>{requestAnimationFrame(r)},{once:!0})}}a([c({reflect:!0})],SwatchGroup.prototype,"border",2),a([c({reflect:!0})],SwatchGroup.prototype,"density",2),a([c({reflect:!0})],SwatchGroup.prototype,"rounding",2),a([c({type:Array})],SwatchGroup.prototype,"selected",1),a([c()],SwatchGroup.prototype,"selects",2),a([c({reflect:!0})],SwatchGroup.prototype,"shape",2),a([g({flatten:!0})],SwatchGroup.prototype,"swatches",2);
7
7
  //# sourceMappingURL=SwatchGroup.js.map
package/src/SwatchGroup.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["SwatchGroup.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*/\n\nimport {\n CSSResultArray,\n ElementSize,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n Swatch,\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from './Swatch.js';\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Array })\n public selected: string[] = [];\n\n @property()\n public selects: SwatchSelects;\n\n private selectedSet = new Set<string>();\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @property({ reflect: true })\n public density: 'compact' | 'spacious' | undefined;\n\n constructor() {\n super();\n\n new MutationController(this, {\n config: {\n attributes: true,\n childList: true,\n subtree: true,\n },\n callback: () => {\n this.manageChange();\n },\n });\n }\n\n rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n focusInIndex: (elements: Swatch[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => [...this.children] as Swatch[],\n isFocusableElement: (el: Swatch) => !el.disabled,\n });\n\n public override focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected handleChange(event: Event & { target: Swatch }): void {\n event.stopPropagation();\n const oldSelected = this.selected;\n if (!this.selects) {\n event.preventDefault();\n return;\n }\n if (this.selects === 'single') {\n const { target } = event;\n target.tabIndex = 0;\n target.selected = true;\n if (this.selectedSet.has(target.value)) {\n return;\n }\n this.selectedSet.clear();\n this.selectedSet.add(target.value);\n this.rovingTabindexController.elements.forEach((child) => {\n if (child === target) return;\n child.selected = false;\n });\n } else if (this.selects === 'multiple') {\n const { target } = event;\n if (target.selected) {\n this.selectedSet.add(target.value);\n } else {\n this.selectedSet.delete(target.value);\n }\n }\n this.selected = [...this.selectedSet];\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this.selected = oldSelected;\n event.preventDefault();\n }\n }\n\n private manageChange = (): void => {\n const presentSet = new Set();\n this.selectedSet = new Set(this.selected);\n const swatches = [...this.children] as Swatch[];\n swatches.forEach((swatch) => {\n presentSet.add(swatch.value);\n if (swatch.selected) {\n this.selectedSet.add(swatch.value);\n }\n });\n this.selectedSet.forEach((value) => {\n if (!presentSet.has(value)) {\n this.selectedSet.delete(value);\n }\n });\n this.selected = [...this.selectedSet];\n };\n\n private getPassthroughSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const targetValues: {\n border?: SwatchBorder;\n rounding?: SwatchRounding;\n shape?: SwatchShape;\n size?: SwatchGroupSizes;\n selects?: SwatchSelects;\n } = {};\n if (\n changes.has('selects') &&\n (this.selects || typeof changes.get('selects') !== 'undefined')\n ) {\n targetValues.selects = this.selects;\n }\n if (\n changes.has('border') &&\n (this.border || typeof changes.get('border') !== 'undefined')\n ) {\n targetValues.border = this.border;\n }\n if (\n changes.has('rounding') &&\n (this.rounding || typeof changes.get('rounding') !== 'undefined')\n ) {\n targetValues.rounding = this.rounding;\n }\n if (\n changes.has('size') &&\n (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n ) {\n targetValues.size = this.size as SwatchGroupSizes;\n }\n if (\n changes.has('shape') &&\n (this.shape || typeof changes.get('shape') !== 'undefined')\n ) {\n targetValues.shape = this.shape;\n }\n const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (Object.keys(targetValues).length) {\n passThroughSwatchActions.push((swatch) => {\n if (window.__swc.DEBUG) {\n if (\n 'selects' in targetValues &&\n targetValues.selects !== 'multiple' &&\n swatch.mixedValue\n ) {\n window.__swc.warn(\n this,\n `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n 'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n {\n type: 'accessibility',\n }\n );\n }\n }\n if ('border' in targetValues)\n swatch.border = targetValues.border;\n if ('rounding' in targetValues)\n swatch.rounding = targetValues.rounding;\n if ('shape' in targetValues) swatch.shape = targetValues.shape;\n if ('size' in targetValues)\n swatch.size = targetValues.size as SwatchGroupSizes;\n });\n }\n return passThroughSwatchActions;\n }\n\n private getSelectionSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (!changes.has('selects')) return selectionSwatchActions;\n if (this.selects) {\n this.setAttribute(\n 'role',\n this.selects === 'single' ? 'radiogroup' : 'group'\n );\n } else {\n this.removeAttribute('role');\n }\n const swatchRoles = {\n single: 'radio',\n multiple: 'checkbox',\n };\n const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n selectionSwatchActions.push((swatch) => {\n swatch.setAttribute('role', swatchRole);\n });\n return selectionSwatchActions;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @change=${this.handleChange}\n @slotchange=${this.manageChange}\n ></slot>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n const swatchActions = [\n ...this.getPassthroughSwatchActions(changes),\n ...this.getSelectionSwatchActions(changes),\n ];\n\n // Create Swatch actions that build state to be applied later.\n const nextSelected = new Set(this.selected);\n const currentValues = new Set();\n if (changes.has('selected')) {\n swatchActions.push((swatch) => {\n currentValues.add(swatch.value);\n if (\n nextSelected.has(swatch.value) ||\n (!this.hasUpdated && swatch.selected)\n ) {\n swatch.selected = true;\n } else {\n swatch.selected = false;\n }\n });\n }\n\n // Do Swatch actions to each Swach in the collection.\n this.rovingTabindexController.elements.forEach((swatch) => {\n swatchActions.forEach((action) => {\n action(swatch);\n });\n });\n\n // Apply state built in actions back to the Swatch Group\n if (changes.has('selected')) {\n this.selected = [...nextSelected].filter((selectedValue) =>\n currentValues.has(selectedValue)\n );\n this.rovingTabindexController.clearElementCache();\n }\n }\n}\n"],
5
- "mappings": "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",
6
- "names": ["html", "SizedMixin", "SpectrumElement", "property", "RovingTabindexController", "MutationController", "styles", "elements", "firstEnabledIndex", "firstSelectedIndex", "el", "index", "presentSet", "swatch", "value", "options", "event", "oldSelected", "target", "child", "changes", "targetValues", "passThroughSwatchActions", "selectionSwatchActions", "swatchRoles", "swatchRole", "swatchActions", "nextSelected", "currentValues", "action", "selectedValue", "__decorateClass"]
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*/\n\nimport {\n CSSResultArray,\n ElementSize,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedElements,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\nimport { MutationController } from '@lit-labs/observers/mutation-controller.js';\n\nimport styles from './swatch-group.css.js';\nimport type {\n Swatch,\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from './Swatch.js';\n\nexport type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;\nexport type SwatchSelects = 'single' | 'multiple' | undefined;\n\n/**\n * @element sp-swatch-group\n *\n * @slot - Swatch elements to manage as a group\n */\nexport class SwatchGroup extends SizedMixin(SpectrumElement, {\n validSizes: ['xs', 's', 'm', 'l'],\n noDefaultSize: true,\n}) {\n public static override get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true })\n public border: SwatchBorder;\n\n @property({ reflect: true })\n public density: 'compact' | 'spacious' | undefined;\n\n @property({ reflect: true })\n public rounding: SwatchRounding;\n\n @property({ type: Array })\n public get selected(): string[] {\n return this._selected;\n }\n\n public set selected(selected: string[]) {\n if (selected === this.selected) return;\n\n const oldSelected = this.selected;\n this._selected = selected;\n this.requestUpdate('selected', oldSelected);\n }\n\n // Specifically surface `_selected` internally so that change can be made to this value internally\n // without triggering the update lifecycle directly.\n private _selected: string[] = [];\n\n @property()\n public selects: SwatchSelects;\n\n private selectedSet = new Set<string>();\n\n @property({ reflect: true })\n public shape: SwatchShape;\n\n @queryAssignedElements({ flatten: true })\n public swatches!: Swatch[];\n\n constructor() {\n super();\n\n new MutationController(this, {\n config: {\n attributes: true,\n childList: true,\n subtree: true,\n },\n callback: () => {\n this.manageChange();\n },\n });\n }\n\n rovingTabindexController = new RovingTabindexController<Swatch>(this, {\n focusInIndex: (elements: Swatch[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.swatches,\n isFocusableElement: (el: Swatch) => !el.disabled,\n });\n\n public override focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n protected handleChange(event: Event & { target: Swatch }): void {\n event.stopPropagation();\n const oldSelected = this.selected;\n if (!this.selects) {\n event.preventDefault();\n return;\n }\n if (this.selects === 'single') {\n const { target } = event;\n target.tabIndex = 0;\n target.selected = true;\n if (this.selectedSet.has(target.value)) {\n return;\n }\n this.selectedSet.clear();\n this.selectedSet.add(target.value);\n this.rovingTabindexController.elements.forEach((child) => {\n if (child === target) return;\n child.selected = false;\n });\n } else if (this.selects === 'multiple') {\n const { target } = event;\n if (target.selected) {\n this.selectedSet.add(target.value);\n } else {\n this.selectedSet.delete(target.value);\n }\n }\n this._selected = [...this.selectedSet];\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n this._selected = oldSelected;\n event.preventDefault();\n }\n }\n\n private manageChange = async (): Promise<void> => {\n const presentSet = new Set();\n this.selectedSet = new Set(this.selected);\n await Promise.all(this.swatches.map((swatch) => swatch.updateComplete));\n this.swatches.forEach((swatch) => {\n presentSet.add(swatch.value);\n if (swatch.selected) {\n this.selectedSet.add(swatch.value);\n }\n });\n this.selectedSet.forEach((value) => {\n if (!presentSet.has(value)) {\n this.selectedSet.delete(value);\n }\n });\n this._selected = [...this.selectedSet];\n this.rovingTabindexController.clearElementCache();\n };\n\n private getPassthroughSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const targetValues: {\n border?: SwatchBorder;\n rounding?: SwatchRounding;\n shape?: SwatchShape;\n size?: SwatchGroupSizes;\n selects?: SwatchSelects;\n } = {};\n if (\n changes.has('selects') &&\n (this.selects || typeof changes.get('selects') !== 'undefined')\n ) {\n targetValues.selects = this.selects;\n }\n if (\n changes.has('border') &&\n (this.border || typeof changes.get('border') !== 'undefined')\n ) {\n targetValues.border = this.border;\n }\n if (\n changes.has('rounding') &&\n (this.rounding || typeof changes.get('rounding') !== 'undefined')\n ) {\n targetValues.rounding = this.rounding;\n }\n if (\n changes.has('size') &&\n (this.size !== 'm' || typeof changes.get('size') !== 'undefined')\n ) {\n targetValues.size = this.size as SwatchGroupSizes;\n }\n if (\n changes.has('shape') &&\n (this.shape || typeof changes.get('shape') !== 'undefined')\n ) {\n targetValues.shape = this.shape;\n }\n const passThroughSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (Object.keys(targetValues).length) {\n passThroughSwatchActions.push((swatch) => {\n if (window.__swc.DEBUG) {\n if (\n 'selects' in targetValues &&\n targetValues.selects !== 'multiple' &&\n swatch.mixedValue\n ) {\n window.__swc.warn(\n this,\n `<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"\"`,\n 'https://opensource.adobe.com/spectrum-web-components/components/swatch-group/#multiple',\n {\n type: 'accessibility',\n }\n );\n }\n }\n if ('border' in targetValues)\n swatch.border = targetValues.border;\n if ('rounding' in targetValues)\n swatch.rounding = targetValues.rounding;\n if ('shape' in targetValues) swatch.shape = targetValues.shape;\n if ('size' in targetValues)\n swatch.size = targetValues.size as SwatchGroupSizes;\n });\n }\n return passThroughSwatchActions;\n }\n\n private getSelectionSwatchActions(\n changes: PropertyValues\n ): ((swatch: Swatch) => void)[] {\n const selectionSwatchActions: ((swatch: Swatch) => void)[] = [];\n if (!changes.has('selects')) return selectionSwatchActions;\n if (this.selects) {\n this.setAttribute(\n 'role',\n this.selects === 'single' ? 'radiogroup' : 'group'\n );\n } else {\n this.removeAttribute('role');\n }\n const swatchRoles = {\n single: 'radio',\n multiple: 'checkbox',\n };\n const swatchRole = this.selects ? swatchRoles[this.selects] : 'button';\n selectionSwatchActions.push((swatch) => {\n swatch.setAttribute('role', swatchRole);\n });\n return selectionSwatchActions;\n }\n\n protected override render(): TemplateResult {\n return html`\n <slot\n @change=${this.handleChange}\n @slotchange=${this.manageChange}\n ></slot>\n `;\n }\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n const swatchActions = [\n ...this.getPassthroughSwatchActions(changes),\n ...this.getSelectionSwatchActions(changes),\n ];\n\n // Create Swatch actions that build state to be applied later.\n let nextSelected = new Set(this.selected);\n const currentValues = new Set();\n if (changes.has('selected')) {\n swatchActions.push((swatch) => {\n currentValues.add(swatch.value);\n if (\n nextSelected.has(swatch.value) ||\n (!this.hasUpdated && swatch.selected)\n ) {\n swatch.selected = true;\n } else {\n swatch.selected = false;\n }\n });\n }\n\n const doActions = (): void => {\n nextSelected = new Set(this.selected);\n\n // Do Swatch actions to each Swatch in the collection.\n this.swatches.forEach((swatch) => {\n swatchActions.forEach((action) => {\n action(swatch);\n });\n });\n\n // Apply state built in actions back to the Swatch Group\n if (changes.has('selected')) {\n this._selected = [...nextSelected.values()].filter(\n (selectedValue) => currentValues.has(selectedValue)\n );\n }\n };\n\n if (this.hasUpdated) {\n // Do actions immediately when the element has already updated.\n doActions();\n } else {\n // On first update wait for a `slotchange` event, which is not currently managed\n // by the element lifecycle before allowing Swatch actions to be commited.\n this.shadowRoot.addEventListener(\n 'slotchange',\n () => {\n requestAnimationFrame(doActions);\n },\n { once: true }\n );\n }\n }\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["html", "SizedMixin", "SpectrumElement", "property", "queryAssignedElements", "RovingTabindexController", "MutationController", "styles", "elements", "firstEnabledIndex", "firstSelectedIndex", "el", "index", "presentSet", "swatch", "value", "selected", "oldSelected", "options", "event", "target", "child", "changes", "targetValues", "passThroughSwatchActions", "selectionSwatchActions", "swatchRoles", "swatchRole", "swatchActions", "nextSelected", "currentValues", "doActions", "action", "selectedValue", "__decorateClass"]
7
7
  }
package/stories/swatch-group.stories.js CHANGED
@@ -91,19 +91,19 @@ export default {
91
91
  ]
92
92
  };
93
93
  const colors = [
94
- "--spectrum-global-color-gray-500",
95
- "--spectrum-global-color-red-500",
96
- "--spectrum-global-color-orange-500",
97
- "--spectrum-global-color-yellow-500",
98
- "--spectrum-global-color-chartreuse-500",
99
- "--spectrum-global-color-celery-500",
100
- "--spectrum-global-color-green-500",
101
- "--spectrum-global-color-seafoam-500",
102
- "--spectrum-global-color-blue-500",
103
- "--spectrum-global-color-indigo-500",
104
- "--spectrum-global-color-purple-500",
105
- "--spectrum-global-color-fuchsia-500",
106
- "--spectrum-global-color-magenta-500"
94
+ "--spectrum-gray-700",
95
+ "--spectrum-red-700",
96
+ "--spectrum-orange-700",
97
+ "--spectrum-yellow-700",
98
+ "--spectrum-chartreuse-700",
99
+ "--spectrum-celery-700",
100
+ "--spectrum-green-700",
101
+ "--spectrum-seafoam-700",
102
+ "--spectrum-blue-700",
103
+ "--spectrum-indigo-700",
104
+ "--spectrum-purple-700",
105
+ "--spectrum-fuchsia-700",
106
+ "--spectrum-magenta-700"
107
107
  ];
108
108
  const template = ({
109
109
  border,
@@ -149,16 +149,16 @@ densitySpacious.args = {
149
149
  export const selectsSingle = (args) => template(args);
150
150
  selectsSingle.args = {
151
151
  selects: "single",
152
- selected: ["--spectrum-global-color-yellow-500"]
152
+ selected: ["--spectrum-yellow-500"]
153
153
  };
154
154
  export const selectsMultiple = (args) => template(args);
155
155
  selectsMultiple.args = {
156
156
  selects: "multiple",
157
157
  selected: [
158
- "--spectrum-global-color-celery-500",
159
- "--spectrum-global-color-red-500",
160
- "--spectrum-global-color-purple-500",
161
- "--spectrum-global-color-blue-500"
158
+ "--spectrum-celery-500",
159
+ "--spectrum-red-500",
160
+ "--spectrum-purple-500",
161
+ "--spectrum-blue-500"
162
162
  ]
163
163
  };
164
164
  export const borderLight = (args) => template(args);
package/stories/swatch-group.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch-group.stories.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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/swatch/sp-swatch-group.js';\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport type {\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from '../src/Swatch.js';\nimport { SwatchGroup } from '../src/SwatchGroup.js';\n\ntype Properties = {\n border: SwatchBorder | 'normal';\n density?: 'normal' | 'spacious' | 'compact';\n rounding?: SwatchRounding | 'normal';\n selected?: string[];\n selects?: 'none' | 'single' | 'multiple';\n shape?: SwatchShape | 'normal';\n};\n\nexport default {\n title: 'Swatch group',\n component: 'sp-swatch-group',\n args: {},\n argTypes: {\n border: {\n name: 'border',\n type: { name: 'string', required: false },\n description: 'The border to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'light', 'none'],\n },\n },\n density: {\n name: 'density',\n type: { name: 'string', required: false },\n description: 'The density at which to display the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'compact', 'spacious'],\n },\n },\n rounding: {\n name: 'rounding',\n type: { name: 'string', required: false },\n description: 'The rounding to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'none', 'full'],\n },\n },\n selects: {\n name: 'selects',\n type: { name: 'string', required: false },\n description:\n 'Whether the Swatch Group manages a selection, and whether it is a sinlge or multiple selection.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n shape: {\n name: 'shape',\n type: { name: 'string', required: false },\n description: 'The shape to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'rectangle'],\n },\n },\n },\n decorators: [\n (\n story: () => TemplateResult,\n {\n args: { selected = [] },\n }: {\n args: {\n selected: string[];\n };\n }\n ): TemplateResult => html`\n <div\n @change=${async (event: Event & { target: SwatchGroup }) => {\n await 0;\n if (event.defaultPrevented) return;\n const next = event.target\n .nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n event.target.selected\n )}`;\n }}\n >\n ${story()}\n <div>Selected: ${JSON.stringify(selected)}</div>\n </div>\n `,\n ],\n};\n\nconst colors = [\n '--spectrum-global-color-gray-500',\n '--spectrum-global-color-red-500',\n '--spectrum-global-color-orange-500',\n '--spectrum-global-color-yellow-500',\n '--spectrum-global-color-chartreuse-500',\n '--spectrum-global-color-celery-500',\n '--spectrum-global-color-green-500',\n '--spectrum-global-color-seafoam-500',\n '--spectrum-global-color-blue-500',\n '--spectrum-global-color-indigo-500',\n '--spectrum-global-color-purple-500',\n '--spectrum-global-color-fuchsia-500',\n '--spectrum-global-color-magenta-500',\n];\n\nconst template = ({\n border,\n density,\n rounding,\n selects,\n selected = [],\n shape,\n}: Properties): TemplateResult => {\n const groupLabel = !!selects\n ? selects === 'single'\n ? 'Select a color'\n : 'Selects color(s)'\n : undefined;\n return html`\n <sp-swatch-group\n border=${ifDefined(border === 'normal' ? undefined : border)}\n density=${ifDefined(density === 'normal' ? undefined : density)}\n rounding=${ifDefined(rounding === 'normal' ? undefined : rounding)}\n selects=${ifDefined(selects === 'none' ? undefined : selects)}\n .selected=${selected}\n shape=${ifDefined(shape === 'normal' ? undefined : shape)}\n aria-label=${ifDefined(groupLabel)}\n >\n ${colors.map(\n (color) => html`\n <sp-swatch\n color=\"var(${color})\"\n label=${color}\n value=${color}\n ></sp-swatch>\n `\n )}\n </sp-swatch-group>\n `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\nDefault.args = {} as Properties;\nexport const densityCompact = (args: Properties): TemplateResult =>\n template(args);\ndensityCompact.args = {\n density: 'compact',\n} as Properties;\nexport const densitySpacious = (args: Properties): TemplateResult =>\n template(args);\ndensitySpacious.args = {\n density: 'spacious',\n} as Properties;\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n selects: 'single',\n selected: ['--spectrum-global-color-yellow-500'],\n} as Properties;\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n selects: 'multiple',\n selected: [\n '--spectrum-global-color-celery-500',\n '--spectrum-global-color-red-500',\n '--spectrum-global-color-purple-500',\n '--spectrum-global-color-blue-500',\n ],\n} as Properties;\nexport const borderLight = (args: Properties): TemplateResult => template(args);\nborderLight.args = {\n border: 'light',\n} as Properties;\nexport const borderNone = (args: Properties): TemplateResult => template(args);\nborderNone.args = {\n border: 'none',\n} as Properties;\nexport const roundingNone = (args: Properties): TemplateResult =>\n template(args);\nroundingNone.args = {\n rounding: 'none',\n} as Properties;\nexport const roundingFull = (args: Properties): TemplateResult =>\n template(args);\nroundingFull.args = {\n rounding: 'full',\n} as Properties;\nexport const shapeRectangle = (args: Properties): TemplateResult =>\n template(args);\nshapeRectangle.args = {\n shape: 'rectangle',\n} as Properties;\n"],
5
- "mappings": "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",
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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/swatch/sp-swatch-group.js';\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport type {\n SwatchBorder,\n SwatchRounding,\n SwatchShape,\n} from '../src/Swatch.js';\nimport { SwatchGroup } from '../src/SwatchGroup.js';\n\ntype Properties = {\n border: SwatchBorder | 'normal';\n density?: 'normal' | 'spacious' | 'compact';\n rounding?: SwatchRounding | 'normal';\n selected?: string[];\n selects?: 'none' | 'single' | 'multiple';\n shape?: SwatchShape | 'normal';\n};\n\nexport default {\n title: 'Swatch group',\n component: 'sp-swatch-group',\n args: {},\n argTypes: {\n border: {\n name: 'border',\n type: { name: 'string', required: false },\n description: 'The border to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'light', 'none'],\n },\n },\n density: {\n name: 'density',\n type: { name: 'string', required: false },\n description: 'The density at which to display the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'compact', 'spacious'],\n },\n },\n rounding: {\n name: 'rounding',\n type: { name: 'string', required: false },\n description: 'The rounding to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'none', 'full'],\n },\n },\n selects: {\n name: 'selects',\n type: { name: 'string', required: false },\n description:\n 'Whether the Swatch Group manages a selection, and whether it is a sinlge or multiple selection.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n shape: {\n name: 'shape',\n type: { name: 'string', required: false },\n description: 'The shape to apply to the Swatch children.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['normal', 'rectangle'],\n },\n },\n },\n decorators: [\n (\n story: () => TemplateResult,\n {\n args: { selected = [] },\n }: {\n args: {\n selected: string[];\n };\n }\n ): TemplateResult => html`\n <div\n @change=${async (event: Event & { target: SwatchGroup }) => {\n await 0;\n if (event.defaultPrevented) return;\n const next = event.target\n .nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n event.target.selected\n )}`;\n }}\n >\n ${story()}\n <div>Selected: ${JSON.stringify(selected)}</div>\n </div>\n `,\n ],\n};\n\nconst colors = [\n '--spectrum-gray-700',\n '--spectrum-red-700',\n '--spectrum-orange-700',\n '--spectrum-yellow-700',\n '--spectrum-chartreuse-700',\n '--spectrum-celery-700',\n '--spectrum-green-700',\n '--spectrum-seafoam-700',\n '--spectrum-blue-700',\n '--spectrum-indigo-700',\n '--spectrum-purple-700',\n '--spectrum-fuchsia-700',\n '--spectrum-magenta-700',\n];\n\nconst template = ({\n border,\n density,\n rounding,\n selects,\n selected = [],\n shape,\n}: Properties): TemplateResult => {\n const groupLabel = !!selects\n ? selects === 'single'\n ? 'Select a color'\n : 'Selects color(s)'\n : undefined;\n return html`\n <sp-swatch-group\n border=${ifDefined(border === 'normal' ? undefined : border)}\n density=${ifDefined(density === 'normal' ? undefined : density)}\n rounding=${ifDefined(rounding === 'normal' ? undefined : rounding)}\n selects=${ifDefined(selects === 'none' ? undefined : selects)}\n .selected=${selected}\n shape=${ifDefined(shape === 'normal' ? undefined : shape)}\n aria-label=${ifDefined(groupLabel)}\n >\n ${colors.map(\n (color) => html`\n <sp-swatch\n color=\"var(${color})\"\n label=${color}\n value=${color}\n ></sp-swatch>\n `\n )}\n </sp-swatch-group>\n `;\n};\n\nexport const Default = (args: Properties): TemplateResult => template(args);\nDefault.args = {} as Properties;\nexport const densityCompact = (args: Properties): TemplateResult =>\n template(args);\ndensityCompact.args = {\n density: 'compact',\n} as Properties;\nexport const densitySpacious = (args: Properties): TemplateResult =>\n template(args);\ndensitySpacious.args = {\n density: 'spacious',\n} as Properties;\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n selects: 'single',\n selected: ['--spectrum-yellow-500'],\n} as Properties;\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n selects: 'multiple',\n selected: [\n '--spectrum-celery-500',\n '--spectrum-red-500',\n '--spectrum-purple-500',\n '--spectrum-blue-500',\n ],\n} as Properties;\nexport const borderLight = (args: Properties): TemplateResult => template(args);\nborderLight.args = {\n border: 'light',\n} as Properties;\nexport const borderNone = (args: Properties): TemplateResult => template(args);\nborderNone.args = {\n border: 'none',\n} as Properties;\nexport const roundingNone = (args: Properties): TemplateResult =>\n template(args);\nroundingNone.args = {\n rounding: 'none',\n} as Properties;\nexport const roundingFull = (args: Properties): TemplateResult =>\n template(args);\nroundingFull.args = {\n rounding: 'full',\n} as Properties;\nexport const shapeRectangle = (args: Properties): TemplateResult =>\n template(args);\nshapeRectangle.args = {\n shape: 'rectangle',\n} as Properties;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/test/swatch-group.test.js CHANGED
@@ -204,6 +204,7 @@ describe("Swatch Group", () => {
204
204
  el.selected = [selectedChild.value];
205
205
  await elementUpdated(el);
206
206
  await nextFrame();
207
+ await nextFrame();
207
208
  expect(selectedChild.selected).to.be.true;
208
209
  expect(document.activeElement === selectedChild).to.be.false;
209
210
  await sendKeys({
@@ -260,6 +261,8 @@ describe("Swatch Group - DOM selected", () => {
260
261
  `
261
262
  );
262
263
  await elementUpdated(el);
264
+ await nextFrame();
265
+ await nextFrame();
263
266
  expect(consoleWarnStub.called).to.be.true;
264
267
  const spyCall = consoleWarnStub.getCall(0);
265
268
  expect(
@@ -289,7 +292,7 @@ describe("Swatch Group - DOM selected", () => {
289
292
  await elementUpdated(el);
290
293
  expect(el.selected).to.deep.equal(["color-1", "color-3"]);
291
294
  });
292
- it("merges `selected` and selection from DOM", async () => {
295
+ it("merges `selected` and selection from DOM", async function() {
293
296
  const el = await fixture(html`
294
297
  <sp-swatch-group selects="multiple" .selected=${["color-1"]}>
295
298
  <sp-swatch value="color-0" color="red"></sp-swatch>
@@ -299,9 +302,11 @@ describe("Swatch Group - DOM selected", () => {
299
302
  </sp-swatch-group>
300
303
  `);
301
304
  await elementUpdated(el);
305
+ await nextFrame();
306
+ await nextFrame();
302
307
  expect(el.selected).to.deep.equal(["color-1", "color-3"]);
303
308
  });
304
- it("lazily accepts selection from DOM", async () => {
309
+ it("lazily accepts selection from DOM", async function() {
305
310
  const el = await fixture(html`
306
311
  <sp-swatch-group selects="multiple">
307
312
  <sp-swatch value="color-0" color="red"></sp-swatch>
@@ -311,10 +316,14 @@ describe("Swatch Group - DOM selected", () => {
311
316
  </sp-swatch-group>
312
317
  `);
313
318
  await elementUpdated(el);
319
+ await nextFrame();
320
+ await nextFrame();
314
321
  const color1 = el.querySelector('[value="color-1"]');
315
322
  expect(el.selected).to.deep.equal(["color-3"]);
316
323
  color1.selected = true;
317
324
  await elementUpdated(el);
325
+ await nextFrame();
326
+ await nextFrame();
318
327
  expect(el.selected).to.deep.equal(["color-3", "color-1"]);
319
328
  });
320
329
  it("clears previously selected children when updating `selected`", async () => {
@@ -332,4 +341,37 @@ describe("Swatch Group - DOM selected", () => {
332
341
  expect(el.selected).to.deep.equal(["color-2"]);
333
342
  });
334
343
  });
344
+ describe("Swatch Group - slotted", () => {
345
+ it('manages [selects="single"] selection through multiple slots', async () => {
346
+ const test = await fixture(
347
+ html`
348
+ <div>
349
+ <sp-swatch value="First">First</sp-swatch>
350
+ <sp-swatch value="Second">Second</sp-swatch>
351
+ <sp-swatch value="Third" selected>Third</sp-swatch>
352
+ </div>
353
+ `
354
+ );
355
+ const firstItem = test.querySelector("sp-swatch");
356
+ const thirdItem = test.querySelector("sp-swatch[selected]");
357
+ const shadowRoot = test.attachShadow({ mode: "open" });
358
+ shadowRoot.innerHTML = `
359
+ <sp-swatch-group label="Selects Single Group" selects="single">
360
+ <slot></slot>
361
+ </sp-swatch-group>
362
+ `;
363
+ const el = shadowRoot.querySelector("sp-swatch-group");
364
+ await elementUpdated(el);
365
+ await nextFrame();
366
+ await nextFrame();
367
+ expect(el.selected, '"Third" selected').to.deep.equal(["Third"]);
368
+ expect(firstItem.selected).to.be.false;
369
+ expect(thirdItem.selected).to.be.true;
370
+ firstItem.click();
371
+ await elementUpdated(el);
372
+ expect(el.selected, '"First" selected').to.deep.equal(["First"]);
373
+ expect(firstItem.selected).to.be.true;
374
+ expect(thirdItem.selected).to.be.false;
375
+ });
376
+ });
335
377
  //# sourceMappingURL=swatch-group.test.js.map
package/test/swatch-group.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["swatch-group.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, nextFrame } from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport { Swatch, SwatchGroup } from '../';\nimport { Default } from '../stories/swatch-group.stories.js';\nimport { spy, stub } from 'sinon';\nimport { html } from '@spectrum-web-components/base';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Swatch Group', () => {\n let el: SwatchGroup;\n beforeEach(async () => {\n el = await fixture<SwatchGroup>(Default(Default.args));\n\n await elementUpdated(el);\n });\n testForLitDevWarnings(\n async () => await fixture<SwatchGroup>(Default(Default.args))\n );\n it('loads default swatch accessibly', async () => {\n await expect(el).to.be.accessible();\n });\n it('forwards `border` to children', async () => {\n el.border = 'light';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal('light');\n });\n });\n it('forwards `rounding` to children', async () => {\n el.rounding = 'full';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.rounding).to.equal('full');\n });\n });\n it('forwards `size` to children', async () => {\n el.size = 'xs';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.size).to.equal('xs');\n });\n });\n it('forwards `shape` to children', async () => {\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.shape).to.equal('rectangle');\n });\n });\n it('unsets forwarding', async () => {\n el.border = 'light';\n el.rounding = 'full';\n el.size = 'xs';\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.not.be.undefined;\n expect(child.rounding).to.not.be.undefined;\n expect(child.size).to.not.equal('m');\n expect(child.shape).to.not.be.undefined;\n });\n\n el.border = undefined;\n el.rounding = undefined;\n el.removeAttribute('size');\n el.shape = undefined;\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal(undefined);\n expect(child.rounding).to.equal(undefined);\n expect(child.size).to.equal('m');\n expect(child.shape).to.equal(undefined);\n });\n });\n it('does not dispatch `change` events without `selects` attribute', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild.click();\n\n expect(changeSpy.called).to.be.false;\n expect(el.selected).to.deep.equal([]);\n });\n it('dispatches `change` events as [selects=\"single\"]', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n expect(el.selected).to.deep.equal([selectedChild.value]);\n expect(selectedChild.selected).to.be.true;\n\n selectedChild.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n expect(el.selected).to.deep.equal([selectedChild.value]);\n expect(selectedChild.selected).to.be.true;\n });\n it('can have `change` events prevented', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n });\n it('dispatches `change` events as [selects=\"multiple\"]', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(changeSpy.callCount).to.equal(3);\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n });\n it('filters `selected` when a selected Swatch is removed from the DOM', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild0.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild2.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([selectedChild1.value]);\n\n selectedChild1.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([]);\n });\n it('maintains a single tab stop', 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.children[0]).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('makes the first selected child the single tab stop', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n\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.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n });\n it('focus()es to the first Swatch', async () => {\n el.focus();\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('focus()es to the first selected Swatch', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n el.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n el.focus();\n expect(document.activeElement === selectedChild).to.be.true;\n });\n});\n\ndescribe('Swatch Group - DOM selected', () => {\n describe('dev mode', () => {\n let consoleWarnStub!: ReturnType<typeof stub>;\n before(() => {\n window.__swc.verbose = true;\n consoleWarnStub = stub(console, 'warn');\n });\n afterEach(() => {\n consoleWarnStub.resetHistory();\n });\n after(() => {\n window.__swc.verbose = false;\n consoleWarnStub.restore();\n });\n\n it('warns in Dev Mode when mixed-value attribute is added in sp-swatch when parent sp-swatch-group is not having selects=\"multiple\"', async () => {\n const el = await fixture<SwatchGroup>(\n html`\n <sp-swatch-group selects=\"single\">\n <sp-swatch mixed-value></sp-swatch>\n </sp-swatch-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n\n expect(\n (spyCall.args.at(0) as string).includes(\n '<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"'\n ),\n 'confirm warning message'\n ).to.be.true;\n\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-swatch-group',\n type: 'accessibility',\n level: 'default',\n },\n });\n });\n });\n it('accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\" selected></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('merges `selected` and selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\" .selected=${['color-1']}>\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('lazily accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n const color1 = el.querySelector('[value=\"color-1\"]') as Swatch;\n\n expect(el.selected).to.deep.equal(['color-3']);\n\n color1.selected = true;\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-3', 'color-1']);\n });\n it('clears previously selected children when updating `selected`', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"single\" .selected=${['color-1']}>\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n </sp-swatch-group>\n `);\n await elementUpdated(el);\n expect(el.selected).to.deep.equal(['color-1']);\n el.selected = ['color-2'];\n await elementUpdated(el);\n expect(el.selected).to.deep.equal(['color-2']);\n });\n});\n"],
5
- "mappings": "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",
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, nextFrame } from '@open-wc/testing';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport '@spectrum-web-components/swatch/sp-swatch.js';\nimport { Swatch, SwatchGroup } from '../';\nimport { Default } from '../stories/swatch-group.stories.js';\nimport { spy, stub } from 'sinon';\nimport { html } from '@spectrum-web-components/base';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\ndescribe('Swatch Group', () => {\n let el: SwatchGroup;\n beforeEach(async () => {\n el = await fixture<SwatchGroup>(Default(Default.args));\n\n await elementUpdated(el);\n });\n testForLitDevWarnings(\n async () => await fixture<SwatchGroup>(Default(Default.args))\n );\n it('loads default swatch accessibly', async () => {\n await expect(el).to.be.accessible();\n });\n it('forwards `border` to children', async () => {\n el.border = 'light';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal('light');\n });\n });\n it('forwards `rounding` to children', async () => {\n el.rounding = 'full';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.rounding).to.equal('full');\n });\n });\n it('forwards `size` to children', async () => {\n el.size = 'xs';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.size).to.equal('xs');\n });\n });\n it('forwards `shape` to children', async () => {\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.shape).to.equal('rectangle');\n });\n });\n it('unsets forwarding', async () => {\n el.border = 'light';\n el.rounding = 'full';\n el.size = 'xs';\n el.shape = 'rectangle';\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.not.be.undefined;\n expect(child.rounding).to.not.be.undefined;\n expect(child.size).to.not.equal('m');\n expect(child.shape).to.not.be.undefined;\n });\n\n el.border = undefined;\n el.rounding = undefined;\n el.removeAttribute('size');\n el.shape = undefined;\n await elementUpdated(el);\n\n ([...el.children] as Swatch[]).forEach((child) => {\n expect(child.border).to.equal(undefined);\n expect(child.rounding).to.equal(undefined);\n expect(child.size).to.equal('m');\n expect(child.shape).to.equal(undefined);\n });\n });\n it('does not dispatch `change` events without `selects` attribute', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild.click();\n\n expect(changeSpy.called).to.be.false;\n expect(el.selected).to.deep.equal([]);\n });\n it('dispatches `change` events as [selects=\"single\"]', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n expect(el.selected).to.deep.equal([selectedChild.value]);\n expect(selectedChild.selected).to.be.true;\n\n selectedChild.click();\n\n expect(changeSpy.calledOnce).to.be.true;\n expect(el.selected).to.deep.equal([selectedChild.value]);\n expect(selectedChild.selected).to.be.true;\n });\n it('can have `change` events prevented', async () => {\n el.selects = 'single';\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n\n el.addEventListener('change', (event: Event) => event.preventDefault());\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n\n selectedChild.click();\n\n expect(el.selected).to.deep.equal([]);\n expect(selectedChild.selected).to.be.false;\n });\n it('dispatches `change` events as [selects=\"multiple\"]', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n const changeSpy = spy();\n\n el.addEventListener('change', () => changeSpy());\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(changeSpy.callCount).to.equal(3);\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n });\n it('filters `selected` when a selected Swatch is removed from the DOM', async () => {\n el.selects = 'multiple';\n const selectedChild0 = el.querySelector(\n ':scope > sp-swatch:nth-child(1)'\n ) as Swatch;\n const selectedChild1 = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n const selectedChild2 = el.querySelector(\n ':scope > sp-swatch:nth-child(6)'\n ) as Swatch;\n\n await elementUpdated(selectedChild0);\n\n expect(el.selected).to.deep.equal([]);\n\n selectedChild0.click();\n selectedChild1.click();\n selectedChild2.click();\n\n expect(el.selected).to.deep.equal([\n selectedChild0.value,\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild0.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([\n selectedChild1.value,\n selectedChild2.value,\n ]);\n\n selectedChild2.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([selectedChild1.value]);\n\n selectedChild1.remove();\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal([]);\n });\n it('maintains a single tab stop', 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.children[0]).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('makes the first selected child the single tab stop', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n\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.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n await sendKeys({\n press: 'Tab',\n });\n expect(document.activeElement === selectedChild).to.be.false;\n await sendKeys({\n press: 'Shift+Tab',\n });\n expect(document.activeElement === selectedChild).to.be.true;\n });\n it('focus()es to the first Swatch', async () => {\n el.focus();\n expect(document.activeElement === el.children[0]).to.be.true;\n });\n it('focus()es to the first selected Swatch', async () => {\n const selectedChild = el.querySelector(\n ':scope > sp-swatch:nth-child(4)'\n ) as Swatch;\n expect(selectedChild.selected).to.be.false;\n el.selects = 'single';\n el.selected = [selectedChild.value];\n await elementUpdated(el);\n await nextFrame();\n\n expect(selectedChild.selected).to.be.true;\n el.focus();\n expect(document.activeElement === selectedChild).to.be.true;\n });\n});\n\ndescribe('Swatch Group - DOM selected', () => {\n describe('dev mode', () => {\n let consoleWarnStub!: ReturnType<typeof stub>;\n before(() => {\n window.__swc.verbose = true;\n consoleWarnStub = stub(console, 'warn');\n });\n afterEach(() => {\n consoleWarnStub.resetHistory();\n });\n after(() => {\n window.__swc.verbose = false;\n consoleWarnStub.restore();\n });\n\n it('warns in Dev Mode when mixed-value attribute is added in sp-swatch when parent sp-swatch-group is not having selects=\"multiple\"', async () => {\n const el = await fixture<SwatchGroup>(\n html`\n <sp-swatch-group selects=\"single\">\n <sp-swatch mixed-value></sp-swatch>\n </sp-swatch-group>\n `\n );\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(consoleWarnStub.called).to.be.true;\n const spyCall = consoleWarnStub.getCall(0);\n\n expect(\n (spyCall.args.at(0) as string).includes(\n '<sp-swatch> elements can only leverage the \"mixed-value\" attribute when their <sp-swatch-group> parent element is also leveraging \"selects=\"multiple\"'\n ),\n 'confirm warning message'\n ).to.be.true;\n\n expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({\n data: {\n localName: 'sp-swatch-group',\n type: 'accessibility',\n level: 'default',\n },\n });\n });\n });\n it('accepts selection from DOM', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\" selected></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('merges `selected` and selection from DOM', async function () {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\" .selected=${['color-1']}>\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(el.selected).to.deep.equal(['color-1', 'color-3']);\n });\n it('lazily accepts selection from DOM', async function () {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"multiple\">\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n <sp-swatch value=\"color-3\" color=\"yellow\" selected></sp-swatch>\n </sp-swatch-group>\n `);\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n const color1 = el.querySelector('[value=\"color-1\"]') as Swatch;\n\n expect(el.selected).to.deep.equal(['color-3']);\n\n color1.selected = true;\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n expect(el.selected).to.deep.equal(['color-3', 'color-1']);\n });\n it('clears previously selected children when updating `selected`', async () => {\n const el = await fixture<SwatchGroup>(html`\n <sp-swatch-group selects=\"single\" .selected=${['color-1']}>\n <sp-swatch value=\"color-0\" color=\"red\"></sp-swatch>\n <sp-swatch value=\"color-1\" color=\"green\"></sp-swatch>\n <sp-swatch value=\"color-2\" color=\"blue\"></sp-swatch>\n </sp-swatch-group>\n `);\n await elementUpdated(el);\n expect(el.selected).to.deep.equal(['color-1']);\n el.selected = ['color-2'];\n await elementUpdated(el);\n expect(el.selected).to.deep.equal(['color-2']);\n });\n});\n\ndescribe('Swatch Group - slotted', () => {\n it('manages [selects=\"single\"] selection through multiple slots', async () => {\n const test = await fixture<HTMLDivElement>(\n html`\n <div>\n <sp-swatch value=\"First\">First</sp-swatch>\n <sp-swatch value=\"Second\">Second</sp-swatch>\n <sp-swatch value=\"Third\" selected>Third</sp-swatch>\n </div>\n `\n );\n\n const firstItem = test.querySelector('sp-swatch') as Swatch;\n const thirdItem = test.querySelector('sp-swatch[selected]') as Swatch;\n\n const shadowRoot = test.attachShadow({ mode: 'open' });\n shadowRoot.innerHTML = `\n <sp-swatch-group label=\"Selects Single Group\" selects=\"single\">\n <slot></slot>\n </sp-swatch-group>\n `;\n\n const el = shadowRoot.querySelector('sp-swatch-group') as SwatchGroup;\n await elementUpdated(el);\n // Await test slot change time.\n await nextFrame();\n await nextFrame();\n\n expect(el.selected, '\"Third\" selected').to.deep.equal(['Third']);\n expect(firstItem.selected).to.be.false;\n expect(thirdItem.selected).to.be.true;\n\n firstItem.click();\n await elementUpdated(el);\n\n expect(el.selected, '\"First\" selected').to.deep.equal(['First']);\n expect(firstItem.selected).to.be.true;\n expect(thirdItem.selected).to.be.false;\n });\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }