@justeattakeaway/pie-radio 0.11.4 → 0.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +34 -55
- package/dist/index.d.ts +7 -5
- package/dist/index.js +61 -51
- package/dist/react.d.ts +8 -6
- package/package.json +5 -5
- package/src/index.ts +35 -1
- package/src/radio.scss +23 -19
package/custom-elements.json
CHANGED
|
@@ -66,26 +66,29 @@
|
|
|
66
66
|
"privacy": "private",
|
|
67
67
|
"default": "false"
|
|
68
68
|
},
|
|
69
|
+
{
|
|
70
|
+
"kind": "field",
|
|
71
|
+
"name": "_isAnimationAllowed",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "boolean"
|
|
74
|
+
},
|
|
75
|
+
"privacy": "private",
|
|
76
|
+
"default": "false"
|
|
77
|
+
},
|
|
69
78
|
{
|
|
70
79
|
"kind": "field",
|
|
71
80
|
"name": "checked",
|
|
72
|
-
"privacy": "public"
|
|
73
|
-
"attribute": "checked",
|
|
74
|
-
"reflects": true
|
|
81
|
+
"privacy": "public"
|
|
75
82
|
},
|
|
76
83
|
{
|
|
77
84
|
"kind": "field",
|
|
78
85
|
"name": "defaultChecked",
|
|
79
|
-
"privacy": "public"
|
|
80
|
-
"attribute": "defaultChecked",
|
|
81
|
-
"reflects": true
|
|
86
|
+
"privacy": "public"
|
|
82
87
|
},
|
|
83
88
|
{
|
|
84
89
|
"kind": "field",
|
|
85
90
|
"name": "disabled",
|
|
86
|
-
"privacy": "public"
|
|
87
|
-
"attribute": "disabled",
|
|
88
|
-
"reflects": true
|
|
91
|
+
"privacy": "public"
|
|
89
92
|
},
|
|
90
93
|
{
|
|
91
94
|
"kind": "field",
|
|
@@ -93,16 +96,12 @@
|
|
|
93
96
|
"type": {
|
|
94
97
|
"text": "RadioProps['name']"
|
|
95
98
|
},
|
|
96
|
-
"privacy": "public"
|
|
97
|
-
"attribute": "name",
|
|
98
|
-
"reflects": true
|
|
99
|
+
"privacy": "public"
|
|
99
100
|
},
|
|
100
101
|
{
|
|
101
102
|
"kind": "field",
|
|
102
103
|
"name": "required",
|
|
103
|
-
"privacy": "public"
|
|
104
|
-
"attribute": "required",
|
|
105
|
-
"reflects": true
|
|
104
|
+
"privacy": "public"
|
|
106
105
|
},
|
|
107
106
|
{
|
|
108
107
|
"kind": "field",
|
|
@@ -110,14 +109,12 @@
|
|
|
110
109
|
"type": {
|
|
111
110
|
"text": "RadioProps['value']"
|
|
112
111
|
},
|
|
113
|
-
"privacy": "public"
|
|
114
|
-
"attribute": "value"
|
|
112
|
+
"privacy": "public"
|
|
115
113
|
},
|
|
116
114
|
{
|
|
117
115
|
"kind": "field",
|
|
118
116
|
"name": "status",
|
|
119
|
-
"privacy": "public"
|
|
120
|
-
"attribute": "status"
|
|
117
|
+
"privacy": "public"
|
|
121
118
|
},
|
|
122
119
|
{
|
|
123
120
|
"kind": "field",
|
|
@@ -171,6 +168,24 @@
|
|
|
171
168
|
"name": "formResetCallback",
|
|
172
169
|
"privacy": "public",
|
|
173
170
|
"description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"kind": "method",
|
|
174
|
+
"name": "_handleClick",
|
|
175
|
+
"privacy": "private",
|
|
176
|
+
"return": {
|
|
177
|
+
"type": {
|
|
178
|
+
"text": "void"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
"parameters": [
|
|
182
|
+
{
|
|
183
|
+
"name": "event",
|
|
184
|
+
"type": {
|
|
185
|
+
"text": "MouseEvent"
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
]
|
|
174
189
|
}
|
|
175
190
|
],
|
|
176
191
|
"events": [
|
|
@@ -189,42 +204,6 @@
|
|
|
189
204
|
"name": "change"
|
|
190
205
|
}
|
|
191
206
|
],
|
|
192
|
-
"attributes": [
|
|
193
|
-
{
|
|
194
|
-
"name": "checked",
|
|
195
|
-
"fieldName": "checked"
|
|
196
|
-
},
|
|
197
|
-
{
|
|
198
|
-
"name": "defaultChecked",
|
|
199
|
-
"fieldName": "defaultChecked"
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"name": "disabled",
|
|
203
|
-
"fieldName": "disabled"
|
|
204
|
-
},
|
|
205
|
-
{
|
|
206
|
-
"name": "name",
|
|
207
|
-
"type": {
|
|
208
|
-
"text": "RadioProps['name']"
|
|
209
|
-
},
|
|
210
|
-
"fieldName": "name"
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
"name": "required",
|
|
214
|
-
"fieldName": "required"
|
|
215
|
-
},
|
|
216
|
-
{
|
|
217
|
-
"name": "value",
|
|
218
|
-
"type": {
|
|
219
|
-
"text": "RadioProps['value']"
|
|
220
|
-
},
|
|
221
|
-
"fieldName": "value"
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"name": "status",
|
|
225
|
-
"fieldName": "status"
|
|
226
|
-
}
|
|
227
|
-
],
|
|
228
207
|
"mixins": [
|
|
229
208
|
{
|
|
230
209
|
"name": "FormControlMixin",
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import { CSSResult } from 'lit';
|
|
3
|
+
import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
4
|
+
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
|
+
import { TemplateResult } from 'lit-html';
|
|
8
8
|
|
|
9
9
|
export declare type DefaultProps = ComponentDefaultProps<RadioProps, keyof Omit<RadioProps, 'name' | 'value'>>;
|
|
10
10
|
|
|
@@ -17,6 +17,7 @@ export declare const defaultProps: DefaultProps;
|
|
|
17
17
|
*/
|
|
18
18
|
export declare class PieRadio extends PieRadio_base implements RadioProps {
|
|
19
19
|
private _disabledByParent;
|
|
20
|
+
private _isAnimationAllowed;
|
|
20
21
|
checked: boolean;
|
|
21
22
|
defaultChecked: boolean;
|
|
22
23
|
disabled: boolean;
|
|
@@ -48,6 +49,7 @@ export declare class PieRadio extends PieRadio_base implements RadioProps {
|
|
|
48
49
|
* the checked state is reset to the default checked state and a `change` event is emitted.
|
|
49
50
|
*/
|
|
50
51
|
formResetCallback(): void;
|
|
52
|
+
private _handleClick;
|
|
51
53
|
updated(): void;
|
|
52
54
|
render(): TemplateResult<1>;
|
|
53
55
|
static styles: CSSResult;
|
package/dist/index.js
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { state as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { live as
|
|
1
|
+
import { LitElement as k, html as m, unsafeCSS as y } from "lit";
|
|
2
|
+
import { state as u, property as c, query as x } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as w } from "lit/directives/if-defined.js";
|
|
4
|
+
import { live as _ } from "lit/directives/live.js";
|
|
5
5
|
import { classMap as C } from "lit/directives/class-map.js";
|
|
6
|
-
import { FormControlMixin as
|
|
7
|
-
const b = class b extends
|
|
6
|
+
import { FormControlMixin as A, RtlMixin as z, wrapNativeEvent as P, requiredProperty as B, validPropertyValues as $, safeCustomElement as q } from "@justeattakeaway/pie-webc-core";
|
|
7
|
+
const b = class b extends k {
|
|
8
8
|
willUpdate() {
|
|
9
9
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
b.v = "0.11.
|
|
12
|
+
b.v = "0.11.6";
|
|
13
13
|
let h = b;
|
|
14
|
-
const
|
|
14
|
+
const E = ["default", "error"], l = {
|
|
15
15
|
checked: !1,
|
|
16
16
|
defaultChecked: !1,
|
|
17
17
|
disabled: !1,
|
|
18
18
|
required: !1,
|
|
19
19
|
status: "default"
|
|
20
|
-
},
|
|
21
|
-
var
|
|
22
|
-
for (var t = d > 1 ? void 0 : d ?
|
|
23
|
-
(
|
|
24
|
-
return d && t &&
|
|
20
|
+
}, S = '*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radio{--radio-dot-bg-color: var(--dt-color-content-interactive-primary);--radio-bg-color: transparent;--radio-bg-color--checked: var(--dt-color-interactive-brand);--radio-border-color: var(--dt-color-border-form);--radio-font-size: calc(var(--dt-font-body-l-size) * 1px);--radio-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--radio-font-weight: var(--dt-font-weight-regular);--radio-text-color: var(--dt-color-content-default);--radio-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-size:var(--radio-font-size);line-height:var(--radio-line-height);font-weight:var(--radio-font-weight);color:var(--radio-text-color)}.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-interactive-brand))}}.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-interactive-brand))}}.c-radio.is-disabled{--radio-cursor: not-allowed}.c-radio.c-radio--status-error{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:not(:checked,:disabled){--radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent)}}.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:hover:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(dt-color-support-error))}}.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));--radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)))}@supports (background-color: color-mix(in srgb,black,white)){.c-radio.c-radio--status-error .c-radio-input:active:checked:not(:disabled):before{--radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(dt-color-support-error))}}.c-radio .c-radio-input{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;inline-size:var(--radio-size);block-size:var(--radio-size);border:var(--radio-border-width) solid var(--radio-border-color);border-radius:50%;margin:0;cursor:var(--radio-cursor);background-color:var(--radio-bg-color);flex-shrink:0}.c-radio .c-radio-input:before{--circle-size: calc(var(--radio-border-width) * -1);content:"";display:block;inset:var(--circle-size);border-radius:inherit;background-color:var(--radio-bg-color--checked);position:absolute;transform:scale(0)}.c-radio .c-radio-input:after{content:"";position:absolute;top:50%;left:50%;width:var(--radio-dot-size);height:var(--radio-dot-size);background-color:var(--radio-dot-bg-color);border-radius:50%;transform:translate(-50%,-50%) scale(0)}.c-radio .c-radio-input:checked:after{transform:translate(-50%,-50%) scale(1)}.c-radio .c-radio-input:checked:before{transform:scale(1)}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default)}.c-radio .c-radio-input:checked:disabled{--radio-dot-bg-color: var(--dt-color-content-disabled);--radio-bg-color--checked: var(--dt-color-disabled-01)}.c-radio--allow-animation .c-radio-input{transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing)}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):after{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-radio--allow-animation .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}:host(:focus-visible){outline:none}:host(:focus-visible) .c-radio .c-radio-input{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}';
|
|
21
|
+
var F = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (r, a, i, d) => {
|
|
22
|
+
for (var t = d > 1 ? void 0 : d ? D(a, i) : a, s = r.length - 1, n; s >= 0; s--)
|
|
23
|
+
(n = r[s]) && (t = (d ? n(a, i, t) : n(t)) || t);
|
|
24
|
+
return d && t && F(a, i, t), t;
|
|
25
25
|
};
|
|
26
|
-
const
|
|
27
|
-
let o = class extends
|
|
26
|
+
const g = "pie-radio";
|
|
27
|
+
let o = class extends A(z(h)) {
|
|
28
28
|
constructor() {
|
|
29
|
-
super(...arguments), this._disabledByParent = !1, this.checked =
|
|
29
|
+
super(...arguments), this._disabledByParent = !1, this._isAnimationAllowed = !1, this.checked = l.checked, this.defaultChecked = l.defaultChecked, this.disabled = l.disabled, this.required = l.required, this.status = l.status;
|
|
30
30
|
}
|
|
31
31
|
connectedCallback() {
|
|
32
32
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
33
33
|
const { signal: r } = this._abortController;
|
|
34
|
-
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (
|
|
35
|
-
this._disabledByParent =
|
|
36
|
-
}, { signal: r });
|
|
34
|
+
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (a) => {
|
|
35
|
+
this._disabledByParent = a.detail.disabled;
|
|
36
|
+
}, { signal: r }), this.addEventListener("click", this._handleClick, { signal: r });
|
|
37
37
|
}
|
|
38
38
|
disconnectedCallback() {
|
|
39
39
|
super.disconnectedCallback(), this._abortController.abort();
|
|
@@ -49,10 +49,10 @@ let o = class extends _(z(h)) {
|
|
|
49
49
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
|
|
50
50
|
*/
|
|
51
51
|
_handleChange(r) {
|
|
52
|
-
const { checked:
|
|
53
|
-
this.checked =
|
|
52
|
+
const { checked: a } = r == null ? void 0 : r.currentTarget;
|
|
53
|
+
this.checked = a;
|
|
54
54
|
const i = P(r);
|
|
55
|
-
this.dispatchEvent(i), this._handleFormAssociation();
|
|
55
|
+
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(i), this._handleFormAssociation();
|
|
56
56
|
}
|
|
57
57
|
/**
|
|
58
58
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -73,77 +73,87 @@ let o = class extends _(z(h)) {
|
|
|
73
73
|
const r = new Event("change", { bubbles: !0, composed: !0 });
|
|
74
74
|
this.dispatchEvent(r), this._handleFormAssociation();
|
|
75
75
|
}
|
|
76
|
+
// Triggers a programmatic click on the underlying radio input.
|
|
77
|
+
// This is primarily used to ensure that the radio input is selected when using screenreaders like Apple VoiceOver.
|
|
78
|
+
_handleClick(r) {
|
|
79
|
+
r.composedPath()[0] !== this._radio && (this.disabled || this._disabledByParent || this._radio.click());
|
|
80
|
+
}
|
|
76
81
|
updated() {
|
|
77
82
|
this.setAttribute("aria-checked", String(this.checked)), this._handleFormAssociation();
|
|
78
83
|
}
|
|
79
84
|
render() {
|
|
80
85
|
const {
|
|
81
86
|
checked: r,
|
|
82
|
-
disabled:
|
|
87
|
+
disabled: a,
|
|
83
88
|
_disabledByParent: i,
|
|
84
|
-
|
|
85
|
-
|
|
89
|
+
_isAnimationAllowed: d,
|
|
90
|
+
name: t,
|
|
91
|
+
required: s,
|
|
86
92
|
value: n,
|
|
87
|
-
status:
|
|
88
|
-
} = this, v =
|
|
93
|
+
status: p
|
|
94
|
+
} = this, v = a || i, f = {
|
|
89
95
|
"c-radio": !0,
|
|
90
96
|
"is-disabled": v,
|
|
91
|
-
[`c-radio--status-${
|
|
97
|
+
[`c-radio--status-${p}`]: !v,
|
|
98
|
+
"c-radio--allow-animation": d
|
|
92
99
|
};
|
|
93
|
-
return
|
|
94
|
-
<label class=${C(
|
|
100
|
+
return m`
|
|
101
|
+
<label class=${C(f)}>
|
|
95
102
|
<input
|
|
96
103
|
tabindex="-1"
|
|
97
104
|
class="c-radio-input"
|
|
98
105
|
type="radio"
|
|
99
106
|
id="radioId"
|
|
100
107
|
data-test-id="pie-radio-input"
|
|
101
|
-
.checked="${
|
|
108
|
+
.checked="${_(r)}"
|
|
102
109
|
.value="${n}"
|
|
103
|
-
name="${
|
|
110
|
+
name="${w(t)}"
|
|
104
111
|
?disabled="${v}"
|
|
105
|
-
?required="${
|
|
106
|
-
aria-invalid=${
|
|
112
|
+
?required="${s}"
|
|
113
|
+
aria-invalid=${p === "error" ? "true" : "false"}
|
|
107
114
|
@change="${this._handleChange}">
|
|
108
115
|
<slot></slot>
|
|
109
116
|
</label>`;
|
|
110
117
|
}
|
|
111
118
|
};
|
|
112
|
-
o.styles =
|
|
113
|
-
|
|
114
|
-
|
|
119
|
+
o.styles = y(S);
|
|
120
|
+
e([
|
|
121
|
+
u()
|
|
115
122
|
], o.prototype, "_disabledByParent", 2);
|
|
116
|
-
|
|
123
|
+
e([
|
|
124
|
+
u()
|
|
125
|
+
], o.prototype, "_isAnimationAllowed", 2);
|
|
126
|
+
e([
|
|
117
127
|
c({ type: Boolean, reflect: !0 })
|
|
118
128
|
], o.prototype, "checked", 2);
|
|
119
|
-
|
|
129
|
+
e([
|
|
120
130
|
c({ type: Boolean, reflect: !0 })
|
|
121
131
|
], o.prototype, "defaultChecked", 2);
|
|
122
|
-
|
|
132
|
+
e([
|
|
123
133
|
c({ type: Boolean, reflect: !0 })
|
|
124
134
|
], o.prototype, "disabled", 2);
|
|
125
|
-
|
|
135
|
+
e([
|
|
126
136
|
c({ type: String, reflect: !0 })
|
|
127
137
|
], o.prototype, "name", 2);
|
|
128
|
-
|
|
138
|
+
e([
|
|
129
139
|
c({ type: Boolean, reflect: !0 })
|
|
130
140
|
], o.prototype, "required", 2);
|
|
131
|
-
|
|
141
|
+
e([
|
|
132
142
|
c({ type: String }),
|
|
133
|
-
|
|
143
|
+
B(g)
|
|
134
144
|
], o.prototype, "value", 2);
|
|
135
|
-
|
|
145
|
+
e([
|
|
136
146
|
c({ type: String }),
|
|
137
|
-
$(
|
|
147
|
+
$(g, E, l.status)
|
|
138
148
|
], o.prototype, "status", 2);
|
|
139
|
-
|
|
140
|
-
|
|
149
|
+
e([
|
|
150
|
+
x('input[type="radio"]')
|
|
141
151
|
], o.prototype, "_radio", 2);
|
|
142
|
-
o =
|
|
152
|
+
o = e([
|
|
143
153
|
q("pie-radio")
|
|
144
154
|
], o);
|
|
145
155
|
export {
|
|
146
156
|
o as PieRadio,
|
|
147
|
-
|
|
148
|
-
|
|
157
|
+
l as defaultProps,
|
|
158
|
+
E as statusTypes
|
|
149
159
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import { CSSResult } from 'lit';
|
|
3
|
+
import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
4
|
+
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
5
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
6
6
|
import * as React_2 from 'react';
|
|
7
|
-
import
|
|
8
|
-
import
|
|
7
|
+
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
|
+
import { TemplateResult } from 'lit-html';
|
|
9
9
|
|
|
10
10
|
export declare type DefaultProps = ComponentDefaultProps<RadioProps, keyof Omit<RadioProps, 'name' | 'value'>>;
|
|
11
11
|
|
|
12
12
|
export declare const defaultProps: DefaultProps;
|
|
13
13
|
|
|
14
|
-
export declare const PieRadio: React_2.ForwardRefExoticComponent<RadioProps & React_2.RefAttributes<PieRadio_2> & PieRadioEvents & ReactBaseType>;
|
|
14
|
+
export declare const PieRadio: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<RadioProps> & React_2.RefAttributes<PieRadio_2> & PieRadioEvents & ReactBaseType>;
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* @tagname pie-radio
|
|
@@ -20,6 +20,7 @@ export declare const PieRadio: React_2.ForwardRefExoticComponent<RadioProps & Re
|
|
|
20
20
|
*/
|
|
21
21
|
declare class PieRadio_2 extends PieRadio_base implements RadioProps {
|
|
22
22
|
private _disabledByParent;
|
|
23
|
+
private _isAnimationAllowed;
|
|
23
24
|
checked: boolean;
|
|
24
25
|
defaultChecked: boolean;
|
|
25
26
|
disabled: boolean;
|
|
@@ -51,6 +52,7 @@ declare class PieRadio_2 extends PieRadio_base implements RadioProps {
|
|
|
51
52
|
* the checked state is reset to the default checked state and a `change` event is emitted.
|
|
52
53
|
*/
|
|
53
54
|
formResetCallback(): void;
|
|
55
|
+
private _handleClick;
|
|
54
56
|
updated(): void;
|
|
55
57
|
render(): TemplateResult<1>;
|
|
56
58
|
static styles: CSSResult;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-radio",
|
|
3
3
|
"description": "PIE Design System Radio built using Web Components",
|
|
4
|
-
"version": "0.11.
|
|
4
|
+
"version": "0.11.6",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -39,13 +39,13 @@
|
|
|
39
39
|
"license": "Apache-2.0",
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
44
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
42
|
+
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
|
+
"@justeattakeaway/pie-css": "0.19.0",
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.7.0",
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-webc-core": "1.
|
|
48
|
+
"@justeattakeaway/pie-webc-core": "1.1.0"
|
|
49
49
|
},
|
|
50
50
|
"volta": {
|
|
51
51
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -34,6 +34,9 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
34
34
|
@state()
|
|
35
35
|
private _disabledByParent = false;
|
|
36
36
|
|
|
37
|
+
@state()
|
|
38
|
+
private _isAnimationAllowed = false;
|
|
39
|
+
|
|
37
40
|
@property({ type: Boolean, reflect: true })
|
|
38
41
|
public checked = defaultProps.checked;
|
|
39
42
|
|
|
@@ -68,6 +71,11 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
68
71
|
const { signal } = this._abortController;
|
|
69
72
|
this.setAttribute('role', 'radio');
|
|
70
73
|
this.addEventListener('pie-radio-group-disabled', (e: CustomEventInit) => { this._disabledByParent = e.detail.disabled; }, { signal });
|
|
74
|
+
|
|
75
|
+
// This is required to ensure that programmatic clicks correctly select the radio input in the template. This is primarily
|
|
76
|
+
// how screen readers such as Apple VoiceOver interact with the component.
|
|
77
|
+
// Without this, double tapping the radio input would not select it when using VoiceOver.
|
|
78
|
+
this.addEventListener('click', this._handleClick, { signal });
|
|
71
79
|
}
|
|
72
80
|
|
|
73
81
|
disconnectedCallback () : void {
|
|
@@ -94,6 +102,11 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
94
102
|
// This is because some events set `composed` to `false`.
|
|
95
103
|
// Reference: https://javascript.info/shadow-dom-events#event-composed
|
|
96
104
|
const customChangeEvent = wrapNativeEvent(event);
|
|
105
|
+
|
|
106
|
+
if (!this._isAnimationAllowed) {
|
|
107
|
+
this._isAnimationAllowed = true;
|
|
108
|
+
}
|
|
109
|
+
|
|
97
110
|
this.dispatchEvent(customChangeEvent);
|
|
98
111
|
|
|
99
112
|
this._handleFormAssociation();
|
|
@@ -125,6 +138,22 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
125
138
|
this._handleFormAssociation();
|
|
126
139
|
}
|
|
127
140
|
|
|
141
|
+
// Triggers a programmatic click on the underlying radio input.
|
|
142
|
+
// This is primarily used to ensure that the radio input is selected when using screenreaders like Apple VoiceOver.
|
|
143
|
+
private _handleClick (event: MouseEvent): void {
|
|
144
|
+
// This guard prevents an infinite loop by ignoring the programmatic click
|
|
145
|
+
// that this handler generates as it bubbles back up from the internal input.
|
|
146
|
+
if (event.composedPath()[0] === this._radio) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
if (this.disabled || this._disabledByParent) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
this._radio.click();
|
|
155
|
+
}
|
|
156
|
+
|
|
128
157
|
updated () {
|
|
129
158
|
// Ensure aria-checked reflects the checked state
|
|
130
159
|
this.setAttribute('aria-checked', String(this.checked));
|
|
@@ -137,6 +166,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
137
166
|
checked,
|
|
138
167
|
disabled,
|
|
139
168
|
_disabledByParent,
|
|
169
|
+
_isAnimationAllowed,
|
|
140
170
|
name,
|
|
141
171
|
required,
|
|
142
172
|
value,
|
|
@@ -149,10 +179,14 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
149
179
|
'c-radio': true,
|
|
150
180
|
'is-disabled': componentDisabled,
|
|
151
181
|
[`c-radio--status-${status}`]: !componentDisabled,
|
|
182
|
+
'c-radio--allow-animation': _isAnimationAllowed,
|
|
152
183
|
};
|
|
153
184
|
|
|
185
|
+
// NOTE: The label element here does not require a `for` attribute. This is because the click logic is handled by the component itself.
|
|
186
|
+
// Adding a `for` attribute would cause multiple click events to be fired which could lead to unexpected behaviour that might impact accessibility, performance and analytics.
|
|
187
|
+
// We still use a label element for good semantics.
|
|
154
188
|
return html`
|
|
155
|
-
<label class=${classMap(classes)}
|
|
189
|
+
<label class=${classMap(classes)}>
|
|
156
190
|
<input
|
|
157
191
|
tabindex="-1"
|
|
158
192
|
class="c-radio-input"
|
package/src/radio.scss
CHANGED
|
@@ -72,8 +72,6 @@
|
|
|
72
72
|
|
|
73
73
|
@include radio-interactive-state('dt-color-interactive-brand');
|
|
74
74
|
|
|
75
|
-
|
|
76
|
-
|
|
77
75
|
&.is-disabled {
|
|
78
76
|
--radio-cursor: not-allowed;
|
|
79
77
|
}
|
|
@@ -97,7 +95,6 @@
|
|
|
97
95
|
margin: 0;
|
|
98
96
|
cursor: var(--radio-cursor);
|
|
99
97
|
background-color: var(--radio-bg-color);
|
|
100
|
-
transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
101
98
|
flex-shrink: 0;
|
|
102
99
|
|
|
103
100
|
// The filled circle before checking the radio
|
|
@@ -113,12 +110,6 @@
|
|
|
113
110
|
transform: scale(0);
|
|
114
111
|
}
|
|
115
112
|
|
|
116
|
-
&:not(:disabled):before {
|
|
117
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
118
|
-
transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
113
|
// The dot in the middle before checking the radio
|
|
123
114
|
&:after {
|
|
124
115
|
content: '';
|
|
@@ -144,6 +135,29 @@
|
|
|
144
135
|
}
|
|
145
136
|
}
|
|
146
137
|
|
|
138
|
+
&:disabled {
|
|
139
|
+
--radio-bg-color: var(--dt-color-disabled-01);
|
|
140
|
+
--radio-border-color: var(--dt-color-border-default);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&:checked:disabled {
|
|
144
|
+
--radio-dot-bg-color: var(--dt-color-content-disabled);
|
|
145
|
+
--radio-bg-color--checked: var(--dt-color-disabled-01);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.c-radio--allow-animation {
|
|
151
|
+
/* stylelint-disable-next-line no-descending-specificity */
|
|
152
|
+
.c-radio-input {
|
|
153
|
+
transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
154
|
+
|
|
155
|
+
&:not(:disabled):before {
|
|
156
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
157
|
+
transition: all var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
147
161
|
// Scales down at 100ms when unchecked
|
|
148
162
|
&:not(:disabled):after {
|
|
149
163
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -157,16 +171,6 @@
|
|
|
157
171
|
transition: all var(--dt-motion-timing-150) var(--radio-motion-easing);
|
|
158
172
|
}
|
|
159
173
|
}
|
|
160
|
-
|
|
161
|
-
&:disabled {
|
|
162
|
-
--radio-bg-color: var(--dt-color-disabled-01);
|
|
163
|
-
--radio-border-color: var(--dt-color-border-default);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
&:checked:disabled {
|
|
167
|
-
--radio-dot-bg-color: var(--dt-color-content-disabled);
|
|
168
|
-
--radio-bg-color--checked: var(--dt-color-disabled-01);
|
|
169
|
-
}
|
|
170
174
|
}
|
|
171
175
|
}
|
|
172
176
|
|