@spectrum-web-components/radio 0.9.6 → 0.9.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -8
- package/src/Radio.js +3 -0
- package/src/Radio.js.map +1 -1
- package/src/RadioGroup.js +1 -4
- package/src/RadioGroup.js.map +1 -1
- package/src/radio.css.js +1 -1
- package/src/radio.css.js.map +1 -1
- package/src/spectrum-radio.css.js +1 -1
- package/src/spectrum-radio.css.js.map +1 -1
- package/stories/radio.stories.js +174 -0
- package/stories/radio.stories.js.map +1 -0
- package/test/benchmark/test-basic.js +23 -0
- package/test/benchmark/test-basic.js.map +1 -0
- package/test/radio-group.test.js +418 -0
- package/test/radio-group.test.js.map +1 -0
- package/test/radio.test-vrt.js +15 -0
- package/test/radio.test-vrt.js.map +1 -0
- package/test/radio.test.js +148 -0
- package/test/radio.test.js.map +1 -0
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.9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,20 +46,20 @@
|
|
|
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.
|
|
52
|
-
"@spectrum-web-components/reactive-controllers": "^0.2.
|
|
53
|
-
"@spectrum-web-components/shared": "^0.
|
|
49
|
+
"@spectrum-web-components/base": "^0.5.5",
|
|
50
|
+
"@spectrum-web-components/field-group": "^0.5.6",
|
|
51
|
+
"@spectrum-web-components/help-text": "^0.1.5",
|
|
52
|
+
"@spectrum-web-components/reactive-controllers": "^0.2.2",
|
|
53
|
+
"@spectrum-web-components/shared": "^0.14.0",
|
|
54
54
|
"tslib": "^2.0.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@spectrum-css/radio": "^3.0.
|
|
57
|
+
"@spectrum-css/radio": "^3.0.20"
|
|
58
58
|
},
|
|
59
59
|
"types": "./src/index.d.ts",
|
|
60
60
|
"customElements": "custom-elements.json",
|
|
61
61
|
"sideEffects": [
|
|
62
62
|
"./sp-*.js"
|
|
63
63
|
],
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "bdff893e2b95aba7737c58d01c6ac68861cb8b2e"
|
|
65
65
|
}
|
package/src/Radio.js
CHANGED
package/src/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EAEJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AAEjG,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,KAAM,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAArE;;QAKI;;;WAGG;QAEI,cAAS,GAAG,KAAK,CAAC;QAGlB,UAAK,GAAG,EAAE,CAAC;QAGX,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAG,KAAK,CAAC;QAGnB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.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 {\n CSSResultArray,\n html,\n PropertyValues,\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 label-below - Moves the label below 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 FocusVisiblePolyfillMixin(SpectrumElement) {\n public static 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 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 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 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 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 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"]}
|
package/src/RadioGroup.js
CHANGED
|
@@ -88,10 +88,7 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
|
|
|
88
88
|
selectedRadio.checked = true;
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
this.addEventListener('change', (event) => {
|
|
92
|
-
if (event.target === this) {
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
91
|
+
this.shadowRoot.addEventListener('change', (event) => {
|
|
95
92
|
event.stopPropagation();
|
|
96
93
|
const target = event.target;
|
|
97
94
|
this._setSelected(target.value);
|
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 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 firstUpdated(changes: PropertyValues<this>): void {\n super.firstUpdated(changes);\n this.setAttribute('role', 'radiogroup');\n const checkedRadio = this.querySelector('sp-radio[checked]') 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 protected updated(changes: PropertyValues<this>): void {\n super.updated(changes);\n if (changes.has('selected')) {\n this.validateRadios();\n }\n }\n\n private validateRadios(): void {\n let validSelection = false;\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 handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n}\n"]}
|
package/src/radio.css.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
Copyright
|
|
2
|
+
Copyright 2022 Adobe. All rights reserved.
|
|
3
3
|
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
4
|
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
5
|
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
package/src/radio.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.css.js","sourceRoot":"","sources":["radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}:host{--spectrum-radio-label-margin-top:var(\n--spectrum-global-dimension-size-75,6px\n)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"radio.css.js","sourceRoot":"","sources":["radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAC;AACF,eAAe,MAAM,CAAC","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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}:host{--spectrum-radio-label-margin-top:var(\n--spectrum-global-dimension-size-75,6px\n)}:host(:focus){outline:none}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
Copyright
|
|
2
|
+
Copyright 2022 Adobe. All rights reserved.
|
|
3
3
|
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
4
|
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
5
|
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-radio.css.js","sourceRoot":"","sources":["spectrum-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"spectrum-radio.css.js","sourceRoot":"","sources":["spectrum-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHjB,CAAC;AACF,eAAe,MAAM,CAAC","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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-radio-circle-dot-size:var(\n--spectrum-radio-m-circle-dot-size,var(--spectrum-global-dimension-static-size-50)\n);--spectrum-radio-circle-diameter:var(\n--spectrum-radio-m-circle-diameter,var(--spectrum-alias-control-two-size-m)\n);--spectrum-radio-circle-border-size:var(\n--spectrum-radio-m-circle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-radio-text-size:var(\n--spectrum-radio-m-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-radio-text-gap:var(\n--spectrum-radio-m-text-gap,var(--spectrum-global-dimension-size-125)\n);--spectrum-radio-text-font-style:var(\n--spectrum-radio-m-text-font-style,var(--spectrum-global-font-style-regular)\n);--spectrum-radio-text-font-weight:var(\n--spectrum-radio-m-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-radio-text-line-height:var(\n--spectrum-radio-m-text-line-height,var(--spectrum-alias-component-text-line-height)\n);--spectrum-radio-height:var(\n--spectrum-radio-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-radio-radius:calc(var(--spectrum-radio-circle-diameter)/2);--spectrum-radio-border-width-checked:calc(var(--spectrum-radio-circle-diameter)/2 - var(--spectrum-radio-circle-dot-size)/2);--spectrum-radio-labelbelow-label-margin:var(\n--spectrum-global-dimension-size-50\n) 0 0 0;--spectrum-radio-labelbelow-height:auto;--spectrum-radio-label-margin-top:var(--spectrum-global-dimension-size-75)}:host{align-items:flex-start;display:inline-flex;max-width:100%;min-height:var(--spectrum-radio-height);position:relative;vertical-align:top}#input{box-sizing:border-box;cursor:pointer;font-family:inherit;font-size:100%;height:100%;line-height:1.15;margin:0;opacity:0;overflow:visible;padding:0;position:absolute;width:100%;z-index:1}:host([disabled]) #input{cursor:default}:host([checked]) #input+#button:before{border-width:var(\n--spectrum-radio-border-width-checked\n)}:host(.focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host(:focus-visible) #input+#button:after{margin:calc(var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*-1)}:host([dir=ltr]) #label{text-align:left}:host([dir=rtl]) #label{text-align:right}:host([dir=ltr]) #label{margin-left:var(\n--spectrum-radio-text-gap\n)}:host([dir=rtl]) #label{margin-right:var(\n--spectrum-radio-text-gap\n)}#label{font-size:var(--spectrum-radio-text-size);font-style:var(--spectrum-radio-text-font-style);font-weight:var(--spectrum-radio-text-font-weight);line-height:var(--spectrum-radio-text-line-height);margin-top:var(\n--spectrum-radio-label-margin-top\n);transition:color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}#button{box-sizing:border-box;flex-grow:0;flex-shrink:0;height:var(--spectrum-radio-circle-diameter);margin:calc((var(--spectrum-radio-height) - var(--spectrum-radio-circle-diameter))/2) 0;position:relative;width:var(--spectrum-radio-circle-diameter)}#button:before{border-radius:var(--spectrum-radio-radius);border-style:solid;border-width:var(--spectrum-radio-circle-border-size);box-sizing:border-box;content:\"\";display:block;height:var(--spectrum-radio-circle-diameter);position:absolute;transition:border var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;width:var(--spectrum-radio-circle-diameter);z-index:0}#button:after{border-radius:100%;bottom:0;content:\"\";display:block;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host([label-below]){align-items:center;display:inline-flex;flex-direction:column;height:var(--spectrum-radio-labelbelow-height)}:host([label-below]) #button{flex-shrink:0;margin:0}:host([label-below]) #label{margin:var(\n--spectrum-radio-labelbelow-label-margin\n)}:host{--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}#label{color:var(\n--spectrum-radio-m-text-color,var(--spectrum-alias-component-text-color-default)\n)}#button:before{background-color:var(\n--spectrum-radio-m-circle-background-color,var(--spectrum-global-color-gray-75)\n);border-color:var(\n--spectrum-radio-m-circle-border-color,var(--spectrum-alias-toggle-border-color-default)\n);forced-color-adjust:none}:host(:hover) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-hover,var(--spectrum-alias-toggle-border-color-hover)\n);box-shadow:none}:host(:hover[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-hover)\n)}:host(:hover) #label{color:var(\n--spectrum-radio-m-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host(:active) #button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-down,var(--spectrum-alias-toggle-border-color-down)\n)}:host(:active[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-down)\n)}:host(:active) #label{color:var(\n--spectrum-radio-m-text-color-down,var(--spectrum-alias-component-text-color-down)\n)}:host([emphasized][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-default\n)\n)}:host([emphasized][checked]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-hover,var(--spectrum-alias-toggle-background-color-emphasized-selected-hover)\n)}:host([emphasized][checked]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-down,var(--spectrum-alias-toggle-background-color-emphasized-selected-down)\n)}:host([emphasized][invalid]:hover) #input+#button:before,:host([invalid]:hover) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error-hover,var(--spectrum-global-color-red-600)\n)}:host([emphasized][invalid]:hover) #label,:host([invalid]:hover) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #input+#button:before,:host([invalid]:active) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-text-color-error-hover,var(--spectrum-alias-component-text-color-error-hover)\n)}:host([emphasized][invalid]:active) #label,:host([invalid]:active) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error-down,var(--spectrum-alias-component-text-color-error-down)\n)}:host([emphasized][invalid]) #button:before,:host([emphasized][invalid][checked]) #input+#button:before,:host([invalid]) #button:before,:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-error,var(--spectrum-global-color-red-500)\n)}:host([emphasized][invalid]) #label,:host([invalid]) #label{color:var(\n--spectrum-radio-m-emphasized-text-color-error,var(--spectrum-alias-component-text-color-error-default)\n)}:host([checked][disabled]) #input+#button:before,:host([disabled]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([checked][disabled]) #input~#label,:host([disabled]) #input~#label{color:var(\n--spectrum-radio-m-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n)}:host(.focus-visible) #input+#button:before,:host(:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(:focus-visible) #input+#button:before,:host(:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-key-focus,var(--spectrum-alias-toggle-border-color-key-focus)\n)}:host(.focus-visible) #input+#button:after,:host(:hover.focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(:focus-visible) #input+#button:after,:host(:hover:focus-visible) #input+#button:after{box-shadow:0 0 0 var(\n--spectrum-radio-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(\n--spectrum-radio-m-focus-ring-color-key-focus,var(--spectrum-alias-focus-ring-color)\n);forced-color-adjust:none}:host(.focus-visible[checked]) #input+#button:before,:host(:hover.focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host(:focus-visible[checked]) #input+#button:before,:host(:hover:focus-visible[checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected-key-focus,var(--spectrum-alias-toggle-background-color-key-focus)\n)}:host([emphasized][checked].focus-visible) #input+#button:before,:host([emphasized][checked]:hover.focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}:host([emphasized][checked]:focus-visible) #input+#button:before,:host([emphasized][checked]:hover:focus-visible) #input+#button:before{border-color:var(\n--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus,var(\n--spectrum-alias-toggle-background-color-emphasized-selected-key-focus\n)\n)}@media (forced-colors:active){:host{--spectrum-radio-m-circle-background-color:ButtonFace;--spectrum-radio-m-circle-border-color-down:Highlight;--spectrum-radio-m-circle-border-color-hover:Highlight;--spectrum-radio-m-circle-border-color-key-focus:Highlight;--spectrum-radio-m-circle-border-color-selected-down:Highlight;--spectrum-radio-m-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-circle-border-color-selected:Highlight;--spectrum-radio-m-circle-border-color:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-error-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-error:ButtonText;--spectrum-radio-m-emphasized-circle-border-color-selected-down:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-hover:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected-key-focus:Highlight;--spectrum-radio-m-emphasized-circle-border-color-selected:Highlight;--spectrum-radio-m-emphasized-text-color-error-down:CanvasText;--spectrum-radio-m-emphasized-text-color-error-hover:CanvasText;--spectrum-radio-m-emphasized-text-color-error:CanvasText;--spectrum-radio-m-focus-ring-color-key-focus:CanvasText;--spectrum-radio-m-text-color-down:CanvasText;--spectrum-radio-m-text-color-hover:CanvasText;--spectrum-radio-m-text-color:CanvasText}:host([invalid][checked]) #input+#button:before{border-color:var(\n--spectrum-radio-m-circle-border-color-selected,var(--spectrum-alias-toggle-background-color-default)\n)}}\n`;\nexport default styles;"]}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import { html } from '@spectrum-web-components/base';
|
|
13
|
+
import '../sp-radio.js';
|
|
14
|
+
import '../sp-radio-group.js';
|
|
15
|
+
import { spreadProps } from '../../../test/lit-helpers.js';
|
|
16
|
+
export default {
|
|
17
|
+
component: 'sp-radio',
|
|
18
|
+
title: 'Radio',
|
|
19
|
+
argTypes: {
|
|
20
|
+
checked: {
|
|
21
|
+
name: 'checked',
|
|
22
|
+
type: { name: 'boolean', required: false },
|
|
23
|
+
description: 'Represents when the input is checked',
|
|
24
|
+
table: {
|
|
25
|
+
type: { summary: 'boolean' },
|
|
26
|
+
defaultValue: { summary: false },
|
|
27
|
+
},
|
|
28
|
+
control: 'boolean',
|
|
29
|
+
},
|
|
30
|
+
disabled: {
|
|
31
|
+
name: 'disabled',
|
|
32
|
+
type: { name: 'boolean', required: false },
|
|
33
|
+
description: 'Disable this control. It will not receive focus or events.',
|
|
34
|
+
table: {
|
|
35
|
+
type: { summary: 'boolean' },
|
|
36
|
+
defaultValue: { summary: false },
|
|
37
|
+
},
|
|
38
|
+
control: {
|
|
39
|
+
type: 'boolean',
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
emphasized: {
|
|
43
|
+
name: 'emphasized',
|
|
44
|
+
type: { name: 'boolean', required: false },
|
|
45
|
+
description: "Set the button's state to emphasized.",
|
|
46
|
+
table: {
|
|
47
|
+
type: { summary: 'boolean' },
|
|
48
|
+
defaultValue: { summary: false },
|
|
49
|
+
},
|
|
50
|
+
control: {
|
|
51
|
+
type: 'boolean',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
invalid: {
|
|
55
|
+
name: 'invalid',
|
|
56
|
+
type: { name: 'boolean', required: false },
|
|
57
|
+
table: {
|
|
58
|
+
type: { summary: 'boolean' },
|
|
59
|
+
defaultValue: { summary: false },
|
|
60
|
+
},
|
|
61
|
+
control: {
|
|
62
|
+
type: 'boolean',
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
args: {
|
|
67
|
+
checked: false,
|
|
68
|
+
disabled: false,
|
|
69
|
+
emphasized: false,
|
|
70
|
+
invalid: false,
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
function renderRadio(args) {
|
|
74
|
+
return html `
|
|
75
|
+
<sp-radio ${spreadProps(args)}>Radio</sp-radio>
|
|
76
|
+
`;
|
|
77
|
+
}
|
|
78
|
+
export const Default = (args) => renderRadio(args);
|
|
79
|
+
export const readonly = (args) => renderRadio(Object.assign(Object.assign({}, args), { readonly: true }));
|
|
80
|
+
readonly.args = {
|
|
81
|
+
checked: true,
|
|
82
|
+
};
|
|
83
|
+
export const Emphasized = (args) => renderRadio(args);
|
|
84
|
+
Emphasized.args = {
|
|
85
|
+
checked: true,
|
|
86
|
+
emphasized: true,
|
|
87
|
+
};
|
|
88
|
+
export const Autofocus = (args) => {
|
|
89
|
+
return html `
|
|
90
|
+
<sp-radio autofocus ${spreadProps(args)}>Radio</sp-radio>
|
|
91
|
+
`;
|
|
92
|
+
};
|
|
93
|
+
export const Invalid = (args) => renderRadio(args);
|
|
94
|
+
Invalid.args = {
|
|
95
|
+
invalid: true,
|
|
96
|
+
};
|
|
97
|
+
export const Disabled = (args) => renderRadio(args);
|
|
98
|
+
Disabled.args = {
|
|
99
|
+
disabled: true,
|
|
100
|
+
};
|
|
101
|
+
export const labelBelow = (args) => {
|
|
102
|
+
return html `
|
|
103
|
+
<sp-radio label-below ${spreadProps(args)}>Radio</sp-radio>
|
|
104
|
+
`;
|
|
105
|
+
};
|
|
106
|
+
labelBelow.story = {
|
|
107
|
+
name: 'Label below',
|
|
108
|
+
};
|
|
109
|
+
const values = {
|
|
110
|
+
first: 1,
|
|
111
|
+
second: 2,
|
|
112
|
+
third: 3,
|
|
113
|
+
fourth: 4,
|
|
114
|
+
};
|
|
115
|
+
export const groupExample = () => {
|
|
116
|
+
return html `
|
|
117
|
+
<sp-radio-group vertical selected="1" name="group-example">
|
|
118
|
+
<sp-radio value=${values.first}>Option 1</sp-radio>
|
|
119
|
+
<sp-radio value=${values.second}>Option 2</sp-radio>
|
|
120
|
+
<sp-radio value=${values.third}>Option 3</sp-radio>
|
|
121
|
+
<sp-radio value=${values.fourth}>Option 4</sp-radio>
|
|
122
|
+
</sp-radio-group>
|
|
123
|
+
`;
|
|
124
|
+
};
|
|
125
|
+
export const horizontalGroup = () => {
|
|
126
|
+
return html `
|
|
127
|
+
<sp-radio-group horizontal selected="first" name="group-example">
|
|
128
|
+
<sp-radio value="first">Option 1</sp-radio>
|
|
129
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
130
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
131
|
+
<sp-radio value="fourth">Option 4</sp-radio>
|
|
132
|
+
</sp-radio-group>
|
|
133
|
+
`;
|
|
134
|
+
};
|
|
135
|
+
export const horizontalLabelBelowGroup = () => {
|
|
136
|
+
return html `
|
|
137
|
+
<sp-radio-group horizontal selected="first" name="group-example">
|
|
138
|
+
<sp-radio value="first" label-below>Option 1</sp-radio>
|
|
139
|
+
<sp-radio value="second" label-below>Option 2</sp-radio>
|
|
140
|
+
<sp-radio value="third" label-below>Option 3</sp-radio>
|
|
141
|
+
<sp-radio value="fourth" label-below>Option 4</sp-radio>
|
|
142
|
+
</sp-radio-group>
|
|
143
|
+
`;
|
|
144
|
+
};
|
|
145
|
+
export const tabIndexExample = () => {
|
|
146
|
+
return html `
|
|
147
|
+
<sp-radio-group vertical name="group-example">
|
|
148
|
+
<sp-radio emphasized value="zero" tabindex="0">
|
|
149
|
+
Tab Index 0
|
|
150
|
+
</sp-radio>
|
|
151
|
+
<sp-radio disabled value="three" tabindex="3">Tab Index 3</sp-radio>
|
|
152
|
+
<sp-radio value="one" tabindex="1" autofocus>Tab Index 1</sp-radio>
|
|
153
|
+
<sp-radio value="four" tabindex="4">Tab Index 4</sp-radio>
|
|
154
|
+
<sp-radio invalid value="two" tabindex="2">Tab Index 2</sp-radio>
|
|
155
|
+
</sp-radio-group>
|
|
156
|
+
`;
|
|
157
|
+
};
|
|
158
|
+
export const horizontalTabIndexExample = () => {
|
|
159
|
+
return html `
|
|
160
|
+
<sp-radio-group horizontal name="group-example">
|
|
161
|
+
<sp-radio emphasized value="zero" tabindex="0">
|
|
162
|
+
Tab Index 0
|
|
163
|
+
</sp-radio>
|
|
164
|
+
<sp-radio disabled value="three" tabindex="3">Tab Index 3</sp-radio>
|
|
165
|
+
<sp-radio value="one" tabindex="1" autofocus>Tab Index 1</sp-radio>
|
|
166
|
+
<sp-radio value="four" tabindex="4">Tab Index 4</sp-radio>
|
|
167
|
+
<sp-radio invalid value="two" tabindex="2">Tab Index 2</sp-radio>
|
|
168
|
+
</sp-radio-group>
|
|
169
|
+
`;
|
|
170
|
+
};
|
|
171
|
+
tabIndexExample.story = {
|
|
172
|
+
name: 'Tab index example',
|
|
173
|
+
};
|
|
174
|
+
//# sourceMappingURL=radio.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["radio.stories.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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '../sp-radio.js';\nimport '../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\ninterface StoryArgs {\n checked?: boolean;\n disabled?: boolean;\n emphasized?: boolean;\n invalid?: boolean;\n readonly?: boolean;\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\nexport const labelBelow = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-radio label-below ${spreadProps(args)}>Radio</sp-radio>\n `;\n};\nlabelBelow.story = {\n name: 'Label below',\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 horizontalLabelBelowGroup = (): TemplateResult => {\n return html`\n <sp-radio-group horizontal selected=\"first\" name=\"group-example\">\n <sp-radio value=\"first\" label-below>Option 1</sp-radio>\n <sp-radio value=\"second\" label-below>Option 2</sp-radio>\n <sp-radio value=\"third\" label-below>Option 3</sp-radio>\n <sp-radio value=\"fourth\" label-below>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.story = {\n name: 'Tab index example',\n};\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import '@spectrum-web-components/radio/sp-radio-group.js';
|
|
13
|
+
import '@spectrum-web-components/radio/sp-radio.js';
|
|
14
|
+
import { html } from 'lit';
|
|
15
|
+
import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
|
|
16
|
+
measureFixtureCreation(html `
|
|
17
|
+
<sp-radio-group id="test-default">
|
|
18
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
19
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
20
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
21
|
+
</sp-radio-group>
|
|
22
|
+
`);
|
|
23
|
+
//# sourceMappingURL=test-basic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"test-basic.js","sourceRoot":"","sources":["test-basic.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,kDAAkD,CAAC;AAC1D,OAAO,4CAA4C,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAE/E,sBAAsB,CAAC,IAAI,CAAA;;;;;;CAM1B,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/radio/sp-radio-group.js';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-radio-group id=\"test-default\">\n <sp-radio value=\"first\" checked>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-group>\n`);\n"]}
|
|
@@ -0,0 +1,418 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import '../sp-radio-group.js';
|
|
13
|
+
import '@spectrum-web-components/radio/sp-radio.js';
|
|
14
|
+
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
|
15
|
+
import { arrowDownEvent, arrowLeftEvent, arrowRightEvent, arrowUpEvent, endEvent, enterEvent, homeEvent, } from '../../../test/testing-helpers.js';
|
|
16
|
+
import { a11ySnapshot, findAccessibilityNode, sendKeys, } from '@web/test-runner-commands';
|
|
17
|
+
import { sendMouse } from '../../../test/plugins/browser.js';
|
|
18
|
+
import { spy } from 'sinon';
|
|
19
|
+
describe('Radio Group - focus control', () => {
|
|
20
|
+
it('does not accept focus when empty', async () => {
|
|
21
|
+
const el = await fixture(html `
|
|
22
|
+
<sp-radio-group></sp-radio-group>
|
|
23
|
+
`);
|
|
24
|
+
await elementUpdated(el);
|
|
25
|
+
expect(document.activeElement === el).to.be.false;
|
|
26
|
+
el.focus();
|
|
27
|
+
await elementUpdated(el);
|
|
28
|
+
expect(document.activeElement === el).to.be.false;
|
|
29
|
+
});
|
|
30
|
+
it('focuses selected before first', async () => {
|
|
31
|
+
const values = ['first', 'second', 'third'];
|
|
32
|
+
const el = await fixture(html `
|
|
33
|
+
<sp-radio-group selected="second">
|
|
34
|
+
<sp-radio value=${values[0]}>Option 1</sp-radio>
|
|
35
|
+
<sp-radio value=${values[1]}>Option 2</sp-radio>
|
|
36
|
+
<sp-radio value=${values[2]}>Option 3</sp-radio>
|
|
37
|
+
</sp-radio-group>
|
|
38
|
+
`);
|
|
39
|
+
await elementUpdated(el);
|
|
40
|
+
const selected = el.querySelector('[value="second"]');
|
|
41
|
+
expect(document.activeElement === el).to.be.false;
|
|
42
|
+
el.focus();
|
|
43
|
+
await elementUpdated(el);
|
|
44
|
+
expect(document.activeElement === selected).to.be.true;
|
|
45
|
+
});
|
|
46
|
+
it('focuses the child input not the root when [tabindex=-1]', async () => {
|
|
47
|
+
const values = ['first', 'second', 'third'];
|
|
48
|
+
const el = await fixture(html `
|
|
49
|
+
<sp-radio-group selected="second">
|
|
50
|
+
<sp-radio value=${values[0]}>Option 1</sp-radio>
|
|
51
|
+
<sp-radio value=${values[1]}>Option 2</sp-radio>
|
|
52
|
+
<sp-radio value=${values[2]}>Option 3</sp-radio>
|
|
53
|
+
</sp-radio-group>
|
|
54
|
+
`);
|
|
55
|
+
await elementUpdated(el);
|
|
56
|
+
const first = el.querySelector('[value="first"]');
|
|
57
|
+
const selected = el.querySelector('[value="second"]');
|
|
58
|
+
expect(selected.tabIndex).to.equal(0);
|
|
59
|
+
expect(first.tabIndex).to.equal(-1);
|
|
60
|
+
const firstRect = first.getBoundingClientRect();
|
|
61
|
+
await sendMouse({
|
|
62
|
+
steps: [
|
|
63
|
+
{
|
|
64
|
+
type: 'move',
|
|
65
|
+
position: [firstRect.x + 2, firstRect.y + 2],
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
type: 'down',
|
|
69
|
+
},
|
|
70
|
+
],
|
|
71
|
+
});
|
|
72
|
+
await elementUpdated(el);
|
|
73
|
+
// Safari can have a situation where it thinks the root is focused, but really something inside of the
|
|
74
|
+
// element is focused instead, this tests for both no focus on the root or focus inside of the element.
|
|
75
|
+
expect(!first.matches(':focus') || first.matches(':focus-within'), 'root should not').to.be.true;
|
|
76
|
+
});
|
|
77
|
+
it('does not select on focus', async () => {
|
|
78
|
+
const el = await fixture(html `
|
|
79
|
+
<sp-radio-group>
|
|
80
|
+
<sp-radio value="1">Options 1</sp-radio>
|
|
81
|
+
<sp-radio value="2">Options 2</sp-radio>
|
|
82
|
+
<sp-radio value="3">Options 3</sp-radio>
|
|
83
|
+
<sp-radio value="4">Options 4</sp-radio>
|
|
84
|
+
<sp-radio value="5">Options 5</sp-radio>
|
|
85
|
+
</sp-radio-group>
|
|
86
|
+
`);
|
|
87
|
+
await elementUpdated(el);
|
|
88
|
+
const radio1 = el.querySelector('sp-radio:nth-child(1)');
|
|
89
|
+
const radio2 = el.querySelector('sp-radio:nth-child(2)');
|
|
90
|
+
expect(el.selected).to.equal('');
|
|
91
|
+
radio1.focus();
|
|
92
|
+
await elementUpdated(el);
|
|
93
|
+
expect(el.selected).to.equal('');
|
|
94
|
+
el.selected = '1';
|
|
95
|
+
await elementUpdated(el);
|
|
96
|
+
expect(el.selected).to.equal('1');
|
|
97
|
+
expect(radio1.checked).to.be.true;
|
|
98
|
+
radio2.focus();
|
|
99
|
+
await elementUpdated(el);
|
|
100
|
+
expect(el.selected).to.equal('1');
|
|
101
|
+
expect(radio1.checked).to.be.true;
|
|
102
|
+
});
|
|
103
|
+
it('loads accepts keyboard events while focused', async () => {
|
|
104
|
+
const el = await fixture(html `
|
|
105
|
+
<sp-radio-group>
|
|
106
|
+
<sp-radio>Options 1</sp-radio>
|
|
107
|
+
<sp-radio>Options 2</sp-radio>
|
|
108
|
+
<sp-radio>Options 3</sp-radio>
|
|
109
|
+
<sp-radio>Options 4</sp-radio>
|
|
110
|
+
<sp-radio>Options 5</sp-radio>
|
|
111
|
+
</sp-radio-group>
|
|
112
|
+
`);
|
|
113
|
+
await elementUpdated(el);
|
|
114
|
+
const radio1 = el.querySelector('sp-radio:nth-child(1)');
|
|
115
|
+
const radio2 = el.querySelector('sp-radio:nth-child(2)');
|
|
116
|
+
const radio3 = el.querySelector('sp-radio:nth-child(3)');
|
|
117
|
+
const radio4 = el.querySelector('sp-radio:nth-child(4)');
|
|
118
|
+
const radio5 = el.querySelector('sp-radio:nth-child(5)');
|
|
119
|
+
radio1.focus();
|
|
120
|
+
await elementUpdated(el);
|
|
121
|
+
el.dispatchEvent(arrowRightEvent());
|
|
122
|
+
await elementUpdated(el);
|
|
123
|
+
expect(document.activeElement === radio2).to.be.true;
|
|
124
|
+
el.dispatchEvent(arrowDownEvent());
|
|
125
|
+
await elementUpdated(el);
|
|
126
|
+
expect(document.activeElement === radio3).to.be.true;
|
|
127
|
+
el.dispatchEvent(endEvent());
|
|
128
|
+
await elementUpdated(el);
|
|
129
|
+
expect(document.activeElement === radio5).to.be.true;
|
|
130
|
+
el.dispatchEvent(arrowLeftEvent());
|
|
131
|
+
await elementUpdated(el);
|
|
132
|
+
expect(document.activeElement === radio4).to.be.true;
|
|
133
|
+
el.dispatchEvent(arrowUpEvent());
|
|
134
|
+
await elementUpdated(el);
|
|
135
|
+
expect(document.activeElement === radio3).to.be.true;
|
|
136
|
+
el.dispatchEvent(homeEvent());
|
|
137
|
+
await elementUpdated(el);
|
|
138
|
+
expect(document.activeElement === radio1).to.be.true;
|
|
139
|
+
radio1.blur();
|
|
140
|
+
});
|
|
141
|
+
it('accepts keyboard interactions where `checked` and `calculateFocusInIndex` might conflict', async () => {
|
|
142
|
+
const el = await fixture(html `
|
|
143
|
+
<sp-radio-group>
|
|
144
|
+
<sp-radio>Options 1</sp-radio>
|
|
145
|
+
<sp-radio>Options 2</sp-radio>
|
|
146
|
+
<sp-radio>Options 3</sp-radio>
|
|
147
|
+
<sp-radio>Options 4</sp-radio>
|
|
148
|
+
<sp-radio>Options 5</sp-radio>
|
|
149
|
+
</sp-radio-group>
|
|
150
|
+
`);
|
|
151
|
+
await elementUpdated(el);
|
|
152
|
+
const radio1 = el.querySelector('sp-radio:nth-child(1)');
|
|
153
|
+
const radio5 = el.querySelector('sp-radio:nth-child(5)');
|
|
154
|
+
radio5.focus();
|
|
155
|
+
await elementUpdated(el);
|
|
156
|
+
expect(document.activeElement === radio5).to.be.true;
|
|
157
|
+
expect(radio5.checked).to.be.true;
|
|
158
|
+
await sendKeys({
|
|
159
|
+
press: 'ArrowRight',
|
|
160
|
+
});
|
|
161
|
+
await elementUpdated(el);
|
|
162
|
+
expect(document.activeElement === radio1).to.be.true;
|
|
163
|
+
expect(radio1.checked).to.be.true;
|
|
164
|
+
});
|
|
165
|
+
it('acknowledges `disabled` and accepts keyboard events while focused', async () => {
|
|
166
|
+
const el = await fixture(html `
|
|
167
|
+
<sp-radio-group>
|
|
168
|
+
<sp-radio value="1" disabled>Option 1</sp-radio>
|
|
169
|
+
<sp-radio value="2">Option 2</sp-radio>
|
|
170
|
+
<sp-radio value="3">Option 3</sp-radio>
|
|
171
|
+
<sp-radio value="4">Option 4</sp-radio>
|
|
172
|
+
<sp-radio value="5" disabled>Option 5</sp-radio>
|
|
173
|
+
</sp-radio-group>
|
|
174
|
+
`);
|
|
175
|
+
await elementUpdated(el);
|
|
176
|
+
const radio2 = el.querySelector('sp-radio:nth-child(2)');
|
|
177
|
+
const radio4 = el.querySelector('sp-radio:nth-child(4)');
|
|
178
|
+
radio2.focus();
|
|
179
|
+
await elementUpdated(el);
|
|
180
|
+
expect(document.activeElement === radio2, 'start 2').to.be.true;
|
|
181
|
+
expect(el.selected).to.equal('');
|
|
182
|
+
el.dispatchEvent(enterEvent());
|
|
183
|
+
el.dispatchEvent(endEvent());
|
|
184
|
+
await elementUpdated(el);
|
|
185
|
+
expect(document.activeElement === radio4, 'first 4').to.be.true;
|
|
186
|
+
expect(el.selected).to.equal('4');
|
|
187
|
+
el.dispatchEvent(homeEvent());
|
|
188
|
+
await elementUpdated(el);
|
|
189
|
+
expect(document.activeElement === radio2, 'second 2').to.be.true;
|
|
190
|
+
el.dispatchEvent(arrowUpEvent());
|
|
191
|
+
await elementUpdated(el);
|
|
192
|
+
expect(document.activeElement === radio4, 'third 4').to.be.true;
|
|
193
|
+
el.dispatchEvent(arrowDownEvent());
|
|
194
|
+
await elementUpdated(el);
|
|
195
|
+
expect(document.activeElement === radio2, 'fourth 2').to.be.true;
|
|
196
|
+
});
|
|
197
|
+
});
|
|
198
|
+
describe('Group Accessibility', () => {
|
|
199
|
+
it('created the expected accessibility tree', async () => {
|
|
200
|
+
await fixture(html `
|
|
201
|
+
<sp-radio-group label="Testing Label" tabindex="0">
|
|
202
|
+
<sp-radio value="first">Option 1</sp-radio>
|
|
203
|
+
<sp-radio value="second" checked>Option 2</sp-radio>
|
|
204
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
205
|
+
</sp-radio-group>
|
|
206
|
+
`);
|
|
207
|
+
const snapshot = (await a11ySnapshot({}));
|
|
208
|
+
expect(findAccessibilityNode(snapshot, (node // Firefox uses 'group' instead of 'radiogroup' here.
|
|
209
|
+
) => (node.role === 'radiogroup' || node.role === 'group') &&
|
|
210
|
+
node.name === 'Testing Label'), 'Has a "radiogroup" with the supplied name').to.not.be.null;
|
|
211
|
+
expect(findAccessibilityNode(snapshot, (node) => node.role === 'radio' &&
|
|
212
|
+
node.checked &&
|
|
213
|
+
node.name === 'Option 2'), 'Has a named and checked "radio" element').to.not.be.null;
|
|
214
|
+
expect(findAccessibilityNode(snapshot, (node) => node.name === 'Option 2' && node.role.startsWith('text')), 'Does not have a text leaf named like the "radio" element').to.be.null;
|
|
215
|
+
});
|
|
216
|
+
});
|
|
217
|
+
describe('Radio Group', () => {
|
|
218
|
+
let testDiv;
|
|
219
|
+
beforeEach(async () => {
|
|
220
|
+
testDiv = await fixture(html `
|
|
221
|
+
<div id="test-radio-group">
|
|
222
|
+
<sp-radio-group id="test-default">
|
|
223
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
224
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
225
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
226
|
+
</sp-radio-group>
|
|
227
|
+
<sp-radio-group id="test-multiple-checked">
|
|
228
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
229
|
+
<sp-radio value="second" checked>Option 2</sp-radio>
|
|
230
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
231
|
+
</sp-radio-group>
|
|
232
|
+
<sp-radio-group id="test-disabled">
|
|
233
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
234
|
+
<sp-radio value="second" disabled>Option 2</sp-radio>
|
|
235
|
+
</sp-radio-group>
|
|
236
|
+
<sp-radio-group id="test-all-checked">
|
|
237
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
238
|
+
<sp-radio value="second" checked>Option 2</sp-radio>
|
|
239
|
+
</sp-radio-group>
|
|
240
|
+
<sp-radio-group id="test-selected" selected="third">
|
|
241
|
+
<sp-radio value="first">Option 1</sp-radio>
|
|
242
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
243
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
244
|
+
</sp-radio-group>
|
|
245
|
+
<sp-radio-group id="test-selected-click" selected="third">
|
|
246
|
+
<sp-radio value="first">Option 1</sp-radio>
|
|
247
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
248
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
249
|
+
</sp-radio-group>
|
|
250
|
+
<sp-radio-group
|
|
251
|
+
id="test-checked-prioritized"
|
|
252
|
+
selected="second"
|
|
253
|
+
>
|
|
254
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
255
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
256
|
+
</sp-radio-group>
|
|
257
|
+
<sp-radio-group id="test-integer-value" selected="5">
|
|
258
|
+
<sp-radio value="5" checked>Option 5</sp-radio>
|
|
259
|
+
<sp-radio value="7">Option 7</sp-radio>
|
|
260
|
+
</sp-radio-group>
|
|
261
|
+
<sp-radio-group id="test-none-selected">
|
|
262
|
+
<sp-radio value="first">Option 1</sp-radio>
|
|
263
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
264
|
+
<sp-radio value="third">Option 3</sp-radio>
|
|
265
|
+
</sp-radio-group>
|
|
266
|
+
</div>
|
|
267
|
+
`);
|
|
268
|
+
});
|
|
269
|
+
it('loads', () => {
|
|
270
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-default');
|
|
271
|
+
const radioChildren = radioGroup.querySelectorAll('sp-radio');
|
|
272
|
+
expect(radioGroup).to.exist;
|
|
273
|
+
expect(radioChildren.length).to.equal(3);
|
|
274
|
+
});
|
|
275
|
+
it('loads accessibly', async () => {
|
|
276
|
+
await expect(testDiv).to.be.accessible();
|
|
277
|
+
});
|
|
278
|
+
it('validates selection', async () => {
|
|
279
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-none-selected');
|
|
280
|
+
expect(radioGroup.selected).to.equal('');
|
|
281
|
+
radioGroup.selected = 'missing';
|
|
282
|
+
await elementUpdated(radioGroup);
|
|
283
|
+
expect(radioGroup.selected).to.equal('');
|
|
284
|
+
});
|
|
285
|
+
it('can have selection prevented', async () => {
|
|
286
|
+
const el = testDiv.querySelector('sp-radio-group#test-default');
|
|
287
|
+
const secondRadio = el.querySelector('sp-radio[value=second]');
|
|
288
|
+
const thirdRadio = el.querySelector('sp-radio[value=third]');
|
|
289
|
+
await elementUpdated(el);
|
|
290
|
+
expect(el.selected).to.equal('first');
|
|
291
|
+
secondRadio.click();
|
|
292
|
+
await elementUpdated(el);
|
|
293
|
+
expect(el.selected).to.equal('second');
|
|
294
|
+
el.addEventListener('change', (event) => event.preventDefault());
|
|
295
|
+
thirdRadio.click();
|
|
296
|
+
await elementUpdated(el);
|
|
297
|
+
expect(el.selected).to.equal('second');
|
|
298
|
+
});
|
|
299
|
+
it('reflects checked radio with selected property', async () => {
|
|
300
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-default');
|
|
301
|
+
const firstRadio = radioGroup.querySelector('sp-radio[value=first]');
|
|
302
|
+
const secondRadio = radioGroup.querySelector('sp-radio[value=second]');
|
|
303
|
+
const thirdRadio = radioGroup.querySelector('sp-radio[value=third]');
|
|
304
|
+
expect(firstRadio.checked).to.be.true;
|
|
305
|
+
expect(secondRadio.checked).to.be.false;
|
|
306
|
+
expect(thirdRadio.checked).to.be.false;
|
|
307
|
+
expect(radioGroup.selected).to.equal(firstRadio.value);
|
|
308
|
+
secondRadio.click();
|
|
309
|
+
await elementUpdated(radioGroup);
|
|
310
|
+
expect(firstRadio.checked).to.be.false;
|
|
311
|
+
expect(secondRadio.checked).to.be.true;
|
|
312
|
+
expect(thirdRadio.checked).to.be.false;
|
|
313
|
+
expect(radioGroup.selected).to.equal(secondRadio.value);
|
|
314
|
+
thirdRadio.click();
|
|
315
|
+
await elementUpdated(radioGroup);
|
|
316
|
+
expect(firstRadio.checked).to.be.false;
|
|
317
|
+
expect(secondRadio.checked).to.be.false;
|
|
318
|
+
expect(thirdRadio.checked).to.be.true;
|
|
319
|
+
expect(radioGroup.selected).to.equal(thirdRadio.value);
|
|
320
|
+
});
|
|
321
|
+
it('forces only one radio to be checked', () => {
|
|
322
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-multiple-checked');
|
|
323
|
+
const checkedRadios = radioGroup.querySelectorAll('sp-radio[checked]');
|
|
324
|
+
expect(radioGroup.selected).to.equal('first');
|
|
325
|
+
expect(checkedRadios.length).to.equal(1);
|
|
326
|
+
});
|
|
327
|
+
it('respects clicking on disabled attribute causing nothing to happen', async () => {
|
|
328
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-disabled');
|
|
329
|
+
const checkedRadio = radioGroup.querySelector('sp-radio[checked]');
|
|
330
|
+
const disabledRadio = radioGroup.querySelector('sp-radio[disabled]');
|
|
331
|
+
disabledRadio.click();
|
|
332
|
+
await elementUpdated(radioGroup);
|
|
333
|
+
expect(disabledRadio.checked).to.be.false;
|
|
334
|
+
expect(checkedRadio.checked).to.be.true;
|
|
335
|
+
expect(radioGroup.selected).to.equal(checkedRadio.value);
|
|
336
|
+
});
|
|
337
|
+
it('de-checks all but first checked radio if multiple checked', () => {
|
|
338
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-multiple-checked');
|
|
339
|
+
const radio1 = radioGroup.querySelector('sp-radio[value=first]');
|
|
340
|
+
const radio2 = radioGroup.querySelector('sp-radio[value=second]');
|
|
341
|
+
expect(radioGroup.selected).to.equal('first');
|
|
342
|
+
expect(radio1.checked).to.be.true;
|
|
343
|
+
expect(radio2.checked).to.be.false;
|
|
344
|
+
});
|
|
345
|
+
it('ensures setting selection updates checked radio', async () => {
|
|
346
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-selected');
|
|
347
|
+
const radio1 = radioGroup.querySelector('sp-radio[value=first]');
|
|
348
|
+
const radio2 = radioGroup.querySelector('sp-radio[value=second]');
|
|
349
|
+
const radio3 = radioGroup.querySelector('sp-radio[value=third]');
|
|
350
|
+
expect(radioGroup.selected).to.equal('third');
|
|
351
|
+
expect(radio1.checked).to.be.false;
|
|
352
|
+
expect(radio2.checked).to.be.false;
|
|
353
|
+
expect(radio3.checked, 'initial').to.be.true;
|
|
354
|
+
radioGroup.selected = 'second';
|
|
355
|
+
await elementUpdated(radioGroup);
|
|
356
|
+
expect(radioGroup.selected).to.equal('second');
|
|
357
|
+
expect(radio1.checked).to.be.false;
|
|
358
|
+
expect(radio2.checked, 'second').to.be.true;
|
|
359
|
+
expect(radio3.checked).to.be.false;
|
|
360
|
+
radioGroup.selected = 'first';
|
|
361
|
+
await elementUpdated(radioGroup);
|
|
362
|
+
expect(radioGroup.selected).to.equal('first');
|
|
363
|
+
expect(radio1.checked, 'third').to.be.true;
|
|
364
|
+
expect(radio2.checked).to.be.false;
|
|
365
|
+
expect(radio3.checked).to.be.false;
|
|
366
|
+
});
|
|
367
|
+
it('ensures setting selected and clicking on radio both work together', async () => {
|
|
368
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-selected-click');
|
|
369
|
+
const radio1 = radioGroup.querySelector('sp-radio[value=first]');
|
|
370
|
+
const radio2 = radioGroup.querySelector('sp-radio[value=second]');
|
|
371
|
+
const radio3 = radioGroup.querySelector('sp-radio[value=third]');
|
|
372
|
+
expect(radioGroup.selected).to.equal('third');
|
|
373
|
+
radio2.click();
|
|
374
|
+
await elementUpdated(radioGroup);
|
|
375
|
+
expect(radioGroup.selected).to.equal('second');
|
|
376
|
+
expect(radio1.checked).to.be.false;
|
|
377
|
+
expect(radio2.checked).to.be.true;
|
|
378
|
+
expect(radio3.checked).to.be.false;
|
|
379
|
+
radioGroup.selected = 'first';
|
|
380
|
+
await elementUpdated(radioGroup);
|
|
381
|
+
expect(radioGroup.selected).to.equal('first');
|
|
382
|
+
expect(radio1.checked, 'moved to checked').to.be.true;
|
|
383
|
+
expect(radio2.checked).to.be.false;
|
|
384
|
+
expect(radio3.checked).to.be.false;
|
|
385
|
+
});
|
|
386
|
+
it('prioritizes checked over selected on initialization when conflicting', () => {
|
|
387
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-checked-prioritized');
|
|
388
|
+
const radio1 = radioGroup.querySelector('sp-radio[value=first]');
|
|
389
|
+
const radio2 = radioGroup.querySelector('sp-radio[value=second]');
|
|
390
|
+
expect(radioGroup.selected).to.equal('first');
|
|
391
|
+
expect(radio1.checked).to.be.true;
|
|
392
|
+
expect(radio2.checked).to.be.false;
|
|
393
|
+
});
|
|
394
|
+
it('handles integer values for radio buttons', () => {
|
|
395
|
+
const radioGroup = testDiv.querySelector('sp-radio-group#test-integer-value');
|
|
396
|
+
expect(radioGroup.selected).to.equal('5');
|
|
397
|
+
});
|
|
398
|
+
it('prevents `change` events from radio buttons', async () => {
|
|
399
|
+
const changeSpy = spy();
|
|
400
|
+
const onChange = (event) => {
|
|
401
|
+
changeSpy(event.target.selected);
|
|
402
|
+
};
|
|
403
|
+
const el = await fixture(html `
|
|
404
|
+
<sp-radio-group @change=${onChange}>
|
|
405
|
+
<sp-radio value="bulbasaur">Bulbasaur</sp-radio>
|
|
406
|
+
<sp-radio value="squirtle">Squirtle</sp-radio>
|
|
407
|
+
<sp-radio value="charmander">Charmander</sp-radio>
|
|
408
|
+
</sp-radio-group>
|
|
409
|
+
`);
|
|
410
|
+
const bulbasaur = el.querySelector('[value="bulbasaur"]');
|
|
411
|
+
const charmander = el.querySelector('[value="charmander"]');
|
|
412
|
+
bulbasaur.click();
|
|
413
|
+
bulbasaur.click();
|
|
414
|
+
charmander.click();
|
|
415
|
+
expect(changeSpy.calledWith(undefined)).to.be.false;
|
|
416
|
+
});
|
|
417
|
+
});
|
|
418
|
+
//# sourceMappingURL=radio-group.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.test.js","sourceRoot":"","sources":["radio-group.test.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 '../sp-radio-group.js';\nimport { RadioGroup } from '../';\nimport '@spectrum-web-components/radio/sp-radio.js';\nimport { Radio } from '@spectrum-web-components/radio';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport {\n arrowDownEvent,\n arrowLeftEvent,\n arrowRightEvent,\n arrowUpEvent,\n endEvent,\n enterEvent,\n homeEvent,\n} from '../../../test/testing-helpers.js';\nimport {\n a11ySnapshot,\n findAccessibilityNode,\n sendKeys,\n} from '@web/test-runner-commands';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { spy } from 'sinon';\n\ndescribe('Radio Group - focus control', () => {\n it('does not accept focus when empty', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group></sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('focuses selected before first', async () => {\n const values = ['first', 'second', 'third'];\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group selected=\"second\">\n <sp-radio value=${values[0]}>Option 1</sp-radio>\n <sp-radio value=${values[1]}>Option 2</sp-radio>\n <sp-radio value=${values[2]}>Option 3</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n const selected = el.querySelector('[value=\"second\"]') as Radio;\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === selected).to.be.true;\n });\n it('focuses the child input not the root when [tabindex=-1]', async () => {\n const values = ['first', 'second', 'third'];\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group selected=\"second\">\n <sp-radio value=${values[0]}>Option 1</sp-radio>\n <sp-radio value=${values[1]}>Option 2</sp-radio>\n <sp-radio value=${values[2]}>Option 3</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n const first = el.querySelector('[value=\"first\"]') as Radio;\n const selected = el.querySelector('[value=\"second\"]') as Radio;\n expect(selected.tabIndex).to.equal(0);\n expect(first.tabIndex).to.equal(-1);\n\n const firstRect = first.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [firstRect.x + 2, firstRect.y + 2],\n },\n {\n type: 'down',\n },\n ],\n });\n await elementUpdated(el);\n\n // Safari can have a situation where it thinks the root is focused, but really something inside of the\n // element is focused instead, this tests for both no focus on the root or focus inside of the element.\n expect(\n !first.matches(':focus') || first.matches(':focus-within'),\n 'root should not'\n ).to.be.true;\n });\n it('does not select on focus', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio value=\"1\">Options 1</sp-radio>\n <sp-radio value=\"2\">Options 2</sp-radio>\n <sp-radio value=\"3\">Options 3</sp-radio>\n <sp-radio value=\"4\">Options 4</sp-radio>\n <sp-radio value=\"5\">Options 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;\n const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;\n\n expect(el.selected).to.equal('');\n\n radio1.focus();\n await elementUpdated(el);\n\n expect(el.selected).to.equal('');\n el.selected = '1';\n await elementUpdated(el);\n\n expect(el.selected).to.equal('1');\n expect(radio1.checked).to.be.true;\n radio2.focus();\n await elementUpdated(el);\n\n expect(el.selected).to.equal('1');\n expect(radio1.checked).to.be.true;\n });\n it('loads accepts keyboard events while focused', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio>Options 1</sp-radio>\n <sp-radio>Options 2</sp-radio>\n <sp-radio>Options 3</sp-radio>\n <sp-radio>Options 4</sp-radio>\n <sp-radio>Options 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;\n const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;\n const radio3 = el.querySelector('sp-radio:nth-child(3)') as Radio;\n const radio4 = el.querySelector('sp-radio:nth-child(4)') as Radio;\n const radio5 = el.querySelector('sp-radio:nth-child(5)') as Radio;\n\n radio1.focus();\n await elementUpdated(el);\n\n el.dispatchEvent(arrowRightEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio2).to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio3).to.be.true;\n\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio5).to.be.true;\n\n el.dispatchEvent(arrowLeftEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio4).to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio3).to.be.true;\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio1).to.be.true;\n\n radio1.blur();\n });\n it('accepts keyboard interactions where `checked` and `calculateFocusInIndex` might conflict', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio>Options 1</sp-radio>\n <sp-radio>Options 2</sp-radio>\n <sp-radio>Options 3</sp-radio>\n <sp-radio>Options 4</sp-radio>\n <sp-radio>Options 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio1 = el.querySelector('sp-radio:nth-child(1)') as Radio;\n const radio5 = el.querySelector('sp-radio:nth-child(5)') as Radio;\n\n radio5.focus();\n await elementUpdated(el);\n expect(document.activeElement === radio5).to.be.true;\n expect(radio5.checked).to.be.true;\n\n await sendKeys({\n press: 'ArrowRight',\n });\n await elementUpdated(el);\n\n expect(document.activeElement === radio1).to.be.true;\n expect(radio1.checked).to.be.true;\n });\n it('acknowledges `disabled` and accepts keyboard events while focused', async () => {\n const el = await fixture<RadioGroup>(\n html`\n <sp-radio-group>\n <sp-radio value=\"1\" disabled>Option 1</sp-radio>\n <sp-radio value=\"2\">Option 2</sp-radio>\n <sp-radio value=\"3\">Option 3</sp-radio>\n <sp-radio value=\"4\">Option 4</sp-radio>\n <sp-radio value=\"5\" disabled>Option 5</sp-radio>\n </sp-radio-group>\n `\n );\n\n await elementUpdated(el);\n\n const radio2 = el.querySelector('sp-radio:nth-child(2)') as Radio;\n const radio4 = el.querySelector('sp-radio:nth-child(4)') as Radio;\n\n radio2.focus();\n await elementUpdated(el);\n expect(document.activeElement === radio2, 'start 2').to.be.true;\n expect(el.selected).to.equal('');\n\n el.dispatchEvent(enterEvent());\n el.dispatchEvent(endEvent());\n await elementUpdated(el);\n expect(document.activeElement === radio4, 'first 4').to.be.true;\n expect(el.selected).to.equal('4');\n\n el.dispatchEvent(homeEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio2, 'second 2').to.be.true;\n\n el.dispatchEvent(arrowUpEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio4, 'third 4').to.be.true;\n\n el.dispatchEvent(arrowDownEvent());\n await elementUpdated(el);\n\n expect(document.activeElement === radio2, 'fourth 2').to.be.true;\n });\n});\n\ndescribe('Group Accessibility', () => {\n it('created the expected accessibility tree', async () => {\n await fixture(html`\n <sp-radio-group label=\"Testing Label\" tabindex=\"0\">\n <sp-radio value=\"first\">Option 1</sp-radio>\n <sp-radio value=\"second\" checked>Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n `);\n\n type NamedRoledAndCheckedNode = {\n name: string;\n role: string;\n checked: boolean;\n };\n const snapshot = (await a11ySnapshot(\n {}\n )) as unknown as NamedRoledAndCheckedNode & {\n children: NamedRoledAndCheckedNode[];\n };\n\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (\n node // Firefox uses 'group' instead of 'radiogroup' here.\n ) =>\n (node.role === 'radiogroup' || node.role === 'group') &&\n node.name === 'Testing Label'\n ),\n 'Has a \"radiogroup\" with the supplied name'\n ).to.not.be.null;\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.role === 'radio' &&\n node.checked &&\n node.name === 'Option 2'\n ),\n 'Has a named and checked \"radio\" element'\n ).to.not.be.null;\n expect(\n findAccessibilityNode<NamedRoledAndCheckedNode>(\n snapshot,\n (node) =>\n node.name === 'Option 2' && node.role.startsWith('text')\n ),\n 'Does not have a text leaf named like the \"radio\" element'\n ).to.be.null;\n });\n});\n\ndescribe('Radio Group', () => {\n let testDiv!: HTMLDivElement;\n\n beforeEach(async () => {\n testDiv = await fixture<HTMLDivElement>(\n html`\n <div id=\"test-radio-group\">\n <sp-radio-group id=\"test-default\">\n <sp-radio value=\"first\" checked>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-group>\n <sp-radio-group id=\"test-multiple-checked\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\" checked>Option 2</sp-radio>\n <sp-radio value=\"third\">Option 3</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-disabled\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\" disabled>Option 2</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-all-checked\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\" checked>Option 2</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-selected\" selected=\"third\">\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-group>\n <sp-radio-group id=\"test-selected-click\" selected=\"third\">\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-group>\n <sp-radio-group\n id=\"test-checked-prioritized\"\n selected=\"second\"\n >\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-integer-value\" selected=\"5\">\n <sp-radio value=\"5\" checked>Option 5</sp-radio>\n <sp-radio value=\"7\">Option 7</sp-radio>\n </sp-radio-group>\n <sp-radio-group id=\"test-none-selected\">\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-group>\n </div>\n `\n );\n });\n\n it('loads', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-default'\n ) as RadioGroup;\n const radioChildren = radioGroup.querySelectorAll('sp-radio');\n\n expect(radioGroup).to.exist;\n expect(radioChildren.length).to.equal(3);\n });\n\n it('loads accessibly', async () => {\n await expect(testDiv).to.be.accessible();\n });\n\n it('validates selection', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-none-selected'\n ) as RadioGroup;\n expect(radioGroup.selected).to.equal('');\n\n radioGroup.selected = 'missing';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('');\n });\n\n it('can have selection prevented', async () => {\n const el = testDiv.querySelector(\n 'sp-radio-group#test-default'\n ) as RadioGroup;\n const secondRadio = el.querySelector('sp-radio[value=second]') as Radio;\n const thirdRadio = el.querySelector('sp-radio[value=third]') as Radio;\n\n await elementUpdated(el);\n expect(el.selected).to.equal('first');\n\n secondRadio.click();\n\n await elementUpdated(el);\n expect(el.selected).to.equal('second');\n\n el.addEventListener('change', (event) => event.preventDefault());\n\n thirdRadio.click();\n\n await elementUpdated(el);\n expect(el.selected).to.equal('second');\n });\n\n it('reflects checked radio with selected property', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-default'\n ) as RadioGroup;\n const firstRadio = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const secondRadio = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n const thirdRadio = radioGroup.querySelector(\n 'sp-radio[value=third]'\n ) as Radio;\n\n expect(firstRadio.checked).to.be.true;\n expect(secondRadio.checked).to.be.false;\n expect(thirdRadio.checked).to.be.false;\n expect(radioGroup.selected).to.equal(firstRadio.value);\n\n secondRadio.click();\n await elementUpdated(radioGroup);\n\n expect(firstRadio.checked).to.be.false;\n expect(secondRadio.checked).to.be.true;\n expect(thirdRadio.checked).to.be.false;\n expect(radioGroup.selected).to.equal(secondRadio.value);\n\n thirdRadio.click();\n await elementUpdated(radioGroup);\n\n expect(firstRadio.checked).to.be.false;\n expect(secondRadio.checked).to.be.false;\n expect(thirdRadio.checked).to.be.true;\n expect(radioGroup.selected).to.equal(thirdRadio.value);\n });\n\n it('forces only one radio to be checked', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-multiple-checked'\n ) as RadioGroup;\n const checkedRadios = radioGroup.querySelectorAll('sp-radio[checked]');\n\n expect(radioGroup.selected).to.equal('first');\n expect(checkedRadios.length).to.equal(1);\n });\n\n it('respects clicking on disabled attribute causing nothing to happen', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-disabled'\n ) as RadioGroup;\n const checkedRadio = radioGroup.querySelector(\n 'sp-radio[checked]'\n ) as Radio;\n const disabledRadio = radioGroup.querySelector(\n 'sp-radio[disabled]'\n ) as Radio;\n\n disabledRadio.click();\n await elementUpdated(radioGroup);\n\n expect(disabledRadio.checked).to.be.false;\n expect(checkedRadio.checked).to.be.true;\n expect(radioGroup.selected).to.equal(checkedRadio.value);\n });\n\n it('de-checks all but first checked radio if multiple checked', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-multiple-checked'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked).to.be.true;\n expect(radio2.checked).to.be.false;\n });\n\n it('ensures setting selection updates checked radio', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-selected'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n const radio3 = radioGroup.querySelector(\n 'sp-radio[value=third]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('third');\n expect(radio1.checked).to.be.false;\n expect(radio2.checked).to.be.false;\n expect(radio3.checked, 'initial').to.be.true;\n\n radioGroup.selected = 'second';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('second');\n expect(radio1.checked).to.be.false;\n expect(radio2.checked, 'second').to.be.true;\n expect(radio3.checked).to.be.false;\n\n radioGroup.selected = 'first';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked, 'third').to.be.true;\n expect(radio2.checked).to.be.false;\n expect(radio3.checked).to.be.false;\n });\n\n it('ensures setting selected and clicking on radio both work together', async () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-selected-click'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n const radio3 = radioGroup.querySelector(\n 'sp-radio[value=third]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('third');\n radio2.click();\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('second');\n expect(radio1.checked).to.be.false;\n expect(radio2.checked).to.be.true;\n expect(radio3.checked).to.be.false;\n\n radioGroup.selected = 'first';\n await elementUpdated(radioGroup);\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked, 'moved to checked').to.be.true;\n expect(radio2.checked).to.be.false;\n expect(radio3.checked).to.be.false;\n });\n\n it('prioritizes checked over selected on initialization when conflicting', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-checked-prioritized'\n ) as RadioGroup;\n const radio1 = radioGroup.querySelector(\n 'sp-radio[value=first]'\n ) as Radio;\n const radio2 = radioGroup.querySelector(\n 'sp-radio[value=second]'\n ) as Radio;\n\n expect(radioGroup.selected).to.equal('first');\n expect(radio1.checked).to.be.true;\n expect(radio2.checked).to.be.false;\n });\n\n it('handles integer values for radio buttons', () => {\n const radioGroup = testDiv.querySelector(\n 'sp-radio-group#test-integer-value'\n ) as RadioGroup;\n expect(radioGroup.selected).to.equal('5');\n });\n\n it('prevents `change` events from radio buttons', async () => {\n const changeSpy = spy();\n const onChange = (event: Event & { target: RadioGroup }): void => {\n changeSpy(event.target.selected);\n };\n const el = await fixture(html`\n <sp-radio-group @change=${onChange}>\n <sp-radio value=\"bulbasaur\">Bulbasaur</sp-radio>\n <sp-radio value=\"squirtle\">Squirtle</sp-radio>\n <sp-radio value=\"charmander\">Charmander</sp-radio>\n </sp-radio-group>\n `);\n\n const bulbasaur = el.querySelector('[value=\"bulbasaur\"]') as Radio;\n const charmander = el.querySelector('[value=\"charmander\"]') as Radio;\n bulbasaur.click();\n bulbasaur.click();\n charmander.click();\n\n expect(changeSpy.calledWith(undefined)).to.be.false;\n });\n});\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import * as stories from '../stories/radio.stories.js';
|
|
13
|
+
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
+
regressVisuals('RadioStories', stories);
|
|
15
|
+
//# sourceMappingURL=radio.test-vrt.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.test-vrt.js","sourceRoot":"","sources":["radio.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/radio.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('RadioStories', stories);\n"]}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
|
|
7
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
import '../sp-radio.js';
|
|
13
|
+
import { elementUpdated, expect, fixture, html, triggerBlurFor, waitUntil, } from '@open-wc/testing';
|
|
14
|
+
import { sendMouse } from '../../../test/plugins/browser.js';
|
|
15
|
+
import { sendKeys } from '@web/test-runner-commands';
|
|
16
|
+
function labelNodeForRadio(radio) {
|
|
17
|
+
if (!radio.shadowRoot)
|
|
18
|
+
throw new Error('No shadowRoot');
|
|
19
|
+
const slotEl = radio.shadowRoot.querySelector('slot');
|
|
20
|
+
return slotEl.assignedNodes()[0];
|
|
21
|
+
}
|
|
22
|
+
describe('Radio', () => {
|
|
23
|
+
let testDiv;
|
|
24
|
+
beforeEach(async () => {
|
|
25
|
+
testDiv = await fixture(html `
|
|
26
|
+
<div id="test-radio">
|
|
27
|
+
<sp-radio value="first" checked>Option 1</sp-radio>
|
|
28
|
+
<sp-radio value="second">Option 2</sp-radio>
|
|
29
|
+
<sp-radio value="third" autofocus>Option 3</sp-radio>
|
|
30
|
+
<sp-radio value="fourth" disabled>Option 4</sp-radio>
|
|
31
|
+
</div>
|
|
32
|
+
`);
|
|
33
|
+
});
|
|
34
|
+
it('loads', async () => {
|
|
35
|
+
const el = testDiv.querySelector('sp-radio[value=first]');
|
|
36
|
+
const textNode = labelNodeForRadio(el);
|
|
37
|
+
expect(el).to.not.equal(undefined);
|
|
38
|
+
expect(el.innerText).to.equal('Option 1');
|
|
39
|
+
expect(textNode.textContent).to.equal('Option 1');
|
|
40
|
+
});
|
|
41
|
+
it('loads accessibly', async () => {
|
|
42
|
+
await expect(testDiv).to.be.accessible();
|
|
43
|
+
});
|
|
44
|
+
it('respects checked attribute', () => {
|
|
45
|
+
const el1 = document.querySelector('[value=first]');
|
|
46
|
+
const el2 = testDiv.querySelector('[value=second]');
|
|
47
|
+
expect(el1.checked).to.be.true;
|
|
48
|
+
expect(el2.checked).to.be.false;
|
|
49
|
+
});
|
|
50
|
+
it('handles click events', async () => {
|
|
51
|
+
let value = '';
|
|
52
|
+
let checked = false;
|
|
53
|
+
const el = testDiv.querySelector('[value=third]');
|
|
54
|
+
el.addEventListener('change', (event) => {
|
|
55
|
+
const target = event.target;
|
|
56
|
+
value = target.value;
|
|
57
|
+
checked = target.checked;
|
|
58
|
+
});
|
|
59
|
+
expect(el.checked).to.be.false;
|
|
60
|
+
expect(value).to.equal('');
|
|
61
|
+
expect(checked).to.be.false;
|
|
62
|
+
el.click();
|
|
63
|
+
await elementUpdated(el);
|
|
64
|
+
expect(el.checked).to.be.true;
|
|
65
|
+
expect(value).to.equal('third');
|
|
66
|
+
expect(checked).to.be.true;
|
|
67
|
+
});
|
|
68
|
+
it('autofocuses', async () => {
|
|
69
|
+
const autoElement = testDiv.querySelector('sp-radio[autofocus]');
|
|
70
|
+
expect(autoElement).to.exist;
|
|
71
|
+
await waitUntil(() => document.activeElement === autoElement, 'Autofocused');
|
|
72
|
+
await triggerBlurFor(autoElement);
|
|
73
|
+
expect(document.activeElement).to.not.equal(autoElement);
|
|
74
|
+
});
|
|
75
|
+
it('ensures clicking disabled does not check them', async () => {
|
|
76
|
+
const el = testDiv.querySelector('sp-radio[disabled]');
|
|
77
|
+
expect(el.checked).to.be.false;
|
|
78
|
+
el.click();
|
|
79
|
+
await elementUpdated(el);
|
|
80
|
+
expect(el.checked).to.be.false;
|
|
81
|
+
});
|
|
82
|
+
it('renders [invalid]', async () => {
|
|
83
|
+
const el = await fixture(html `
|
|
84
|
+
<sp-radio invalid>Component</sp-radio>
|
|
85
|
+
`);
|
|
86
|
+
expect(el.getAttribute('aria-invalid')).to.equal('true');
|
|
87
|
+
});
|
|
88
|
+
describe('accepts "clicks"', () => {
|
|
89
|
+
let el;
|
|
90
|
+
beforeEach(async () => {
|
|
91
|
+
el = await fixture(html `
|
|
92
|
+
<sp-radio>Component</sp-radio>
|
|
93
|
+
`);
|
|
94
|
+
});
|
|
95
|
+
it('imperatively', async () => {
|
|
96
|
+
el.click();
|
|
97
|
+
await elementUpdated(el);
|
|
98
|
+
expect(el.checked).to.be.true;
|
|
99
|
+
});
|
|
100
|
+
it('as events', async () => {
|
|
101
|
+
el.dispatchEvent(new Event('click'));
|
|
102
|
+
await elementUpdated(el);
|
|
103
|
+
expect(el.checked).to.be.true;
|
|
104
|
+
});
|
|
105
|
+
it('from the keyboard', async () => {
|
|
106
|
+
el.focus();
|
|
107
|
+
await elementUpdated(el);
|
|
108
|
+
await sendKeys({
|
|
109
|
+
press: 'Space',
|
|
110
|
+
});
|
|
111
|
+
await elementUpdated(el);
|
|
112
|
+
expect(el.checked).to.be.true;
|
|
113
|
+
});
|
|
114
|
+
it('imperatively', async () => {
|
|
115
|
+
const boundingClientRecrt = el.getBoundingClientRect();
|
|
116
|
+
const radioPosition = [
|
|
117
|
+
boundingClientRecrt.x + boundingClientRecrt.width / 2,
|
|
118
|
+
boundingClientRecrt.y + boundingClientRecrt.height / 2,
|
|
119
|
+
];
|
|
120
|
+
await sendMouse({
|
|
121
|
+
steps: [
|
|
122
|
+
{
|
|
123
|
+
type: 'move',
|
|
124
|
+
position: radioPosition,
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
type: 'down',
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
type: 'up',
|
|
131
|
+
},
|
|
132
|
+
],
|
|
133
|
+
});
|
|
134
|
+
await elementUpdated(el);
|
|
135
|
+
expect(el.checked).to.be.true;
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
it('maintains its value when [readonly]', async () => {
|
|
139
|
+
const el = await fixture(html `
|
|
140
|
+
<sp-radio checked readonly>Component</sp-radio>
|
|
141
|
+
`);
|
|
142
|
+
expect(el.checked).to.be.true;
|
|
143
|
+
el.click();
|
|
144
|
+
await elementUpdated(el);
|
|
145
|
+
expect(el.checked).to.be.true;
|
|
146
|
+
});
|
|
147
|
+
});
|
|
148
|
+
//# sourceMappingURL=radio.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.test.js","sourceRoot":"","sources":["radio.test.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 '../sp-radio.js';\nimport { Radio } from '../';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n triggerBlurFor,\n waitUntil,\n} from '@open-wc/testing';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nfunction labelNodeForRadio(radio: Radio): Node {\n if (!radio.shadowRoot) throw new Error('No shadowRoot');\n const slotEl = radio.shadowRoot.querySelector('slot') as HTMLSlotElement;\n\n return slotEl.assignedNodes()[0];\n}\n\ndescribe('Radio', () => {\n let testDiv!: HTMLDivElement;\n\n beforeEach(async () => {\n testDiv = await fixture<HTMLDivElement>(\n html`\n <div id=\"test-radio\">\n <sp-radio value=\"first\" checked>Option 1</sp-radio>\n <sp-radio value=\"second\">Option 2</sp-radio>\n <sp-radio value=\"third\" autofocus>Option 3</sp-radio>\n <sp-radio value=\"fourth\" disabled>Option 4</sp-radio>\n </div>\n `\n );\n });\n it('loads', async () => {\n const el = testDiv.querySelector('sp-radio[value=first]') as Radio;\n const textNode = labelNodeForRadio(el as Radio);\n\n expect(el).to.not.equal(undefined);\n expect(el.innerText).to.equal('Option 1');\n expect(textNode.textContent).to.equal('Option 1');\n });\n\n it('loads accessibly', async () => {\n await expect(testDiv).to.be.accessible();\n });\n\n it('respects checked attribute', () => {\n const el1 = document.querySelector('[value=first]') as Radio;\n const el2 = testDiv.querySelector('[value=second]') as Radio;\n\n expect(el1.checked).to.be.true;\n expect(el2.checked).to.be.false;\n });\n\n it('handles click events', async () => {\n let value = '';\n let checked = false;\n const el = testDiv.querySelector('[value=third]') as Radio;\n el.addEventListener('change', (event) => {\n const target = event.target as Radio;\n value = target.value;\n checked = target.checked;\n });\n\n expect(el.checked).to.be.false;\n expect(value).to.equal('');\n expect(checked).to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n expect(value).to.equal('third');\n expect(checked).to.be.true;\n });\n\n it('autofocuses', async () => {\n const autoElement = testDiv.querySelector(\n 'sp-radio[autofocus]'\n ) as Radio;\n\n expect(autoElement).to.exist;\n await waitUntil(\n () => document.activeElement === autoElement,\n 'Autofocused'\n );\n\n await triggerBlurFor(autoElement);\n\n expect(document.activeElement).to.not.equal(autoElement);\n });\n\n it('ensures clicking disabled does not check them', async () => {\n const el = testDiv.querySelector('sp-radio[disabled]') as Radio;\n\n expect(el.checked).to.be.false;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.false;\n });\n\n it('renders [invalid]', async () => {\n const el = await fixture<Radio>(html`\n <sp-radio invalid>Component</sp-radio>\n `);\n\n expect(el.getAttribute('aria-invalid')).to.equal('true');\n });\n\n describe('accepts \"clicks\"', () => {\n let el!: Radio;\n beforeEach(async () => {\n el = await fixture<Radio>(html`\n <sp-radio>Component</sp-radio>\n `);\n });\n it('imperatively', async () => {\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('as events', async () => {\n el.dispatchEvent(new Event('click'));\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('from the keyboard', async () => {\n el.focus();\n await elementUpdated(el);\n await sendKeys({\n press: 'Space',\n });\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n it('imperatively', async () => {\n const boundingClientRecrt = el.getBoundingClientRect();\n const radioPosition: [number, number] = [\n boundingClientRecrt.x + boundingClientRecrt.width / 2,\n boundingClientRecrt.y + boundingClientRecrt.height / 2,\n ];\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: radioPosition,\n },\n {\n type: 'down',\n },\n {\n type: 'up',\n },\n ],\n });\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n });\n\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Radio>(html`\n <sp-radio checked readonly>Component</sp-radio>\n `);\n expect(el.checked).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n});\n"]}
|