@justeattakeaway/pie-checkbox 0.7.1 → 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/README.md +15 -15
- package/custom-elements.json +9 -22
- package/dist/index.d.ts +6 -15
- package/dist/index.js +63 -58
- package/dist/react.d.ts +6 -15
- package/package.json +1 -1
- package/src/defs.ts +1 -11
- package/src/index.ts +26 -22
package/README.md
CHANGED
|
@@ -30,9 +30,10 @@ This component can be easily integrated into various frontend frameworks and cus
|
|
|
30
30
|
To install `pie-checkbox` in your application, run the following on your command line:
|
|
31
31
|
|
|
32
32
|
```bash
|
|
33
|
-
npm i @justeattakeaway/pie-checkbox
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
$ npm i @justeattakeaway/pie-checkbox
|
|
34
|
+
```
|
|
35
|
+
```bash
|
|
36
|
+
$ yarn add @justeattakeaway/pie-checkbox
|
|
36
37
|
```
|
|
37
38
|
|
|
38
39
|
For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
|
|
@@ -71,18 +72,17 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
|
|
|
71
72
|
|
|
72
73
|
## Props
|
|
73
74
|
|
|
74
|
-
| Property | Type
|
|
75
|
-
|
|
76
|
-
| `name` | `string`
|
|
77
|
-
| `value` | `string`
|
|
78
|
-
| `required` | `boolean`
|
|
79
|
-
| `label` | `string`
|
|
80
|
-
| `disabled` | `boolean`
|
|
81
|
-
| `checked` | `boolean`
|
|
82
|
-
| `defaultChecked` | `boolean`
|
|
83
|
-
| `indeterminate` | `boolean`
|
|
84
|
-
| `
|
|
85
|
-
| `assistiveText` | `string` | `''` | Allows assistive text to be displayed below the checkbox element. |
|
|
75
|
+
| Property | Type | Default | Description |
|
|
76
|
+
|---|---|---|---|
|
|
77
|
+
| `name` | `string` | - | The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms. |
|
|
78
|
+
| `value` | `string` `'on'` | The value of the input (used as a key/value pair in HTML forms with `name`). If not passed falls back to the html default value "on". |
|
|
79
|
+
| `required` | `boolean` | `false` | If true, the checkbox is required to be checked before submitting the form. If it is not in checked state, the component validity state will be invalid. |
|
|
80
|
+
| `label` | `string` | `''` | Text associated with the checkbox. If there is no label to provide, make sure to pass aria-label, aria-labelledby or aria-describedby attributes instead. |
|
|
81
|
+
| `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
|
|
82
|
+
| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
|
|
83
|
+
| `defaultChecked` | `boolean` | `false` | Sets the default checked state for the checkbox. This does not directly set the initial checked state when the page loads, use `checked` for that. If the checkbox is inside a form which is reset, the `checked` state will be updated to match `defaultChecked`. |
|
|
84
|
+
| `indeterminate` | `boolean` | `false` | Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick. It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state. |
|
|
85
|
+
| `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox element. |
|
|
86
86
|
| `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
|
|
87
87
|
|
|
88
88
|
In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:
|
package/custom-elements.json
CHANGED
|
@@ -66,6 +66,15 @@
|
|
|
66
66
|
"static": true,
|
|
67
67
|
"default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
|
|
68
68
|
},
|
|
69
|
+
{
|
|
70
|
+
"kind": "field",
|
|
71
|
+
"name": "disabledByParent",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "boolean"
|
|
74
|
+
},
|
|
75
|
+
"privacy": "private",
|
|
76
|
+
"default": "false"
|
|
77
|
+
},
|
|
69
78
|
{
|
|
70
79
|
"kind": "field",
|
|
71
80
|
"name": "value",
|
|
@@ -107,9 +116,6 @@
|
|
|
107
116
|
{
|
|
108
117
|
"kind": "field",
|
|
109
118
|
"name": "disabled",
|
|
110
|
-
"type": {
|
|
111
|
-
"text": "CheckboxProps['disabled'] | undefined"
|
|
112
|
-
},
|
|
113
119
|
"privacy": "public",
|
|
114
120
|
"attribute": "disabled",
|
|
115
121
|
"reflects": true
|
|
@@ -128,15 +134,6 @@
|
|
|
128
134
|
"attribute": "indeterminate",
|
|
129
135
|
"reflects": true
|
|
130
136
|
},
|
|
131
|
-
{
|
|
132
|
-
"kind": "field",
|
|
133
|
-
"name": "aria",
|
|
134
|
-
"type": {
|
|
135
|
-
"text": "CheckboxProps['aria']"
|
|
136
|
-
},
|
|
137
|
-
"privacy": "public",
|
|
138
|
-
"attribute": "aria"
|
|
139
|
-
},
|
|
140
137
|
{
|
|
141
138
|
"kind": "field",
|
|
142
139
|
"name": "checkbox",
|
|
@@ -266,9 +263,6 @@
|
|
|
266
263
|
},
|
|
267
264
|
{
|
|
268
265
|
"name": "disabled",
|
|
269
|
-
"type": {
|
|
270
|
-
"text": "CheckboxProps['disabled'] | undefined"
|
|
271
|
-
},
|
|
272
266
|
"fieldName": "disabled"
|
|
273
267
|
},
|
|
274
268
|
{
|
|
@@ -279,13 +273,6 @@
|
|
|
279
273
|
"name": "indeterminate",
|
|
280
274
|
"fieldName": "indeterminate"
|
|
281
275
|
},
|
|
282
|
-
{
|
|
283
|
-
"name": "aria",
|
|
284
|
-
"type": {
|
|
285
|
-
"text": "CheckboxProps['aria']"
|
|
286
|
-
},
|
|
287
|
-
"fieldName": "aria"
|
|
288
|
-
},
|
|
289
276
|
{
|
|
290
277
|
"name": "assistiveText",
|
|
291
278
|
"type": {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,15 +3,9 @@ import type { CSSResult } from 'lit';
|
|
|
3
3
|
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
5
|
import type { LitElement } from 'lit';
|
|
6
|
-
import type { PropertyValues } from 'lit';
|
|
7
6
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
7
|
import type { TemplateResult } from 'lit-html';
|
|
9
8
|
|
|
10
|
-
export declare type AriaProps = {
|
|
11
|
-
label?: string;
|
|
12
|
-
labelledby?: string;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
9
|
export declare interface CheckboxProps {
|
|
16
10
|
/**
|
|
17
11
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
@@ -46,10 +40,6 @@ export declare interface CheckboxProps {
|
|
|
46
40
|
* If true, the checkbox must be checked for the form to be submittable.
|
|
47
41
|
*/
|
|
48
42
|
required?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* Various ARIA attributes.
|
|
51
|
-
*/
|
|
52
|
-
aria?: AriaProps;
|
|
53
43
|
/**
|
|
54
44
|
* An optional assistive text to display below the input element. Must be provided when the status is success or error.
|
|
55
45
|
*/
|
|
@@ -60,7 +50,7 @@ export declare interface CheckboxProps {
|
|
|
60
50
|
status?: typeof statusTypes[number];
|
|
61
51
|
}
|
|
62
52
|
|
|
63
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | '
|
|
53
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | 'assistiveText'>>;
|
|
64
54
|
|
|
65
55
|
export declare const defaultProps: DefaultProps;
|
|
66
56
|
|
|
@@ -74,18 +64,20 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
74
64
|
mode: ShadowRootMode;
|
|
75
65
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
76
66
|
};
|
|
67
|
+
private disabledByParent;
|
|
77
68
|
value: string;
|
|
78
69
|
label?: CheckboxProps['label'];
|
|
79
70
|
name?: CheckboxProps['name'];
|
|
80
71
|
checked: boolean;
|
|
81
72
|
defaultChecked: boolean;
|
|
82
|
-
disabled
|
|
73
|
+
disabled: boolean;
|
|
83
74
|
required: boolean;
|
|
84
75
|
indeterminate: boolean;
|
|
85
|
-
aria: CheckboxProps['aria'];
|
|
86
76
|
private checkbox;
|
|
87
77
|
assistiveText?: CheckboxProps['assistiveText'];
|
|
88
78
|
status: "default" | "error" | "success";
|
|
79
|
+
connectedCallback(): void;
|
|
80
|
+
disconnectedCallback(): void;
|
|
89
81
|
/**
|
|
90
82
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
91
83
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -102,8 +94,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
102
94
|
* @param disabled - The latest disabled state of the input.
|
|
103
95
|
*/
|
|
104
96
|
formDisabledCallback(disabled: boolean): void;
|
|
105
|
-
protected
|
|
106
|
-
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
97
|
+
protected updated(): void;
|
|
107
98
|
/**
|
|
108
99
|
* Captures the native change event and wraps it in a custom event.
|
|
109
100
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as c, query as $ } from "lit/decorators.js";
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import { live as
|
|
5
|
-
import { FormControlMixin as
|
|
1
|
+
import { LitElement as f, html as v, nothing as y, unsafeCSS as w } from "lit";
|
|
2
|
+
import { state as C, property as c, query as $ } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
4
|
+
import { live as P } from "lit/directives/live.js";
|
|
5
|
+
import { FormControlMixin as B, RtlMixin as E, wrapNativeEvent as F, validPropertyValues as S, defineCustomElement as q } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
7
|
+
const D = `*,*: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,0) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(.7)}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);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-disabled]{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick[data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-checked]{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-checked]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-checked][data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error);--checkbox-bg-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-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[data-pie-checked]:before{animation:none;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[data-pie-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[data-pie-indeterminate]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-indeterminate][data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error);--checkbox-bg-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-indeterminate]:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-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{--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: var(--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) + calc(-1 * var(--dt-color-hover-01))));transition:background-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) + calc(-1 * var(--dt-color-active-01))));transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox[data-pie-disabled] label{cursor:default;pointer-events:none}.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[data-pie-disabled]:hover .c-checkbox-tick,.c-checkbox[data-pie-disabled]:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox[data-pie-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) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-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) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-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) + calc(-1 * 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) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-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) + calc(-1 * 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) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-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) + calc(-1 * 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) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-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) + calc(-1 * 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) + calc(-1 * var(--dt-color-active-01))))}
|
|
8
|
+
`, _ = ["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,15 +16,25 @@ const A = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
16
16
|
required: !1,
|
|
17
17
|
status: "default"
|
|
18
18
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var r =
|
|
21
|
-
(
|
|
22
|
-
return
|
|
19
|
+
var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (h, e, d, a) => {
|
|
20
|
+
for (var r = a > 1 ? void 0 : a ? O(e, d) : e, n = h.length - 1, l; n >= 0; n--)
|
|
21
|
+
(l = h[n]) && (r = (a ? l(e, d, r) : l(r)) || r);
|
|
22
|
+
return a && r && A(e, d, r), r;
|
|
23
23
|
};
|
|
24
|
-
const
|
|
25
|
-
class t extends
|
|
24
|
+
const m = "pie-checkbox", u = "assistive-text";
|
|
25
|
+
class t extends B(E(f)) {
|
|
26
26
|
constructor() {
|
|
27
|
-
super(...arguments), this.value =
|
|
27
|
+
super(...arguments), this.disabledByParent = !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;
|
|
28
|
+
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
super.connectedCallback(), this.addEventListener("pie-checkbox-group-disabled", (e) => {
|
|
31
|
+
this.disabledByParent = e.detail.disabled;
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
disconnectedCallback() {
|
|
35
|
+
super.disconnectedCallback(), this.removeEventListener("pie-checkbox-group-disabled", (e) => {
|
|
36
|
+
this.disabledByParent = e.detail.disabled;
|
|
37
|
+
});
|
|
28
38
|
}
|
|
29
39
|
/**
|
|
30
40
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
@@ -48,11 +58,8 @@ class t extends C(F(g)) {
|
|
|
48
58
|
formDisabledCallback(e) {
|
|
49
59
|
this.disabled = e;
|
|
50
60
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
updated(e) {
|
|
55
|
-
super.updated(e), this.handleFormAssociation();
|
|
61
|
+
updated() {
|
|
62
|
+
this.handleFormAssociation();
|
|
56
63
|
}
|
|
57
64
|
/**
|
|
58
65
|
* Captures the native change event and wraps it in a custom event.
|
|
@@ -61,8 +68,8 @@ class t extends C(F(g)) {
|
|
|
61
68
|
handleChange(e) {
|
|
62
69
|
const { checked: d } = e == null ? void 0 : e.currentTarget;
|
|
63
70
|
this.checked = d;
|
|
64
|
-
const
|
|
65
|
-
this.dispatchEvent(
|
|
71
|
+
const a = F(e);
|
|
72
|
+
this.dispatchEvent(a), this.handleFormAssociation();
|
|
66
73
|
}
|
|
67
74
|
/**
|
|
68
75
|
* Called when the form that contains this component is reset.
|
|
@@ -80,34 +87,32 @@ class t extends C(F(g)) {
|
|
|
80
87
|
const {
|
|
81
88
|
checked: e,
|
|
82
89
|
value: d,
|
|
83
|
-
name:
|
|
90
|
+
name: a,
|
|
84
91
|
label: r,
|
|
85
|
-
disabled:
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
assistiveText:
|
|
90
|
-
status:
|
|
91
|
-
} = this;
|
|
92
|
-
return
|
|
92
|
+
disabled: n,
|
|
93
|
+
disabledByParent: l,
|
|
94
|
+
required: g,
|
|
95
|
+
indeterminate: b,
|
|
96
|
+
assistiveText: p,
|
|
97
|
+
status: k
|
|
98
|
+
} = this, s = n || l;
|
|
99
|
+
return v`
|
|
93
100
|
<div
|
|
94
101
|
class="c-checkbox"
|
|
95
|
-
data-pie-status=${!
|
|
96
|
-
?data-pie-disabled=${
|
|
102
|
+
data-pie-status=${!s && k}
|
|
103
|
+
?data-pie-disabled=${s}
|
|
97
104
|
?data-pie-checked=${e}
|
|
98
|
-
?data-pie-indeterminate=${
|
|
105
|
+
?data-pie-indeterminate=${b && !e}>
|
|
99
106
|
<input
|
|
100
107
|
type="checkbox"
|
|
101
108
|
id="inputId"
|
|
102
109
|
.value=${d}
|
|
103
|
-
.checked=${
|
|
104
|
-
name=${
|
|
105
|
-
?disabled=${
|
|
106
|
-
?required=${
|
|
107
|
-
.indeterminate=${
|
|
108
|
-
aria-
|
|
109
|
-
aria-labelledby=${r ? h : (l == null ? void 0 : l.labelledby) || h}
|
|
110
|
-
aria-describedby=${f(k ? m : void 0)}
|
|
110
|
+
.checked=${P(e)}
|
|
111
|
+
name=${x(a)}
|
|
112
|
+
?disabled=${s}
|
|
113
|
+
?required=${g}
|
|
114
|
+
.indeterminate=${b}
|
|
115
|
+
aria-describedby=${x(p ? u : void 0)}
|
|
111
116
|
@change=${this.handleChange}
|
|
112
117
|
data-test-id="checkbox-input"
|
|
113
118
|
/>
|
|
@@ -115,23 +120,26 @@ class t extends C(F(g)) {
|
|
|
115
120
|
<span
|
|
116
121
|
class="c-checkbox-tick"
|
|
117
122
|
?data-pie-checked=${e}
|
|
118
|
-
?data-pie-disabled=${
|
|
119
|
-
data-pie-status=${!
|
|
120
|
-
?data-pie-indeterminate=${
|
|
123
|
+
?data-pie-disabled=${s}
|
|
124
|
+
data-pie-status=${!s && k}
|
|
125
|
+
?data-pie-indeterminate=${b && !e}></span>
|
|
121
126
|
<span class="c-checkbox-text">${r}</span>
|
|
122
127
|
</label>
|
|
123
|
-
${
|
|
128
|
+
${p ? v`
|
|
124
129
|
<pie-assistive-text
|
|
125
|
-
id="${
|
|
126
|
-
variant=${
|
|
130
|
+
id="${u}"
|
|
131
|
+
variant=${k}
|
|
127
132
|
data-test-id="pie-checkbox-assistive-text">
|
|
128
|
-
${
|
|
129
|
-
</pie-assistive-text>` :
|
|
133
|
+
${p}
|
|
134
|
+
</pie-assistive-text>` : y}
|
|
130
135
|
</div>`;
|
|
131
136
|
}
|
|
132
137
|
}
|
|
133
|
-
t.shadowRootOptions = { ...
|
|
134
|
-
t.styles = w(
|
|
138
|
+
t.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
|
|
139
|
+
t.styles = w(D);
|
|
140
|
+
o([
|
|
141
|
+
C()
|
|
142
|
+
], t.prototype, "disabledByParent", 2);
|
|
135
143
|
o([
|
|
136
144
|
c({ type: String })
|
|
137
145
|
], t.prototype, "value", 2);
|
|
@@ -156,9 +164,6 @@ o([
|
|
|
156
164
|
o([
|
|
157
165
|
c({ type: Boolean, reflect: !0 })
|
|
158
166
|
], t.prototype, "indeterminate", 2);
|
|
159
|
-
o([
|
|
160
|
-
c({ type: Object })
|
|
161
|
-
], t.prototype, "aria", 2);
|
|
162
167
|
o([
|
|
163
168
|
$('input[type="checkbox"]')
|
|
164
169
|
], t.prototype, "checkbox", 2);
|
|
@@ -167,11 +172,11 @@ o([
|
|
|
167
172
|
], t.prototype, "assistiveText", 2);
|
|
168
173
|
o([
|
|
169
174
|
c({ type: String }),
|
|
170
|
-
S(
|
|
175
|
+
S(m, _, i.status)
|
|
171
176
|
], t.prototype, "status", 2);
|
|
172
|
-
q(
|
|
177
|
+
q(m, t);
|
|
173
178
|
export {
|
|
174
179
|
t as PieCheckbox,
|
|
175
|
-
|
|
176
|
-
|
|
180
|
+
i as defaultProps,
|
|
181
|
+
_ as statusTypes
|
|
177
182
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -3,16 +3,10 @@ import type { CSSResult } from 'lit';
|
|
|
3
3
|
import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
5
5
|
import type { LitElement } from 'lit';
|
|
6
|
-
import type { PropertyValues } from 'lit';
|
|
7
6
|
import * as React_2 from 'react';
|
|
8
7
|
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
9
8
|
import type { TemplateResult } from 'lit-html';
|
|
10
9
|
|
|
11
|
-
export declare type AriaProps = {
|
|
12
|
-
label?: string;
|
|
13
|
-
labelledby?: string;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
10
|
export declare interface CheckboxProps {
|
|
17
11
|
/**
|
|
18
12
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
@@ -47,10 +41,6 @@ export declare interface CheckboxProps {
|
|
|
47
41
|
* If true, the checkbox must be checked for the form to be submittable.
|
|
48
42
|
*/
|
|
49
43
|
required?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Various ARIA attributes.
|
|
52
|
-
*/
|
|
53
|
-
aria?: AriaProps;
|
|
54
44
|
/**
|
|
55
45
|
* An optional assistive text to display below the input element. Must be provided when the status is success or error.
|
|
56
46
|
*/
|
|
@@ -61,7 +51,7 @@ export declare interface CheckboxProps {
|
|
|
61
51
|
status?: typeof statusTypes[number];
|
|
62
52
|
}
|
|
63
53
|
|
|
64
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | '
|
|
54
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | 'assistiveText'>>;
|
|
65
55
|
|
|
66
56
|
export declare const defaultProps: DefaultProps;
|
|
67
57
|
|
|
@@ -77,18 +67,20 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
77
67
|
mode: ShadowRootMode;
|
|
78
68
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
79
69
|
};
|
|
70
|
+
private disabledByParent;
|
|
80
71
|
value: string;
|
|
81
72
|
label?: CheckboxProps['label'];
|
|
82
73
|
name?: CheckboxProps['name'];
|
|
83
74
|
checked: boolean;
|
|
84
75
|
defaultChecked: boolean;
|
|
85
|
-
disabled
|
|
76
|
+
disabled: boolean;
|
|
86
77
|
required: boolean;
|
|
87
78
|
indeterminate: boolean;
|
|
88
|
-
aria: CheckboxProps['aria'];
|
|
89
79
|
private checkbox;
|
|
90
80
|
assistiveText?: CheckboxProps['assistiveText'];
|
|
91
81
|
status: "default" | "error" | "success";
|
|
82
|
+
connectedCallback(): void;
|
|
83
|
+
disconnectedCallback(): void;
|
|
92
84
|
/**
|
|
93
85
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
94
86
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -105,8 +97,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
105
97
|
* @param disabled - The latest disabled state of the input.
|
|
106
98
|
*/
|
|
107
99
|
formDisabledCallback(disabled: boolean): void;
|
|
108
|
-
protected
|
|
109
|
-
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
100
|
+
protected updated(): void;
|
|
110
101
|
/**
|
|
111
102
|
* Captures the native change event and wraps it in a custom event.
|
|
112
103
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
package/package.json
CHANGED
package/src/defs.ts
CHANGED
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
3
|
export const statusTypes = ['default', 'success', 'error'] as const;
|
|
4
|
-
|
|
5
|
-
export type AriaProps = {
|
|
6
|
-
label?: string;
|
|
7
|
-
labelledby?: string;
|
|
8
|
-
};
|
|
9
4
|
export interface CheckboxProps {
|
|
10
5
|
/**
|
|
11
6
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
@@ -48,11 +43,6 @@ export interface CheckboxProps {
|
|
|
48
43
|
*/
|
|
49
44
|
required?: boolean;
|
|
50
45
|
|
|
51
|
-
/**
|
|
52
|
-
* Various ARIA attributes.
|
|
53
|
-
*/
|
|
54
|
-
aria?: AriaProps;
|
|
55
|
-
|
|
56
46
|
/**
|
|
57
47
|
* An optional assistive text to display below the input element. Must be provided when the status is success or error.
|
|
58
48
|
*/
|
|
@@ -64,7 +54,7 @@ export interface CheckboxProps {
|
|
|
64
54
|
status?: typeof statusTypes[number];
|
|
65
55
|
}
|
|
66
56
|
|
|
67
|
-
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | '
|
|
57
|
+
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'label' | 'name' | 'assistiveText'>>;
|
|
68
58
|
|
|
69
59
|
export const defaultProps: DefaultProps = {
|
|
70
60
|
// a default value for the html <input type="checkbox" /> value attribute.
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LitElement, html, unsafeCSS, PropertyValues, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
|
-
import { property, query } from 'lit/decorators.js';
|
|
4
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
6
|
import { live } from 'lit/directives/live.js';
|
|
7
7
|
|
|
@@ -30,6 +30,9 @@ const assistiveTextIdValue = 'assistive-text';
|
|
|
30
30
|
export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
|
|
31
31
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
32
32
|
|
|
33
|
+
@state()
|
|
34
|
+
private disabledByParent = false;
|
|
35
|
+
|
|
33
36
|
@property({ type: String })
|
|
34
37
|
public value = defaultProps.value;
|
|
35
38
|
|
|
@@ -46,7 +49,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
46
49
|
public defaultChecked = defaultProps.defaultChecked;
|
|
47
50
|
|
|
48
51
|
@property({ type: Boolean, reflect: true })
|
|
49
|
-
public disabled
|
|
52
|
+
public disabled = defaultProps.disabled;
|
|
50
53
|
|
|
51
54
|
@property({ type: Boolean, reflect: true })
|
|
52
55
|
public required = defaultProps.required;
|
|
@@ -54,9 +57,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
54
57
|
@property({ type: Boolean, reflect: true })
|
|
55
58
|
public indeterminate = defaultProps.indeterminate;
|
|
56
59
|
|
|
57
|
-
@property({ type: Object })
|
|
58
|
-
public aria: CheckboxProps['aria'];
|
|
59
|
-
|
|
60
60
|
@query('input[type="checkbox"]')
|
|
61
61
|
private checkbox!: HTMLInputElement;
|
|
62
62
|
|
|
@@ -67,6 +67,18 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
67
67
|
@validPropertyValues(componentSelector, statusTypes, defaultProps.status)
|
|
68
68
|
public status = defaultProps.status;
|
|
69
69
|
|
|
70
|
+
connectedCallback () : void {
|
|
71
|
+
super.connectedCallback();
|
|
72
|
+
|
|
73
|
+
this.addEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
disconnectedCallback () : void {
|
|
77
|
+
super.disconnectedCallback();
|
|
78
|
+
|
|
79
|
+
this.removeEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
80
|
+
}
|
|
81
|
+
|
|
70
82
|
/**
|
|
71
83
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
72
84
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -95,15 +107,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
95
107
|
this.disabled = disabled;
|
|
96
108
|
}
|
|
97
109
|
|
|
98
|
-
protected
|
|
99
|
-
super.firstUpdated(_changedProperties);
|
|
100
|
-
|
|
101
|
-
this.handleFormAssociation();
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
protected updated (_changedProperties: PropertyValues<this>): void {
|
|
105
|
-
super.updated(_changedProperties);
|
|
106
|
-
|
|
110
|
+
protected updated (): void {
|
|
107
111
|
this.handleFormAssociation();
|
|
108
112
|
}
|
|
109
113
|
|
|
@@ -147,18 +151,20 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
147
151
|
name,
|
|
148
152
|
label,
|
|
149
153
|
disabled,
|
|
154
|
+
disabledByParent,
|
|
150
155
|
required,
|
|
151
156
|
indeterminate,
|
|
152
|
-
aria,
|
|
153
157
|
assistiveText,
|
|
154
158
|
status,
|
|
155
159
|
} = this;
|
|
156
160
|
|
|
161
|
+
const componentDisabled = disabled || disabledByParent;
|
|
162
|
+
|
|
157
163
|
return html`
|
|
158
164
|
<div
|
|
159
165
|
class="c-checkbox"
|
|
160
|
-
data-pie-status=${!
|
|
161
|
-
?data-pie-disabled=${
|
|
166
|
+
data-pie-status=${!componentDisabled && status}
|
|
167
|
+
?data-pie-disabled=${componentDisabled}
|
|
162
168
|
?data-pie-checked=${checked}
|
|
163
169
|
?data-pie-indeterminate=${indeterminate && !checked}>
|
|
164
170
|
<input
|
|
@@ -167,11 +173,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
167
173
|
.value=${value}
|
|
168
174
|
.checked=${live(checked)}
|
|
169
175
|
name=${ifDefined(name)}
|
|
170
|
-
?disabled=${
|
|
176
|
+
?disabled=${componentDisabled}
|
|
171
177
|
?required=${required}
|
|
172
178
|
.indeterminate=${indeterminate}
|
|
173
|
-
aria-label=${aria?.label || nothing}
|
|
174
|
-
aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
|
|
175
179
|
aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
|
|
176
180
|
@change=${this.handleChange}
|
|
177
181
|
data-test-id="checkbox-input"
|
|
@@ -180,8 +184,8 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
180
184
|
<span
|
|
181
185
|
class="c-checkbox-tick"
|
|
182
186
|
?data-pie-checked=${checked}
|
|
183
|
-
?data-pie-disabled=${
|
|
184
|
-
data-pie-status=${!
|
|
187
|
+
?data-pie-disabled=${componentDisabled}
|
|
188
|
+
data-pie-status=${!componentDisabled && status}
|
|
185
189
|
?data-pie-indeterminate=${indeterminate && !checked}></span>
|
|
186
190
|
<span class="c-checkbox-text">${label}</span>
|
|
187
191
|
</label>
|