@justeattakeaway/pie-checkbox 0.7.1 → 0.9.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 +20 -23
- package/custom-elements.json +14 -37
- package/dist/index.d.ts +7 -20
- package/dist/index.js +75 -70
- package/dist/react.d.ts +7 -20
- package/package.json +1 -1
- package/src/checkbox.scss +11 -1
- package/src/defs.ts +1 -16
- package/src/index.ts +33 -28
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,34 +72,30 @@ 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
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `aria` | `object` | {} | accepts `label`, `labeledby` and `describedby` keys with string values. |
|
|
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
|
+
| `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
|
|
81
|
+
| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
|
|
82
|
+
| `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`. |
|
|
83
|
+
| `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. |
|
|
84
|
+
| `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox element. |
|
|
86
85
|
| `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
86
|
|
|
88
87
|
In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:
|
|
89
88
|
|
|
90
89
|
```html
|
|
91
90
|
<!-- Native HTML -->
|
|
92
|
-
<pie-checkbox
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
<pie-checkbox name="mycheckbox">Label</pie-checkbox>
|
|
92
|
+
|
|
93
|
+
<!-- Without a label it is necessary to pass aria-label or aria-labelledby attributes to the component -->
|
|
94
|
+
<pie-checkbox name="mycheckbox" aria-label="Label"></pie-checkbox>
|
|
96
95
|
|
|
97
96
|
<!-- JSX -->
|
|
98
|
-
<PieCheckbox
|
|
99
|
-
|
|
100
|
-
label="Checkbox Label">
|
|
101
|
-
</PieCheckbox>
|
|
97
|
+
<PieCheckbox name="mycheckbox">Label</PieCheckbox>
|
|
98
|
+
<PieCheckbox name="mycheckbox" aria-label="Label"></PieCheckbox>
|
|
102
99
|
```
|
|
103
100
|
|
|
104
101
|
## Events
|
package/custom-elements.json
CHANGED
|
@@ -56,6 +56,12 @@
|
|
|
56
56
|
"kind": "class",
|
|
57
57
|
"description": "",
|
|
58
58
|
"name": "PieCheckbox",
|
|
59
|
+
"slots": [
|
|
60
|
+
{
|
|
61
|
+
"description": "Default slot",
|
|
62
|
+
"name": ""
|
|
63
|
+
}
|
|
64
|
+
],
|
|
59
65
|
"members": [
|
|
60
66
|
{
|
|
61
67
|
"kind": "field",
|
|
@@ -68,18 +74,18 @@
|
|
|
68
74
|
},
|
|
69
75
|
{
|
|
70
76
|
"kind": "field",
|
|
71
|
-
"name": "
|
|
72
|
-
"
|
|
73
|
-
|
|
77
|
+
"name": "disabledByParent",
|
|
78
|
+
"type": {
|
|
79
|
+
"text": "boolean"
|
|
80
|
+
},
|
|
81
|
+
"privacy": "private",
|
|
82
|
+
"default": "false"
|
|
74
83
|
},
|
|
75
84
|
{
|
|
76
85
|
"kind": "field",
|
|
77
|
-
"name": "
|
|
78
|
-
"type": {
|
|
79
|
-
"text": "CheckboxProps['label'] | undefined"
|
|
80
|
-
},
|
|
86
|
+
"name": "value",
|
|
81
87
|
"privacy": "public",
|
|
82
|
-
"attribute": "
|
|
88
|
+
"attribute": "value"
|
|
83
89
|
},
|
|
84
90
|
{
|
|
85
91
|
"kind": "field",
|
|
@@ -107,9 +113,6 @@
|
|
|
107
113
|
{
|
|
108
114
|
"kind": "field",
|
|
109
115
|
"name": "disabled",
|
|
110
|
-
"type": {
|
|
111
|
-
"text": "CheckboxProps['disabled'] | undefined"
|
|
112
|
-
},
|
|
113
116
|
"privacy": "public",
|
|
114
117
|
"attribute": "disabled",
|
|
115
118
|
"reflects": true
|
|
@@ -128,15 +131,6 @@
|
|
|
128
131
|
"attribute": "indeterminate",
|
|
129
132
|
"reflects": true
|
|
130
133
|
},
|
|
131
|
-
{
|
|
132
|
-
"kind": "field",
|
|
133
|
-
"name": "aria",
|
|
134
|
-
"type": {
|
|
135
|
-
"text": "CheckboxProps['aria']"
|
|
136
|
-
},
|
|
137
|
-
"privacy": "public",
|
|
138
|
-
"attribute": "aria"
|
|
139
|
-
},
|
|
140
134
|
{
|
|
141
135
|
"kind": "field",
|
|
142
136
|
"name": "checkbox",
|
|
@@ -242,13 +236,6 @@
|
|
|
242
236
|
"name": "value",
|
|
243
237
|
"fieldName": "value"
|
|
244
238
|
},
|
|
245
|
-
{
|
|
246
|
-
"name": "label",
|
|
247
|
-
"type": {
|
|
248
|
-
"text": "CheckboxProps['label'] | undefined"
|
|
249
|
-
},
|
|
250
|
-
"fieldName": "label"
|
|
251
|
-
},
|
|
252
239
|
{
|
|
253
240
|
"name": "name",
|
|
254
241
|
"type": {
|
|
@@ -266,9 +253,6 @@
|
|
|
266
253
|
},
|
|
267
254
|
{
|
|
268
255
|
"name": "disabled",
|
|
269
|
-
"type": {
|
|
270
|
-
"text": "CheckboxProps['disabled'] | undefined"
|
|
271
|
-
},
|
|
272
256
|
"fieldName": "disabled"
|
|
273
257
|
},
|
|
274
258
|
{
|
|
@@ -279,13 +263,6 @@
|
|
|
279
263
|
"name": "indeterminate",
|
|
280
264
|
"fieldName": "indeterminate"
|
|
281
265
|
},
|
|
282
|
-
{
|
|
283
|
-
"name": "aria",
|
|
284
|
-
"type": {
|
|
285
|
-
"text": "CheckboxProps['aria']"
|
|
286
|
-
},
|
|
287
|
-
"fieldName": "aria"
|
|
288
|
-
},
|
|
289
266
|
{
|
|
290
267
|
"name": "assistiveText",
|
|
291
268
|
"type": {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,24 +3,14 @@ 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`).
|
|
18
12
|
*/
|
|
19
13
|
value?: string;
|
|
20
|
-
/**
|
|
21
|
-
* The label value of the component
|
|
22
|
-
*/
|
|
23
|
-
label?: string;
|
|
24
14
|
/**
|
|
25
15
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
26
16
|
*/
|
|
@@ -46,10 +36,6 @@ export declare interface CheckboxProps {
|
|
|
46
36
|
* If true, the checkbox must be checked for the form to be submittable.
|
|
47
37
|
*/
|
|
48
38
|
required?: boolean;
|
|
49
|
-
/**
|
|
50
|
-
* Various ARIA attributes.
|
|
51
|
-
*/
|
|
52
|
-
aria?: AriaProps;
|
|
53
39
|
/**
|
|
54
40
|
* An optional assistive text to display below the input element. Must be provided when the status is success or error.
|
|
55
41
|
*/
|
|
@@ -60,12 +46,13 @@ export declare interface CheckboxProps {
|
|
|
60
46
|
status?: typeof statusTypes[number];
|
|
61
47
|
}
|
|
62
48
|
|
|
63
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
49
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
64
50
|
|
|
65
51
|
export declare const defaultProps: DefaultProps;
|
|
66
52
|
|
|
67
53
|
/**
|
|
68
54
|
* @tagname pie-checkbox
|
|
55
|
+
* @slot - Default slot
|
|
69
56
|
* @event {CustomEvent} change - when checked state is changed.
|
|
70
57
|
*/
|
|
71
58
|
export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
|
|
@@ -74,18 +61,19 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
74
61
|
mode: ShadowRootMode;
|
|
75
62
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
76
63
|
};
|
|
64
|
+
private disabledByParent;
|
|
77
65
|
value: string;
|
|
78
|
-
label?: CheckboxProps['label'];
|
|
79
66
|
name?: CheckboxProps['name'];
|
|
80
67
|
checked: boolean;
|
|
81
68
|
defaultChecked: boolean;
|
|
82
|
-
disabled
|
|
69
|
+
disabled: boolean;
|
|
83
70
|
required: boolean;
|
|
84
71
|
indeterminate: boolean;
|
|
85
|
-
aria: CheckboxProps['aria'];
|
|
86
72
|
private checkbox;
|
|
87
73
|
assistiveText?: CheckboxProps['assistiveText'];
|
|
88
74
|
status: "default" | "error" | "success";
|
|
75
|
+
connectedCallback(): void;
|
|
76
|
+
disconnectedCallback(): void;
|
|
89
77
|
/**
|
|
90
78
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
91
79
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -102,8 +90,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
102
90
|
* @param disabled - The latest disabled state of the input.
|
|
103
91
|
*/
|
|
104
92
|
formDisabledCallback(disabled: boolean): void;
|
|
105
|
-
protected
|
|
106
|
-
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
93
|
+
protected updated(): void;
|
|
107
94
|
/**
|
|
108
95
|
* Captures the native change event and wraps it in a custom event.
|
|
109
96
|
* @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
|
|
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 r, 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 q, defineCustomElement as D } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
7
|
+
const S = `*,*: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-checked][data-is-rtl]:before{left:unset;right:50%}.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-tick[data-is-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) + 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
|
|
21
|
-
(s =
|
|
22
|
-
return
|
|
19
|
+
var z = Object.defineProperty, A = Object.getOwnPropertyDescriptor, o = (h, e, d, a) => {
|
|
20
|
+
for (var c = a > 1 ? void 0 : a ? A(e, d) : e, n = h.length - 1, s; n >= 0; n--)
|
|
21
|
+
(s = h[n]) && (c = (a ? s(e, d, c) : s(c)) || c);
|
|
22
|
+
return a && c && z(e, d, c), c;
|
|
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,98 +87,96 @@ class t extends C(F(g)) {
|
|
|
80
87
|
const {
|
|
81
88
|
checked: e,
|
|
82
89
|
value: d,
|
|
83
|
-
name:
|
|
84
|
-
|
|
85
|
-
|
|
90
|
+
name: a,
|
|
91
|
+
disabled: c,
|
|
92
|
+
disabledByParent: n,
|
|
86
93
|
required: s,
|
|
87
|
-
indeterminate:
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
} = this;
|
|
92
|
-
return
|
|
94
|
+
indeterminate: b,
|
|
95
|
+
assistiveText: p,
|
|
96
|
+
status: k,
|
|
97
|
+
isRTL: g
|
|
98
|
+
} = this, l = c || n;
|
|
99
|
+
return v`
|
|
93
100
|
<div
|
|
94
101
|
class="c-checkbox"
|
|
95
|
-
data-pie-status=${!
|
|
96
|
-
?data-pie-disabled=${
|
|
102
|
+
data-pie-status=${!l && k}
|
|
103
|
+
?data-pie-disabled=${l}
|
|
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=${
|
|
110
|
+
.checked=${P(e)}
|
|
111
|
+
name=${x(a)}
|
|
112
|
+
?disabled=${l}
|
|
106
113
|
?required=${s}
|
|
107
|
-
.indeterminate=${
|
|
108
|
-
aria-
|
|
109
|
-
aria-labelledby=${r ? h : (l == null ? void 0 : l.labelledby) || h}
|
|
110
|
-
aria-describedby=${f(k ? m : void 0)}
|
|
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
|
/>
|
|
114
119
|
<label for="inputId" data-test-id="checkbox-component">
|
|
115
120
|
<span
|
|
116
121
|
class="c-checkbox-tick"
|
|
122
|
+
?data-is-rtl=${g}
|
|
117
123
|
?data-pie-checked=${e}
|
|
118
|
-
?data-pie-disabled=${
|
|
119
|
-
data-pie-status=${!
|
|
120
|
-
?data-pie-indeterminate=${
|
|
121
|
-
<span class="c-checkbox-text"
|
|
124
|
+
?data-pie-disabled=${l}
|
|
125
|
+
data-pie-status=${!l && k}
|
|
126
|
+
?data-pie-indeterminate=${b && !e}></span>
|
|
127
|
+
<span class="c-checkbox-text">
|
|
128
|
+
<slot></slot>
|
|
129
|
+
</span>
|
|
122
130
|
</label>
|
|
123
|
-
${
|
|
131
|
+
${p ? v`
|
|
124
132
|
<pie-assistive-text
|
|
125
|
-
id="${
|
|
126
|
-
variant=${
|
|
133
|
+
id="${u}"
|
|
134
|
+
variant=${k}
|
|
127
135
|
data-test-id="pie-checkbox-assistive-text">
|
|
128
|
-
${
|
|
129
|
-
</pie-assistive-text>` :
|
|
136
|
+
${p}
|
|
137
|
+
</pie-assistive-text>` : y}
|
|
130
138
|
</div>`;
|
|
131
139
|
}
|
|
132
140
|
}
|
|
133
|
-
t.shadowRootOptions = { ...
|
|
134
|
-
t.styles = w(
|
|
141
|
+
t.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
|
|
142
|
+
t.styles = w(S);
|
|
135
143
|
o([
|
|
136
|
-
|
|
137
|
-
], t.prototype, "
|
|
144
|
+
C()
|
|
145
|
+
], t.prototype, "disabledByParent", 2);
|
|
138
146
|
o([
|
|
139
|
-
|
|
140
|
-
], t.prototype, "
|
|
147
|
+
r({ type: String })
|
|
148
|
+
], t.prototype, "value", 2);
|
|
141
149
|
o([
|
|
142
|
-
|
|
150
|
+
r({ type: String })
|
|
143
151
|
], t.prototype, "name", 2);
|
|
144
152
|
o([
|
|
145
|
-
|
|
153
|
+
r({ type: Boolean, reflect: !0 })
|
|
146
154
|
], t.prototype, "checked", 2);
|
|
147
155
|
o([
|
|
148
|
-
|
|
156
|
+
r({ type: Boolean, reflect: !0 })
|
|
149
157
|
], t.prototype, "defaultChecked", 2);
|
|
150
158
|
o([
|
|
151
|
-
|
|
159
|
+
r({ type: Boolean, reflect: !0 })
|
|
152
160
|
], t.prototype, "disabled", 2);
|
|
153
161
|
o([
|
|
154
|
-
|
|
162
|
+
r({ type: Boolean, reflect: !0 })
|
|
155
163
|
], t.prototype, "required", 2);
|
|
156
164
|
o([
|
|
157
|
-
|
|
165
|
+
r({ 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);
|
|
165
170
|
o([
|
|
166
|
-
|
|
171
|
+
r({ type: String })
|
|
167
172
|
], t.prototype, "assistiveText", 2);
|
|
168
173
|
o([
|
|
169
|
-
|
|
170
|
-
|
|
174
|
+
r({ type: String }),
|
|
175
|
+
q(m, _, i.status)
|
|
171
176
|
], t.prototype, "status", 2);
|
|
172
|
-
|
|
177
|
+
D(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,25 +3,15 @@ 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`).
|
|
19
13
|
*/
|
|
20
14
|
value?: string;
|
|
21
|
-
/**
|
|
22
|
-
* The label value of the component
|
|
23
|
-
*/
|
|
24
|
-
label?: string;
|
|
25
15
|
/**
|
|
26
16
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
27
17
|
*/
|
|
@@ -47,10 +37,6 @@ export declare interface CheckboxProps {
|
|
|
47
37
|
* If true, the checkbox must be checked for the form to be submittable.
|
|
48
38
|
*/
|
|
49
39
|
required?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Various ARIA attributes.
|
|
52
|
-
*/
|
|
53
|
-
aria?: AriaProps;
|
|
54
40
|
/**
|
|
55
41
|
* An optional assistive text to display below the input element. Must be provided when the status is success or error.
|
|
56
42
|
*/
|
|
@@ -61,7 +47,7 @@ export declare interface CheckboxProps {
|
|
|
61
47
|
status?: typeof statusTypes[number];
|
|
62
48
|
}
|
|
63
49
|
|
|
64
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
50
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
65
51
|
|
|
66
52
|
export declare const defaultProps: DefaultProps;
|
|
67
53
|
|
|
@@ -69,6 +55,7 @@ export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProp
|
|
|
69
55
|
|
|
70
56
|
/**
|
|
71
57
|
* @tagname pie-checkbox
|
|
58
|
+
* @slot - Default slot
|
|
72
59
|
* @event {CustomEvent} change - when checked state is changed.
|
|
73
60
|
*/
|
|
74
61
|
declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
@@ -77,18 +64,19 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
77
64
|
mode: ShadowRootMode;
|
|
78
65
|
slotAssignment?: SlotAssignmentMode | undefined;
|
|
79
66
|
};
|
|
67
|
+
private disabledByParent;
|
|
80
68
|
value: string;
|
|
81
|
-
label?: CheckboxProps['label'];
|
|
82
69
|
name?: CheckboxProps['name'];
|
|
83
70
|
checked: boolean;
|
|
84
71
|
defaultChecked: boolean;
|
|
85
|
-
disabled
|
|
72
|
+
disabled: boolean;
|
|
86
73
|
required: boolean;
|
|
87
74
|
indeterminate: boolean;
|
|
88
|
-
aria: CheckboxProps['aria'];
|
|
89
75
|
private checkbox;
|
|
90
76
|
assistiveText?: CheckboxProps['assistiveText'];
|
|
91
77
|
status: "default" | "error" | "success";
|
|
78
|
+
connectedCallback(): void;
|
|
79
|
+
disconnectedCallback(): void;
|
|
92
80
|
/**
|
|
93
81
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
94
82
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -105,8 +93,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
105
93
|
* @param disabled - The latest disabled state of the input.
|
|
106
94
|
*/
|
|
107
95
|
formDisabledCallback(disabled: boolean): void;
|
|
108
|
-
protected
|
|
109
|
-
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
96
|
+
protected updated(): void;
|
|
110
97
|
/**
|
|
111
98
|
* Captures the native change event and wraps it in a custom event.
|
|
112
99
|
* @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/checkbox.scss
CHANGED
|
@@ -134,6 +134,11 @@
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
+
&[data-pie-checked][data-is-rtl]:before {
|
|
138
|
+
left: unset;
|
|
139
|
+
right: 50%;
|
|
140
|
+
}
|
|
141
|
+
|
|
137
142
|
&[data-pie-indeterminate] {
|
|
138
143
|
&:not([data-pie-disabled]) {
|
|
139
144
|
--checkbox-bg-color: var(--dt-color-interactive-brand);
|
|
@@ -179,13 +184,18 @@
|
|
|
179
184
|
background-color: white;
|
|
180
185
|
}
|
|
181
186
|
|
|
187
|
+
.c-checkbox-tick[data-is-rtl]:after {
|
|
188
|
+
left: unset;
|
|
189
|
+
right: 14%;
|
|
190
|
+
}
|
|
191
|
+
|
|
182
192
|
.c-checkbox {
|
|
183
193
|
--checkbox-height: 24px;
|
|
184
194
|
--checkbox-width: 24px;
|
|
185
195
|
--checkbox-radius: var(--dt-radius-rounded-a);
|
|
186
196
|
--checkbox-margin: 1px;
|
|
187
197
|
--checkbox-gap: var(--dt-spacing-b);
|
|
188
|
-
--checkbox-font-size:
|
|
198
|
+
--checkbox-font-size: p.font-size(--dt-font-body-l-size);
|
|
189
199
|
--checkbox-font-weight: var(--dt-font-weight-regular);
|
|
190
200
|
--checkbox-bg-color: var(--dt-color-container-default);
|
|
191
201
|
--checkbox-border-color: var(--dt-color-interactive-form);
|
package/src/defs.ts
CHANGED
|
@@ -1,22 +1,12 @@
|
|
|
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`).
|
|
12
7
|
*/
|
|
13
8
|
value?: string;
|
|
14
9
|
|
|
15
|
-
/**
|
|
16
|
-
* The label value of the component
|
|
17
|
-
*/
|
|
18
|
-
label?: string;
|
|
19
|
-
|
|
20
10
|
/**
|
|
21
11
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
22
12
|
*/
|
|
@@ -48,11 +38,6 @@ export interface CheckboxProps {
|
|
|
48
38
|
*/
|
|
49
39
|
required?: boolean;
|
|
50
40
|
|
|
51
|
-
/**
|
|
52
|
-
* Various ARIA attributes.
|
|
53
|
-
*/
|
|
54
|
-
aria?: AriaProps;
|
|
55
|
-
|
|
56
41
|
/**
|
|
57
42
|
* An optional assistive text to display below the input element. Must be provided when the status is success or error.
|
|
58
43
|
*/
|
|
@@ -64,7 +49,7 @@ export interface CheckboxProps {
|
|
|
64
49
|
status?: typeof statusTypes[number];
|
|
65
50
|
}
|
|
66
51
|
|
|
67
|
-
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
52
|
+
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
68
53
|
|
|
69
54
|
export const defaultProps: DefaultProps = {
|
|
70
55
|
// a default value for the html <input type="checkbox" /> value attribute.
|
package/src/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
LitElement, html, unsafeCSS,
|
|
2
|
+
LitElement, html, unsafeCSS, 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
|
|
|
@@ -25,16 +25,17 @@ const assistiveTextIdValue = 'assistive-text';
|
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* @tagname pie-checkbox
|
|
28
|
+
* @slot - Default slot
|
|
28
29
|
* @event {CustomEvent} change - when checked state is changed.
|
|
29
30
|
*/
|
|
30
31
|
export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
|
|
31
32
|
static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
32
33
|
|
|
33
|
-
@
|
|
34
|
-
|
|
34
|
+
@state()
|
|
35
|
+
private disabledByParent = false;
|
|
35
36
|
|
|
36
37
|
@property({ type: String })
|
|
37
|
-
public
|
|
38
|
+
public value = defaultProps.value;
|
|
38
39
|
|
|
39
40
|
@property({ type: String })
|
|
40
41
|
public name?: CheckboxProps['name'];
|
|
@@ -46,7 +47,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
46
47
|
public defaultChecked = defaultProps.defaultChecked;
|
|
47
48
|
|
|
48
49
|
@property({ type: Boolean, reflect: true })
|
|
49
|
-
public disabled
|
|
50
|
+
public disabled = defaultProps.disabled;
|
|
50
51
|
|
|
51
52
|
@property({ type: Boolean, reflect: true })
|
|
52
53
|
public required = defaultProps.required;
|
|
@@ -54,9 +55,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
54
55
|
@property({ type: Boolean, reflect: true })
|
|
55
56
|
public indeterminate = defaultProps.indeterminate;
|
|
56
57
|
|
|
57
|
-
@property({ type: Object })
|
|
58
|
-
public aria: CheckboxProps['aria'];
|
|
59
|
-
|
|
60
58
|
@query('input[type="checkbox"]')
|
|
61
59
|
private checkbox!: HTMLInputElement;
|
|
62
60
|
|
|
@@ -67,6 +65,18 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
67
65
|
@validPropertyValues(componentSelector, statusTypes, defaultProps.status)
|
|
68
66
|
public status = defaultProps.status;
|
|
69
67
|
|
|
68
|
+
connectedCallback () : void {
|
|
69
|
+
super.connectedCallback();
|
|
70
|
+
|
|
71
|
+
this.addEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
disconnectedCallback () : void {
|
|
75
|
+
super.disconnectedCallback();
|
|
76
|
+
|
|
77
|
+
this.removeEventListener('pie-checkbox-group-disabled', (e: CustomEventInit) => { this.disabledByParent = e.detail.disabled; });
|
|
78
|
+
}
|
|
79
|
+
|
|
70
80
|
/**
|
|
71
81
|
* (Read-only) returns a ValidityState with the validity states that this element is in.
|
|
72
82
|
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
|
|
@@ -95,15 +105,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
95
105
|
this.disabled = disabled;
|
|
96
106
|
}
|
|
97
107
|
|
|
98
|
-
protected
|
|
99
|
-
super.firstUpdated(_changedProperties);
|
|
100
|
-
|
|
101
|
-
this.handleFormAssociation();
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
protected updated (_changedProperties: PropertyValues<this>): void {
|
|
105
|
-
super.updated(_changedProperties);
|
|
106
|
-
|
|
108
|
+
protected updated (): void {
|
|
107
109
|
this.handleFormAssociation();
|
|
108
110
|
}
|
|
109
111
|
|
|
@@ -145,20 +147,22 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
145
147
|
checked,
|
|
146
148
|
value,
|
|
147
149
|
name,
|
|
148
|
-
label,
|
|
149
150
|
disabled,
|
|
151
|
+
disabledByParent,
|
|
150
152
|
required,
|
|
151
153
|
indeterminate,
|
|
152
|
-
aria,
|
|
153
154
|
assistiveText,
|
|
154
155
|
status,
|
|
156
|
+
isRTL,
|
|
155
157
|
} = this;
|
|
156
158
|
|
|
159
|
+
const componentDisabled = disabled || disabledByParent;
|
|
160
|
+
|
|
157
161
|
return html`
|
|
158
162
|
<div
|
|
159
163
|
class="c-checkbox"
|
|
160
|
-
data-pie-status=${!
|
|
161
|
-
?data-pie-disabled=${
|
|
164
|
+
data-pie-status=${!componentDisabled && status}
|
|
165
|
+
?data-pie-disabled=${componentDisabled}
|
|
162
166
|
?data-pie-checked=${checked}
|
|
163
167
|
?data-pie-indeterminate=${indeterminate && !checked}>
|
|
164
168
|
<input
|
|
@@ -167,11 +171,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
167
171
|
.value=${value}
|
|
168
172
|
.checked=${live(checked)}
|
|
169
173
|
name=${ifDefined(name)}
|
|
170
|
-
?disabled=${
|
|
174
|
+
?disabled=${componentDisabled}
|
|
171
175
|
?required=${required}
|
|
172
176
|
.indeterminate=${indeterminate}
|
|
173
|
-
aria-label=${aria?.label || nothing}
|
|
174
|
-
aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
|
|
175
177
|
aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
|
|
176
178
|
@change=${this.handleChange}
|
|
177
179
|
data-test-id="checkbox-input"
|
|
@@ -179,11 +181,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
179
181
|
<label for="inputId" data-test-id="checkbox-component">
|
|
180
182
|
<span
|
|
181
183
|
class="c-checkbox-tick"
|
|
184
|
+
?data-is-rtl=${isRTL}
|
|
182
185
|
?data-pie-checked=${checked}
|
|
183
|
-
?data-pie-disabled=${
|
|
184
|
-
data-pie-status=${!
|
|
186
|
+
?data-pie-disabled=${componentDisabled}
|
|
187
|
+
data-pie-status=${!componentDisabled && status}
|
|
185
188
|
?data-pie-indeterminate=${indeterminate && !checked}></span>
|
|
186
|
-
<span class="c-checkbox-text"
|
|
189
|
+
<span class="c-checkbox-text">
|
|
190
|
+
<slot></slot>
|
|
191
|
+
</span>
|
|
187
192
|
</label>
|
|
188
193
|
${assistiveText ? html`
|
|
189
194
|
<pie-assistive-text
|