@spectrum-web-components/radio 0.9.12 → 0.9.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +1 -1
- package/package.json +6 -6
- package/src/RadioGroup.d.ts +1 -2
- package/src/RadioGroup.js +27 -24
- package/src/RadioGroup.js.map +1 -1
package/custom-elements.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/radio",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.13",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"lit-html"
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@spectrum-web-components/base": "^0.5.
|
|
50
|
-
"@spectrum-web-components/field-group": "^0.5.
|
|
51
|
-
"@spectrum-web-components/help-text": "^0.1.
|
|
49
|
+
"@spectrum-web-components/base": "^0.5.8",
|
|
50
|
+
"@spectrum-web-components/field-group": "^0.5.10",
|
|
51
|
+
"@spectrum-web-components/help-text": "^0.1.9",
|
|
52
52
|
"@spectrum-web-components/reactive-controllers": "^0.2.4",
|
|
53
|
-
"@spectrum-web-components/shared": "^0.14.
|
|
53
|
+
"@spectrum-web-components/shared": "^0.14.3",
|
|
54
54
|
"tslib": "^2.0.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"sideEffects": [
|
|
62
62
|
"./sp-*.js"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "e5cd4a0db2201b8126eb9133ac3c24172d086359"
|
|
65
65
|
}
|
package/src/RadioGroup.d.ts
CHANGED
|
@@ -20,8 +20,7 @@ export declare class RadioGroup extends RadioGroup_base {
|
|
|
20
20
|
focus(): void;
|
|
21
21
|
private _setSelected;
|
|
22
22
|
selected: string;
|
|
23
|
-
protected
|
|
24
|
-
protected updated(changes: PropertyValues<this>): void;
|
|
23
|
+
protected willUpdate(changes: PropertyValues<this>): void;
|
|
25
24
|
private validateRadios;
|
|
26
25
|
protected handleSlotchange(): void;
|
|
27
26
|
}
|
package/src/RadioGroup.js
CHANGED
|
@@ -71,37 +71,40 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
|
|
|
71
71
|
}
|
|
72
72
|
this.validateRadios();
|
|
73
73
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
74
|
+
willUpdate(changes) {
|
|
75
|
+
if (!this.hasUpdated) {
|
|
76
|
+
this.setAttribute('role', 'radiogroup');
|
|
77
|
+
const checkedRadio = this.querySelector('sp-radio[checked]');
|
|
78
|
+
const checkedRadioValue = checkedRadio ? checkedRadio.value : '';
|
|
79
|
+
// Prefer the checked item over the selected value
|
|
80
|
+
this.selected = checkedRadioValue || this.selected;
|
|
81
|
+
// Validate the selected value is actual a radio option
|
|
82
|
+
if (this.selected && this.selected !== checkedRadioValue) {
|
|
83
|
+
const selectedRadio = this.querySelector(`sp-radio[value="${this.selected}"]`);
|
|
84
|
+
if (!selectedRadio) {
|
|
85
|
+
this.selected = '';
|
|
86
|
+
}
|
|
87
|
+
else {
|
|
88
|
+
selectedRadio.checked = true;
|
|
89
|
+
}
|
|
89
90
|
}
|
|
91
|
+
this.shadowRoot.addEventListener('change', (event) => {
|
|
92
|
+
event.stopPropagation();
|
|
93
|
+
const target = event.target;
|
|
94
|
+
this._setSelected(target.value);
|
|
95
|
+
});
|
|
90
96
|
}
|
|
91
|
-
this.shadowRoot.addEventListener('change', (event) => {
|
|
92
|
-
event.stopPropagation();
|
|
93
|
-
const target = event.target;
|
|
94
|
-
this._setSelected(target.value);
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
updated(changes) {
|
|
98
|
-
super.updated(changes);
|
|
99
97
|
if (changes.has('selected')) {
|
|
100
98
|
this.validateRadios();
|
|
101
99
|
}
|
|
102
100
|
}
|
|
103
|
-
validateRadios() {
|
|
101
|
+
async validateRadios() {
|
|
104
102
|
let validSelection = false;
|
|
103
|
+
if (!this.hasUpdated) {
|
|
104
|
+
// Initial validation has to happen after the initial render to allow
|
|
105
|
+
// the buttons to be queries from the rendered <slot> element
|
|
106
|
+
await this.updateComplete;
|
|
107
|
+
}
|
|
105
108
|
this.buttons.map((button) => {
|
|
106
109
|
button.checked = this.selected === button.value;
|
|
107
110
|
validSelection = validSelection || button.checked;
|
package/src/RadioGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["RadioGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAGF,OAAO,EACH,QAAQ,EACR,kBAAkB,GACrB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,qEAAqE,CAAC;AAE/G;;;;;;;;GAQG;AACH,MAAM,OAAO,UAAW,SAAQ,yBAAyB,CAAC,UAAU,CAAC;IAArE;;QAEW,SAAI,GAAG,EAAE,CAAC;QAWjB,6BAAwB,GAAG,IAAI,wBAAwB,CAAQ,IAAI,EAAE;YACjE,YAAY,EAAE,CAAC,QAAiB,EAAE,EAAE;gBAChC,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE;oBAC7B,OAAO,IAAI,CAAC,QAAQ;wBAChB,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,IAAI,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ;wBAC5C,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC;gBACvB,CAAC,CAAC,CAAC;YACP,CAAC;YACD,kBAAkB,EAAE,CAAC,EAAS,EAAE,EAAE;gBAC9B,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,KAAK,CAAC;YAC7B,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO;YAC5B,kBAAkB,EAAE,CAAC,EAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ;SAClD,CAAC,CAAC;QAgCI,aAAQ,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["RadioGroup.ts"],"names":[],"mappings":"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","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 this.selected = '';\n } else {\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"]}
|