@justeattakeaway/pie-checkbox 0.12.2 → 0.13.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/dist/index.js +80 -75
- package/dist/react.js +6 -5
- package/package.json +2 -2
- package/src/checkbox.scss +83 -51
- package/src/index.ts +20 -11
package/dist/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
1
|
+
import { LitElement as f, html as p, nothing as P, unsafeCSS as B } from "lit";
|
|
2
|
+
import { classMap as v } from "lit/directives/class-map.js";
|
|
3
|
+
import { state as g, property as r, query as F } from "lit/decorators.js";
|
|
4
|
+
import { ifDefined as u } from "lit/directives/if-defined.js";
|
|
5
|
+
import { live as q } from "lit/directives/live.js";
|
|
6
|
+
import { FormControlMixin as D, RtlMixin as S, wrapNativeEvent as _, validPropertyValues as z, defineCustomElement as A } from "@justeattakeaway/pie-webc-core";
|
|
6
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const
|
|
8
|
-
`,
|
|
8
|
+
const H = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.c-checkbox-tick--checked:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.c-checkbox-tick--checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.c-checkbox-tick--checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.c-checkbox-tick--checked.c-checkbox-tick--rtl:before{left:unset;right:50%}.c-checkbox-tick.c-checkbox-tick--indeterminate:not(.c-checkbox-tick--disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick.c-checkbox-tick--indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--dt-color-support-error)}.c-checkbox-tick.c-checkbox-tick--indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.c-checkbox-tick--indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick.c-checkbox-tick--rtl:after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: p.font-size(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-interactive-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox.c-checkbox--disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.c-checkbox--disabled:hover .c-checkbox-tick,.c-checkbox.c-checkbox--disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) )}.c-checkbox.c-checkbox--checked:not(.c-checkbox--disabled):active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate:not(.c-checkbox--disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) )}.c-checkbox.c-checkbox--checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.c-checkbox--indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) )}
|
|
9
|
+
`, L = ["default", "success", "error"], a = {
|
|
9
10
|
// a default value for the html <input type="checkbox" /> value attribute.
|
|
10
11
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
|
|
11
12
|
value: "on",
|
|
@@ -16,15 +17,15 @@ const _ = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
16
17
|
required: !1,
|
|
17
18
|
status: "default"
|
|
18
19
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var
|
|
21
|
-
(s = b[n]) && (
|
|
22
|
-
return
|
|
20
|
+
var O = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (b, e, d, i) => {
|
|
21
|
+
for (var t = i > 1 ? void 0 : i ? T(e, d) : e, n = b.length - 1, s; n >= 0; n--)
|
|
22
|
+
(s = b[n]) && (t = (i ? s(e, d, t) : s(t)) || t);
|
|
23
|
+
return i && t && O(e, d, t), t;
|
|
23
24
|
};
|
|
24
|
-
const
|
|
25
|
-
class
|
|
25
|
+
const y = "pie-checkbox", m = "assistive-text";
|
|
26
|
+
class c extends D(S(f)) {
|
|
26
27
|
constructor() {
|
|
27
|
-
super(...arguments), this.disabledByParent = !1, this.visuallyHiddenError = !1, this.value =
|
|
28
|
+
super(...arguments), this.disabledByParent = !1, this.visuallyHiddenError = !1, this.value = a.value, this.checked = a.checked, this.defaultChecked = a.defaultChecked, this.disabled = a.disabled, this.required = a.required, this.indeterminate = a.indeterminate, this.status = a.status;
|
|
28
29
|
}
|
|
29
30
|
connectedCallback() {
|
|
30
31
|
super.connectedCallback(), this.addEventListener("pie-checkbox-group-disabled", (e) => {
|
|
@@ -72,8 +73,8 @@ class t extends B(F(m)) {
|
|
|
72
73
|
handleChange(e) {
|
|
73
74
|
const { checked: d } = e == null ? void 0 : e.currentTarget;
|
|
74
75
|
this.checked = d;
|
|
75
|
-
const
|
|
76
|
-
this.dispatchEvent(
|
|
76
|
+
const i = _(e);
|
|
77
|
+
this.dispatchEvent(i), this.handleFormAssociation();
|
|
77
78
|
}
|
|
78
79
|
/**
|
|
79
80
|
* Called when the form that contains this component is reset.
|
|
@@ -91,102 +92,106 @@ class t extends B(F(m)) {
|
|
|
91
92
|
const {
|
|
92
93
|
checked: e,
|
|
93
94
|
value: d,
|
|
94
|
-
name:
|
|
95
|
-
disabled:
|
|
95
|
+
name: i,
|
|
96
|
+
disabled: t,
|
|
96
97
|
disabledByParent: n,
|
|
97
98
|
visuallyHiddenError: s,
|
|
98
|
-
required:
|
|
99
|
-
indeterminate:
|
|
100
|
-
assistiveText:
|
|
99
|
+
required: w,
|
|
100
|
+
indeterminate: k,
|
|
101
|
+
assistiveText: x,
|
|
101
102
|
status: h,
|
|
102
|
-
isRTL:
|
|
103
|
-
} = this, l =
|
|
104
|
-
|
|
103
|
+
isRTL: C
|
|
104
|
+
} = this, l = t || n, $ = {
|
|
105
|
+
"c-checkbox": !0,
|
|
106
|
+
[`c-checkbox--status-${h}`]: !l,
|
|
107
|
+
"c-checkbox--disabled": l,
|
|
108
|
+
"c-checkbox--checked": e,
|
|
109
|
+
"c-checkbox--indeterminate": k && !e
|
|
110
|
+
}, E = {
|
|
111
|
+
"c-checkbox-tick": !0,
|
|
112
|
+
[`c-checkbox-tick--status-${h}`]: !l,
|
|
113
|
+
"c-checkbox-tick--disabled": l,
|
|
114
|
+
"c-checkbox-tick--checked": e,
|
|
115
|
+
"c-checkbox-tick--indeterminate": k && !e,
|
|
116
|
+
"c-checkbox-tick--rtl": C
|
|
117
|
+
};
|
|
118
|
+
return p`
|
|
105
119
|
<div
|
|
106
|
-
class="
|
|
107
|
-
data-pie-status=${!l && h}
|
|
108
|
-
?data-pie-disabled=${l}
|
|
109
|
-
?data-pie-checked=${e}
|
|
110
|
-
?data-pie-indeterminate=${p && !e}>
|
|
120
|
+
class="${v($)}">
|
|
111
121
|
<input
|
|
112
122
|
type="checkbox"
|
|
113
123
|
id="inputId"
|
|
114
124
|
.value=${d}
|
|
115
|
-
.checked=${
|
|
116
|
-
name=${
|
|
125
|
+
.checked=${q(e)}
|
|
126
|
+
name=${u(i)}
|
|
117
127
|
?disabled=${l}
|
|
118
|
-
?required=${
|
|
119
|
-
.indeterminate=${
|
|
128
|
+
?required=${w}
|
|
129
|
+
.indeterminate=${k}
|
|
120
130
|
aria-invalid=${h === "error" ? "true" : "false"}
|
|
121
|
-
aria-describedby=${x
|
|
131
|
+
aria-describedby=${u(x ? m : void 0)}
|
|
122
132
|
@change=${this.handleChange}
|
|
123
133
|
data-test-id="checkbox-input"
|
|
124
134
|
/>
|
|
125
135
|
<label for="inputId" data-test-id="checkbox-component">
|
|
126
136
|
<span
|
|
127
|
-
class="
|
|
128
|
-
?data-is-rtl=${w}
|
|
129
|
-
?data-pie-checked=${e}
|
|
130
|
-
?data-pie-disabled=${l}
|
|
131
|
-
data-pie-status=${!l && h}
|
|
132
|
-
?data-pie-indeterminate=${p && !e}></span>
|
|
137
|
+
class="${v(E)}"></span>
|
|
133
138
|
<span class="c-checkbox-text">
|
|
134
139
|
<slot></slot>
|
|
135
140
|
</span>
|
|
136
141
|
</label>
|
|
137
|
-
${
|
|
142
|
+
${x ? p`
|
|
138
143
|
<pie-assistive-text
|
|
139
|
-
id="${
|
|
144
|
+
id="${m}"
|
|
140
145
|
variant=${h}
|
|
141
146
|
?isVisuallyHidden=${s}
|
|
142
147
|
data-test-id="pie-checkbox-assistive-text">
|
|
143
|
-
${
|
|
144
|
-
</pie-assistive-text>` :
|
|
148
|
+
${x}
|
|
149
|
+
</pie-assistive-text>` : P}
|
|
145
150
|
</div>`;
|
|
146
151
|
}
|
|
147
152
|
}
|
|
148
|
-
|
|
149
|
-
|
|
153
|
+
c.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
|
|
154
|
+
c.styles = B(H);
|
|
150
155
|
o([
|
|
151
|
-
|
|
152
|
-
],
|
|
156
|
+
g()
|
|
157
|
+
], c.prototype, "disabledByParent", 2);
|
|
153
158
|
o([
|
|
154
|
-
|
|
155
|
-
],
|
|
159
|
+
g()
|
|
160
|
+
], c.prototype, "visuallyHiddenError", 2);
|
|
156
161
|
o([
|
|
157
|
-
|
|
158
|
-
],
|
|
162
|
+
r({ type: String })
|
|
163
|
+
], c.prototype, "value", 2);
|
|
159
164
|
o([
|
|
160
|
-
|
|
161
|
-
],
|
|
165
|
+
r({ type: String })
|
|
166
|
+
], c.prototype, "name", 2);
|
|
162
167
|
o([
|
|
163
|
-
|
|
164
|
-
],
|
|
168
|
+
r({ type: Boolean, reflect: !0 })
|
|
169
|
+
], c.prototype, "checked", 2);
|
|
165
170
|
o([
|
|
166
|
-
|
|
167
|
-
],
|
|
171
|
+
r({ type: Boolean, reflect: !0 })
|
|
172
|
+
], c.prototype, "defaultChecked", 2);
|
|
168
173
|
o([
|
|
169
|
-
|
|
170
|
-
],
|
|
174
|
+
r({ type: Boolean, reflect: !0 })
|
|
175
|
+
], c.prototype, "disabled", 2);
|
|
171
176
|
o([
|
|
172
|
-
|
|
173
|
-
],
|
|
177
|
+
r({ type: Boolean, reflect: !0 })
|
|
178
|
+
], c.prototype, "required", 2);
|
|
174
179
|
o([
|
|
175
|
-
|
|
176
|
-
],
|
|
180
|
+
r({ type: Boolean, reflect: !0 })
|
|
181
|
+
], c.prototype, "indeterminate", 2);
|
|
177
182
|
o([
|
|
178
|
-
|
|
179
|
-
],
|
|
183
|
+
F('input[type="checkbox"]')
|
|
184
|
+
], c.prototype, "checkbox", 2);
|
|
180
185
|
o([
|
|
181
|
-
|
|
182
|
-
],
|
|
186
|
+
r({ type: String })
|
|
187
|
+
], c.prototype, "assistiveText", 2);
|
|
183
188
|
o([
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
],
|
|
187
|
-
|
|
189
|
+
r({ type: String }),
|
|
190
|
+
z(y, L, a.status)
|
|
191
|
+
], c.prototype, "status", 2);
|
|
192
|
+
A(y, c);
|
|
188
193
|
export {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
194
|
+
c as PieCheckbox,
|
|
195
|
+
a as defaultProps,
|
|
196
|
+
L as statusTypes
|
|
192
197
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as e from "react";
|
|
2
2
|
import { createComponent as o } from "@lit/react";
|
|
3
3
|
import { PieCheckbox as t } from "./index.js";
|
|
4
|
-
import { defaultProps as
|
|
4
|
+
import { defaultProps as P, statusTypes as f } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
|
+
import "lit/directives/class-map.js";
|
|
6
7
|
import "lit/decorators.js";
|
|
7
8
|
import "lit/directives/if-defined.js";
|
|
8
9
|
import "lit/directives/live.js";
|
|
@@ -17,9 +18,9 @@ const r = o({
|
|
|
17
18
|
onChange: "change"
|
|
18
19
|
// when checked state is changed.
|
|
19
20
|
}
|
|
20
|
-
}),
|
|
21
|
+
}), C = r;
|
|
21
22
|
export {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
C as PieCheckbox,
|
|
24
|
+
P as defaultProps,
|
|
25
|
+
f as statusTypes
|
|
25
26
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-checkbox",
|
|
3
3
|
"description": "PIE Design System Checkbox built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.13.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-assistive-text": "0.7.
|
|
44
|
+
"@justeattakeaway/pie-assistive-text": "0.7.1",
|
|
45
45
|
"@justeattakeaway/pie-webc-core": "0.24.0"
|
|
46
46
|
},
|
|
47
47
|
"volta": {
|
package/src/checkbox.scss
CHANGED
|
@@ -5,14 +5,12 @@
|
|
|
5
5
|
width: 0;
|
|
6
6
|
height: 0;
|
|
7
7
|
border-color: #fff;
|
|
8
|
-
|
|
9
8
|
transform: translate3d(0, 0, 0) rotate(45deg);
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
33% {
|
|
13
12
|
width: 8px;
|
|
14
13
|
height: 0;
|
|
15
|
-
|
|
16
14
|
transform: translate3d(0, 0, 0) rotate(45deg);
|
|
17
15
|
}
|
|
18
16
|
|
|
@@ -55,14 +53,10 @@
|
|
|
55
53
|
.c-checkbox-tick {
|
|
56
54
|
content: "";
|
|
57
55
|
display: flex;
|
|
58
|
-
|
|
59
56
|
flex: 0 0 auto;
|
|
60
|
-
|
|
61
57
|
width: var(--checkbox-width);
|
|
62
58
|
height: var(--checkbox-height);
|
|
63
|
-
|
|
64
59
|
margin: var(--checkbox-margin);
|
|
65
|
-
|
|
66
60
|
border: 1px solid var(--checkbox-border-color);
|
|
67
61
|
border-radius: var(--checkbox-radius);
|
|
68
62
|
background-color: var(--checkbox-bg-color);
|
|
@@ -71,48 +65,43 @@
|
|
|
71
65
|
transition:
|
|
72
66
|
background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
|
|
73
67
|
border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
74
|
-
|
|
75
68
|
animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
76
69
|
}
|
|
77
70
|
|
|
78
|
-
|
|
71
|
+
&.c-checkbox-tick--disabled {
|
|
79
72
|
--checkbox-bg-color: var(--dt-color-container-strong);
|
|
80
73
|
--checkbox-border-color: var(--dt-color-disabled-01);
|
|
81
74
|
}
|
|
82
75
|
|
|
83
|
-
|
|
76
|
+
&.c-checkbox-tick--status-error {
|
|
84
77
|
--checkbox-border-color: var(--dt-color-support-error);
|
|
85
78
|
}
|
|
86
79
|
|
|
87
|
-
|
|
80
|
+
&.c-checkbox-tick--checked {
|
|
88
81
|
@media (prefers-reduced-motion: no-preference) {
|
|
89
82
|
animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
90
83
|
}
|
|
91
84
|
|
|
92
|
-
&:not(
|
|
85
|
+
&:not(.c-checkbox-tick--disabled) {
|
|
93
86
|
--checkbox-bg-color: var(--dt-color-interactive-brand);
|
|
94
87
|
--checkbox-border-color: var(--dt-color-interactive-brand);
|
|
95
88
|
}
|
|
96
89
|
|
|
97
|
-
|
|
90
|
+
&.c-checkbox-tick--status-error {
|
|
98
91
|
--checkbox-bg-color: var(--dt-color-support-error);
|
|
99
92
|
--checkbox-border-color: var(--dt-color-support-error);
|
|
100
93
|
}
|
|
101
94
|
}
|
|
102
95
|
|
|
103
|
-
|
|
96
|
+
&.c-checkbox-tick--checked:before {
|
|
104
97
|
content: "";
|
|
105
|
-
|
|
106
98
|
position: relative;
|
|
107
99
|
top: 55%;
|
|
108
100
|
left: 14%;
|
|
109
|
-
|
|
110
101
|
border-right: 2px solid transparent;
|
|
111
102
|
border-bottom: 2px solid transparent;
|
|
112
|
-
|
|
113
103
|
transform: rotate(45deg);
|
|
114
104
|
transform-origin: 0% 100%;
|
|
115
|
-
|
|
116
105
|
animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
|
|
117
106
|
|
|
118
107
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -123,40 +112,37 @@
|
|
|
123
112
|
height: 16px;
|
|
124
113
|
border-color: #fff;
|
|
125
114
|
border-bottom-right-radius: 2px;
|
|
126
|
-
|
|
127
115
|
transform: translate3d(0, -16px, 0) rotate(45deg);
|
|
128
116
|
}
|
|
129
117
|
|
|
130
118
|
@media only percy {
|
|
131
119
|
animation: none;
|
|
132
|
-
|
|
133
120
|
width: 8px;
|
|
134
121
|
height: 16px;
|
|
135
122
|
border-color: #fff;
|
|
136
123
|
border-bottom-right-radius: 2px;
|
|
137
|
-
|
|
138
124
|
transform: translate3d(0, -16px, 0) rotate(45deg);
|
|
139
125
|
}
|
|
140
126
|
}
|
|
141
127
|
|
|
142
|
-
|
|
128
|
+
&.c-checkbox-tick--checked.c-checkbox-tick--rtl:before {
|
|
143
129
|
left: unset;
|
|
144
130
|
right: 50%;
|
|
145
131
|
}
|
|
146
132
|
|
|
147
|
-
|
|
148
|
-
&:not(
|
|
133
|
+
&.c-checkbox-tick--indeterminate {
|
|
134
|
+
&:not(.c-checkbox-tick--disabled) {
|
|
149
135
|
--checkbox-bg-color: var(--dt-color-interactive-brand);
|
|
150
136
|
--checkbox-border-color: var(--dt-color-interactive-brand);
|
|
151
137
|
}
|
|
152
138
|
|
|
153
|
-
|
|
154
|
-
--checkbox-border-color: var(--dt-color-support-error);
|
|
139
|
+
&.c-checkbox-tick--status-error {
|
|
155
140
|
--checkbox-bg-color: var(--dt-color-support-error);
|
|
141
|
+
--checkbox-border-color: var(--dt-color-support-error);
|
|
156
142
|
}
|
|
157
143
|
}
|
|
158
144
|
|
|
159
|
-
|
|
145
|
+
&.c-checkbox-tick--indeterminate:after {
|
|
160
146
|
width: 16px;
|
|
161
147
|
|
|
162
148
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -177,10 +163,9 @@
|
|
|
177
163
|
font-weight: var(--checkbox-font-weight);
|
|
178
164
|
}
|
|
179
165
|
|
|
180
|
-
//
|
|
166
|
+
// Initial styles for indeterminate state
|
|
181
167
|
.c-checkbox-tick:after {
|
|
182
168
|
content: "";
|
|
183
|
-
|
|
184
169
|
position: relative;
|
|
185
170
|
top: 47%;
|
|
186
171
|
left: 14%;
|
|
@@ -189,7 +174,7 @@
|
|
|
189
174
|
background-color: white;
|
|
190
175
|
}
|
|
191
176
|
|
|
192
|
-
.c-checkbox-tick
|
|
177
|
+
.c-checkbox-tick.c-checkbox-tick--rtl:after {
|
|
193
178
|
left: unset;
|
|
194
179
|
right: 14%;
|
|
195
180
|
}
|
|
@@ -230,7 +215,11 @@
|
|
|
230
215
|
|
|
231
216
|
&:hover {
|
|
232
217
|
.c-checkbox-tick {
|
|
233
|
-
--checkbox-bg-color: hsl(
|
|
218
|
+
--checkbox-bg-color: hsl(
|
|
219
|
+
var(--dt-color-container-default-h),
|
|
220
|
+
var(--dt-color-container-default-s),
|
|
221
|
+
calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
|
|
222
|
+
);
|
|
234
223
|
transition:
|
|
235
224
|
background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),
|
|
236
225
|
border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
|
|
@@ -239,15 +228,18 @@
|
|
|
239
228
|
|
|
240
229
|
&:active {
|
|
241
230
|
.c-checkbox-tick {
|
|
242
|
-
--checkbox-bg-color: hsl(
|
|
243
|
-
|
|
231
|
+
--checkbox-bg-color: hsl(
|
|
232
|
+
var(--dt-color-container-default-h),
|
|
233
|
+
var(--dt-color-container-default-s),
|
|
234
|
+
calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
|
|
235
|
+
);
|
|
244
236
|
transition:
|
|
245
237
|
background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
|
|
246
238
|
border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
247
239
|
}
|
|
248
240
|
}
|
|
249
241
|
|
|
250
|
-
|
|
242
|
+
&.c-checkbox--disabled {
|
|
251
243
|
label {
|
|
252
244
|
cursor: not-allowed;
|
|
253
245
|
}
|
|
@@ -259,7 +251,7 @@
|
|
|
259
251
|
}
|
|
260
252
|
}
|
|
261
253
|
|
|
262
|
-
|
|
254
|
+
&.c-checkbox--disabled {
|
|
263
255
|
&:hover,
|
|
264
256
|
&:active {
|
|
265
257
|
.c-checkbox-tick {
|
|
@@ -269,47 +261,87 @@
|
|
|
269
261
|
}
|
|
270
262
|
}
|
|
271
263
|
|
|
272
|
-
|
|
264
|
+
&.c-checkbox--status-error {
|
|
273
265
|
&:hover {
|
|
274
266
|
.c-checkbox-tick {
|
|
275
|
-
--checkbox-bg-color: hsl(
|
|
267
|
+
--checkbox-bg-color: hsl(
|
|
268
|
+
var(--dt-color-container-default-h),
|
|
269
|
+
var(--dt-color-container-default-s),
|
|
270
|
+
calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01))
|
|
271
|
+
);
|
|
276
272
|
}
|
|
277
273
|
}
|
|
278
274
|
|
|
279
275
|
&:active {
|
|
280
276
|
.c-checkbox-tick {
|
|
281
|
-
--checkbox-bg-color: hsl(
|
|
277
|
+
--checkbox-bg-color: hsl(
|
|
278
|
+
var(--dt-color-container-default-h),
|
|
279
|
+
var(--dt-color-container-default-s),
|
|
280
|
+
calc(var(--dt-color-container-default-l) - var(--dt-color-active-01))
|
|
281
|
+
);
|
|
282
282
|
}
|
|
283
283
|
}
|
|
284
284
|
}
|
|
285
285
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
&:not(
|
|
286
|
+
&.c-checkbox--checked,
|
|
287
|
+
&.c-checkbox--indeterminate {
|
|
288
|
+
&:not(.c-checkbox--disabled):hover {
|
|
289
289
|
.c-checkbox-tick {
|
|
290
|
-
--checkbox-bg-color: hsl(
|
|
291
|
-
|
|
290
|
+
--checkbox-bg-color: hsl(
|
|
291
|
+
var(--dt-color-interactive-brand-h),
|
|
292
|
+
var(--dt-color-interactive-brand-s),
|
|
293
|
+
calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
|
|
294
|
+
);
|
|
295
|
+
--checkbox-border-color: hsl(
|
|
296
|
+
var(--dt-color-interactive-brand-h),
|
|
297
|
+
var(--dt-color-interactive-brand-s),
|
|
298
|
+
calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01))
|
|
299
|
+
);
|
|
292
300
|
}
|
|
293
301
|
}
|
|
294
302
|
|
|
295
|
-
|
|
303
|
+
&.c-checkbox--status-error:hover {
|
|
296
304
|
.c-checkbox-tick {
|
|
297
|
-
--checkbox-bg-color: hsl(
|
|
298
|
-
|
|
305
|
+
--checkbox-bg-color: hsl(
|
|
306
|
+
var(--dt-color-support-error-h),
|
|
307
|
+
var(--dt-color-support-error-s),
|
|
308
|
+
calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
|
|
309
|
+
);
|
|
310
|
+
--checkbox-border-color: hsl(
|
|
311
|
+
var(--dt-color-support-error-h),
|
|
312
|
+
var(--dt-color-support-error-s),
|
|
313
|
+
calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01))
|
|
314
|
+
);
|
|
299
315
|
}
|
|
300
316
|
}
|
|
301
317
|
|
|
302
|
-
&:not(
|
|
318
|
+
&:not(.c-checkbox--disabled):active {
|
|
303
319
|
.c-checkbox-tick {
|
|
304
|
-
--checkbox-bg-color: hsl(
|
|
305
|
-
|
|
320
|
+
--checkbox-bg-color: hsl(
|
|
321
|
+
var(--dt-color-interactive-brand-h),
|
|
322
|
+
var(--dt-color-interactive-brand-s),
|
|
323
|
+
calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
|
|
324
|
+
);
|
|
325
|
+
--checkbox-border-color: hsl(
|
|
326
|
+
var(--dt-color-interactive-brand-h),
|
|
327
|
+
var(--dt-color-interactive-brand-s),
|
|
328
|
+
calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01))
|
|
329
|
+
);
|
|
306
330
|
}
|
|
307
331
|
}
|
|
308
332
|
|
|
309
|
-
|
|
333
|
+
&.c-checkbox--status-error:active {
|
|
310
334
|
.c-checkbox-tick {
|
|
311
|
-
--checkbox-bg-color: hsl(
|
|
312
|
-
|
|
335
|
+
--checkbox-bg-color: hsl(
|
|
336
|
+
var(--dt-color-support-error-h),
|
|
337
|
+
var(--dt-color-support-error-s),
|
|
338
|
+
calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
|
|
339
|
+
);
|
|
340
|
+
--checkbox-border-color: hsl(
|
|
341
|
+
var(--dt-color-support-error-h),
|
|
342
|
+
var(--dt-color-support-error-s),
|
|
343
|
+
calc(var(--dt-color-support-error-l) - var(--dt-color-active-01))
|
|
344
|
+
);
|
|
313
345
|
}
|
|
314
346
|
}
|
|
315
347
|
}
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
LitElement, html, unsafeCSS, nothing,
|
|
3
3
|
} from 'lit';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
5
|
import { property, query, state } from 'lit/decorators.js';
|
|
5
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
6
7
|
import { live } from 'lit/directives/live.js';
|
|
@@ -164,13 +165,26 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
164
165
|
|
|
165
166
|
const componentDisabled = disabled || disabledByParent;
|
|
166
167
|
|
|
168
|
+
const checkboxClasses = {
|
|
169
|
+
'c-checkbox': true,
|
|
170
|
+
[`c-checkbox--status-${status}`]: !componentDisabled,
|
|
171
|
+
'c-checkbox--disabled': componentDisabled,
|
|
172
|
+
'c-checkbox--checked': checked,
|
|
173
|
+
'c-checkbox--indeterminate': indeterminate && !checked,
|
|
174
|
+
};
|
|
175
|
+
|
|
176
|
+
const labelClasses = {
|
|
177
|
+
'c-checkbox-tick': true,
|
|
178
|
+
[`c-checkbox-tick--status-${status}`]: !componentDisabled,
|
|
179
|
+
'c-checkbox-tick--disabled': componentDisabled,
|
|
180
|
+
'c-checkbox-tick--checked': checked,
|
|
181
|
+
'c-checkbox-tick--indeterminate': indeterminate && !checked,
|
|
182
|
+
'c-checkbox-tick--rtl': isRTL,
|
|
183
|
+
};
|
|
184
|
+
|
|
167
185
|
return html`
|
|
168
186
|
<div
|
|
169
|
-
class="
|
|
170
|
-
data-pie-status=${!componentDisabled && status}
|
|
171
|
-
?data-pie-disabled=${componentDisabled}
|
|
172
|
-
?data-pie-checked=${checked}
|
|
173
|
-
?data-pie-indeterminate=${indeterminate && !checked}>
|
|
187
|
+
class="${classMap(checkboxClasses)}">
|
|
174
188
|
<input
|
|
175
189
|
type="checkbox"
|
|
176
190
|
id="inputId"
|
|
@@ -187,12 +201,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
187
201
|
/>
|
|
188
202
|
<label for="inputId" data-test-id="checkbox-component">
|
|
189
203
|
<span
|
|
190
|
-
class="
|
|
191
|
-
?data-is-rtl=${isRTL}
|
|
192
|
-
?data-pie-checked=${checked}
|
|
193
|
-
?data-pie-disabled=${componentDisabled}
|
|
194
|
-
data-pie-status=${!componentDisabled && status}
|
|
195
|
-
?data-pie-indeterminate=${indeterminate && !checked}></span>
|
|
204
|
+
class="${classMap(labelClasses)}"></span>
|
|
196
205
|
<span class="c-checkbox-text">
|
|
197
206
|
<slot></slot>
|
|
198
207
|
</span>
|