@justeattakeaway/pie-radio 0.10.3 → 0.11.1
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 +3 -3
- package/dist/index.js +69 -73
- package/package.json +4 -4
- package/src/index.ts +5 -4
package/custom-elements.json
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"type": {
|
|
27
27
|
"text": "DefaultProps"
|
|
28
28
|
},
|
|
29
|
-
"default": "{\n checked: false,\n defaultChecked: false,\n disabled: false,\n required: false,\n status: 'default',\n}"
|
|
29
|
+
"default": "{\r\n checked: false,\r\n defaultChecked: false,\r\n disabled: false,\r\n required: false,\r\n status: 'default',\r\n}"
|
|
30
30
|
}
|
|
31
31
|
],
|
|
32
32
|
"exports": [
|
|
@@ -163,14 +163,14 @@
|
|
|
163
163
|
"text": "ValidityState"
|
|
164
164
|
},
|
|
165
165
|
"privacy": "public",
|
|
166
|
-
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
|
|
166
|
+
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
|
|
167
167
|
"readonly": true
|
|
168
168
|
},
|
|
169
169
|
{
|
|
170
170
|
"kind": "method",
|
|
171
171
|
"name": "formResetCallback",
|
|
172
172
|
"privacy": "public",
|
|
173
|
-
"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."
|
|
173
|
+
"description": "Called when the form that contains this component is reset.\r\nIf the current checked state is different to the default checked state,\r\nthe checked state is reset to the default checked state and a `change` event is emitted."
|
|
174
174
|
}
|
|
175
175
|
],
|
|
176
176
|
"events": [
|
package/dist/index.js
CHANGED
|
@@ -1,43 +1,38 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { live as
|
|
5
|
-
import { classMap as
|
|
6
|
-
import { FormControlMixin as
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
(
|
|
10
|
-
return o && S(r, a, o), o;
|
|
11
|
-
};
|
|
12
|
-
class u extends f {
|
|
13
|
-
constructor() {
|
|
14
|
-
super(...arguments), this.v = "0.10.3";
|
|
1
|
+
import { LitElement as g, html as f, unsafeCSS as k } from "lit";
|
|
2
|
+
import { state as m, property as c, query as y } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
4
|
+
import { live as w } from "lit/directives/live.js";
|
|
5
|
+
import { classMap as C } from "lit/directives/class-map.js";
|
|
6
|
+
import { FormControlMixin as _, RtlMixin as z, wrapNativeEvent as P, requiredProperty as A, validPropertyValues as $, safeCustomElement as q } from "@justeattakeaway/pie-webc-core";
|
|
7
|
+
const b = class b extends g {
|
|
8
|
+
willUpdate() {
|
|
9
|
+
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
15
10
|
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const F = ["default", "error"], s = {
|
|
11
|
+
};
|
|
12
|
+
b.v = "0.11.1";
|
|
13
|
+
let h = b;
|
|
14
|
+
const B = ["default", "error"], s = {
|
|
21
15
|
checked: !1,
|
|
22
16
|
defaultChecked: !1,
|
|
23
17
|
disabled: !1,
|
|
24
18
|
required: !1,
|
|
25
19
|
status: "default"
|
|
26
|
-
},
|
|
27
|
-
var
|
|
28
|
-
for (var
|
|
29
|
-
(
|
|
30
|
-
return
|
|
20
|
+
}, E = '*,*: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-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);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}';
|
|
21
|
+
var S = Object.defineProperty, F = Object.getOwnPropertyDescriptor, a = (r, e, i, d) => {
|
|
22
|
+
for (var t = d > 1 ? void 0 : d ? F(e, i) : e, n = r.length - 1, l; n >= 0; n--)
|
|
23
|
+
(l = r[n]) && (t = (d ? l(e, i, t) : l(t)) || t);
|
|
24
|
+
return d && t && S(e, i, t), t;
|
|
31
25
|
};
|
|
32
|
-
const
|
|
26
|
+
const p = "pie-radio";
|
|
27
|
+
let o = class extends _(z(h)) {
|
|
33
28
|
constructor() {
|
|
34
29
|
super(...arguments), this._disabledByParent = !1, this.checked = s.checked, this.defaultChecked = s.defaultChecked, this.disabled = s.disabled, this.required = s.required, this.status = s.status;
|
|
35
30
|
}
|
|
36
31
|
connectedCallback() {
|
|
37
32
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
38
33
|
const { signal: r } = this._abortController;
|
|
39
|
-
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (
|
|
40
|
-
this._disabledByParent =
|
|
34
|
+
this.setAttribute("role", "radio"), this.addEventListener("pie-radio-group-disabled", (e) => {
|
|
35
|
+
this._disabledByParent = e.detail.disabled;
|
|
41
36
|
}, { signal: r });
|
|
42
37
|
}
|
|
43
38
|
disconnectedCallback() {
|
|
@@ -54,10 +49,10 @@ const v = "pie-radio", h = class h extends z($(u)) {
|
|
|
54
49
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="radio"`.
|
|
55
50
|
*/
|
|
56
51
|
_handleChange(r) {
|
|
57
|
-
const { checked:
|
|
58
|
-
this.checked =
|
|
59
|
-
const
|
|
60
|
-
this.dispatchEvent(
|
|
52
|
+
const { checked: e } = r == null ? void 0 : r.currentTarget;
|
|
53
|
+
this.checked = e;
|
|
54
|
+
const i = P(r);
|
|
55
|
+
this.dispatchEvent(i), this._handleFormAssociation();
|
|
61
56
|
}
|
|
62
57
|
/**
|
|
63
58
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -84,70 +79,71 @@ const v = "pie-radio", h = class h extends z($(u)) {
|
|
|
84
79
|
render() {
|
|
85
80
|
const {
|
|
86
81
|
checked: r,
|
|
87
|
-
disabled:
|
|
88
|
-
_disabledByParent:
|
|
89
|
-
name:
|
|
82
|
+
disabled: e,
|
|
83
|
+
_disabledByParent: i,
|
|
84
|
+
name: d,
|
|
90
85
|
required: t,
|
|
91
|
-
value:
|
|
92
|
-
status:
|
|
93
|
-
} = this,
|
|
86
|
+
value: n,
|
|
87
|
+
status: l
|
|
88
|
+
} = this, v = e || i, u = {
|
|
94
89
|
"c-radio": !0,
|
|
95
|
-
"is-disabled":
|
|
96
|
-
[`c-radio--status-${
|
|
90
|
+
"is-disabled": v,
|
|
91
|
+
[`c-radio--status-${l}`]: !v
|
|
97
92
|
};
|
|
98
|
-
return
|
|
99
|
-
<label class=${
|
|
93
|
+
return f`
|
|
94
|
+
<label class=${C(u)} for="radioId">
|
|
100
95
|
<input
|
|
101
96
|
tabindex="-1"
|
|
102
97
|
class="c-radio-input"
|
|
103
98
|
type="radio"
|
|
104
99
|
id="radioId"
|
|
105
100
|
data-test-id="pie-radio-input"
|
|
106
|
-
.checked="${
|
|
107
|
-
.value="${
|
|
108
|
-
name="${
|
|
109
|
-
?disabled="${
|
|
101
|
+
.checked="${w(r)}"
|
|
102
|
+
.value="${n}"
|
|
103
|
+
name="${x(d)}"
|
|
104
|
+
?disabled="${v}"
|
|
110
105
|
?required="${t}"
|
|
111
|
-
aria-invalid=${
|
|
106
|
+
aria-invalid=${l === "error" ? "true" : "false"}
|
|
112
107
|
@change="${this._handleChange}">
|
|
113
108
|
<slot></slot>
|
|
114
109
|
</label>`;
|
|
115
110
|
}
|
|
116
111
|
};
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
i([
|
|
112
|
+
o.styles = k(E);
|
|
113
|
+
a([
|
|
114
|
+
m()
|
|
115
|
+
], o.prototype, "_disabledByParent", 2);
|
|
116
|
+
a([
|
|
123
117
|
c({ type: Boolean, reflect: !0 })
|
|
124
|
-
],
|
|
125
|
-
|
|
118
|
+
], o.prototype, "checked", 2);
|
|
119
|
+
a([
|
|
126
120
|
c({ type: Boolean, reflect: !0 })
|
|
127
|
-
],
|
|
128
|
-
|
|
121
|
+
], o.prototype, "defaultChecked", 2);
|
|
122
|
+
a([
|
|
129
123
|
c({ type: Boolean, reflect: !0 })
|
|
130
|
-
],
|
|
131
|
-
|
|
124
|
+
], o.prototype, "disabled", 2);
|
|
125
|
+
a([
|
|
132
126
|
c({ type: String, reflect: !0 })
|
|
133
|
-
],
|
|
134
|
-
|
|
127
|
+
], o.prototype, "name", 2);
|
|
128
|
+
a([
|
|
135
129
|
c({ type: Boolean, reflect: !0 })
|
|
136
|
-
],
|
|
137
|
-
|
|
130
|
+
], o.prototype, "required", 2);
|
|
131
|
+
a([
|
|
138
132
|
c({ type: String }),
|
|
139
|
-
|
|
140
|
-
],
|
|
141
|
-
|
|
133
|
+
A(p)
|
|
134
|
+
], o.prototype, "value", 2);
|
|
135
|
+
a([
|
|
142
136
|
c({ type: String }),
|
|
143
|
-
|
|
144
|
-
],
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
],
|
|
148
|
-
|
|
137
|
+
$(p, B, s.status)
|
|
138
|
+
], o.prototype, "status", 2);
|
|
139
|
+
a([
|
|
140
|
+
y('input[type="radio"]')
|
|
141
|
+
], o.prototype, "_radio", 2);
|
|
142
|
+
o = a([
|
|
143
|
+
q("pie-radio")
|
|
144
|
+
], o);
|
|
149
145
|
export {
|
|
150
|
-
|
|
146
|
+
o as PieRadio,
|
|
151
147
|
s as defaultProps,
|
|
152
|
-
|
|
148
|
+
B as statusTypes
|
|
153
149
|
};
|
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.11.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
"license": "Apache-2.0",
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
36
|
-
"@justeattakeaway/pie-components-config": "0.20.
|
|
36
|
+
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
37
37
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
38
|
-
"@justeattakeaway/pie-monorepo-utils": "0.5.
|
|
38
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
42
|
+
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
43
43
|
},
|
|
44
44
|
"volta": {
|
|
45
45
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { html, unsafeCSS } from 'lit';
|
|
2
2
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
property, query, state,
|
|
5
|
+
} from 'lit/decorators.js';
|
|
4
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
7
|
import { live } from 'lit/directives/live.js';
|
|
6
8
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
9
|
|
|
8
10
|
import {
|
|
9
|
-
defineCustomElement,
|
|
10
11
|
FormControlMixin,
|
|
11
12
|
requiredProperty,
|
|
12
13
|
RtlMixin,
|
|
13
14
|
wrapNativeEvent,
|
|
14
15
|
validPropertyValues,
|
|
16
|
+
safeCustomElement,
|
|
15
17
|
} from '@justeattakeaway/pie-webc-core';
|
|
16
18
|
|
|
17
19
|
import { type RadioProps, defaultProps, statusTypes } from './defs';
|
|
@@ -27,6 +29,7 @@ const componentSelector = 'pie-radio';
|
|
|
27
29
|
* @event {InputEvent} input - Should fire whenever a user toggles the radio.
|
|
28
30
|
* @event {CustomEvent} change - Fires when the radio is checked (but not when unchecked).
|
|
29
31
|
*/
|
|
32
|
+
@safeCustomElement('pie-radio')
|
|
30
33
|
export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements RadioProps {
|
|
31
34
|
@state()
|
|
32
35
|
private _disabledByParent = false;
|
|
@@ -171,8 +174,6 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
171
174
|
static styles = unsafeCSS(styles);
|
|
172
175
|
}
|
|
173
176
|
|
|
174
|
-
defineCustomElement(componentSelector, PieRadio);
|
|
175
|
-
|
|
176
177
|
declare global {
|
|
177
178
|
interface HTMLElementTagNameMap {
|
|
178
179
|
[componentSelector]: PieRadio;
|