@justeattakeaway/pie-checkbox 0.8.0 → 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 +6 -9
- package/custom-elements.json +6 -16
- package/dist/index.d.ts +2 -6
- package/dist/index.js +35 -35
- package/dist/react.d.ts +2 -6
- package/package.json +1 -1
- package/src/checkbox.scss +11 -1
- package/src/defs.ts +1 -6
- package/src/index.ts +7 -6
package/README.md
CHANGED
|
@@ -77,7 +77,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
|
|
|
77
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
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
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
80
|
| `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
|
|
82
81
|
| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
|
|
83
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`. |
|
|
@@ -89,16 +88,14 @@ In your markup or JSX, you can then use these to set the properties for the `pie
|
|
|
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",
|
|
@@ -81,15 +87,6 @@
|
|
|
81
87
|
"privacy": "public",
|
|
82
88
|
"attribute": "value"
|
|
83
89
|
},
|
|
84
|
-
{
|
|
85
|
-
"kind": "field",
|
|
86
|
-
"name": "label",
|
|
87
|
-
"type": {
|
|
88
|
-
"text": "CheckboxProps['label'] | undefined"
|
|
89
|
-
},
|
|
90
|
-
"privacy": "public",
|
|
91
|
-
"attribute": "label"
|
|
92
|
-
},
|
|
93
90
|
{
|
|
94
91
|
"kind": "field",
|
|
95
92
|
"name": "name",
|
|
@@ -239,13 +236,6 @@
|
|
|
239
236
|
"name": "value",
|
|
240
237
|
"fieldName": "value"
|
|
241
238
|
},
|
|
242
|
-
{
|
|
243
|
-
"name": "label",
|
|
244
|
-
"type": {
|
|
245
|
-
"text": "CheckboxProps['label'] | undefined"
|
|
246
|
-
},
|
|
247
|
-
"fieldName": "label"
|
|
248
|
-
},
|
|
249
239
|
{
|
|
250
240
|
"name": "name",
|
|
251
241
|
"type": {
|
package/dist/index.d.ts
CHANGED
|
@@ -11,10 +11,6 @@ export declare interface CheckboxProps {
|
|
|
11
11
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
12
12
|
*/
|
|
13
13
|
value?: string;
|
|
14
|
-
/**
|
|
15
|
-
* The label value of the component
|
|
16
|
-
*/
|
|
17
|
-
label?: string;
|
|
18
14
|
/**
|
|
19
15
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
20
16
|
*/
|
|
@@ -50,12 +46,13 @@ export declare interface CheckboxProps {
|
|
|
50
46
|
status?: typeof statusTypes[number];
|
|
51
47
|
}
|
|
52
48
|
|
|
53
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
49
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
54
50
|
|
|
55
51
|
export declare const defaultProps: DefaultProps;
|
|
56
52
|
|
|
57
53
|
/**
|
|
58
54
|
* @tagname pie-checkbox
|
|
55
|
+
* @slot - Default slot
|
|
59
56
|
* @event {CustomEvent} change - when checked state is changed.
|
|
60
57
|
*/
|
|
61
58
|
export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
|
|
@@ -66,7 +63,6 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
|
|
|
66
63
|
};
|
|
67
64
|
private disabledByParent;
|
|
68
65
|
value: string;
|
|
69
|
-
label?: CheckboxProps['label'];
|
|
70
66
|
name?: CheckboxProps['name'];
|
|
71
67
|
checked: boolean;
|
|
72
68
|
defaultChecked: boolean;
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { LitElement as f, html as v, nothing as y, unsafeCSS as w } from "lit";
|
|
2
|
-
import { state as C, property as
|
|
2
|
+
import { state as C, property as r, query as $ } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
4
4
|
import { live as P } from "lit/directives/live.js";
|
|
5
|
-
import { FormControlMixin as B, RtlMixin as E, wrapNativeEvent as F, validPropertyValues as
|
|
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
|
|
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
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
|
|
@@ -16,10 +16,10 @@ 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
|
-
(
|
|
22
|
-
return a &&
|
|
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
24
|
const m = "pie-checkbox", u = "assistive-text";
|
|
25
25
|
class t extends B(E(f)) {
|
|
@@ -88,19 +88,19 @@ class t extends B(E(f)) {
|
|
|
88
88
|
checked: e,
|
|
89
89
|
value: d,
|
|
90
90
|
name: a,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
required: g,
|
|
91
|
+
disabled: c,
|
|
92
|
+
disabledByParent: n,
|
|
93
|
+
required: s,
|
|
95
94
|
indeterminate: b,
|
|
96
95
|
assistiveText: p,
|
|
97
|
-
status: k
|
|
98
|
-
|
|
96
|
+
status: k,
|
|
97
|
+
isRTL: g
|
|
98
|
+
} = this, l = c || n;
|
|
99
99
|
return v`
|
|
100
100
|
<div
|
|
101
101
|
class="c-checkbox"
|
|
102
|
-
data-pie-status=${!
|
|
103
|
-
?data-pie-disabled=${
|
|
102
|
+
data-pie-status=${!l && k}
|
|
103
|
+
?data-pie-disabled=${l}
|
|
104
104
|
?data-pie-checked=${e}
|
|
105
105
|
?data-pie-indeterminate=${b && !e}>
|
|
106
106
|
<input
|
|
@@ -109,8 +109,8 @@ class t extends B(E(f)) {
|
|
|
109
109
|
.value=${d}
|
|
110
110
|
.checked=${P(e)}
|
|
111
111
|
name=${x(a)}
|
|
112
|
-
?disabled=${
|
|
113
|
-
?required=${
|
|
112
|
+
?disabled=${l}
|
|
113
|
+
?required=${s}
|
|
114
114
|
.indeterminate=${b}
|
|
115
115
|
aria-describedby=${x(p ? u : void 0)}
|
|
116
116
|
@change=${this.handleChange}
|
|
@@ -119,11 +119,14 @@ class t extends B(E(f)) {
|
|
|
119
119
|
<label for="inputId" data-test-id="checkbox-component">
|
|
120
120
|
<span
|
|
121
121
|
class="c-checkbox-tick"
|
|
122
|
+
?data-is-rtl=${g}
|
|
122
123
|
?data-pie-checked=${e}
|
|
123
|
-
?data-pie-disabled=${
|
|
124
|
-
data-pie-status=${!
|
|
124
|
+
?data-pie-disabled=${l}
|
|
125
|
+
data-pie-status=${!l && k}
|
|
125
126
|
?data-pie-indeterminate=${b && !e}></span>
|
|
126
|
-
<span class="c-checkbox-text"
|
|
127
|
+
<span class="c-checkbox-text">
|
|
128
|
+
<slot></slot>
|
|
129
|
+
</span>
|
|
127
130
|
</label>
|
|
128
131
|
${p ? v`
|
|
129
132
|
<pie-assistive-text
|
|
@@ -136,45 +139,42 @@ class t extends B(E(f)) {
|
|
|
136
139
|
}
|
|
137
140
|
}
|
|
138
141
|
t.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
|
|
139
|
-
t.styles = w(
|
|
142
|
+
t.styles = w(S);
|
|
140
143
|
o([
|
|
141
144
|
C()
|
|
142
145
|
], t.prototype, "disabledByParent", 2);
|
|
143
146
|
o([
|
|
144
|
-
|
|
147
|
+
r({ type: String })
|
|
145
148
|
], t.prototype, "value", 2);
|
|
146
149
|
o([
|
|
147
|
-
|
|
148
|
-
], t.prototype, "label", 2);
|
|
149
|
-
o([
|
|
150
|
-
c({ type: String })
|
|
150
|
+
r({ type: String })
|
|
151
151
|
], t.prototype, "name", 2);
|
|
152
152
|
o([
|
|
153
|
-
|
|
153
|
+
r({ type: Boolean, reflect: !0 })
|
|
154
154
|
], t.prototype, "checked", 2);
|
|
155
155
|
o([
|
|
156
|
-
|
|
156
|
+
r({ type: Boolean, reflect: !0 })
|
|
157
157
|
], t.prototype, "defaultChecked", 2);
|
|
158
158
|
o([
|
|
159
|
-
|
|
159
|
+
r({ type: Boolean, reflect: !0 })
|
|
160
160
|
], t.prototype, "disabled", 2);
|
|
161
161
|
o([
|
|
162
|
-
|
|
162
|
+
r({ type: Boolean, reflect: !0 })
|
|
163
163
|
], t.prototype, "required", 2);
|
|
164
164
|
o([
|
|
165
|
-
|
|
165
|
+
r({ type: Boolean, reflect: !0 })
|
|
166
166
|
], t.prototype, "indeterminate", 2);
|
|
167
167
|
o([
|
|
168
168
|
$('input[type="checkbox"]')
|
|
169
169
|
], t.prototype, "checkbox", 2);
|
|
170
170
|
o([
|
|
171
|
-
|
|
171
|
+
r({ type: String })
|
|
172
172
|
], t.prototype, "assistiveText", 2);
|
|
173
173
|
o([
|
|
174
|
-
|
|
175
|
-
|
|
174
|
+
r({ type: String }),
|
|
175
|
+
q(m, _, i.status)
|
|
176
176
|
], t.prototype, "status", 2);
|
|
177
|
-
|
|
177
|
+
D(m, t);
|
|
178
178
|
export {
|
|
179
179
|
t as PieCheckbox,
|
|
180
180
|
i as defaultProps,
|
package/dist/react.d.ts
CHANGED
|
@@ -12,10 +12,6 @@ export declare interface CheckboxProps {
|
|
|
12
12
|
* The value of the checkbox (used as a key/value pair in HTML forms with `name`).
|
|
13
13
|
*/
|
|
14
14
|
value?: string;
|
|
15
|
-
/**
|
|
16
|
-
* The label value of the component
|
|
17
|
-
*/
|
|
18
|
-
label?: string;
|
|
19
15
|
/**
|
|
20
16
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
21
17
|
*/
|
|
@@ -51,7 +47,7 @@ export declare interface CheckboxProps {
|
|
|
51
47
|
status?: typeof statusTypes[number];
|
|
52
48
|
}
|
|
53
49
|
|
|
54
|
-
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
50
|
+
export declare type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
55
51
|
|
|
56
52
|
export declare const defaultProps: DefaultProps;
|
|
57
53
|
|
|
@@ -59,6 +55,7 @@ export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProp
|
|
|
59
55
|
|
|
60
56
|
/**
|
|
61
57
|
* @tagname pie-checkbox
|
|
58
|
+
* @slot - Default slot
|
|
62
59
|
* @event {CustomEvent} change - when checked state is changed.
|
|
63
60
|
*/
|
|
64
61
|
declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
@@ -69,7 +66,6 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
|
|
|
69
66
|
};
|
|
70
67
|
private disabledByParent;
|
|
71
68
|
value: string;
|
|
72
|
-
label?: CheckboxProps['label'];
|
|
73
69
|
name?: CheckboxProps['name'];
|
|
74
70
|
checked: boolean;
|
|
75
71
|
defaultChecked: boolean;
|
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
|
@@ -7,11 +7,6 @@ export interface CheckboxProps {
|
|
|
7
7
|
*/
|
|
8
8
|
value?: string;
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
* The label value of the component
|
|
12
|
-
*/
|
|
13
|
-
label?: string;
|
|
14
|
-
|
|
15
10
|
/**
|
|
16
11
|
* The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
|
|
17
12
|
*/
|
|
@@ -54,7 +49,7 @@ export interface CheckboxProps {
|
|
|
54
49
|
status?: typeof statusTypes[number];
|
|
55
50
|
}
|
|
56
51
|
|
|
57
|
-
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, '
|
|
52
|
+
export type DefaultProps = ComponentDefaultProps<CheckboxProps, keyof Omit<CheckboxProps, 'name' | 'assistiveText'>>;
|
|
58
53
|
|
|
59
54
|
export const defaultProps: DefaultProps = {
|
|
60
55
|
// a default value for the html <input type="checkbox" /> value attribute.
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
-
LitElement, html, unsafeCSS,
|
|
2
|
+
LitElement, html, unsafeCSS, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property, query, state } from 'lit/decorators.js';
|
|
5
5
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
@@ -25,6 +25,7 @@ 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 {
|
|
@@ -36,9 +37,6 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
36
37
|
@property({ type: String })
|
|
37
38
|
public value = defaultProps.value;
|
|
38
39
|
|
|
39
|
-
@property({ type: String })
|
|
40
|
-
public label?: CheckboxProps['label'];
|
|
41
|
-
|
|
42
40
|
@property({ type: String })
|
|
43
41
|
public name?: CheckboxProps['name'];
|
|
44
42
|
|
|
@@ -149,13 +147,13 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
149
147
|
checked,
|
|
150
148
|
value,
|
|
151
149
|
name,
|
|
152
|
-
label,
|
|
153
150
|
disabled,
|
|
154
151
|
disabledByParent,
|
|
155
152
|
required,
|
|
156
153
|
indeterminate,
|
|
157
154
|
assistiveText,
|
|
158
155
|
status,
|
|
156
|
+
isRTL,
|
|
159
157
|
} = this;
|
|
160
158
|
|
|
161
159
|
const componentDisabled = disabled || disabledByParent;
|
|
@@ -183,11 +181,14 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
183
181
|
<label for="inputId" data-test-id="checkbox-component">
|
|
184
182
|
<span
|
|
185
183
|
class="c-checkbox-tick"
|
|
184
|
+
?data-is-rtl=${isRTL}
|
|
186
185
|
?data-pie-checked=${checked}
|
|
187
186
|
?data-pie-disabled=${componentDisabled}
|
|
188
187
|
data-pie-status=${!componentDisabled && status}
|
|
189
188
|
?data-pie-indeterminate=${indeterminate && !checked}></span>
|
|
190
|
-
<span class="c-checkbox-text"
|
|
189
|
+
<span class="c-checkbox-text">
|
|
190
|
+
<slot></slot>
|
|
191
|
+
</span>
|
|
191
192
|
</label>
|
|
192
193
|
${assistiveText ? html`
|
|
193
194
|
<pie-assistive-text
|