@spectrum-web-components/radio 0.31.1-react.3 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -16
- package/custom-elements.json +28 -13
- package/package.json +7 -7
- package/src/Radio.d.ts +0 -1
- package/src/Radio.dev.js.map +2 -2
- package/src/Radio.js.map +2 -2
- package/src/RadioGroup.dev.js +1 -1
- package/src/RadioGroup.dev.js.map +2 -2
- package/src/RadioGroup.js +1 -1
- package/src/RadioGroup.js.map +2 -2
- package/src/spectrum-config.js +0 -4
- package/stories/radio.stories.js +0 -16
- package/stories/radio.stories.js.map +2 -2
package/README.md
CHANGED
|
@@ -151,22 +151,6 @@ Emphasized radio buttons are a secondary style for radio buttons. The blue color
|
|
|
151
151
|
</div>
|
|
152
152
|
```
|
|
153
153
|
|
|
154
|
-
### Label Below
|
|
155
|
-
|
|
156
|
-
```html
|
|
157
|
-
<sp-radio label-below>A label</sp-radio>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### Wrapping behavior
|
|
161
|
-
|
|
162
|
-
```html
|
|
163
|
-
<sp-radio label-below>
|
|
164
|
-
Radio with an extraordinarily long label please don't do this but if you did
|
|
165
|
-
it should wrap text when it gets longer than the container which contains
|
|
166
|
-
the radio which has an unacceptably long label
|
|
167
|
-
</sp-radio>
|
|
168
|
-
```
|
|
169
|
-
|
|
170
154
|
### Handling events
|
|
171
155
|
|
|
172
156
|
Event handlers for clicks and other user actions can be registered on an `<sp-radio>` similar to a standard `<input type="radio">` element.
|
package/custom-elements.json
CHANGED
|
@@ -4,19 +4,37 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-radio-group.
|
|
7
|
+
"path": "sp-radio-group.js",
|
|
8
8
|
"declarations": [],
|
|
9
|
-
"exports": [
|
|
9
|
+
"exports": [
|
|
10
|
+
{
|
|
11
|
+
"kind": "custom-element-definition",
|
|
12
|
+
"name": "sp-radio-group",
|
|
13
|
+
"declaration": {
|
|
14
|
+
"name": "RadioGroup",
|
|
15
|
+
"module": "/src/RadioGroup.js"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
]
|
|
10
19
|
},
|
|
11
20
|
{
|
|
12
21
|
"kind": "javascript-module",
|
|
13
|
-
"path": "sp-radio.
|
|
22
|
+
"path": "sp-radio.js",
|
|
14
23
|
"declarations": [],
|
|
15
|
-
"exports": [
|
|
24
|
+
"exports": [
|
|
25
|
+
{
|
|
26
|
+
"kind": "custom-element-definition",
|
|
27
|
+
"name": "sp-radio",
|
|
28
|
+
"declaration": {
|
|
29
|
+
"name": "Radio",
|
|
30
|
+
"module": "/src/Radio.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
]
|
|
16
34
|
},
|
|
17
35
|
{
|
|
18
36
|
"kind": "javascript-module",
|
|
19
|
-
"path": "src/Radio.
|
|
37
|
+
"path": "src/Radio.js",
|
|
20
38
|
"declarations": [
|
|
21
39
|
{
|
|
22
40
|
"kind": "class",
|
|
@@ -172,10 +190,6 @@
|
|
|
172
190
|
}
|
|
173
191
|
],
|
|
174
192
|
"attributes": [
|
|
175
|
-
{
|
|
176
|
-
"description": "Moves the label below the radio button",
|
|
177
|
-
"name": "label-below"
|
|
178
|
-
},
|
|
179
193
|
{
|
|
180
194
|
"description": "Uses the invalid style",
|
|
181
195
|
"name": "invalid",
|
|
@@ -262,14 +276,14 @@
|
|
|
262
276
|
"name": "Radio",
|
|
263
277
|
"declaration": {
|
|
264
278
|
"name": "Radio",
|
|
265
|
-
"module": "src/Radio.
|
|
279
|
+
"module": "src/Radio.js"
|
|
266
280
|
}
|
|
267
281
|
}
|
|
268
282
|
]
|
|
269
283
|
},
|
|
270
284
|
{
|
|
271
285
|
"kind": "javascript-module",
|
|
272
|
-
"path": "src/RadioGroup.
|
|
286
|
+
"path": "src/RadioGroup.js",
|
|
273
287
|
"declarations": [
|
|
274
288
|
{
|
|
275
289
|
"kind": "class",
|
|
@@ -314,7 +328,8 @@
|
|
|
314
328
|
"type": {
|
|
315
329
|
"text": "Radio[]"
|
|
316
330
|
},
|
|
317
|
-
"privacy": "public"
|
|
331
|
+
"privacy": "public",
|
|
332
|
+
"readonly": true
|
|
318
333
|
},
|
|
319
334
|
{
|
|
320
335
|
"kind": "field",
|
|
@@ -428,7 +443,7 @@
|
|
|
428
443
|
"name": "RadioGroup",
|
|
429
444
|
"declaration": {
|
|
430
445
|
"name": "RadioGroup",
|
|
431
|
-
"module": "src/RadioGroup.
|
|
446
|
+
"module": "src/RadioGroup.js"
|
|
432
447
|
}
|
|
433
448
|
}
|
|
434
449
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/radio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.32.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -65,11 +65,11 @@
|
|
|
65
65
|
"lit-html"
|
|
66
66
|
],
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@spectrum-web-components/base": "^0.
|
|
69
|
-
"@spectrum-web-components/field-group": "^0.
|
|
70
|
-
"@spectrum-web-components/help-text": "^0.
|
|
71
|
-
"@spectrum-web-components/reactive-controllers": "^0.
|
|
72
|
-
"@spectrum-web-components/shared": "^0.
|
|
68
|
+
"@spectrum-web-components/base": "^0.32.0",
|
|
69
|
+
"@spectrum-web-components/field-group": "^0.32.0",
|
|
70
|
+
"@spectrum-web-components/help-text": "^0.32.0",
|
|
71
|
+
"@spectrum-web-components/reactive-controllers": "^0.32.0",
|
|
72
|
+
"@spectrum-web-components/shared": "^0.32.0"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@spectrum-css/radio": "^5.0.1"
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"./sp-*.js",
|
|
81
81
|
"./**/*.dev.js"
|
|
82
82
|
],
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "c5f67662ac54d0e37debaf7cbd7c2df60e8b294e"
|
|
84
84
|
}
|
package/src/Radio.d.ts
CHANGED
|
@@ -7,7 +7,6 @@ declare const Radio_base: typeof SpectrumElement & {
|
|
|
7
7
|
* @element sp-radio
|
|
8
8
|
*
|
|
9
9
|
* @slot - text label of the Radio button
|
|
10
|
-
* @attr label-below - Moves the label below the radio button
|
|
11
10
|
* @attr invalid - Uses the invalid style
|
|
12
11
|
* @attr disabled - Uses the disabled style
|
|
13
12
|
* @attr checked - Represents when the input is checked
|
package/src/Radio.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Radio.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,EACA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAE1C,OAAO,iBAAiB;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr invalid - Uses the invalid style\n * @attr disabled - Uses the disabled style\n * @attr checked - Represents when the input is checked\n * @attr value - Identifies this radio button within its radio group\n *\n * @fires change - When the input is interacted with and its state is changed\n */\nexport class Radio extends SizedMixin(\n FocusVisiblePolyfillMixin(SpectrumElement)\n) {\n public static override get styles(): CSSResultArray {\n return [radioStyles];\n }\n\n /**\n * When this control is rendered, focus it automatically\n * @private\n */\n @property({ type: Boolean })\n public override autofocus = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n this.activate();\n }\n\n protected manageAutoFocus(): void {\n if (this.autofocus) {\n /**\n * Trick :focus-visible polyfill into thinking keyboard based focus\n *\n * @private\n **/\n this.dispatchEvent(\n new KeyboardEvent('keydown', {\n code: 'Tab',\n })\n );\n this.focus();\n }\n }\n\n protected activate(): void {\n if (this.checked) {\n return;\n }\n this.checked = true;\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n if (event.code === 'Space') {\n this.activate();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"input\"></div>\n <span id=\"button\"></span>\n <span id=\"label\" role=\"presentation\"><slot></slot></span>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'radio');\n if (!this.hasAttribute('tabindex')) {\n this.tabIndex = 0;\n }\n this.manageAutoFocus();\n this.addEventListener('click', this.activate);\n this.addEventListener('keyup', this.handleKeyup);\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.setAttribute('aria-invalid', 'true');\n } else {\n this.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('checked')) {\n if (this.checked) {\n this.setAttribute('aria-checked', 'true');\n } else {\n this.setAttribute('aria-checked', 'false');\n }\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabeld');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Radio.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Radio.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,6BAAAC,MAAiC,uDAE1C,OAAOC,MAAiB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\n\nimport radioStyles from './radio.css.js';\n\n/**\n * @element sp-radio\n *\n * @slot - text label of the Radio button\n * @attr invalid - Uses the invalid style\n * @attr disabled - Uses the disabled style\n * @attr checked - Represents when the input is checked\n * @attr value - Identifies this radio button within its radio group\n *\n * @fires change - When the input is interacted with and its state is changed\n */\nexport class Radio extends SizedMixin(\n FocusVisiblePolyfillMixin(SpectrumElement)\n) {\n public static override get styles(): CSSResultArray {\n return [radioStyles];\n }\n\n /**\n * When this control is rendered, focus it automatically\n * @private\n */\n @property({ type: Boolean })\n public override autofocus = false;\n\n @property({ type: String, reflect: true })\n public value = '';\n\n @property({ type: Boolean, reflect: true })\n public checked = false;\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n public override click(): void {\n if (this.disabled) {\n return;\n }\n this.activate();\n }\n\n protected manageAutoFocus(): void {\n if (this.autofocus) {\n /**\n * Trick :focus-visible polyfill into thinking keyboard based focus\n *\n * @private\n **/\n this.dispatchEvent(\n new KeyboardEvent('keydown', {\n code: 'Tab',\n })\n );\n this.focus();\n }\n }\n\n protected activate(): void {\n if (this.checked) {\n return;\n }\n this.checked = true;\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n if (event.code === 'Space') {\n this.activate();\n }\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"input\"></div>\n <span id=\"button\"></span>\n <span id=\"label\" role=\"presentation\"><slot></slot></span>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'radio');\n if (!this.hasAttribute('tabindex')) {\n this.tabIndex = 0;\n }\n this.manageAutoFocus();\n this.addEventListener('click', this.activate);\n this.addEventListener('keyup', this.handleKeyup);\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('invalid')) {\n if (this.invalid) {\n this.setAttribute('aria-invalid', 'true');\n } else {\n this.removeAttribute('aria-invalid');\n }\n }\n if (changes.has('checked')) {\n if (this.checked) {\n this.setAttribute('aria-checked', 'true');\n } else {\n this.setAttribute('aria-checked', 'false');\n }\n }\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabeld');\n }\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,EACA,mBAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,6BAAAC,MAAiC,uDAE1C,OAAOC,MAAiB,iBAajB,aAAM,cAAcJ,EACvBG,EAA0BF,CAAe,CAC7C,CAAE,CAFK,kCAYH,KAAgB,UAAY,GAG5B,KAAO,MAAQ,GAGf,KAAO,QAAU,GAGjB,KAAO,SAAW,GAGlB,KAAO,WAAa,GAGpB,KAAO,QAAU,GAGjB,KAAO,SAAW,GA3BlB,WAA2B,QAAyB,CAChD,MAAO,CAACG,CAAW,CACvB,CA2BgB,OAAc,CACtB,KAAK,UAGT,KAAK,SAAS,CAClB,CAEU,iBAAwB,CAC1B,KAAK,YAML,KAAK,cACD,IAAI,cAAc,UAAW,CACzB,KAAM,KACV,CAAC,CACL,EACA,KAAK,MAAM,EAEnB,CAEU,UAAiB,CACnB,KAAK,UAGT,KAAK,QAAU,GACf,KAAK,cACD,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACJ,CAEU,YAAYC,EAA4B,CAC1CA,EAAM,OAAS,SACf,KAAK,SAAS,CAEtB,CAEmB,QAAyB,CACxC,OAAON;AAAA;AAAA;AAAA;AAAA,SAKX,CAEmB,aAAaO,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,OAAQ,OAAO,EAC5B,KAAK,aAAa,UAAU,IAC7B,KAAK,SAAW,GAEpB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,QAAS,KAAK,QAAQ,EAC5C,KAAK,iBAAiB,QAAS,KAAK,WAAW,CACnD,CAEmB,QAAQA,EAA+B,CACtD,MAAM,QAAQA,CAAO,EACjBA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,eAAgB,MAAM,EAExC,KAAK,gBAAgB,cAAc,GAGvCA,EAAQ,IAAI,SAAS,IACjB,KAAK,QACL,KAAK,aAAa,eAAgB,MAAM,EAExC,KAAK,aAAa,eAAgB,OAAO,GAG7CA,EAAQ,IAAI,UAAU,IAClB,KAAK,SACL,KAAK,aAAa,gBAAiB,MAAM,EAEzC,KAAK,gBAAgB,eAAe,EAGhD,CACJ,CAzGoBC,EAAA,CADfL,EAAS,CAAE,KAAM,OAAQ,CAAC,GAXlB,MAYO,yBAGTK,EAAA,CADNL,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAdhC,MAeF,qBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjBjC,MAkBF,uBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBjC,MAqBF,wBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAvBjC,MAwBF,0BAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BjC,MA2BF,uBAGAK,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BjC,MA8BF",
|
|
6
6
|
"names": ["html", "SizedMixin", "SpectrumElement", "property", "FocusVisiblePolyfillMixin", "radioStyles", "event", "changes", "__decorateClass"]
|
|
7
7
|
}
|
package/src/RadioGroup.dev.js
CHANGED
|
@@ -111,7 +111,7 @@ __decorateClass([
|
|
|
111
111
|
property({ type: String })
|
|
112
112
|
], RadioGroup.prototype, "name", 2);
|
|
113
113
|
__decorateClass([
|
|
114
|
-
queryAssignedNodes(
|
|
114
|
+
queryAssignedNodes()
|
|
115
115
|
], RadioGroup.prototype, "defaultNodes", 2);
|
|
116
116
|
__decorateClass([
|
|
117
117
|
property({ reflect: true })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["RadioGroup.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { PropertyValues } from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { FieldGroup } from '@spectrum-web-components/field-group';\n\nimport { Radio } from './Radio.dev.js'\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\n/**\n * @element sp-radio-group\n *\n * @slot - The `sp-radio` elements to display/manage in the group.\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {\n @property({ type: String })\n public name = '';\n\n @queryAssignedNodes(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAaA;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AACtB,SAAS,gCAAgC;AAWlC,aAAM,mBAAmB,0BAA0B,UAAU,EAAE;AAAA,EAA/D;AAAA;AAEH,SAAO,OAAO;AAWd,oCAA2B,IAAI,yBAAgC,MAAM;AAAA,MACjE,cAAc,CAAC,aAAsB;AACjC,eAAO,SAAS,UAAU,CAAC,OAAO;AAC9B,iBAAO,KAAK,WACN,CAAC,GAAG,YAAY,GAAG,UAAU,KAAK,WAClC,CAAC,GAAG;AAAA,QACd,CAAC;AAAA,MACL;AAAA,MACA,oBAAoB,CAAC,OAAc;AAC/B,aAAK,WAAW,GAAG;AAAA,MACvB;AAAA,MACA,UAAU,MAAM,KAAK;AAAA,MACrB,oBAAoB,CAAC,OAAc,CAAC,GAAG;AAAA,IAC3C,CAAC;AAgCD,SAAO,WAAW;AAAA;AAAA,EAnDlB,IAAW,UAAmB;AAC1B,WAAO,KAAK,aAAa;AAAA,MACrB,CAAC,SAAU,gBAAgC;AAAA,IAC/C;AAAA,EACJ;AAAA,EAiBgB,QAAc;AAC1B,SAAK,yBAAyB,MAAM;AAAA,EACxC;AAAA,EAEQ,aAAa,OAAqB;AACtC,QAAI,UAAU,KAAK,UAAU;AACzB;AAAA,IACJ;AACA,UAAM,WAAW,KAAK;AACtB,UAAM,QAAQ,QACP,KAAK,cAAc,mBAAmB,SAAS,IAChD;AAGN,SAAK,WAAW,QAAQ,QAAQ;AAChC,UAAM,eAAe,KAAK;AAAA,MACtB,IAAI,MAAM,UAAU;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AACA,QAAI,CAAC,cAAc;AACf,WAAK,WAAW;AAChB;AAAA,IACJ;AACA,SAAK,eAAe;AAAA,EACxB;AAAA,EAKmB,WAAW,SAAqC;AAC/D,QAAI,CAAC,KAAK,YAAY;AAClB,WAAK,aAAa,QAAQ,YAAY;AACtC,YAAM,eAAe,KAAK;AAAA,QACtB;AAAA,MACJ;AACA,YAAM,oBAAoB,eAAe,aAAa,QAAQ;AAE9D,WAAK,WAAW,qBAAqB,KAAK;AAE1C,UAAI,KAAK,YAAY,KAAK,aAAa,mBAAmB;AACtD,cAAM,gBAAgB,KAAK;AAAA,UACvB,mBAAmB,KAAK;AAAA,QAC5B;AACA,YAAI,eAAe;AACf,wBAAc,UAAU;AAAA,QAC5B;AAAA,MACJ;AAEA,WAAK,WAAW,iBAAiB,UAAU,CAAC,UAAiB;AACzD,cAAM,gBAAgB;AACtB,cAAM,SAAS,MAAM;AACrB,aAAK,aAAa,OAAO,KAAK;AAAA,MAClC,CAAC;AAAA,IACL;AAEA,QAAI,QAAQ,IAAI,UAAU,GAAG;AACzB,WAAK,eAAe;AAAA,IACxB;AAAA,EACJ;AAAA,EAEA,MAAc,iBAAgC;AAC1C,QAAI,iBAAiB;AACrB,QAAI,CAAC,KAAK,YAAY;AAGlB,YAAM,KAAK;AAAA,IACf;AACA,SAAK,QAAQ,IAAI,CAAC,WAAW;AACzB,aAAO,UAAU,KAAK,aAAa,OAAO;AAC1C,uBAAiB,kBAAkB,OAAO;AAAA,IAC9C,CAAC;AACD,QAAI,CAAC,gBAAgB;AACjB,WAAK,WAAW;AAAA,IACpB;AAAA,EACJ;AAAA,EAEmB,mBAAyB;AACxC,SAAK,yBAAyB,kBAAkB;AAAA,EACpD;AACJ;AA5GW;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GADjB,WAEF;AAGA;AAAA,EADN,mBAAmB
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { PropertyValues } from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { FieldGroup } from '@spectrum-web-components/field-group';\n\nimport { Radio } from './Radio.dev.js'\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\n/**\n * @element sp-radio-group\n *\n * @slot - The `sp-radio` elements to display/manage in the group.\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {\n @property({ type: String })\n public name = '';\n\n @queryAssignedNodes()\n public defaultNodes!: Node[];\n\n public get buttons(): Radio[] {\n return this.defaultNodes.filter(\n (node) => (node as HTMLElement) instanceof Radio\n ) as Radio[];\n }\n\n rovingTabindexController = new RovingTabindexController<Radio>(this, {\n focusInIndex: (elements: Radio[]) => {\n return elements.findIndex((el) => {\n return this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n });\n },\n elementEnterAction: (el: Radio) => {\n this.selected = el.value;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: Radio) => !el.disabled,\n });\n\n public override focus(): void {\n this.rovingTabindexController.focus();\n }\n\n private _setSelected(value: string): void {\n if (value === this.selected) {\n return;\n }\n const oldValue = this.selected;\n const radio = value\n ? (this.querySelector(`sp-radio[value=\"${value}\"]`) as Radio)\n : undefined;\n\n // If no matching radio, selected is reset to empty string\n this.selected = radio ? value : '';\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n this.selected = oldValue;\n return;\n }\n this.validateRadios();\n }\n\n @property({ reflect: true })\n public selected = '';\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.setAttribute('role', 'radiogroup');\n const checkedRadio = this.querySelector(\n 'sp-radio[checked]'\n ) as Radio;\n const checkedRadioValue = checkedRadio ? checkedRadio.value : '';\n // Prefer the checked item over the selected value\n this.selected = checkedRadioValue || this.selected;\n // Validate the selected value is actual a radio option\n if (this.selected && this.selected !== checkedRadioValue) {\n const selectedRadio = this.querySelector(\n `sp-radio[value=\"${this.selected}\"]`\n ) as Radio;\n if (selectedRadio) {\n selectedRadio.checked = true;\n }\n }\n\n this.shadowRoot.addEventListener('change', (event: Event) => {\n event.stopPropagation();\n const target = event.target as Radio;\n this._setSelected(target.value);\n });\n }\n\n if (changes.has('selected')) {\n this.validateRadios();\n }\n }\n\n private async validateRadios(): Promise<void> {\n let validSelection = false;\n if (!this.hasUpdated) {\n // Initial validation has to happen after the initial render to allow\n // the buttons to be queries from the rendered <slot> element\n await this.updateComplete;\n }\n this.buttons.map((button) => {\n button.checked = this.selected === button.value;\n validSelection = validSelection || button.checked;\n });\n if (!validSelection) {\n this.selected = '';\n }\n }\n\n protected override handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/RadioGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(l,d,e,t)=>{for(var i=t>1?void 0:t?n(d,e):d,s=l.length-1,o;s>=0;s--)(o=l[s])&&(i=(t?o(d,e,i):o(i))||i);return t&&i&&c(d,e,i),i};import{property as r,queryAssignedNodes as h}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as u}from"@spectrum-web-components/shared/src/focus-visible.js";import{FieldGroup as p}from"@spectrum-web-components/field-group";import{Radio as f}from"./Radio.js";import{RovingTabindexController as v}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";export class RadioGroup extends u(p){constructor(){super(...arguments);this.name="";this.rovingTabindexController=new v(this,{focusInIndex:e=>e.findIndex(t=>this.selected?!t.disabled&&t.value===this.selected:!t.disabled),elementEnterAction:e=>{this.selected=e.value},elements:()=>this.buttons,isFocusableElement:e=>!e.disabled});this.selected=""}get buttons(){return this.defaultNodes.filter(e=>e instanceof f)}focus(){this.rovingTabindexController.focus()}_setSelected(e){if(e===this.selected)return;const t=this.selected,i=e?this.querySelector(`sp-radio[value="${e}"]`):void 0;if(this.selected=i?e:"",!this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))){this.selected=t;return}this.validateRadios()}willUpdate(e){if(!this.hasUpdated){this.setAttribute("role","radiogroup");const t=this.querySelector("sp-radio[checked]"),i=t?t.value:"";if(this.selected=i||this.selected,this.selected&&this.selected!==i){const s=this.querySelector(`sp-radio[value="${this.selected}"]`);s&&(s.checked=!0)}this.shadowRoot.addEventListener("change",s=>{s.stopPropagation();const o=s.target;this._setSelected(o.value)})}e.has("selected")&&this.validateRadios()}async validateRadios(){let e=!1;this.hasUpdated||await this.updateComplete,this.buttons.map(t=>{t.checked=this.selected===t.value,e=e||t.checked}),e||(this.selected="")}handleSlotchange(){this.rovingTabindexController.clearElementCache()}}a([r({type:String})],RadioGroup.prototype,"name",2),a([h(
|
|
1
|
+
"use strict";var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var a=(l,d,e,t)=>{for(var i=t>1?void 0:t?n(d,e):d,s=l.length-1,o;s>=0;s--)(o=l[s])&&(i=(t?o(d,e,i):o(i))||i);return t&&i&&c(d,e,i),i};import{property as r,queryAssignedNodes as h}from"@spectrum-web-components/base/src/decorators.js";import{FocusVisiblePolyfillMixin as u}from"@spectrum-web-components/shared/src/focus-visible.js";import{FieldGroup as p}from"@spectrum-web-components/field-group";import{Radio as f}from"./Radio.js";import{RovingTabindexController as v}from"@spectrum-web-components/reactive-controllers/src/RovingTabindex.js";export class RadioGroup extends u(p){constructor(){super(...arguments);this.name="";this.rovingTabindexController=new v(this,{focusInIndex:e=>e.findIndex(t=>this.selected?!t.disabled&&t.value===this.selected:!t.disabled),elementEnterAction:e=>{this.selected=e.value},elements:()=>this.buttons,isFocusableElement:e=>!e.disabled});this.selected=""}get buttons(){return this.defaultNodes.filter(e=>e instanceof f)}focus(){this.rovingTabindexController.focus()}_setSelected(e){if(e===this.selected)return;const t=this.selected,i=e?this.querySelector(`sp-radio[value="${e}"]`):void 0;if(this.selected=i?e:"",!this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0,composed:!0}))){this.selected=t;return}this.validateRadios()}willUpdate(e){if(!this.hasUpdated){this.setAttribute("role","radiogroup");const t=this.querySelector("sp-radio[checked]"),i=t?t.value:"";if(this.selected=i||this.selected,this.selected&&this.selected!==i){const s=this.querySelector(`sp-radio[value="${this.selected}"]`);s&&(s.checked=!0)}this.shadowRoot.addEventListener("change",s=>{s.stopPropagation();const o=s.target;this._setSelected(o.value)})}e.has("selected")&&this.validateRadios()}async validateRadios(){let e=!1;this.hasUpdated||await this.updateComplete,this.buttons.map(t=>{t.checked=this.selected===t.value,e=e||t.checked}),e||(this.selected="")}handleSlotchange(){this.rovingTabindexController.clearElementCache()}}a([r({type:String})],RadioGroup.prototype,"name",2),a([h()],RadioGroup.prototype,"defaultNodes",2),a([r({reflect:!0})],RadioGroup.prototype,"selected",2);
|
|
2
2
|
//# sourceMappingURL=RadioGroup.js.map
|
package/src/RadioGroup.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["RadioGroup.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { PropertyValues } from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { FieldGroup } from '@spectrum-web-components/field-group';\n\nimport { Radio } from './Radio.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\n/**\n * @element sp-radio-group\n *\n * @slot - The `sp-radio` elements to display/manage in the group.\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {\n @property({ type: String })\n public name = '';\n\n @queryAssignedNodes(
|
|
5
|
-
"mappings": "qNAaA,OACI,YAAAA,EACA,sBAAAC,MACG,kDACP,OAAS,6BAAAC,MAAiC,uDAC1C,OAAS,cAAAC,MAAkB,uCAE3B,OAAS,SAAAC,MAAa,aACtB,OAAS,4BAAAC,MAAgC,sEAWlC,aAAM,mBAAmBH,EAA0BC,CAAU,CAAE,CAA/D,kCAEH,KAAO,KAAO,GAWd,8BAA2B,IAAIE,EAAgC,KAAM,CACjE,aAAeC,GACJA,EAAS,UAAWC,GAChB,KAAK,SACN,CAACA,EAAG,UAAYA,EAAG,QAAU,KAAK,SAClC,CAACA,EAAG,QACb,EAEL,mBAAqBA,GAAc,CAC/B,KAAK,SAAWA,EAAG,KACvB,EACA,SAAU,IAAM,KAAK,QACrB,mBAAqBA,GAAc,CAACA,EAAG,QAC3C,CAAC,EAgCD,KAAO,SAAW,GAnDlB,IAAW,SAAmB,CAC1B,OAAO,KAAK,aAAa,OACpBC,GAAUA,aAAgCJ,CAC/C,CACJ,CAiBgB,OAAc,CAC1B,KAAK,yBAAyB,MAAM,CACxC,CAEQ,aAAaK,EAAqB,CACtC,GAAIA,IAAU,KAAK,SACf,OAEJ,MAAMC,EAAW,KAAK,SAChBC,EAAQF,EACP,KAAK,cAAc,mBAAmBA,KAAS,EAChD,OAWN,GARA,KAAK,SAAWE,EAAQF,EAAQ,GAQ5B,CAPiB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACmB,CACf,KAAK,SAAWC,EAChB,OAEJ,KAAK,eAAe,CACxB,CAKmB,WAAWE,EAAqC,CAC/D,GAAI,CAAC,KAAK,WAAY,CAClB,KAAK,aAAa,OAAQ,YAAY,EACtC,MAAMC,EAAe,KAAK,cACtB,mBACJ,EACMC,EAAoBD,EAAeA,EAAa,MAAQ,GAI9D,GAFA,KAAK,SAAWC,GAAqB,KAAK,SAEtC,KAAK,UAAY,KAAK,WAAaA,EAAmB,CACtD,MAAMC,EAAgB,KAAK,cACvB,mBAAmB,KAAK,YAC5B,EACIA,IACAA,EAAc,QAAU,IAIhC,KAAK,WAAW,iBAAiB,SAAWC,GAAiB,CACzDA,EAAM,gBAAgB,EACtB,MAAMC,EAASD,EAAM,OACrB,KAAK,aAAaC,EAAO,KAAK,CAClC,CAAC,EAGDL,EAAQ,IAAI,UAAU,GACtB,KAAK,eAAe,CAE5B,CAEA,MAAc,gBAAgC,CAC1C,IAAIM,EAAiB,GAChB,KAAK,YAGN,MAAM,KAAK,eAEf,KAAK,QAAQ,IAAKC,GAAW,CACzBA,EAAO,QAAU,KAAK,WAAaA,EAAO,MAC1CD,EAAiBA,GAAkBC,EAAO,OAC9C,CAAC,EACID,IACD,KAAK,SAAW,GAExB,CAEmB,kBAAyB,CACxC,KAAK,yBAAyB,kBAAkB,CACpD,CACJ,CA5GWE,EAAA,CADNpB,EAAS,CAAE,KAAM,MAAO,CAAC,GADjB,WAEF,oBAGAoB,EAAA,CADNnB,EAAmB,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { PropertyValues } from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { FieldGroup } from '@spectrum-web-components/field-group';\n\nimport { Radio } from './Radio.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\n/**\n * @element sp-radio-group\n *\n * @slot - The `sp-radio` elements to display/manage in the group.\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {\n @property({ type: String })\n public name = '';\n\n @queryAssignedNodes()\n public defaultNodes!: Node[];\n\n public get buttons(): Radio[] {\n return this.defaultNodes.filter(\n (node) => (node as HTMLElement) instanceof Radio\n ) as Radio[];\n }\n\n rovingTabindexController = new RovingTabindexController<Radio>(this, {\n focusInIndex: (elements: Radio[]) => {\n return elements.findIndex((el) => {\n return this.selected\n ? !el.disabled && el.value === this.selected\n : !el.disabled;\n });\n },\n elementEnterAction: (el: Radio) => {\n this.selected = el.value;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: Radio) => !el.disabled,\n });\n\n public override focus(): void {\n this.rovingTabindexController.focus();\n }\n\n private _setSelected(value: string): void {\n if (value === this.selected) {\n return;\n }\n const oldValue = this.selected;\n const radio = value\n ? (this.querySelector(`sp-radio[value=\"${value}\"]`) as Radio)\n : undefined;\n\n // If no matching radio, selected is reset to empty string\n this.selected = radio ? value : '';\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n bubbles: true,\n composed: true,\n })\n );\n if (!applyDefault) {\n this.selected = oldValue;\n return;\n }\n this.validateRadios();\n }\n\n @property({ reflect: true })\n public selected = '';\n\n protected override willUpdate(changes: PropertyValues<this>): void {\n if (!this.hasUpdated) {\n this.setAttribute('role', 'radiogroup');\n const checkedRadio = this.querySelector(\n 'sp-radio[checked]'\n ) as Radio;\n const checkedRadioValue = checkedRadio ? checkedRadio.value : '';\n // Prefer the checked item over the selected value\n this.selected = checkedRadioValue || this.selected;\n // Validate the selected value is actual a radio option\n if (this.selected && this.selected !== checkedRadioValue) {\n const selectedRadio = this.querySelector(\n `sp-radio[value=\"${this.selected}\"]`\n ) as Radio;\n if (selectedRadio) {\n selectedRadio.checked = true;\n }\n }\n\n this.shadowRoot.addEventListener('change', (event: Event) => {\n event.stopPropagation();\n const target = event.target as Radio;\n this._setSelected(target.value);\n });\n }\n\n if (changes.has('selected')) {\n this.validateRadios();\n }\n }\n\n private async validateRadios(): Promise<void> {\n let validSelection = false;\n if (!this.hasUpdated) {\n // Initial validation has to happen after the initial render to allow\n // the buttons to be queries from the rendered <slot> element\n await this.updateComplete;\n }\n this.buttons.map((button) => {\n button.checked = this.selected === button.value;\n validSelection = validSelection || button.checked;\n });\n if (!validSelection) {\n this.selected = '';\n }\n }\n\n protected override handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAaA,OACI,YAAAA,EACA,sBAAAC,MACG,kDACP,OAAS,6BAAAC,MAAiC,uDAC1C,OAAS,cAAAC,MAAkB,uCAE3B,OAAS,SAAAC,MAAa,aACtB,OAAS,4BAAAC,MAAgC,sEAWlC,aAAM,mBAAmBH,EAA0BC,CAAU,CAAE,CAA/D,kCAEH,KAAO,KAAO,GAWd,8BAA2B,IAAIE,EAAgC,KAAM,CACjE,aAAeC,GACJA,EAAS,UAAWC,GAChB,KAAK,SACN,CAACA,EAAG,UAAYA,EAAG,QAAU,KAAK,SAClC,CAACA,EAAG,QACb,EAEL,mBAAqBA,GAAc,CAC/B,KAAK,SAAWA,EAAG,KACvB,EACA,SAAU,IAAM,KAAK,QACrB,mBAAqBA,GAAc,CAACA,EAAG,QAC3C,CAAC,EAgCD,KAAO,SAAW,GAnDlB,IAAW,SAAmB,CAC1B,OAAO,KAAK,aAAa,OACpBC,GAAUA,aAAgCJ,CAC/C,CACJ,CAiBgB,OAAc,CAC1B,KAAK,yBAAyB,MAAM,CACxC,CAEQ,aAAaK,EAAqB,CACtC,GAAIA,IAAU,KAAK,SACf,OAEJ,MAAMC,EAAW,KAAK,SAChBC,EAAQF,EACP,KAAK,cAAc,mBAAmBA,KAAS,EAChD,OAWN,GARA,KAAK,SAAWE,EAAQF,EAAQ,GAQ5B,CAPiB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,GACT,SAAU,EACd,CAAC,CACL,EACmB,CACf,KAAK,SAAWC,EAChB,OAEJ,KAAK,eAAe,CACxB,CAKmB,WAAWE,EAAqC,CAC/D,GAAI,CAAC,KAAK,WAAY,CAClB,KAAK,aAAa,OAAQ,YAAY,EACtC,MAAMC,EAAe,KAAK,cACtB,mBACJ,EACMC,EAAoBD,EAAeA,EAAa,MAAQ,GAI9D,GAFA,KAAK,SAAWC,GAAqB,KAAK,SAEtC,KAAK,UAAY,KAAK,WAAaA,EAAmB,CACtD,MAAMC,EAAgB,KAAK,cACvB,mBAAmB,KAAK,YAC5B,EACIA,IACAA,EAAc,QAAU,IAIhC,KAAK,WAAW,iBAAiB,SAAWC,GAAiB,CACzDA,EAAM,gBAAgB,EACtB,MAAMC,EAASD,EAAM,OACrB,KAAK,aAAaC,EAAO,KAAK,CAClC,CAAC,EAGDL,EAAQ,IAAI,UAAU,GACtB,KAAK,eAAe,CAE5B,CAEA,MAAc,gBAAgC,CAC1C,IAAIM,EAAiB,GAChB,KAAK,YAGN,MAAM,KAAK,eAEf,KAAK,QAAQ,IAAKC,GAAW,CACzBA,EAAO,QAAU,KAAK,WAAaA,EAAO,MAC1CD,EAAiBA,GAAkBC,EAAO,OAC9C,CAAC,EACID,IACD,KAAK,SAAW,GAExB,CAEmB,kBAAyB,CACxC,KAAK,yBAAyB,kBAAkB,CACpD,CACJ,CA5GWE,EAAA,CADNpB,EAAS,CAAE,KAAM,MAAO,CAAC,GADjB,WAEF,oBAGAoB,EAAA,CADNnB,EAAmB,GAJX,WAKF,4BAqDAmB,EAAA,CADNpB,EAAS,CAAE,QAAS,EAAK,CAAC,GAzDlB,WA0DF",
|
|
6
6
|
"names": ["property", "queryAssignedNodes", "FocusVisiblePolyfillMixin", "FieldGroup", "Radio", "RovingTabindexController", "elements", "el", "node", "value", "oldValue", "radio", "changes", "checkedRadio", "checkedRadioValue", "selectedRadio", "event", "target", "validSelection", "button", "__decorateClass"]
|
|
7
7
|
}
|
package/src/spectrum-config.js
CHANGED
|
@@ -92,10 +92,6 @@ const config = {
|
|
|
92
92
|
hoist: true,
|
|
93
93
|
},
|
|
94
94
|
converter.classToHost(),
|
|
95
|
-
converter.classToAttribute(
|
|
96
|
-
'spectrum-Radio--labelBelow',
|
|
97
|
-
'label-below'
|
|
98
|
-
),
|
|
99
95
|
converter.pseudoToAttribute('disabled', 'disabled'),
|
|
100
96
|
converter.pseudoToAttribute('checked', 'checked'),
|
|
101
97
|
converter.classToAttribute('is-invalid', 'invalid'),
|
package/stories/radio.stories.js
CHANGED
|
@@ -91,12 +91,6 @@ export const Disabled = (args) => renderRadio(args);
|
|
|
91
91
|
Disabled.args = {
|
|
92
92
|
disabled: true
|
|
93
93
|
};
|
|
94
|
-
export const labelBelow = (args) => {
|
|
95
|
-
return html`
|
|
96
|
-
<sp-radio label-below ${spreadProps(args)}>Radio</sp-radio>
|
|
97
|
-
`;
|
|
98
|
-
};
|
|
99
|
-
labelBelow.storyName = "Label below";
|
|
100
94
|
const values = {
|
|
101
95
|
first: 1,
|
|
102
96
|
second: 2,
|
|
@@ -123,16 +117,6 @@ export const horizontalGroup = () => {
|
|
|
123
117
|
</sp-radio-group>
|
|
124
118
|
`;
|
|
125
119
|
};
|
|
126
|
-
export const horizontalLabelBelowGroup = () => {
|
|
127
|
-
return html`
|
|
128
|
-
<sp-radio-group horizontal selected="first" name="group-example">
|
|
129
|
-
<sp-radio value="first" label-below>Option 1</sp-radio>
|
|
130
|
-
<sp-radio value="second" label-below>Option 2</sp-radio>
|
|
131
|
-
<sp-radio value="third" label-below>Option 3</sp-radio>
|
|
132
|
-
<sp-radio value="fourth" label-below>Option 4</sp-radio>
|
|
133
|
-
</sp-radio-group>
|
|
134
|
-
`;
|
|
135
|
-
};
|
|
136
120
|
export const tabIndexExample = () => {
|
|
137
121
|
return html`
|
|
138
122
|
<sp-radio-group vertical name="group-example">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["radio.stories.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n component: 'sp-radio',\n title: 'Radio',\n argTypes: {\n checked: {\n name: 'checked',\n type: { name: 'boolean', required: false },\n description: 'Represents when the input is checked',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: 'boolean',\n },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n description: \"Set the button's state to emphasized.\",\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n invalid: {\n name: 'invalid',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n checked: false,\n disabled: false,\n emphasized: false,\n invalid: false,\n },\n};\n\nexport interface StoryArgs {\n checked?: boolean;\n disabled?: boolean;\n emphasized?: boolean;\n invalid?: boolean;\n readonly?: boolean;\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nfunction renderRadio(args: StoryArgs): TemplateResult {\n return html`\n <sp-radio ${spreadProps(args)}>Radio</sp-radio>\n `;\n}\nexport const Default = (args: StoryArgs): TemplateResult => renderRadio(args);\n\nexport const readonly = (args: StoryArgs): TemplateResult =>\n renderRadio({\n ...args,\n readonly: true,\n });\nreadonly.args = {\n checked: true,\n};\n\nexport const Emphasized = (args: StoryArgs): TemplateResult =>\n renderRadio(args);\nEmphasized.args = {\n checked: true,\n emphasized: true,\n};\n\nexport const Autofocus = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-radio autofocus ${spreadProps(args)}>Radio</sp-radio>\n `;\n};\n\nexport const Invalid = (args: StoryArgs): TemplateResult => renderRadio(args);\nInvalid.args = {\n invalid: true,\n};\n\nexport const Disabled = (args: StoryArgs): TemplateResult => renderRadio(args);\nDisabled.args = {\n disabled: true,\n};\n\
|
|
5
|
-
"mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB;AAE5B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aACI;AAAA,MACJ,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,MACR,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,EACb;AACJ;AAYA,SAAS,YAAY,MAAiC;AAClD,SAAO;AAAA,oBACS,YAAY,IAAI;AAAA;AAEpC;AACO,aAAM,UAAU,CAAC,SAAoC,YAAY,IAAI;AAErE,aAAM,WAAW,CAAC,SACrB,YAAY;AAAA,EACR,GAAG;AAAA,EACH,UAAU;AACd,CAAC;AACL,SAAS,OAAO;AAAA,EACZ,SAAS;AACb;AAEO,aAAM,aAAa,CAAC,SACvB,YAAY,IAAI;AACpB,WAAW,OAAO;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAChB;AAEO,aAAM,YAAY,CAAC,SAAoC;AAC1D,SAAO;AAAA,8BACmB,YAAY,IAAI;AAAA;AAE9C;AAEO,aAAM,UAAU,CAAC,SAAoC,YAAY,IAAI;AAC5E,QAAQ,OAAO;AAAA,EACX,SAAS;AACb;AAEO,aAAM,WAAW,CAAC,SAAoC,YAAY,IAAI;AAC7E,SAAS,OAAO;AAAA,EACZ,UAAU;AACd;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n component: 'sp-radio',\n title: 'Radio',\n argTypes: {\n checked: {\n name: 'checked',\n type: { name: 'boolean', required: false },\n description: 'Represents when the input is checked',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: 'boolean',\n },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n description: \"Set the button's state to emphasized.\",\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n invalid: {\n name: 'invalid',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n checked: false,\n disabled: false,\n emphasized: false,\n invalid: false,\n },\n};\n\nexport interface StoryArgs {\n checked?: boolean;\n disabled?: boolean;\n emphasized?: boolean;\n invalid?: boolean;\n readonly?: boolean;\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nfunction renderRadio(args: StoryArgs): TemplateResult {\n return html`\n <sp-radio ${spreadProps(args)}>Radio</sp-radio>\n `;\n}\nexport const Default = (args: StoryArgs): TemplateResult => renderRadio(args);\n\nexport const readonly = (args: StoryArgs): TemplateResult =>\n renderRadio({\n ...args,\n readonly: true,\n });\nreadonly.args = {\n checked: true,\n};\n\nexport const Emphasized = (args: StoryArgs): TemplateResult =>\n renderRadio(args);\nEmphasized.args = {\n checked: true,\n emphasized: true,\n};\n\nexport const Autofocus = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-radio autofocus ${spreadProps(args)}>Radio</sp-radio>\n `;\n};\n\nexport const Invalid = (args: StoryArgs): TemplateResult => renderRadio(args);\nInvalid.args = {\n invalid: true,\n};\n\nexport const Disabled = (args: StoryArgs): TemplateResult => renderRadio(args);\nDisabled.args = {\n disabled: true,\n};\n\nconst values = {\n first: 1,\n second: 2,\n third: 3,\n fourth: 4,\n};\n\nexport const groupExample = (): TemplateResult => {\n return html`\n <sp-radio-group vertical selected=\"1\" name=\"group-example\">\n <sp-radio value=${values.first}>Option 1</sp-radio>\n <sp-radio value=${values.second}>Option 2</sp-radio>\n <sp-radio value=${values.third}>Option 3</sp-radio>\n <sp-radio value=${values.fourth}>Option 4</sp-radio>\n </sp-radio-group>\n `;\n};\n\nexport const horizontalGroup = (): TemplateResult => {\n return html`\n <sp-radio-group horizontal selected=\"first\" name=\"group-example\">\n <sp-radio value=\"first\">Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n <sp-radio value=\"fourth\">Option 4</sp-radio>\n </sp-radio-group>\n `;\n};\n\nexport const tabIndexExample = (): TemplateResult => {\n return html`\n <sp-radio-group vertical name=\"group-example\">\n <sp-radio emphasized value=\"zero\" tabindex=\"0\">\n Tab Index 0\n </sp-radio>\n <sp-radio disabled value=\"three\" tabindex=\"3\">Tab Index 3</sp-radio>\n <sp-radio value=\"one\" tabindex=\"1\" autofocus>Tab Index 1</sp-radio>\n <sp-radio value=\"four\" tabindex=\"4\">Tab Index 4</sp-radio>\n <sp-radio invalid value=\"two\" tabindex=\"2\">Tab Index 2</sp-radio>\n </sp-radio-group>\n `;\n};\n\nexport const horizontalTabIndexExample = (): TemplateResult => {\n return html`\n <sp-radio-group horizontal name=\"group-example\">\n <sp-radio emphasized value=\"zero\" tabindex=\"0\">\n Tab Index 0\n </sp-radio>\n <sp-radio disabled value=\"three\" tabindex=\"3\">Tab Index 3</sp-radio>\n <sp-radio value=\"one\" tabindex=\"1\" autofocus>Tab Index 1</sp-radio>\n <sp-radio value=\"four\" tabindex=\"4\">Tab Index 4</sp-radio>\n <sp-radio invalid value=\"two\" tabindex=\"2\">Tab Index 2</sp-radio>\n </sp-radio-group>\n `;\n};\n\ntabIndexExample.storyName = 'Tab index example';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|