@justeattakeaway/pie-checkbox 0.13.0 → 0.13.2
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 +75 -77
- package/dist/react.js +6 -13
- package/package.json +4 -4
- package/src/defs-react.ts +1 -1
- package/src/index.ts +1 -1
- package/src/react.ts +2 -2
package/dist/index.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { classMap as
|
|
3
|
-
import { state as
|
|
4
|
-
import { ifDefined as
|
|
5
|
-
import { live as
|
|
6
|
-
import { FormControlMixin as
|
|
1
|
+
import { LitElement as v, html as u, nothing as F, unsafeCSS as q } from "lit";
|
|
2
|
+
import { classMap as m } from "lit/directives/class-map.js";
|
|
3
|
+
import { state as y, property as t, query as S } from "lit/decorators.js";
|
|
4
|
+
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
5
|
+
import { live as z } from "lit/directives/live.js";
|
|
6
|
+
import { FormControlMixin as A, RtlMixin as H, wrapNativeEvent as L, validPropertyValues as P, defineCustomElement as T } from "@justeattakeaway/pie-webc-core";
|
|
7
7
|
import "@justeattakeaway/pie-assistive-text";
|
|
8
|
-
const
|
|
9
|
-
`, L = ["default", "success", "error"], a = {
|
|
8
|
+
const D = '*,*: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)) )}', R = ["default", "success", "error"], i = {
|
|
10
9
|
// a default value for the html <input type="checkbox" /> value attribute.
|
|
11
10
|
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
|
|
12
11
|
value: "on",
|
|
@@ -17,15 +16,14 @@ const H = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{wid
|
|
|
17
16
|
required: !1,
|
|
18
17
|
status: "default"
|
|
19
18
|
};
|
|
20
|
-
var
|
|
21
|
-
for (var
|
|
22
|
-
(
|
|
23
|
-
return
|
|
19
|
+
var I = Object.defineProperty, o = (p, e, a, s) => {
|
|
20
|
+
for (var r = void 0, d = p.length - 1, l; d >= 0; d--)
|
|
21
|
+
(l = p[d]) && (r = l(e, a, r) || r);
|
|
22
|
+
return r && I(e, a, r), r;
|
|
24
23
|
};
|
|
25
|
-
const
|
|
26
|
-
class c extends D(S(f)) {
|
|
24
|
+
const w = "pie-checkbox", g = "assistive-text", b = class b extends A(H(v)) {
|
|
27
25
|
constructor() {
|
|
28
|
-
super(...arguments), this.disabledByParent = !1, this.visuallyHiddenError = !1, this.value =
|
|
26
|
+
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;
|
|
29
27
|
}
|
|
30
28
|
connectedCallback() {
|
|
31
29
|
super.connectedCallback(), this.addEventListener("pie-checkbox-group-disabled", (e) => {
|
|
@@ -71,10 +69,10 @@ class c extends D(S(f)) {
|
|
|
71
69
|
* @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
|
|
72
70
|
*/
|
|
73
71
|
handleChange(e) {
|
|
74
|
-
const { checked:
|
|
75
|
-
this.checked =
|
|
76
|
-
const
|
|
77
|
-
this.dispatchEvent(
|
|
72
|
+
const { checked: a } = e == null ? void 0 : e.currentTarget;
|
|
73
|
+
this.checked = a;
|
|
74
|
+
const s = L(e);
|
|
75
|
+
this.dispatchEvent(s), this.handleFormAssociation();
|
|
78
76
|
}
|
|
79
77
|
/**
|
|
80
78
|
* Called when the form that contains this component is reset.
|
|
@@ -91,107 +89,107 @@ class c extends D(S(f)) {
|
|
|
91
89
|
render() {
|
|
92
90
|
const {
|
|
93
91
|
checked: e,
|
|
94
|
-
value:
|
|
95
|
-
name:
|
|
96
|
-
disabled:
|
|
97
|
-
disabledByParent:
|
|
98
|
-
visuallyHiddenError:
|
|
99
|
-
required:
|
|
92
|
+
value: a,
|
|
93
|
+
name: s,
|
|
94
|
+
disabled: r,
|
|
95
|
+
disabledByParent: d,
|
|
96
|
+
visuallyHiddenError: l,
|
|
97
|
+
required: C,
|
|
100
98
|
indeterminate: k,
|
|
101
99
|
assistiveText: x,
|
|
102
100
|
status: h,
|
|
103
|
-
isRTL:
|
|
104
|
-
} = this,
|
|
101
|
+
isRTL: $
|
|
102
|
+
} = this, n = r || d, E = {
|
|
105
103
|
"c-checkbox": !0,
|
|
106
|
-
[`c-checkbox--status-${h}`]: !
|
|
107
|
-
"c-checkbox--disabled":
|
|
104
|
+
[`c-checkbox--status-${h}`]: !n,
|
|
105
|
+
"c-checkbox--disabled": n,
|
|
108
106
|
"c-checkbox--checked": e,
|
|
109
107
|
"c-checkbox--indeterminate": k && !e
|
|
110
|
-
},
|
|
108
|
+
}, B = {
|
|
111
109
|
"c-checkbox-tick": !0,
|
|
112
|
-
[`c-checkbox-tick--status-${h}`]: !
|
|
113
|
-
"c-checkbox-tick--disabled":
|
|
110
|
+
[`c-checkbox-tick--status-${h}`]: !n,
|
|
111
|
+
"c-checkbox-tick--disabled": n,
|
|
114
112
|
"c-checkbox-tick--checked": e,
|
|
115
113
|
"c-checkbox-tick--indeterminate": k && !e,
|
|
116
|
-
"c-checkbox-tick--rtl":
|
|
114
|
+
"c-checkbox-tick--rtl": $
|
|
117
115
|
};
|
|
118
|
-
return
|
|
116
|
+
return u`
|
|
119
117
|
<div
|
|
120
|
-
class="${
|
|
118
|
+
class="${m(E)}">
|
|
121
119
|
<input
|
|
122
120
|
type="checkbox"
|
|
123
121
|
id="inputId"
|
|
124
|
-
.value=${
|
|
125
|
-
.checked=${
|
|
126
|
-
name=${
|
|
127
|
-
?disabled=${
|
|
128
|
-
?required=${
|
|
122
|
+
.value=${a}
|
|
123
|
+
.checked=${z(e)}
|
|
124
|
+
name=${f(s)}
|
|
125
|
+
?disabled=${n}
|
|
126
|
+
?required=${C}
|
|
129
127
|
.indeterminate=${k}
|
|
130
128
|
aria-invalid=${h === "error" ? "true" : "false"}
|
|
131
|
-
aria-describedby=${
|
|
129
|
+
aria-describedby=${f(x ? g : void 0)}
|
|
132
130
|
@change=${this.handleChange}
|
|
133
131
|
data-test-id="checkbox-input"
|
|
134
132
|
/>
|
|
135
133
|
<label for="inputId" data-test-id="checkbox-component">
|
|
136
134
|
<span
|
|
137
|
-
class="${
|
|
135
|
+
class="${m(B)}"></span>
|
|
138
136
|
<span class="c-checkbox-text">
|
|
139
137
|
<slot></slot>
|
|
140
138
|
</span>
|
|
141
139
|
</label>
|
|
142
|
-
${x ?
|
|
140
|
+
${x ? u`
|
|
143
141
|
<pie-assistive-text
|
|
144
|
-
id="${
|
|
142
|
+
id="${g}"
|
|
145
143
|
variant=${h}
|
|
146
|
-
?isVisuallyHidden=${
|
|
144
|
+
?isVisuallyHidden=${l}
|
|
147
145
|
data-test-id="pie-checkbox-assistive-text">
|
|
148
146
|
${x}
|
|
149
|
-
</pie-assistive-text>` :
|
|
147
|
+
</pie-assistive-text>` : F}
|
|
150
148
|
</div>`;
|
|
151
149
|
}
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
c
|
|
150
|
+
};
|
|
151
|
+
b.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, b.styles = q(D);
|
|
152
|
+
let c = b;
|
|
155
153
|
o([
|
|
156
|
-
|
|
157
|
-
], c.prototype, "disabledByParent"
|
|
154
|
+
y()
|
|
155
|
+
], c.prototype, "disabledByParent");
|
|
158
156
|
o([
|
|
159
|
-
|
|
160
|
-
], c.prototype, "visuallyHiddenError"
|
|
157
|
+
y()
|
|
158
|
+
], c.prototype, "visuallyHiddenError");
|
|
161
159
|
o([
|
|
162
|
-
|
|
163
|
-
], c.prototype, "value"
|
|
160
|
+
t({ type: String })
|
|
161
|
+
], c.prototype, "value");
|
|
164
162
|
o([
|
|
165
|
-
|
|
166
|
-
], c.prototype, "name"
|
|
163
|
+
t({ type: String })
|
|
164
|
+
], c.prototype, "name");
|
|
167
165
|
o([
|
|
168
|
-
|
|
169
|
-
], c.prototype, "checked"
|
|
166
|
+
t({ type: Boolean, reflect: !0 })
|
|
167
|
+
], c.prototype, "checked");
|
|
170
168
|
o([
|
|
171
|
-
|
|
172
|
-
], c.prototype, "defaultChecked"
|
|
169
|
+
t({ type: Boolean, reflect: !0 })
|
|
170
|
+
], c.prototype, "defaultChecked");
|
|
173
171
|
o([
|
|
174
|
-
|
|
175
|
-
], c.prototype, "disabled"
|
|
172
|
+
t({ type: Boolean, reflect: !0 })
|
|
173
|
+
], c.prototype, "disabled");
|
|
176
174
|
o([
|
|
177
|
-
|
|
178
|
-
], c.prototype, "required"
|
|
175
|
+
t({ type: Boolean, reflect: !0 })
|
|
176
|
+
], c.prototype, "required");
|
|
179
177
|
o([
|
|
180
|
-
|
|
181
|
-
], c.prototype, "indeterminate"
|
|
178
|
+
t({ type: Boolean, reflect: !0 })
|
|
179
|
+
], c.prototype, "indeterminate");
|
|
182
180
|
o([
|
|
183
|
-
|
|
184
|
-
], c.prototype, "checkbox"
|
|
181
|
+
S('input[type="checkbox"]')
|
|
182
|
+
], c.prototype, "checkbox");
|
|
185
183
|
o([
|
|
186
|
-
|
|
187
|
-
], c.prototype, "assistiveText"
|
|
184
|
+
t({ type: String })
|
|
185
|
+
], c.prototype, "assistiveText");
|
|
188
186
|
o([
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
], c.prototype, "status"
|
|
192
|
-
|
|
187
|
+
t({ type: String }),
|
|
188
|
+
P(w, R, i.status)
|
|
189
|
+
], c.prototype, "status");
|
|
190
|
+
T(w, c);
|
|
193
191
|
export {
|
|
194
192
|
c as PieCheckbox,
|
|
195
|
-
|
|
196
|
-
|
|
193
|
+
i as defaultProps,
|
|
194
|
+
R as statusTypes
|
|
197
195
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
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
|
|
5
|
-
|
|
6
|
-
import "lit/directives/class-map.js";
|
|
7
|
-
import "lit/decorators.js";
|
|
8
|
-
import "lit/directives/if-defined.js";
|
|
9
|
-
import "lit/directives/live.js";
|
|
10
|
-
import "@justeattakeaway/pie-webc-core";
|
|
11
|
-
import "@justeattakeaway/pie-assistive-text";
|
|
12
|
-
const r = o({
|
|
4
|
+
import { defaultProps as p, statusTypes as n } from "./index.js";
|
|
5
|
+
const a = o({
|
|
13
6
|
displayName: "PieCheckbox",
|
|
14
7
|
elementClass: t,
|
|
15
8
|
react: e,
|
|
@@ -18,9 +11,9 @@ const r = o({
|
|
|
18
11
|
onChange: "change"
|
|
19
12
|
// when checked state is changed.
|
|
20
13
|
}
|
|
21
|
-
}),
|
|
14
|
+
}), s = a;
|
|
22
15
|
export {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
s as PieCheckbox,
|
|
17
|
+
p as defaultProps,
|
|
18
|
+
n as statusTypes
|
|
26
19
|
};
|
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.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
39
39
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
40
|
-
"@justeattakeaway/pie-css": "0.
|
|
40
|
+
"@justeattakeaway/pie-css": "0.13.1",
|
|
41
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-assistive-text": "0.7.
|
|
45
|
-
"@justeattakeaway/pie-webc-core": "0.24.
|
|
44
|
+
"@justeattakeaway/pie-assistive-text": "0.7.3",
|
|
45
|
+
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
46
46
|
},
|
|
47
47
|
"volta": {
|
|
48
48
|
"extends": "../../../package.json"
|
package/src/defs-react.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
import '@justeattakeaway/pie-assistive-text';
|
|
17
17
|
|
|
18
18
|
import styles from './checkbox.scss?inline';
|
|
19
|
-
import { CheckboxProps, defaultProps, statusTypes } from './defs';
|
|
19
|
+
import { type CheckboxProps, defaultProps, statusTypes } from './defs';
|
|
20
20
|
|
|
21
21
|
// Valid values available to consumers
|
|
22
22
|
export * from './defs';
|
package/src/react.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { createComponent, EventName } from '@lit/react';
|
|
2
|
+
import { createComponent, type EventName } from '@lit/react';
|
|
3
3
|
import { PieCheckbox as PieCheckboxLit } from './index';
|
|
4
|
-
import { CheckboxProps } from './defs';
|
|
4
|
+
import { type CheckboxProps } from './defs';
|
|
5
5
|
|
|
6
6
|
export * from './defs';
|
|
7
7
|
|