Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@justeattakeaway/pie-checkbox
Advanced tools
@justeattakeaway/pie-checkbox - npm Package Compare versions
Comparing version 0.0.0-snapshot-release-20240522130647 to 0.0.0-snapshot-release-20240522140604
| { | ||
| "schemaVersion": "1.0.0", | ||
| "readme": "", | ||
| "modules": [ | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/defs-react.js", | ||
| "declarations": [], | ||
| "exports": [] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/defs.js", | ||
| "declarations": [ | ||
| "schemaVersion": "1.0.0", | ||
| "readme": "", | ||
| "modules": [ | ||
| { | ||
| "kind": "variable", | ||
| "name": "defaultProps", | ||
| "type": { | ||
| "text": "DefaultProps" | ||
| }, | ||
| "default": "{\n required: false,\n indeterminate: false,\n}" | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "kind": "js", | ||
| "name": "defaultProps", | ||
| "declaration": { | ||
| "name": "defaultProps", | ||
| "module": "src/defs.js" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/index.js", | ||
| "declarations": [ | ||
| { | ||
| "kind": "class", | ||
| "description": "", | ||
| "name": "PieCheckbox", | ||
| "members": [ | ||
| { | ||
| "kind": "field", | ||
| "name": "shadowRootOptions", | ||
| "type": { | ||
| "text": "object" | ||
| }, | ||
| "static": true, | ||
| "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "value", | ||
| "type": { | ||
| "text": "CheckboxProps['value'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'on'", | ||
| "attribute": "value" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "label", | ||
| "type": { | ||
| "text": "CheckboxProps['label'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "label" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "name", | ||
| "type": { | ||
| "text": "CheckboxProps['name'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "name" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "checked", | ||
| "type": { | ||
| "text": "CheckboxProps['checked'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "checked" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "CheckboxProps['disabled'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "disabled", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "required", | ||
| "type": { | ||
| "text": "CheckboxProps['required'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "required", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "indeterminate", | ||
| "type": { | ||
| "text": "CheckboxProps['indeterminate'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "indeterminate" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "aria", | ||
| "type": { | ||
| "text": "CheckboxProps['aria']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "aria" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "checkbox", | ||
| "type": { | ||
| "text": "HTMLInputElement | undefined" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "handleClick", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "validity", | ||
| "type": { | ||
| "text": "ValidityState" | ||
| }, | ||
| "privacy": "public", | ||
| "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity", | ||
| "readonly": true | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "formDisabledCallback", | ||
| "privacy": "public", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| "kind": "javascript-module", | ||
| "path": "src/defs.js", | ||
| "declarations": [ | ||
| { | ||
| "kind": "variable", | ||
| "name": "defaultProps", | ||
| "type": { | ||
| "text": "DefaultProps" | ||
| }, | ||
| "default": "{\n required: false,\n indeterminate: false,\n}" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "description": "The latest disabled state of the input." | ||
| "kind": "js", | ||
| "name": "defaultProps", | ||
| "declaration": { | ||
| "name": "defaultProps", | ||
| "module": "src/defs.js" | ||
| } | ||
| } | ||
| ], | ||
| "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element." | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "formResetCallback", | ||
| "privacy": "public", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/index.js", | ||
| "declarations": [ | ||
| { | ||
| "kind": "class", | ||
| "description": "", | ||
| "name": "PieCheckbox", | ||
| "members": [ | ||
| { | ||
| "kind": "field", | ||
| "name": "shadowRootOptions", | ||
| "type": { | ||
| "text": "object" | ||
| }, | ||
| "static": true, | ||
| "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "value", | ||
| "type": { | ||
| "text": "CheckboxProps['value'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'on'", | ||
| "attribute": "value" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "label", | ||
| "type": { | ||
| "text": "CheckboxProps['label'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "label" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "name", | ||
| "type": { | ||
| "text": "CheckboxProps['name'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "name" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "checked", | ||
| "type": { | ||
| "text": "CheckboxProps['checked'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "checked" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "CheckboxProps['disabled'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "disabled", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "required", | ||
| "type": { | ||
| "text": "CheckboxProps['required'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "required", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "indeterminate", | ||
| "type": { | ||
| "text": "CheckboxProps['indeterminate'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "indeterminate" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "aria", | ||
| "type": { | ||
| "text": "CheckboxProps['aria']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "aria" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "checkbox", | ||
| "type": { | ||
| "text": "HTMLInputElement | undefined" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "onClick", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "validity", | ||
| "type": { | ||
| "text": "ValidityState" | ||
| }, | ||
| "privacy": "public", | ||
| "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity", | ||
| "readonly": true | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "formDisabledCallback", | ||
| "privacy": "public", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "description": "The latest disabled state of the input." | ||
| } | ||
| ], | ||
| "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element." | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "formResetCallback", | ||
| "privacy": "public", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "description": "Called when the form that owns this component is reset.\nResets the value to the default value." | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "onChange", | ||
| "description": "Captures the native change event and wraps it in a custom event.", | ||
| "parameters": [ | ||
| { | ||
| "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`.", | ||
| "name": "event", | ||
| "type": { | ||
| "text": "Event" | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "attributes": [ | ||
| { | ||
| "name": "value", | ||
| "type": { | ||
| "text": "CheckboxProps['value'] | undefined" | ||
| }, | ||
| "default": "'on'", | ||
| "fieldName": "value" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": { | ||
| "text": "CheckboxProps['label'] | undefined" | ||
| }, | ||
| "fieldName": "label" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": { | ||
| "text": "CheckboxProps['name'] | undefined" | ||
| }, | ||
| "fieldName": "name" | ||
| }, | ||
| { | ||
| "name": "checked", | ||
| "type": { | ||
| "text": "CheckboxProps['checked'] | undefined" | ||
| }, | ||
| "fieldName": "checked" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "CheckboxProps['disabled'] | undefined" | ||
| }, | ||
| "fieldName": "disabled" | ||
| }, | ||
| { | ||
| "name": "required", | ||
| "type": { | ||
| "text": "CheckboxProps['required'] | undefined" | ||
| }, | ||
| "fieldName": "required" | ||
| }, | ||
| { | ||
| "name": "indeterminate", | ||
| "type": { | ||
| "text": "CheckboxProps['indeterminate'] | undefined" | ||
| }, | ||
| "fieldName": "indeterminate" | ||
| }, | ||
| { | ||
| "name": "aria", | ||
| "type": { | ||
| "text": "CheckboxProps['aria']" | ||
| }, | ||
| "fieldName": "aria" | ||
| } | ||
| ], | ||
| "mixins": [ | ||
| { | ||
| "name": "FormControlMixin", | ||
| "package": "@justeattakeaway/pie-webc-core" | ||
| }, | ||
| { | ||
| "name": "RtlMixin", | ||
| "package": "@justeattakeaway/pie-webc-core" | ||
| } | ||
| ], | ||
| "superclass": { | ||
| "name": "LitElement", | ||
| "package": "lit" | ||
| }, | ||
| "tagName": "pie-checkbox", | ||
| "customElement": true | ||
| } | ||
| }, | ||
| "description": "Called when the form that owns this component is reset.\nResets the value to the default value." | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "handleChange", | ||
| "description": "Captures the native change event and wraps it in a custom event.", | ||
| "parameters": [ | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`.", | ||
| "name": "event", | ||
| "type": { | ||
| "text": "Event" | ||
| } | ||
| "kind": "js", | ||
| "name": "*", | ||
| "declaration": { | ||
| "name": "*", | ||
| "package": "./defs" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "PieCheckbox", | ||
| "declaration": { | ||
| "name": "PieCheckbox", | ||
| "module": "src/index.js" | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "attributes": [ | ||
| { | ||
| "name": "value", | ||
| "type": { | ||
| "text": "CheckboxProps['value'] | undefined" | ||
| }, | ||
| "default": "'on'", | ||
| "fieldName": "value" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": { | ||
| "text": "CheckboxProps['label'] | undefined" | ||
| }, | ||
| "fieldName": "label" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": { | ||
| "text": "CheckboxProps['name'] | undefined" | ||
| }, | ||
| "fieldName": "name" | ||
| }, | ||
| { | ||
| "name": "checked", | ||
| "type": { | ||
| "text": "CheckboxProps['checked'] | undefined" | ||
| }, | ||
| "fieldName": "checked" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "CheckboxProps['disabled'] | undefined" | ||
| }, | ||
| "fieldName": "disabled" | ||
| }, | ||
| { | ||
| "name": "required", | ||
| "type": { | ||
| "text": "CheckboxProps['required'] | undefined" | ||
| }, | ||
| "fieldName": "required" | ||
| }, | ||
| { | ||
| "name": "indeterminate", | ||
| "type": { | ||
| "text": "CheckboxProps['indeterminate'] | undefined" | ||
| }, | ||
| "fieldName": "indeterminate" | ||
| }, | ||
| { | ||
| "name": "aria", | ||
| "type": { | ||
| "text": "CheckboxProps['aria']" | ||
| }, | ||
| "fieldName": "aria" | ||
| } | ||
| ], | ||
| "mixins": [ | ||
| { | ||
| "name": "FormControlMixin", | ||
| "package": "@justeattakeaway/pie-webc-core" | ||
| }, | ||
| { | ||
| "name": "RtlMixin", | ||
| "package": "@justeattakeaway/pie-webc-core" | ||
| } | ||
| ], | ||
| "superclass": { | ||
| "name": "LitElement", | ||
| "package": "lit" | ||
| }, | ||
| "tagName": "pie-checkbox", | ||
| "customElement": true | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "kind": "js", | ||
| "name": "*", | ||
| "declaration": { | ||
| "name": "*", | ||
| "package": "./defs" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "PieCheckbox", | ||
| "declaration": { | ||
| "name": "PieCheckbox", | ||
| "module": "src/index.js" | ||
| } | ||
| "kind": "javascript-module", | ||
| "path": "src/defs-react.js", | ||
| "declarations": [], | ||
| "exports": [] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
@@ -75,3 +75,3 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; | ||
| private checkbox?; | ||
| private handleClick; | ||
| private onClick; | ||
| /** | ||
@@ -99,3 +99,3 @@ * (Read-only) returns a ValidityState with the validity states that this element is in. | ||
| */ | ||
| handleChange: (event: Event) => void; | ||
| onChange: (event: Event) => void; | ||
| render(): TemplateResult<1>; | ||
@@ -102,0 +102,0 @@ static styles: CSSResult; |
@@ -1,24 +0,24 @@ | ||
| import { LitElement as b, html as y, nothing as d, unsafeCSS as f } from "lit"; | ||
| import { FormControlMixin as v, RtlMixin as k, wrapNativeEvent as x, defineCustomElement as g } from "@justeattakeaway/pie-webc-core"; | ||
| import { LitElement as u, html as y, nothing as p, unsafeCSS as f } from "lit"; | ||
| import { FormControlMixin as k, RtlMixin as v, wrapNativeEvent as x, defineCustomElement as g } from "@justeattakeaway/pie-webc-core"; | ||
| import { property as n, query as C } from "lit/decorators.js"; | ||
| import { ifDefined as h } from "lit/directives/if-defined.js"; | ||
| const $ = `*,*:after,*:before{box-sizing:inherit} | ||
| `, u = { | ||
| `, b = { | ||
| required: !1, | ||
| indeterminate: !1 | ||
| }; | ||
| var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (p, e, l, a) => { | ||
| for (var i = a > 1 ? void 0 : a ? q(e, l) : e, s = p.length - 1, c; s >= 0; s--) | ||
| (c = p[s]) && (i = (a ? c(e, l, i) : c(i)) || i); | ||
| return a && i && _(e, l, i), i; | ||
| var q = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (d, e, s, l) => { | ||
| for (var o = l > 1 ? void 0 : l ? O(e, s) : e, a = d.length - 1, c; a >= 0; a--) | ||
| (c = d[a]) && (o = (l ? c(e, s, o) : c(o)) || o); | ||
| return l && o && q(e, s, o), o; | ||
| }; | ||
| const O = "pie-checkbox"; | ||
| class t extends v(k(b)) { | ||
| const _ = "pie-checkbox"; | ||
| class t extends k(v(u)) { | ||
| constructor() { | ||
| super(...arguments), this.value = "on", this.required = u.required, this.indeterminate = u.indeterminate, this.handleChange = (e) => { | ||
| const l = x(e); | ||
| this.dispatchEvent(l); | ||
| super(...arguments), this.value = "on", this.required = b.required, this.indeterminate = b.indeterminate, this.onChange = (e) => { | ||
| const s = x(e); | ||
| this.dispatchEvent(s); | ||
| }; | ||
| } | ||
| handleClick() { | ||
| onClick() { | ||
| this.checked = !this.checked, this.indeterminate = !1; | ||
@@ -47,3 +47,3 @@ } | ||
| formResetCallback() { | ||
| this.checkbox && (this.checkbox.value = this.value || ""), this._internals.setFormValue(this.value || ""); | ||
| this.checkbox && (this.checkbox.checked = !1); | ||
| } | ||
@@ -56,9 +56,9 @@ updated(e) { | ||
| checked: e, | ||
| value: l, | ||
| name: a, | ||
| label: i, | ||
| disabled: s, | ||
| value: s, | ||
| name: l, | ||
| label: o, | ||
| disabled: a, | ||
| required: c, | ||
| indeterminate: m, | ||
| aria: o | ||
| aria: i | ||
| } = this; | ||
@@ -70,19 +70,19 @@ return y` | ||
| ?checked=${h(e)} | ||
| .value=${l} | ||
| name=${h(a)} | ||
| ?disabled=${s} | ||
| .value=${s} | ||
| name=${h(l)} | ||
| ?disabled=${a} | ||
| .required=${c} | ||
| .indeterminate=${m} | ||
| aria-label=${(o == null ? void 0 : o.label) || d} | ||
| aria-labelledby=${i ? d : (o == null ? void 0 : o.labelledby) || d} | ||
| aria-describedby= ${(o == null ? void 0 : o.describedby) || d} | ||
| @click=${this.handleClick} | ||
| @change=${this.handleChange} | ||
| aria-label=${(i == null ? void 0 : i.label) || p} | ||
| aria-labelledby=${o ? p : (i == null ? void 0 : i.labelledby) || p} | ||
| aria-describedby= ${(i == null ? void 0 : i.describedby) || p} | ||
| @click=${this.onClick} | ||
| @change=${this.onChange} | ||
| data-test-id="checkbox-input" | ||
| /> | ||
| ${i} | ||
| ${o} | ||
| </label>`; | ||
| } | ||
| } | ||
| t.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 }; | ||
| t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 }; | ||
| t.styles = f($); | ||
@@ -116,6 +116,6 @@ r([ | ||
| ], t.prototype, "checkbox", 2); | ||
| g(O, t); | ||
| g(_, t); | ||
| export { | ||
| t as PieCheckbox, | ||
| u as defaultProps | ||
| b as defaultProps | ||
| }; |
@@ -78,3 +78,3 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core'; | ||
| private checkbox?; | ||
| private handleClick; | ||
| private onClick; | ||
| /** | ||
@@ -102,3 +102,3 @@ * (Read-only) returns a ValidityState with the validity states that this element is in. | ||
| */ | ||
| handleChange: (event: Event) => void; | ||
| onChange: (event: Event) => void; | ||
| render(): TemplateResult<1>; | ||
@@ -105,0 +105,0 @@ static styles: CSSResult; |
| { | ||
| "name": "@justeattakeaway/pie-checkbox", | ||
| "description": "PIE Design System Checkbox built using Web Components", | ||
| "version": "0.0.0-snapshot-release-20240522130647", | ||
| "version": "0.0.0-snapshot-release-20240522140604", | ||
| "type": "module", | ||
@@ -6,0 +6,0 @@ "main": "dist/index.js", |
@@ -57,3 +57,3 @@ import { | ||
| private handleClick () { | ||
| private onClick () { | ||
| this.checked = !this.checked; | ||
@@ -87,6 +87,4 @@ this.indeterminate = false; | ||
| if (this.checkbox) { | ||
| this.checkbox.value = this.value || ''; | ||
| this.checkbox.checked = false; | ||
| } | ||
| this._internals.setFormValue(this.value || ''); | ||
| } | ||
@@ -104,3 +102,3 @@ | ||
| */ | ||
| handleChange = (event: Event) => { | ||
| onChange = (event: Event) => { | ||
| // This is because some events set `composed` to `false`. | ||
@@ -138,4 +136,4 @@ // Reference: https://javascript.info/shadow-dom-events#event-composed | ||
| aria-describedby= ${aria?.describedby || nothing} | ||
| @click=${this.handleClick} | ||
| @change=${this.handleChange} | ||
| @click=${this.onClick} | ||
| @change=${this.onChange} | ||
| data-test-id="checkbox-input" | ||
@@ -142,0 +140,0 @@ /> |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by9.89%
38626
Worsened metrics
- Lines of code
- decreased by-0.24%
830
No dependency changes