@justeattakeaway/pie-radio 0.11.3 → 0.11.5
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 +16 -55
- package/dist/index.d.ts +6 -5
- package/dist/index.js +56 -51
- package/dist/react.d.ts +7 -6
- package/package.json +10 -4
- package/src/index.ts +10 -0
- 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",
|
|
@@ -189,42 +186,6 @@
|
|
|
189
186
|
"name": "change"
|
|
190
187
|
}
|
|
191
188
|
],
|
|
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
189
|
"mixins": [
|
|
229
190
|
{
|
|
230
191
|
"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;
|
package/dist/index.js
CHANGED
|
@@ -1,38 +1,38 @@
|
|
|
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 $, validPropertyValues as q, safeCustomElement as B } 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.5";
|
|
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 =
|
|
34
|
+
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (a) => {
|
|
35
|
+
this._disabledByParent = a.detail.disabled;
|
|
36
36
|
}, { signal: r });
|
|
37
37
|
}
|
|
38
38
|
disconnectedCallback() {
|
|
@@ -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.
|
|
@@ -79,71 +79,76 @@ let o = class extends _(z(h)) {
|
|
|
79
79
|
render() {
|
|
80
80
|
const {
|
|
81
81
|
checked: r,
|
|
82
|
-
disabled:
|
|
82
|
+
disabled: a,
|
|
83
83
|
_disabledByParent: i,
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
_isAnimationAllowed: d,
|
|
85
|
+
name: t,
|
|
86
|
+
required: s,
|
|
86
87
|
value: n,
|
|
87
|
-
status:
|
|
88
|
-
} = this, v =
|
|
88
|
+
status: p
|
|
89
|
+
} = this, v = a || i, f = {
|
|
89
90
|
"c-radio": !0,
|
|
90
91
|
"is-disabled": v,
|
|
91
|
-
[`c-radio--status-${
|
|
92
|
+
[`c-radio--status-${p}`]: !v,
|
|
93
|
+
"c-radio--allow-animation": d
|
|
92
94
|
};
|
|
93
|
-
return
|
|
94
|
-
<label class=${C(
|
|
95
|
+
return m`
|
|
96
|
+
<label class=${C(f)} for="radioId">
|
|
95
97
|
<input
|
|
96
98
|
tabindex="-1"
|
|
97
99
|
class="c-radio-input"
|
|
98
100
|
type="radio"
|
|
99
101
|
id="radioId"
|
|
100
102
|
data-test-id="pie-radio-input"
|
|
101
|
-
.checked="${
|
|
103
|
+
.checked="${_(r)}"
|
|
102
104
|
.value="${n}"
|
|
103
|
-
name="${
|
|
105
|
+
name="${w(t)}"
|
|
104
106
|
?disabled="${v}"
|
|
105
|
-
?required="${
|
|
106
|
-
aria-invalid=${
|
|
107
|
+
?required="${s}"
|
|
108
|
+
aria-invalid=${p === "error" ? "true" : "false"}
|
|
107
109
|
@change="${this._handleChange}">
|
|
108
110
|
<slot></slot>
|
|
109
111
|
</label>`;
|
|
110
112
|
}
|
|
111
113
|
};
|
|
112
|
-
o.styles =
|
|
113
|
-
|
|
114
|
-
|
|
114
|
+
o.styles = y(S);
|
|
115
|
+
e([
|
|
116
|
+
u()
|
|
115
117
|
], o.prototype, "_disabledByParent", 2);
|
|
116
|
-
|
|
118
|
+
e([
|
|
119
|
+
u()
|
|
120
|
+
], o.prototype, "_isAnimationAllowed", 2);
|
|
121
|
+
e([
|
|
117
122
|
c({ type: Boolean, reflect: !0 })
|
|
118
123
|
], o.prototype, "checked", 2);
|
|
119
|
-
|
|
124
|
+
e([
|
|
120
125
|
c({ type: Boolean, reflect: !0 })
|
|
121
126
|
], o.prototype, "defaultChecked", 2);
|
|
122
|
-
|
|
127
|
+
e([
|
|
123
128
|
c({ type: Boolean, reflect: !0 })
|
|
124
129
|
], o.prototype, "disabled", 2);
|
|
125
|
-
|
|
130
|
+
e([
|
|
126
131
|
c({ type: String, reflect: !0 })
|
|
127
132
|
], o.prototype, "name", 2);
|
|
128
|
-
|
|
133
|
+
e([
|
|
129
134
|
c({ type: Boolean, reflect: !0 })
|
|
130
135
|
], o.prototype, "required", 2);
|
|
131
|
-
|
|
136
|
+
e([
|
|
132
137
|
c({ type: String }),
|
|
133
|
-
|
|
138
|
+
$(g)
|
|
134
139
|
], o.prototype, "value", 2);
|
|
135
|
-
|
|
140
|
+
e([
|
|
136
141
|
c({ type: String }),
|
|
137
|
-
|
|
142
|
+
q(g, E, l.status)
|
|
138
143
|
], o.prototype, "status", 2);
|
|
139
|
-
|
|
140
|
-
|
|
144
|
+
e([
|
|
145
|
+
x('input[type="radio"]')
|
|
141
146
|
], o.prototype, "_radio", 2);
|
|
142
|
-
o =
|
|
143
|
-
|
|
147
|
+
o = e([
|
|
148
|
+
B("pie-radio")
|
|
144
149
|
], o);
|
|
145
150
|
export {
|
|
146
151
|
o as PieRadio,
|
|
147
|
-
|
|
148
|
-
|
|
152
|
+
l as defaultProps,
|
|
153
|
+
E as statusTypes
|
|
149
154
|
};
|
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;
|
package/package.json
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
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.5",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/justeattakeaway/pie",
|
|
8
|
+
"directory": "packages/components/pie-radio"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://webc.pie.design/?path=/docs/components-radio--overview",
|
|
5
11
|
"type": "module",
|
|
6
12
|
"main": "dist/index.js",
|
|
7
13
|
"module": "dist/index.js",
|
|
@@ -33,9 +39,9 @@
|
|
|
33
39
|
"license": "Apache-2.0",
|
|
34
40
|
"devDependencies": {
|
|
35
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
37
|
-
"@justeattakeaway/pie-css": "0.
|
|
38
|
-
"@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.6.0",
|
|
39
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
46
|
},
|
|
41
47
|
"dependencies": {
|
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
|
|
|
@@ -94,6 +97,11 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
94
97
|
// This is because some events set `composed` to `false`.
|
|
95
98
|
// Reference: https://javascript.info/shadow-dom-events#event-composed
|
|
96
99
|
const customChangeEvent = wrapNativeEvent(event);
|
|
100
|
+
|
|
101
|
+
if (!this._isAnimationAllowed) {
|
|
102
|
+
this._isAnimationAllowed = true;
|
|
103
|
+
}
|
|
104
|
+
|
|
97
105
|
this.dispatchEvent(customChangeEvent);
|
|
98
106
|
|
|
99
107
|
this._handleFormAssociation();
|
|
@@ -137,6 +145,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
137
145
|
checked,
|
|
138
146
|
disabled,
|
|
139
147
|
_disabledByParent,
|
|
148
|
+
_isAnimationAllowed,
|
|
140
149
|
name,
|
|
141
150
|
required,
|
|
142
151
|
value,
|
|
@@ -149,6 +158,7 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
149
158
|
'c-radio': true,
|
|
150
159
|
'is-disabled': componentDisabled,
|
|
151
160
|
[`c-radio--status-${status}`]: !componentDisabled,
|
|
161
|
+
'c-radio--allow-animation': _isAnimationAllowed,
|
|
152
162
|
};
|
|
153
163
|
|
|
154
164
|
return html`
|
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
|
|