@justeattakeaway/pie-checkbox 0.13.2 → 0.13.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/custom-elements.json +15 -7
- package/dist/index.d.ts +7 -6
- package/dist/index.js +82 -84
- package/dist/react.d.ts +7 -6
- package/package.json +2 -2
- package/src/index.ts +23 -20
package/custom-elements.json
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"kind": "field",
|
|
77
|
-
"name": "
|
|
77
|
+
"name": "_disabledByParent",
|
|
78
78
|
"type": {
|
|
79
79
|
"text": "boolean"
|
|
80
80
|
},
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
"kind": "field",
|
|
86
|
-
"name": "
|
|
86
|
+
"name": "_visuallyHiddenError",
|
|
87
87
|
"type": {
|
|
88
88
|
"text": "boolean"
|
|
89
89
|
},
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"kind": "field",
|
|
101
101
|
"name": "name",
|
|
102
102
|
"type": {
|
|
103
|
-
"text": "CheckboxProps['name']
|
|
103
|
+
"text": "CheckboxProps['name']"
|
|
104
104
|
},
|
|
105
105
|
"privacy": "public",
|
|
106
106
|
"attribute": "name"
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
"kind": "field",
|
|
145
|
-
"name": "
|
|
145
|
+
"name": "_checkbox",
|
|
146
146
|
"type": {
|
|
147
147
|
"text": "HTMLInputElement"
|
|
148
148
|
},
|
|
@@ -163,6 +163,14 @@
|
|
|
163
163
|
"privacy": "public",
|
|
164
164
|
"attribute": "status"
|
|
165
165
|
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "_abortController",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "AbortController"
|
|
171
|
+
},
|
|
172
|
+
"privacy": "private"
|
|
173
|
+
},
|
|
166
174
|
{
|
|
167
175
|
"kind": "field",
|
|
168
176
|
"name": "validity",
|
|
@@ -175,7 +183,7 @@
|
|
|
175
183
|
},
|
|
176
184
|
{
|
|
177
185
|
"kind": "method",
|
|
178
|
-
"name": "
|
|
186
|
+
"name": "_handleFormAssociation",
|
|
179
187
|
"privacy": "private",
|
|
180
188
|
"return": {
|
|
181
189
|
"type": {
|
|
@@ -206,7 +214,7 @@
|
|
|
206
214
|
},
|
|
207
215
|
{
|
|
208
216
|
"kind": "method",
|
|
209
|
-
"name": "
|
|
217
|
+
"name": "_handleChange",
|
|
210
218
|
"privacy": "private",
|
|
211
219
|
"parameters": [
|
|
212
220
|
{
|
|
@@ -248,7 +256,7 @@
|
|
|
248
256
|
{
|
|
249
257
|
"name": "name",
|
|
250
258
|
"type": {
|
|
251
|
-
"text": "CheckboxProps['name']
|
|
259
|
+
"text": "CheckboxProps['name']"
|
|
252
260
|
},
|
|
253
261
|
"fieldName": "name"
|
|
254
262
|
},
|
package/dist/index.d.ts
CHANGED
|
@@ -61,18 +61,19 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
61
61
|
mode: ShadowRootMode;
|
|
62
62
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
63
63
|
};
|
|
64
|
-
private
|
|
65
|
-
private
|
|
64
|
+
private _disabledByParent;
|
|
65
|
+
private _visuallyHiddenError;
|
|
66
66
|
value: string;
|
|
67
|
-
name
|
|
67
|
+
name: CheckboxProps['name'];
|
|
68
68
|
checked: boolean;
|
|
69
69
|
defaultChecked: boolean;
|
|
70
70
|
disabled: boolean;
|
|
71
71
|
required: boolean;
|
|
72
72
|
indeterminate: boolean;
|
|
73
|
-
private
|
|
73
|
+
private _checkbox;
|
|
74
74
|
assistiveText?: CheckboxProps['assistiveText'];
|
|
75
75
|
status: "default" | "error" | "success";
|
|
76
|
+
private _abortController;
|
|
76
77
|
connectedCallback(): void;
|
|
77
78
|
disconnectedCallback(): void;
|
|
78
79
|
/**
|
|
@@ -83,7 +84,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
83
84
|
/**
|
|
84
85
|
* Ensures that the form value is in sync with the component.
|
|
85
86
|
*/
|
|
86
|
-
private
|
|
87
|
+
private _handleFormAssociation;
|
|
87
88
|
/**
|
|
88
89
|
* Called after the disabled state of the element changes,
|
|
89
90
|
* either because the disabled attribute of this element was added or removed;
|
|
@@ -96,7 +97,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
96
97
|
* Captures the native change event and wraps it in a custom event.
|
|
97
98
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
98
99
|
*/
|
|
99
|
-
private
|
|
100
|
+
private _handleChange;
|
|
100
101
|
/**
|
|
101
102
|
* Called when the form that contains this component is reset.
|
|
102
103
|
* If the current checked state is different to the default checked state,
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as v, html as u, nothing as
|
|
1
|
+
import { LitElement as v, html as u, nothing as B, unsafeCSS as F } from "lit";
|
|
2
2
|
import { classMap as m } from "lit/directives/class-map.js";
|
|
3
|
-
import { state as y, property as
|
|
3
|
+
import { state as y, property as r, query as q } from "lit/decorators.js";
|
|
4
4
|
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
5
|
-
import { live as
|
|
6
|
-
import { FormControlMixin as
|
|
5
|
+
import { live as A } from "lit/directives/live.js";
|
|
6
|
+
import { FormControlMixin as S, RtlMixin as z, wrapNativeEvent as T, validPropertyValues as D, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const
|
|
8
|
+
const P = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: p.font-size(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-interactive-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox.c-checkbox--disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.c-checkbox--disabled:hover .c-checkbox-tick,.c-checkbox.c-checkbox--disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):hover .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-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-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-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-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):active .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-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-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-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)) );--checkbox-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)) )}', R = ["default", "success", "error"], i = {
|
|
9
9
|
// a default value for the html <input type="checkbox" /> value attribute.
|
|
10
10
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
|
|
11
11
|
value: "on",
|
|
@@ -16,40 +16,38 @@ const D = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
16
16
|
required: !1,
|
|
17
17
|
status: "default"
|
|
18
18
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var
|
|
21
|
-
(l = p[
|
|
22
|
-
return
|
|
19
|
+
var L = Object.defineProperty, o = (p, c, t, s) => {
|
|
20
|
+
for (var a = void 0, n = p.length - 1, l; n >= 0; n--)
|
|
21
|
+
(l = p[n]) && (a = l(c, t, a) || a);
|
|
22
|
+
return a && L(c, t, a), a;
|
|
23
23
|
};
|
|
24
|
-
const w = "pie-checkbox", g = "assistive-text", b = class b extends
|
|
24
|
+
const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
25
25
|
constructor() {
|
|
26
|
-
super(...arguments), this.
|
|
26
|
+
super(...arguments), this._disabledByParent = !1, this._visuallyHiddenError = !1, this.value = i.value, this.checked = i.checked, this.defaultChecked = i.defaultChecked, this.disabled = i.disabled, this.required = i.required, this.indeterminate = i.indeterminate, this.status = i.status;
|
|
27
27
|
}
|
|
28
28
|
connectedCallback() {
|
|
29
|
-
super.connectedCallback(), this.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
this.
|
|
33
|
-
})
|
|
29
|
+
super.connectedCallback(), this._abortController = new AbortController();
|
|
30
|
+
const { signal: c } = this._abortController;
|
|
31
|
+
this.addEventListener("pie-checkbox-group-disabled", (t) => {
|
|
32
|
+
this._disabledByParent = t.detail.disabled;
|
|
33
|
+
}, { signal: c }), this.addEventListener("pie-checkbox-group-error", (t) => {
|
|
34
|
+
this._visuallyHiddenError = t.detail.error;
|
|
35
|
+
}, { signal: c });
|
|
34
36
|
}
|
|
35
37
|
disconnectedCallback() {
|
|
36
|
-
super.disconnectedCallback(), this.
|
|
37
|
-
this.disabledByParent = e.detail.disabled;
|
|
38
|
-
}), this.removeEventListener("pie-checkbox-group-error", (e) => {
|
|
39
|
-
this.visuallyHiddenError = e.detail.error;
|
|
40
|
-
});
|
|
38
|
+
super.disconnectedCallback(), this._abortController.abort();
|
|
41
39
|
}
|
|
42
40
|
/**
|
|
43
41
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
44
42
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
45
43
|
*/
|
|
46
44
|
get validity() {
|
|
47
|
-
return this.
|
|
45
|
+
return this._checkbox.validity;
|
|
48
46
|
}
|
|
49
47
|
/**
|
|
50
48
|
* Ensures that the form value is in sync with the component.
|
|
51
49
|
*/
|
|
52
|
-
|
|
50
|
+
_handleFormAssociation() {
|
|
53
51
|
!!this.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
|
|
54
52
|
}
|
|
55
53
|
/**
|
|
@@ -58,21 +56,21 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends A(H(v)) {
|
|
|
58
56
|
* or because the disabled state changed on a <fieldset> that's an ancestor of this element.
|
|
59
57
|
* @param disabled - The latest disabled state of the input.
|
|
60
58
|
*/
|
|
61
|
-
formDisabledCallback(
|
|
62
|
-
this.disabled =
|
|
59
|
+
formDisabledCallback(c) {
|
|
60
|
+
this.disabled = c;
|
|
63
61
|
}
|
|
64
62
|
updated() {
|
|
65
|
-
this.
|
|
63
|
+
this._handleFormAssociation();
|
|
66
64
|
}
|
|
67
65
|
/**
|
|
68
66
|
* Captures the native change event and wraps it in a custom event.
|
|
69
67
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
70
68
|
*/
|
|
71
|
-
|
|
72
|
-
const { checked:
|
|
73
|
-
this.checked =
|
|
74
|
-
const s =
|
|
75
|
-
this.dispatchEvent(s), this.
|
|
69
|
+
_handleChange(c) {
|
|
70
|
+
const { checked: t } = c == null ? void 0 : c.currentTarget;
|
|
71
|
+
this.checked = t;
|
|
72
|
+
const s = T(c);
|
|
73
|
+
this.dispatchEvent(s), this._handleFormAssociation();
|
|
76
74
|
}
|
|
77
75
|
/**
|
|
78
76
|
* Called when the form that contains this component is reset.
|
|
@@ -83,56 +81,56 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends A(H(v)) {
|
|
|
83
81
|
if (this.checked === this.defaultChecked)
|
|
84
82
|
return;
|
|
85
83
|
this.checked = this.defaultChecked;
|
|
86
|
-
const
|
|
87
|
-
this.dispatchEvent(
|
|
84
|
+
const c = new Event("change", { bubbles: !0, composed: !0 });
|
|
85
|
+
this.dispatchEvent(c), this._handleFormAssociation();
|
|
88
86
|
}
|
|
89
87
|
render() {
|
|
90
88
|
const {
|
|
91
|
-
checked:
|
|
92
|
-
value:
|
|
89
|
+
checked: c,
|
|
90
|
+
value: t,
|
|
93
91
|
name: s,
|
|
94
|
-
disabled:
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
disabled: a,
|
|
93
|
+
_disabledByParent: n,
|
|
94
|
+
_visuallyHiddenError: l,
|
|
97
95
|
required: C,
|
|
98
96
|
indeterminate: k,
|
|
99
97
|
assistiveText: x,
|
|
100
98
|
status: h,
|
|
101
|
-
isRTL:
|
|
102
|
-
} = this,
|
|
99
|
+
isRTL: _
|
|
100
|
+
} = this, d = a || n, $ = {
|
|
103
101
|
"c-checkbox": !0,
|
|
104
|
-
[`c-checkbox--status-${h}`]: !
|
|
105
|
-
"c-checkbox--disabled":
|
|
106
|
-
"c-checkbox--checked":
|
|
107
|
-
"c-checkbox--indeterminate": k && !
|
|
108
|
-
},
|
|
102
|
+
[`c-checkbox--status-${h}`]: !d,
|
|
103
|
+
"c-checkbox--disabled": d,
|
|
104
|
+
"c-checkbox--checked": c,
|
|
105
|
+
"c-checkbox--indeterminate": k && !c
|
|
106
|
+
}, E = {
|
|
109
107
|
"c-checkbox-tick": !0,
|
|
110
|
-
[`c-checkbox-tick--status-${h}`]: !
|
|
111
|
-
"c-checkbox-tick--disabled":
|
|
112
|
-
"c-checkbox-tick--checked":
|
|
113
|
-
"c-checkbox-tick--indeterminate": k && !
|
|
114
|
-
"c-checkbox-tick--rtl":
|
|
108
|
+
[`c-checkbox-tick--status-${h}`]: !d,
|
|
109
|
+
"c-checkbox-tick--disabled": d,
|
|
110
|
+
"c-checkbox-tick--checked": c,
|
|
111
|
+
"c-checkbox-tick--indeterminate": k && !c,
|
|
112
|
+
"c-checkbox-tick--rtl": _
|
|
115
113
|
};
|
|
116
114
|
return u`
|
|
117
115
|
<div
|
|
118
|
-
class="${m(
|
|
116
|
+
class="${m($)}">
|
|
119
117
|
<input
|
|
120
118
|
type="checkbox"
|
|
121
119
|
id="inputId"
|
|
122
|
-
.value=${
|
|
123
|
-
.checked=${
|
|
120
|
+
.value=${t}
|
|
121
|
+
.checked=${A(c)}
|
|
124
122
|
name=${f(s)}
|
|
125
|
-
?disabled=${
|
|
123
|
+
?disabled=${d}
|
|
126
124
|
?required=${C}
|
|
127
125
|
.indeterminate=${k}
|
|
128
126
|
aria-invalid=${h === "error" ? "true" : "false"}
|
|
129
127
|
aria-describedby=${f(x ? g : void 0)}
|
|
130
|
-
@change=${this.
|
|
128
|
+
@change=${this._handleChange}
|
|
131
129
|
data-test-id="checkbox-input"
|
|
132
130
|
/>
|
|
133
131
|
<label for="inputId" data-test-id="checkbox-component">
|
|
134
132
|
<span
|
|
135
|
-
class="${m(
|
|
133
|
+
class="${m(E)}"></span>
|
|
136
134
|
<span class="c-checkbox-text">
|
|
137
135
|
<slot></slot>
|
|
138
136
|
</span>
|
|
@@ -144,52 +142,52 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends A(H(v)) {
|
|
|
144
142
|
?isVisuallyHidden=${l}
|
|
145
143
|
data-test-id="pie-checkbox-assistive-text">
|
|
146
144
|
${x}
|
|
147
|
-
</pie-assistive-text>` :
|
|
145
|
+
</pie-assistive-text>` : B}
|
|
148
146
|
</div>`;
|
|
149
147
|
}
|
|
150
148
|
};
|
|
151
|
-
b.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, b.styles =
|
|
152
|
-
let
|
|
149
|
+
b.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, b.styles = F(P);
|
|
150
|
+
let e = b;
|
|
153
151
|
o([
|
|
154
152
|
y()
|
|
155
|
-
],
|
|
153
|
+
], e.prototype, "_disabledByParent");
|
|
156
154
|
o([
|
|
157
155
|
y()
|
|
158
|
-
],
|
|
156
|
+
], e.prototype, "_visuallyHiddenError");
|
|
159
157
|
o([
|
|
160
|
-
|
|
161
|
-
],
|
|
158
|
+
r({ type: String })
|
|
159
|
+
], e.prototype, "value");
|
|
162
160
|
o([
|
|
163
|
-
|
|
164
|
-
],
|
|
161
|
+
r({ type: String })
|
|
162
|
+
], e.prototype, "name");
|
|
165
163
|
o([
|
|
166
|
-
|
|
167
|
-
],
|
|
164
|
+
r({ type: Boolean, reflect: !0 })
|
|
165
|
+
], e.prototype, "checked");
|
|
168
166
|
o([
|
|
169
|
-
|
|
170
|
-
],
|
|
167
|
+
r({ type: Boolean, reflect: !0 })
|
|
168
|
+
], e.prototype, "defaultChecked");
|
|
171
169
|
o([
|
|
172
|
-
|
|
173
|
-
],
|
|
170
|
+
r({ type: Boolean, reflect: !0 })
|
|
171
|
+
], e.prototype, "disabled");
|
|
174
172
|
o([
|
|
175
|
-
|
|
176
|
-
],
|
|
173
|
+
r({ type: Boolean, reflect: !0 })
|
|
174
|
+
], e.prototype, "required");
|
|
177
175
|
o([
|
|
178
|
-
|
|
179
|
-
],
|
|
176
|
+
r({ type: Boolean, reflect: !0 })
|
|
177
|
+
], e.prototype, "indeterminate");
|
|
180
178
|
o([
|
|
181
|
-
|
|
182
|
-
],
|
|
179
|
+
q('input[type="checkbox"]')
|
|
180
|
+
], e.prototype, "_checkbox");
|
|
183
181
|
o([
|
|
184
|
-
|
|
185
|
-
],
|
|
182
|
+
r({ type: String })
|
|
183
|
+
], e.prototype, "assistiveText");
|
|
186
184
|
o([
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
],
|
|
190
|
-
|
|
185
|
+
r({ type: String }),
|
|
186
|
+
D(w, R, i.status)
|
|
187
|
+
], e.prototype, "status");
|
|
188
|
+
H(w, e);
|
|
191
189
|
export {
|
|
192
|
-
|
|
190
|
+
e as PieCheckbox,
|
|
193
191
|
i as defaultProps,
|
|
194
192
|
R as statusTypes
|
|
195
193
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -64,18 +64,19 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
64
64
|
mode: ShadowRootMode;
|
|
65
65
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
66
66
|
};
|
|
67
|
-
private
|
|
68
|
-
private
|
|
67
|
+
private _disabledByParent;
|
|
68
|
+
private _visuallyHiddenError;
|
|
69
69
|
value: string;
|
|
70
|
-
name
|
|
70
|
+
name: CheckboxProps['name'];
|
|
71
71
|
checked: boolean;
|
|
72
72
|
defaultChecked: boolean;
|
|
73
73
|
disabled: boolean;
|
|
74
74
|
required: boolean;
|
|
75
75
|
indeterminate: boolean;
|
|
76
|
-
private
|
|
76
|
+
private _checkbox;
|
|
77
77
|
assistiveText?: CheckboxProps['assistiveText'];
|
|
78
78
|
status: "default" | "error" | "success";
|
|
79
|
+
private _abortController;
|
|
79
80
|
connectedCallback(): void;
|
|
80
81
|
disconnectedCallback(): void;
|
|
81
82
|
/**
|
|
@@ -86,7 +87,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
86
87
|
/**
|
|
87
88
|
* Ensures that the form value is in sync with the component.
|
|
88
89
|
*/
|
|
89
|
-
private
|
|
90
|
+
private _handleFormAssociation;
|
|
90
91
|
/**
|
|
91
92
|
* Called after the disabled state of the element changes,
|
|
92
93
|
* either because the disabled attribute of this element was added or removed;
|
|
@@ -99,7 +100,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
99
100
|
* Captures the native change event and wraps it in a custom event.
|
|
100
101
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
101
102
|
*/
|
|
102
|
-
private
|
|
103
|
+
private _handleChange;
|
|
103
104
|
/**
|
|
104
105
|
* Called when the form that contains this component is reset.
|
|
105
106
|
* If the current checked state is different to the default checked state,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-checkbox",
|
|
3
3
|
"description": "PIE Design System Checkbox built using Web Components",
|
|
4
|
-
"version": "0.13.
|
|
4
|
+
"version": "0.13.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-assistive-text": "0.7.
|
|
44
|
+
"@justeattakeaway/pie-assistive-text": "0.7.4",
|
|
45
45
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
46
46
|
},
|
|
47
47
|
"volta": {
|
package/src/index.ts
CHANGED
|
@@ -33,16 +33,16 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
33
33
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
34
34
|
|
|
35
35
|
@state()
|
|
36
|
-
private
|
|
36
|
+
private _disabledByParent = false;
|
|
37
37
|
|
|
38
38
|
@state()
|
|
39
|
-
private
|
|
39
|
+
private _visuallyHiddenError = false;
|
|
40
40
|
|
|
41
41
|
@property({ type: String })
|
|
42
42
|
public value = defaultProps.value;
|
|
43
43
|
|
|
44
44
|
@property({ type: String })
|
|
45
|
-
public name
|
|
45
|
+
public name: CheckboxProps['name'];
|
|
46
46
|
|
|
47
47
|
@property({ type: Boolean, reflect: true })
|
|
48
48
|
public checked = defaultProps.checked;
|
|
@@ -60,7 +60,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
60
60
|
public indeterminate = defaultProps.indeterminate;
|
|
61
61
|
|
|
62
62
|
@query('input[type="checkbox"]')
|
|
63
|
-
private
|
|
63
|
+
private _checkbox!: HTMLInputElement;
|
|
64
64
|
|
|
65
65
|
@property({ type: String })
|
|
66
66
|
public assistiveText?: CheckboxProps['assistiveText'];
|
|
@@ -69,18 +69,21 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
69
69
|
@validPropertyValues(componentSelector, statusTypes, defaultProps.status)
|
|
70
70
|
public status = defaultProps.status;
|
|
71
71
|
|
|
72
|
+
private _abortController!: AbortController;
|
|
73
|
+
|
|
72
74
|
connectedCallback () : void {
|
|
73
75
|
super.connectedCallback();
|
|
74
76
|
|
|
75
|
-
this.
|
|
76
|
-
|
|
77
|
+
this._abortController = new AbortController();
|
|
78
|
+
const { signal } = this._abortController;
|
|
79
|
+
|
|
80
|
+
this.addEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this._disabledByParent = e.detail.disabled; }, { signal });
|
|
81
|
+
this.addEventListener('pie-checkbox-group-error', (e: CustomEventInit) => { this._visuallyHiddenError = e.detail.error; }, { signal });
|
|
77
82
|
}
|
|
78
83
|
|
|
79
84
|
disconnectedCallback () : void {
|
|
80
85
|
super.disconnectedCallback();
|
|
81
|
-
|
|
82
|
-
this.removeEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
83
|
-
this.removeEventListener('pie-checkbox-group-error', (e: CustomEventInit) => { this.visuallyHiddenError = e.detail.error; });
|
|
86
|
+
this._abortController.abort();
|
|
84
87
|
}
|
|
85
88
|
|
|
86
89
|
/**
|
|
@@ -88,13 +91,13 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
88
91
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
89
92
|
*/
|
|
90
93
|
public get validity (): ValidityState {
|
|
91
|
-
return (this.
|
|
94
|
+
return (this._checkbox as HTMLInputElement).validity;
|
|
92
95
|
}
|
|
93
96
|
|
|
94
97
|
/**
|
|
95
98
|
* Ensures that the form value is in sync with the component.
|
|
96
99
|
*/
|
|
97
|
-
private
|
|
100
|
+
private _handleFormAssociation () : void {
|
|
98
101
|
const isFormAssociated = !!this.form && !!this.name;
|
|
99
102
|
if (isFormAssociated) {
|
|
100
103
|
this._internals.setFormValue(this.checked ? this.value : null);
|
|
@@ -112,14 +115,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
112
115
|
}
|
|
113
116
|
|
|
114
117
|
protected updated (): void {
|
|
115
|
-
this.
|
|
118
|
+
this._handleFormAssociation();
|
|
116
119
|
}
|
|
117
120
|
|
|
118
121
|
/**
|
|
119
122
|
* Captures the native change event and wraps it in a custom event.
|
|
120
123
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
121
124
|
*/
|
|
122
|
-
private
|
|
125
|
+
private _handleChange (event: Event) {
|
|
123
126
|
const { checked } = event?.currentTarget as HTMLInputElement;
|
|
124
127
|
this.checked = checked;
|
|
125
128
|
// This is because some events set `composed` to `false`.
|
|
@@ -127,7 +130,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
127
130
|
const customChangeEvent = wrapNativeEvent(event);
|
|
128
131
|
this.dispatchEvent(customChangeEvent);
|
|
129
132
|
|
|
130
|
-
this.
|
|
133
|
+
this._handleFormAssociation();
|
|
131
134
|
}
|
|
132
135
|
|
|
133
136
|
/**
|
|
@@ -145,7 +148,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
145
148
|
const changeEvent = new Event('change', { bubbles: true, composed: true });
|
|
146
149
|
this.dispatchEvent(changeEvent);
|
|
147
150
|
|
|
148
|
-
this.
|
|
151
|
+
this._handleFormAssociation();
|
|
149
152
|
}
|
|
150
153
|
|
|
151
154
|
render () {
|
|
@@ -154,8 +157,8 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
154
157
|
value,
|
|
155
158
|
name,
|
|
156
159
|
disabled,
|
|
157
|
-
|
|
158
|
-
|
|
160
|
+
_disabledByParent,
|
|
161
|
+
_visuallyHiddenError,
|
|
159
162
|
required,
|
|
160
163
|
indeterminate,
|
|
161
164
|
assistiveText,
|
|
@@ -163,7 +166,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
163
166
|
isRTL,
|
|
164
167
|
} = this;
|
|
165
168
|
|
|
166
|
-
const componentDisabled = disabled ||
|
|
169
|
+
const componentDisabled = disabled || _disabledByParent;
|
|
167
170
|
|
|
168
171
|
const checkboxClasses = {
|
|
169
172
|
'c-checkbox': true,
|
|
@@ -196,7 +199,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
196
199
|
.indeterminate=${indeterminate}
|
|
197
200
|
aria-invalid=${status === 'error' ? 'true' : 'false'}
|
|
198
201
|
aria-describedby=${ifDefined(assistiveText ? assistiveTextId : undefined)}
|
|
199
|
-
@change=${this.
|
|
202
|
+
@change=${this._handleChange}
|
|
200
203
|
data-test-id="checkbox-input"
|
|
201
204
|
/>
|
|
202
205
|
<label for="inputId" data-test-id="checkbox-component">
|
|
@@ -210,7 +213,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
210
213
|
<pie-assistive-text
|
|
211
214
|
id="${assistiveTextId}"
|
|
212
215
|
variant=${status}
|
|
213
|
-
?isVisuallyHidden=${
|
|
216
|
+
?isVisuallyHidden=${_visuallyHiddenError}
|
|
214
217
|
data-test-id="pie-checkbox-assistive-text">
|
|
215
218
|
${assistiveText}
|
|
216
219
|
</pie-assistive-text>` : nothing}
|