@justeattakeaway/pie-checkbox 0.13.7 → 0.13.9
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 +37 -37
- package/package.json +3 -6
- package/src/checkbox.scss +1 -1
- package/src/index.ts +2 -2
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
|
5
5
|
import { live as A } from "lit/directives/live.js";
|
|
6
6
|
import { FormControlMixin as S, RtlMixin as z, wrapNativeEvent as T, validPropertyValues as D, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const P = '*,*: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-
|
|
8
|
+
const P = '*,*: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-border-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)) )}', R = ["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,10 +16,10 @@ const P = '*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
16
16
|
required: !1,
|
|
17
17
|
status: "default"
|
|
18
18
|
};
|
|
19
|
-
var L = Object.defineProperty, o = (p,
|
|
19
|
+
var L = Object.defineProperty, o = (p, e, t, s) => {
|
|
20
20
|
for (var a = void 0, n = p.length - 1, l; n >= 0; n--)
|
|
21
|
-
(l = p[n]) && (a = l(
|
|
22
|
-
return a && L(
|
|
21
|
+
(l = p[n]) && (a = l(e, t, a) || a);
|
|
22
|
+
return a && L(e, t, a), a;
|
|
23
23
|
};
|
|
24
24
|
const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
25
25
|
constructor() {
|
|
@@ -27,12 +27,12 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
27
27
|
}
|
|
28
28
|
connectedCallback() {
|
|
29
29
|
super.connectedCallback(), this._abortController = new AbortController();
|
|
30
|
-
const { signal:
|
|
30
|
+
const { signal: e } = this._abortController;
|
|
31
31
|
this.addEventListener("pie-checkbox-group-disabled", (t) => {
|
|
32
32
|
this._disabledByParent = t.detail.disabled;
|
|
33
|
-
}, { signal:
|
|
33
|
+
}, { signal: e }), this.addEventListener("pie-checkbox-group-error", (t) => {
|
|
34
34
|
this._visuallyHiddenError = t.detail.error;
|
|
35
|
-
}, { signal:
|
|
35
|
+
}, { signal: e });
|
|
36
36
|
}
|
|
37
37
|
disconnectedCallback() {
|
|
38
38
|
super.disconnectedCallback(), this._abortController.abort();
|
|
@@ -56,8 +56,8 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
56
56
|
* or because the disabled state changed on a <fieldset> that's an ancestor of this element.
|
|
57
57
|
* @param disabled - The latest disabled state of the input.
|
|
58
58
|
*/
|
|
59
|
-
formDisabledCallback(
|
|
60
|
-
this.disabled =
|
|
59
|
+
formDisabledCallback(e) {
|
|
60
|
+
this.disabled = e;
|
|
61
61
|
}
|
|
62
62
|
updated() {
|
|
63
63
|
this._handleFormAssociation();
|
|
@@ -66,10 +66,10 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
66
66
|
* Captures the native change event and wraps it in a custom event.
|
|
67
67
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
68
68
|
*/
|
|
69
|
-
_handleChange(
|
|
70
|
-
const { checked: t } =
|
|
69
|
+
_handleChange(e) {
|
|
70
|
+
const { checked: t } = e == null ? void 0 : e.currentTarget;
|
|
71
71
|
this.checked = t;
|
|
72
|
-
const s = T(
|
|
72
|
+
const s = T(e);
|
|
73
73
|
this.dispatchEvent(s), this._handleFormAssociation();
|
|
74
74
|
}
|
|
75
75
|
/**
|
|
@@ -81,12 +81,12 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
81
81
|
if (this.checked === this.defaultChecked)
|
|
82
82
|
return;
|
|
83
83
|
this.checked = this.defaultChecked;
|
|
84
|
-
const
|
|
85
|
-
this.dispatchEvent(
|
|
84
|
+
const e = new Event("change", { bubbles: !0, composed: !0 });
|
|
85
|
+
this.dispatchEvent(e), this._handleFormAssociation();
|
|
86
86
|
}
|
|
87
87
|
render() {
|
|
88
88
|
const {
|
|
89
|
-
checked:
|
|
89
|
+
checked: e,
|
|
90
90
|
value: t,
|
|
91
91
|
name: s,
|
|
92
92
|
disabled: a,
|
|
@@ -101,14 +101,14 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
101
101
|
"c-checkbox": !0,
|
|
102
102
|
[`c-checkbox--status-${h}`]: !d,
|
|
103
103
|
"c-checkbox--disabled": d,
|
|
104
|
-
"c-checkbox--checked":
|
|
105
|
-
"c-checkbox--indeterminate": k && !
|
|
104
|
+
"c-checkbox--checked": e,
|
|
105
|
+
"c-checkbox--indeterminate": k && !e
|
|
106
106
|
}, E = {
|
|
107
107
|
"c-checkbox-tick": !0,
|
|
108
108
|
[`c-checkbox-tick--status-${h}`]: !d,
|
|
109
109
|
"c-checkbox-tick--disabled": d,
|
|
110
|
-
"c-checkbox-tick--checked":
|
|
111
|
-
"c-checkbox-tick--indeterminate": k && !
|
|
110
|
+
"c-checkbox-tick--checked": e,
|
|
111
|
+
"c-checkbox-tick--indeterminate": k && !e,
|
|
112
112
|
"c-checkbox-tick--rtl": _
|
|
113
113
|
};
|
|
114
114
|
return u`
|
|
@@ -118,7 +118,7 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
118
118
|
type="checkbox"
|
|
119
119
|
id="inputId"
|
|
120
120
|
.value=${t}
|
|
121
|
-
.checked=${A(
|
|
121
|
+
.checked=${A(e)}
|
|
122
122
|
name=${f(s)}
|
|
123
123
|
?disabled=${d}
|
|
124
124
|
?required=${C}
|
|
@@ -126,9 +126,9 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
126
126
|
aria-invalid=${h === "error" ? "true" : "false"}
|
|
127
127
|
aria-describedby=${f(x ? g : void 0)}
|
|
128
128
|
@change=${this._handleChange}
|
|
129
|
-
data-test-id="checkbox-input"
|
|
129
|
+
data-test-id="pie-checkbox-input"
|
|
130
130
|
/>
|
|
131
|
-
<label for="inputId" data-test-id="checkbox-
|
|
131
|
+
<label for="inputId" data-test-id="pie-checkbox-label">
|
|
132
132
|
<span
|
|
133
133
|
class="${m(E)}"></span>
|
|
134
134
|
<span class="c-checkbox-text">
|
|
@@ -147,47 +147,47 @@ const w = "pie-checkbox", g = "assistive-text", b = class b extends S(z(v)) {
|
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
149
|
b.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, b.styles = F(P);
|
|
150
|
-
let
|
|
150
|
+
let c = b;
|
|
151
151
|
o([
|
|
152
152
|
y()
|
|
153
|
-
],
|
|
153
|
+
], c.prototype, "_disabledByParent");
|
|
154
154
|
o([
|
|
155
155
|
y()
|
|
156
|
-
],
|
|
156
|
+
], c.prototype, "_visuallyHiddenError");
|
|
157
157
|
o([
|
|
158
158
|
r({ type: String })
|
|
159
|
-
],
|
|
159
|
+
], c.prototype, "value");
|
|
160
160
|
o([
|
|
161
161
|
r({ type: String })
|
|
162
|
-
],
|
|
162
|
+
], c.prototype, "name");
|
|
163
163
|
o([
|
|
164
164
|
r({ type: Boolean, reflect: !0 })
|
|
165
|
-
],
|
|
165
|
+
], c.prototype, "checked");
|
|
166
166
|
o([
|
|
167
167
|
r({ type: Boolean, reflect: !0 })
|
|
168
|
-
],
|
|
168
|
+
], c.prototype, "defaultChecked");
|
|
169
169
|
o([
|
|
170
170
|
r({ type: Boolean, reflect: !0 })
|
|
171
|
-
],
|
|
171
|
+
], c.prototype, "disabled");
|
|
172
172
|
o([
|
|
173
173
|
r({ type: Boolean, reflect: !0 })
|
|
174
|
-
],
|
|
174
|
+
], c.prototype, "required");
|
|
175
175
|
o([
|
|
176
176
|
r({ type: Boolean, reflect: !0 })
|
|
177
|
-
],
|
|
177
|
+
], c.prototype, "indeterminate");
|
|
178
178
|
o([
|
|
179
179
|
q('input[type="checkbox"]')
|
|
180
|
-
],
|
|
180
|
+
], c.prototype, "_checkbox");
|
|
181
181
|
o([
|
|
182
182
|
r({ type: String })
|
|
183
|
-
],
|
|
183
|
+
], c.prototype, "assistiveText");
|
|
184
184
|
o([
|
|
185
185
|
r({ type: String }),
|
|
186
186
|
D(w, R, i.status)
|
|
187
|
-
],
|
|
188
|
-
H(w,
|
|
187
|
+
], c.prototype, "status");
|
|
188
|
+
H(w, c);
|
|
189
189
|
export {
|
|
190
|
-
|
|
190
|
+
c as PieCheckbox,
|
|
191
191
|
i as defaultProps,
|
|
192
192
|
R as statusTypes
|
|
193
193
|
};
|
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.13.
|
|
4
|
+
"version": "0.13.9",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -24,11 +24,8 @@
|
|
|
24
24
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
25
25
|
"lint:style:fix": "yarn lint:style --fix",
|
|
26
26
|
"watch": "run -T vite build --watch",
|
|
27
|
-
"test": "echo \"Error: no test specified\" && exit 0",
|
|
28
|
-
"test:ci": "yarn test",
|
|
29
27
|
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
30
28
|
"test:browsers:ci": "yarn test:browsers",
|
|
31
|
-
"test:browsers-setup": "npx playwright-lit-setup",
|
|
32
29
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_CHECKBOX} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
|
33
30
|
"test:visual:ci": "yarn test:visual"
|
|
34
31
|
},
|
|
@@ -37,11 +34,11 @@
|
|
|
37
34
|
"devDependencies": {
|
|
38
35
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
36
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.
|
|
37
|
+
"@justeattakeaway/pie-css": "0.14.1",
|
|
41
38
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
39
|
},
|
|
43
40
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-assistive-text": "0.8.
|
|
41
|
+
"@justeattakeaway/pie-assistive-text": "0.8.3",
|
|
45
42
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
46
43
|
},
|
|
47
44
|
"volta": {
|
package/src/checkbox.scss
CHANGED
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
--checkbox-font-size: p.font-size(--dt-font-body-l-size);
|
|
189
189
|
--checkbox-font-weight: var(--dt-font-weight-regular);
|
|
190
190
|
--checkbox-bg-color: var(--dt-color-container-default);
|
|
191
|
-
--checkbox-border-color: var(--dt-color-
|
|
191
|
+
--checkbox-border-color: var(--dt-color-border-form);
|
|
192
192
|
--checkbox-content-color: var(--dt-color-content-default);
|
|
193
193
|
--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);
|
|
194
194
|
|
package/src/index.ts
CHANGED
|
@@ -200,9 +200,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
|
|
|
200
200
|
aria-invalid=${status === 'error' ? 'true' : 'false'}
|
|
201
201
|
aria-describedby=${ifDefined(assistiveText ? assistiveTextId : undefined)}
|
|
202
202
|
@change=${this._handleChange}
|
|
203
|
-
data-test-id="checkbox-input"
|
|
203
|
+
data-test-id="pie-checkbox-input"
|
|
204
204
|
/>
|
|
205
|
-
<label for="inputId" data-test-id="checkbox-
|
|
205
|
+
<label for="inputId" data-test-id="pie-checkbox-label">
|
|
206
206
|
<span
|
|
207
207
|
class="${classMap(labelClasses)}"></span>
|
|
208
208
|
<span class="c-checkbox-text">
|