@justeattakeaway/pie-radio 1.2.3 → 1.2.4
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/dist/index.js +31 -32
- package/package.json +2 -2
- package/src/index.ts +0 -2
package/dist/index.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { state as v, property as l, query as
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { live as
|
|
5
|
-
import { classMap as
|
|
6
|
-
import { FormControlMixin as
|
|
7
|
-
const b = class b extends
|
|
1
|
+
import { LitElement as k, html as m, unsafeCSS as x } from "lit";
|
|
2
|
+
import { state as v, property as l, query as y } 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
|
+
import { classMap as C } from "lit/directives/class-map.js";
|
|
6
|
+
import { FormControlMixin as A, RtlMixin as z, wrapNativeEvent as q, validPropertyValues as P, safeCustomElement as E, ariaContext as $ } 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 = "1.2.
|
|
12
|
+
b.v = "1.2.4";
|
|
13
13
|
let u = b;
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2021 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
let
|
|
19
|
+
let B = class extends Event {
|
|
20
20
|
constructor(t, e, i, o) {
|
|
21
21
|
super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e, this.callback = i, this.subscribe = o ?? !1;
|
|
22
22
|
}
|
|
@@ -43,7 +43,7 @@ class f {
|
|
|
43
43
|
this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
|
|
44
44
|
}
|
|
45
45
|
dispatchRequest() {
|
|
46
|
-
this.host.dispatchEvent(new
|
|
46
|
+
this.host.dispatchEvent(new B(this.context, this.host, this.t, this.subscribe));
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
/**
|
|
@@ -51,7 +51,7 @@ class f {
|
|
|
51
51
|
* Copyright 2022 Google LLC
|
|
52
52
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
53
53
|
*/
|
|
54
|
-
function
|
|
54
|
+
function S({ context: r, subscribe: t }) {
|
|
55
55
|
return (e, i) => {
|
|
56
56
|
typeof i == "object" ? i.addInitializer((function() {
|
|
57
57
|
new f(this, { context: r, callback: (o) => {
|
|
@@ -64,20 +64,20 @@ function D({ context: r, subscribe: t }) {
|
|
|
64
64
|
}));
|
|
65
65
|
};
|
|
66
66
|
}
|
|
67
|
-
const
|
|
67
|
+
const F = ["default", "error"], n = {
|
|
68
68
|
checked: !1,
|
|
69
69
|
defaultChecked: !1,
|
|
70
70
|
disabled: !1,
|
|
71
71
|
required: !1,
|
|
72
72
|
status: "default"
|
|
73
|
-
},
|
|
74
|
-
var
|
|
75
|
-
for (var o = i > 1 ? void 0 : i ?
|
|
73
|
+
}, D = '*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-radio{--radio-font-family: var(--dt-font-body-l-family);--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-body-l-weight);--radio-text-color: var(--dt-color-content-default-solid);--radio-cursor: pointer;display:flex;align-items:center;gap:var(--dt-spacing-b);cursor:var(--radio-cursor);font-family:var(--radio-font-family);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.is-disabled{--radio-cursor: not-allowed}.c-radio .c-radio-input{--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-size: 24px;--radio-dot-size: 8px;--radio-cursor: pointer;--radio-motion-easing: var(--dt-motion-easing-persistent-functional);--radio-border-width: 1px;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-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:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-radio .c-radio-input:disabled{--radio-bg-color: var(--dt-color-disabled-01);--radio-border-color: var(--dt-color-border-default);--radio-cursor: not-allowed}.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 .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 .c-radio-input{transition:background-color var(--dt-motion-timing-100) var(--radio-motion-easing)}@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)}}@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{align-self:flex-start}.c-radio.has-error .c-radio-input{--radio-bg-color--checked: var(--dt-color-support-error);--radio-border-color: var(--dt-color-support-error)}.c-radio.has-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.has-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.has-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.has-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.has-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.has-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.has-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.has-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))}}: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}';
|
|
74
|
+
var R = Object.defineProperty, O = Object.getOwnPropertyDescriptor, d = (r, t, e, i) => {
|
|
75
|
+
for (var o = i > 1 ? void 0 : i ? O(t, e) : t, a = r.length - 1, s; a >= 0; a--)
|
|
76
76
|
(s = r[a]) && (o = (i ? s(t, e, o) : s(o)) || o);
|
|
77
|
-
return i && o &&
|
|
77
|
+
return i && o && R(t, e, o), o;
|
|
78
78
|
};
|
|
79
|
-
const
|
|
80
|
-
let c = class extends z(
|
|
79
|
+
const j = "pie-radio";
|
|
80
|
+
let c = class extends A(z(u)) {
|
|
81
81
|
constructor() {
|
|
82
82
|
super(...arguments), this._disabledByParent = !1, this._isAnimationAllowed = !1, this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.disabled = n.disabled, this.required = n.required, this.status = n.status;
|
|
83
83
|
}
|
|
@@ -104,7 +104,7 @@ let c = class extends z(q(u)) {
|
|
|
104
104
|
_handleChange(r) {
|
|
105
105
|
const { checked: t } = r == null ? void 0 : r.currentTarget;
|
|
106
106
|
this.checked = t;
|
|
107
|
-
const e =
|
|
107
|
+
const e = q(r);
|
|
108
108
|
this._isAnimationAllowed || (this._isAnimationAllowed = !0), this.dispatchEvent(e), this._handleFormAssociation();
|
|
109
109
|
}
|
|
110
110
|
/**
|
|
@@ -154,23 +154,23 @@ let c = class extends z(q(u)) {
|
|
|
154
154
|
required: a,
|
|
155
155
|
value: s,
|
|
156
156
|
status: p
|
|
157
|
-
} = this, h = t || e,
|
|
157
|
+
} = this, h = t || e, g = {
|
|
158
158
|
"c-radio": !0,
|
|
159
159
|
"is-disabled": h,
|
|
160
160
|
[`has-${p}`]: !h,
|
|
161
161
|
"is-animated": i
|
|
162
162
|
};
|
|
163
|
-
return
|
|
164
|
-
<label class=${
|
|
163
|
+
return m`
|
|
164
|
+
<label class=${C(g)}>
|
|
165
165
|
<input
|
|
166
166
|
tabindex="-1"
|
|
167
167
|
class="c-radio-input"
|
|
168
168
|
type="radio"
|
|
169
169
|
id="radioId"
|
|
170
170
|
data-test-id="pie-radio-input"
|
|
171
|
-
.checked="${
|
|
171
|
+
.checked="${_(r)}"
|
|
172
172
|
.value="${s}"
|
|
173
|
-
name="${
|
|
173
|
+
name="${w(o)}"
|
|
174
174
|
?disabled="${h}"
|
|
175
175
|
?required="${a}"
|
|
176
176
|
aria-invalid=${p === "error" ? "true" : "false"}
|
|
@@ -179,7 +179,7 @@ let c = class extends z(q(u)) {
|
|
|
179
179
|
</label>`;
|
|
180
180
|
}
|
|
181
181
|
};
|
|
182
|
-
c.styles =
|
|
182
|
+
c.styles = x(D);
|
|
183
183
|
d([
|
|
184
184
|
v()
|
|
185
185
|
], c.prototype, "_disabledByParent", 2);
|
|
@@ -187,7 +187,7 @@ d([
|
|
|
187
187
|
v()
|
|
188
188
|
], c.prototype, "_isAnimationAllowed", 2);
|
|
189
189
|
d([
|
|
190
|
-
|
|
190
|
+
S({ context: $, subscribe: !0 }),
|
|
191
191
|
v()
|
|
192
192
|
], c.prototype, "_contextAria", 2);
|
|
193
193
|
d([
|
|
@@ -206,21 +206,20 @@ d([
|
|
|
206
206
|
l({ type: Boolean, reflect: !0 })
|
|
207
207
|
], c.prototype, "required", 2);
|
|
208
208
|
d([
|
|
209
|
-
l({ type: String })
|
|
210
|
-
E(g)
|
|
209
|
+
l({ type: String })
|
|
211
210
|
], c.prototype, "value", 2);
|
|
212
211
|
d([
|
|
213
212
|
l({ type: String }),
|
|
214
|
-
|
|
213
|
+
P(j, F, n.status)
|
|
215
214
|
], c.prototype, "status", 2);
|
|
216
215
|
d([
|
|
217
|
-
|
|
216
|
+
y('input[type="radio"]')
|
|
218
217
|
], c.prototype, "_radio", 2);
|
|
219
218
|
c = d([
|
|
220
|
-
|
|
219
|
+
E("pie-radio")
|
|
221
220
|
], c);
|
|
222
221
|
export {
|
|
223
222
|
c as PieRadio,
|
|
224
223
|
n as defaultProps,
|
|
225
|
-
|
|
224
|
+
F as statusTypes
|
|
226
225
|
};
|
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": "1.2.
|
|
4
|
+
"version": "1.2.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@justeattakeaway/pie-monorepo-utils": "0.9.9"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@justeattakeaway/pie-webc-core": "18.
|
|
51
|
+
"@justeattakeaway/pie-webc-core": "18.1.0",
|
|
52
52
|
"@lit/context": "1.1.6"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
package/src/index.ts
CHANGED
|
@@ -10,7 +10,6 @@ import { consume } from '@lit/context';
|
|
|
10
10
|
|
|
11
11
|
import {
|
|
12
12
|
FormControlMixin,
|
|
13
|
-
requiredProperty,
|
|
14
13
|
RtlMixin,
|
|
15
14
|
wrapNativeEvent,
|
|
16
15
|
validPropertyValues,
|
|
@@ -63,7 +62,6 @@ export class PieRadio extends FormControlMixin(RtlMixin(PieElement)) implements
|
|
|
63
62
|
public required = defaultProps.required;
|
|
64
63
|
|
|
65
64
|
@property({ type: String })
|
|
66
|
-
@requiredProperty(componentSelector)
|
|
67
65
|
public value!: RadioProps['value'];
|
|
68
66
|
|
|
69
67
|
@property({ type: String })
|