@justeattakeaway/pie-radio 0.6.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +0 -5
- package/dist/index.d.ts +0 -1
- package/dist/index.js +34 -36
- package/dist/react.d.ts +0 -1
- package/package.json +3 -3
- package/src/index.ts +5 -5
- package/src/radio.scss +12 -5
package/custom-elements.json
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -37,7 +37,6 @@ export declare class PieRadio extends PieRadio_base implements RadioProps {
|
|
|
37
37
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
|
|
38
38
|
*/
|
|
39
39
|
private _handleChange;
|
|
40
|
-
focus(): void;
|
|
41
40
|
/**
|
|
42
41
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
43
42
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
package/dist/index.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
import { LitElement as f, html as k, unsafeCSS as m } from "lit";
|
|
2
|
-
import { state as g, property as
|
|
2
|
+
import { state as g, property as i, query as y } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as C } from "lit/directives/if-defined.js";
|
|
4
4
|
import { live as _ } from "lit/directives/live.js";
|
|
5
|
-
import { classMap as
|
|
6
|
-
import { FormControlMixin as
|
|
7
|
-
const
|
|
5
|
+
import { classMap as x } from "lit/directives/class-map.js";
|
|
6
|
+
import { FormControlMixin as z, RtlMixin as w, wrapNativeEvent as E, requiredProperty as $, validPropertyValues as q, defineCustomElement as B } from "@justeattakeaway/pie-webc-core";
|
|
7
|
+
const A = ["default", "error"], d = {
|
|
8
8
|
checked: !1,
|
|
9
9
|
defaultChecked: !1,
|
|
10
10
|
disabled: !1,
|
|
11
11
|
required: !1,
|
|
12
12
|
status: "default"
|
|
13
|
-
},
|
|
14
|
-
var S = Object.defineProperty, e = (
|
|
15
|
-
for (var
|
|
16
|
-
(s =
|
|
17
|
-
return
|
|
13
|
+
}, P = '*,*:after,*:before{box-sizing:inherit}.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-interactive-form);--radio-font-size: p.font-size(--dt-font-body-l-size);--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);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))}.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))}.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)))}.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)))}.c-radio.c-radio--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))}.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))}.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)))}.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)))}.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);transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing);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)}@media (prefers-reduced-motion: no-preference){.c-radio .c-radio-input:not(:disabled):before{transition:all var(--dt-motion-timing-100) var(--radio-motion-easing)}}.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)}@media (prefers-reduced-motion: no-preference){.c-radio .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 .c-radio-input:not(:disabled):checked:after{transition:all var(--dt-motion-timing-150) var(--radio-motion-easing)}}.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)}: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}';
|
|
14
|
+
var S = Object.defineProperty, e = (p, r, t, l) => {
|
|
15
|
+
for (var a = void 0, c = p.length - 1, s; c >= 0; c--)
|
|
16
|
+
(s = p[c]) && (a = s(r, t, a) || a);
|
|
17
|
+
return a && S(r, t, a), a;
|
|
18
18
|
};
|
|
19
|
-
const v = "pie-radio",
|
|
19
|
+
const v = "pie-radio", h = class h extends z(w(f)) {
|
|
20
20
|
constructor() {
|
|
21
|
-
super(...arguments), this._disabledByParent = !1, this.checked =
|
|
21
|
+
super(...arguments), this._disabledByParent = !1, this.checked = d.checked, this.defaultChecked = d.defaultChecked, this.disabled = d.disabled, this.required = d.required, this.status = d.status;
|
|
22
22
|
}
|
|
23
23
|
connectedCallback() {
|
|
24
24
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
25
25
|
const { signal: r } = this._abortController;
|
|
26
|
-
this.addEventListener("pie-radio-group-disabled", (
|
|
27
|
-
this._disabledByParent =
|
|
26
|
+
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (t) => {
|
|
27
|
+
this._disabledByParent = t.detail.disabled;
|
|
28
28
|
}, { signal: r });
|
|
29
29
|
}
|
|
30
30
|
disconnectedCallback() {
|
|
@@ -41,14 +41,11 @@ const v = "pie-radio", p = class p extends x(w(f)) {
|
|
|
41
41
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
|
|
42
42
|
*/
|
|
43
43
|
_handleChange(r) {
|
|
44
|
-
const { checked:
|
|
45
|
-
this.checked =
|
|
44
|
+
const { checked: t } = r == null ? void 0 : r.currentTarget;
|
|
45
|
+
this.checked = t;
|
|
46
46
|
const l = E(r);
|
|
47
47
|
this.dispatchEvent(l), this._handleFormAssociation();
|
|
48
48
|
}
|
|
49
|
-
focus() {
|
|
50
|
-
this._radio.focus();
|
|
51
|
-
}
|
|
52
49
|
/**
|
|
53
50
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
54
51
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -69,32 +66,33 @@ const v = "pie-radio", p = class p extends x(w(f)) {
|
|
|
69
66
|
this.dispatchEvent(r), this._handleFormAssociation();
|
|
70
67
|
}
|
|
71
68
|
updated() {
|
|
72
|
-
this._handleFormAssociation();
|
|
69
|
+
this.setAttribute("aria-checked", String(this.checked)), this._handleFormAssociation();
|
|
73
70
|
}
|
|
74
71
|
render() {
|
|
75
72
|
const {
|
|
76
73
|
checked: r,
|
|
77
|
-
disabled:
|
|
74
|
+
disabled: t,
|
|
78
75
|
_disabledByParent: l,
|
|
79
|
-
name:
|
|
76
|
+
name: a,
|
|
80
77
|
required: c,
|
|
81
78
|
value: s,
|
|
82
79
|
status: b
|
|
83
|
-
} = this, n =
|
|
80
|
+
} = this, n = t || l, u = {
|
|
84
81
|
"c-radio": !0,
|
|
85
82
|
"c-radio--disabled": n,
|
|
86
83
|
[`c-radio--status-${b}`]: !n
|
|
87
84
|
};
|
|
88
85
|
return k`
|
|
89
|
-
<label class=${
|
|
86
|
+
<label class=${x(u)} for="radioId">
|
|
90
87
|
<input
|
|
88
|
+
tabindex="-1"
|
|
91
89
|
class="c-radio-input"
|
|
92
90
|
type="radio"
|
|
93
91
|
id="radioId"
|
|
94
92
|
data-test-id="pie-radio"
|
|
95
93
|
.checked="${_(r)}"
|
|
96
94
|
.value="${s}"
|
|
97
|
-
name="${C(
|
|
95
|
+
name="${C(a)}"
|
|
98
96
|
?disabled="${n}"
|
|
99
97
|
?required="${c}"
|
|
100
98
|
aria-invalid=${b === "error" ? "true" : "false"}
|
|
@@ -103,33 +101,33 @@ const v = "pie-radio", p = class p extends x(w(f)) {
|
|
|
103
101
|
</label>`;
|
|
104
102
|
}
|
|
105
103
|
};
|
|
106
|
-
|
|
107
|
-
let o =
|
|
104
|
+
h.styles = m(P);
|
|
105
|
+
let o = h;
|
|
108
106
|
e([
|
|
109
107
|
g()
|
|
110
108
|
], o.prototype, "_disabledByParent");
|
|
111
109
|
e([
|
|
112
|
-
|
|
110
|
+
i({ type: Boolean, reflect: !0 })
|
|
113
111
|
], o.prototype, "checked");
|
|
114
112
|
e([
|
|
115
|
-
|
|
113
|
+
i({ type: Boolean, reflect: !0 })
|
|
116
114
|
], o.prototype, "defaultChecked");
|
|
117
115
|
e([
|
|
118
|
-
|
|
116
|
+
i({ type: Boolean, reflect: !0 })
|
|
119
117
|
], o.prototype, "disabled");
|
|
120
118
|
e([
|
|
121
|
-
|
|
119
|
+
i({ type: String })
|
|
122
120
|
], o.prototype, "name");
|
|
123
121
|
e([
|
|
124
|
-
|
|
122
|
+
i({ type: Boolean, reflect: !0 })
|
|
125
123
|
], o.prototype, "required");
|
|
126
124
|
e([
|
|
127
|
-
|
|
125
|
+
i({ type: String }),
|
|
128
126
|
$(v)
|
|
129
127
|
], o.prototype, "value");
|
|
130
128
|
e([
|
|
131
|
-
|
|
132
|
-
q(v,
|
|
129
|
+
i({ type: String }),
|
|
130
|
+
q(v, A, d.status)
|
|
133
131
|
], o.prototype, "status");
|
|
134
132
|
e([
|
|
135
133
|
y('input[type="radio"]')
|
|
@@ -137,6 +135,6 @@ e([
|
|
|
137
135
|
B(v, o);
|
|
138
136
|
export {
|
|
139
137
|
o as PieRadio,
|
|
140
|
-
|
|
141
|
-
|
|
138
|
+
d as defaultProps,
|
|
139
|
+
A as statusTypes
|
|
142
140
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -40,7 +40,6 @@ declare class PieRadio_2 extends PieRadio_base implements RadioProps {
|
|
|
40
40
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
|
|
41
41
|
*/
|
|
42
42
|
private _handleChange;
|
|
43
|
-
focus(): void;
|
|
44
43
|
/**
|
|
45
44
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
46
45
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
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.
|
|
4
|
+
"version": "0.8.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"**/*.d.ts"
|
|
14
14
|
],
|
|
15
15
|
"pieMetadata": {
|
|
16
|
-
"componentStatus": "
|
|
16
|
+
"componentStatus": "beta"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "run -T vite build",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
39
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.
|
|
40
|
+
"@justeattakeaway/pie-css": "0.14.1",
|
|
41
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
package/src/index.ts
CHANGED
|
@@ -62,7 +62,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
62
62
|
super.connectedCallback();
|
|
63
63
|
this._abortController = new AbortController();
|
|
64
64
|
const { signal } = this._abortController;
|
|
65
|
-
|
|
65
|
+
this.setAttribute('role', 'radio');
|
|
66
66
|
this.addEventListener('pie-radio-group-disabled', (e: CustomEventInit) => { this._disabledByParent = e.detail.disabled; }, { signal });
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -95,10 +95,6 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
95
95
|
this._handleFormAssociation();
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
public focus () {
|
|
99
|
-
this._radio.focus();
|
|
100
|
-
}
|
|
101
|
-
|
|
102
98
|
/**
|
|
103
99
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
104
100
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -126,6 +122,9 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
126
122
|
}
|
|
127
123
|
|
|
128
124
|
updated () {
|
|
125
|
+
// Ensure aria-checked reflects the checked state
|
|
126
|
+
this.setAttribute('aria-checked', String(this.checked));
|
|
127
|
+
|
|
129
128
|
this._handleFormAssociation();
|
|
130
129
|
}
|
|
131
130
|
|
|
@@ -151,6 +150,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(LitElement)) implements
|
|
|
151
150
|
return html`
|
|
152
151
|
<label class=${classMap(classes)} for="radioId">
|
|
153
152
|
<input
|
|
153
|
+
tabindex="-1"
|
|
154
154
|
class="c-radio-input"
|
|
155
155
|
type="radio"
|
|
156
156
|
id="radioId"
|
package/src/radio.scss
CHANGED
|
@@ -50,6 +50,8 @@
|
|
|
50
50
|
|
|
51
51
|
@include radio-interactive-state('dt-color-interactive-brand');
|
|
52
52
|
|
|
53
|
+
|
|
54
|
+
|
|
53
55
|
&.c-radio--disabled {
|
|
54
56
|
--radio-cursor: not-allowed;
|
|
55
57
|
}
|
|
@@ -62,6 +64,7 @@
|
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
.c-radio-input {
|
|
67
|
+
align-self: flex-start;
|
|
65
68
|
appearance: none;
|
|
66
69
|
display: block;
|
|
67
70
|
position: relative;
|
|
@@ -75,10 +78,6 @@
|
|
|
75
78
|
transition: background-color var(--dt-motion-timing-100) var(--radio-motion-easing);
|
|
76
79
|
flex-shrink: 0;
|
|
77
80
|
|
|
78
|
-
&:focus {
|
|
79
|
-
@include p.focus;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
81
|
// The filled circle before checking the radio
|
|
83
82
|
&:before {
|
|
84
83
|
--circle-size: calc(var(--radio-border-width) * -1);
|
|
@@ -147,4 +146,12 @@
|
|
|
147
146
|
--radio-bg-color--checked: var(--dt-color-disabled-01);
|
|
148
147
|
}
|
|
149
148
|
}
|
|
150
|
-
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:host(:focus-visible) {
|
|
152
|
+
outline: none;
|
|
153
|
+
|
|
154
|
+
.c-radio .c-radio-input {
|
|
155
|
+
@include p.focus;
|
|
156
|
+
}
|
|
157
|
+
}
|