@justeattakeaway/pie-checkbox 0.10.0 → 0.11.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 +7 -7
- package/package.json +1 -1
- package/src/checkbox.scss +17 -10
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { state as
|
|
1
|
+
import { LitElement as m, html as v, nothing as $, unsafeCSS as C } from "lit";
|
|
2
|
+
import { state as f, property as c, query as E } 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
5
|
import { FormControlMixin as B, RtlMixin as F, wrapNativeEvent as q, validPropertyValues as D, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-assistive-text";
|
|
7
|
-
const _ = `*,*: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,
|
|
7
|
+
const _ = `*,*: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(.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),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[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-bg-color: var(--dt-color-support-error);--checkbox-border-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-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[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),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) + calc(-1 * 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[data-pie-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[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
|
`, z = ["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
|
|
@@ -22,7 +22,7 @@ var A = Object.defineProperty, H = Object.getOwnPropertyDescriptor, o = (b, e, d
|
|
|
22
22
|
return a && r && A(e, d, r), r;
|
|
23
23
|
};
|
|
24
24
|
const g = "pie-checkbox", u = "assistive-text";
|
|
25
|
-
class t extends B(F(
|
|
25
|
+
class t extends B(F(m)) {
|
|
26
26
|
constructor() {
|
|
27
27
|
super(...arguments), this.disabledByParent = !1, this.visuallyHiddenError = !1, this.value = i.value, this.checked = i.checked, this.defaultChecked = i.defaultChecked, this.disabled = i.disabled, this.required = i.required, this.indeterminate = i.indeterminate, this.status = i.status;
|
|
28
28
|
}
|
|
@@ -145,13 +145,13 @@ class t extends B(F(f)) {
|
|
|
145
145
|
</div>`;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
-
t.shadowRootOptions = { ...
|
|
148
|
+
t.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
|
|
149
149
|
t.styles = C(_);
|
|
150
150
|
o([
|
|
151
|
-
|
|
151
|
+
f()
|
|
152
152
|
], t.prototype, "disabledByParent", 2);
|
|
153
153
|
o([
|
|
154
|
-
|
|
154
|
+
f()
|
|
155
155
|
], t.prototype, "visuallyHiddenError", 2);
|
|
156
156
|
o([
|
|
157
157
|
c({ type: String })
|
package/package.json
CHANGED
package/src/checkbox.scss
CHANGED
|
@@ -22,8 +22,9 @@
|
|
|
22
22
|
border-color: #fff;
|
|
23
23
|
border-bottom-right-radius: 2px;
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
// had to add 1px to z-axis to fix a bug in Safari
|
|
26
|
+
// that adds a tiny line between check borders
|
|
27
|
+
transform: translate3d(0, -16px, 1px) rotate(45deg);
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
|
|
@@ -67,7 +68,9 @@
|
|
|
67
68
|
background-color: var(--checkbox-bg-color);
|
|
68
69
|
|
|
69
70
|
@media (prefers-reduced-motion: no-preference) {
|
|
70
|
-
transition:
|
|
71
|
+
transition:
|
|
72
|
+
background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
|
|
73
|
+
border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
71
74
|
|
|
72
75
|
animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
73
76
|
}
|
|
@@ -92,8 +95,8 @@
|
|
|
92
95
|
}
|
|
93
96
|
|
|
94
97
|
&[data-pie-status="error"] {
|
|
95
|
-
--checkbox-border-color: var(--dt-color-support-error);
|
|
96
98
|
--checkbox-bg-color: var(--dt-color-support-error);
|
|
99
|
+
--checkbox-border-color: var(--dt-color-support-error);
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
102
|
|
|
@@ -113,7 +116,9 @@
|
|
|
113
116
|
animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
|
|
114
117
|
|
|
115
118
|
@media (prefers-reduced-motion: reduce) {
|
|
116
|
-
animation:
|
|
119
|
+
animation-duration: 1ms !important;
|
|
120
|
+
animation-delay: 0 !important;
|
|
121
|
+
animation-iteration-count: 1 !important;
|
|
117
122
|
width: 8px;
|
|
118
123
|
height: 16px;
|
|
119
124
|
border-color: #fff;
|
|
@@ -226,8 +231,9 @@
|
|
|
226
231
|
&:hover {
|
|
227
232
|
.c-checkbox-tick {
|
|
228
233
|
--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))));
|
|
229
|
-
|
|
230
|
-
|
|
234
|
+
transition:
|
|
235
|
+
background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),
|
|
236
|
+
border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
|
|
231
237
|
}
|
|
232
238
|
}
|
|
233
239
|
|
|
@@ -235,14 +241,15 @@
|
|
|
235
241
|
.c-checkbox-tick {
|
|
236
242
|
--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))));
|
|
237
243
|
|
|
238
|
-
transition:
|
|
244
|
+
transition:
|
|
245
|
+
background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),
|
|
246
|
+
border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
|
|
239
247
|
}
|
|
240
248
|
}
|
|
241
249
|
|
|
242
250
|
&[data-pie-disabled] {
|
|
243
251
|
label {
|
|
244
|
-
cursor:
|
|
245
|
-
pointer-events: none;
|
|
252
|
+
cursor: not-allowed;
|
|
246
253
|
}
|
|
247
254
|
}
|
|
248
255
|
|