@justeattakeaway/pie-checkbox - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240527152623 to 0.0.0-snapshot-release-20240529145609

custom-elements.json

@@ -132,7 +132,2 @@ {
             {
-              "kind": "method",
-              "name": "onClick",
-              "privacy": "private"
-            },
-            {
               "kind": "field",
@@ -179,15 +174,14 @@ "name": "validity",
             {
-              "kind": "field",
-              "name": "handleChange",
-              "privacy": "private",
-              "description": "Captures the native change event and wraps it in a custom event.",
+              "kind": "method",
+              "name": "onChange",
               "parameters": [
                 {
-                  "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`.",
                   "name": "event",
                   "type": {
                     "text": "Event"
-                  }
+                  },
+                  "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`."
                 }
-              ]
+              ],
+              "description": "Captures the native change event and wraps it in a custom event."
             }
@@ -194,0 +188,0 @@ ],

dist/index.d.ts

@@ -75,3 +75,2 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     private checkbox?;
-    private onClick;
     /**
@@ -99,3 +98,3 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
      */
-    private handleChange;
+    onChange(event: Event): void;
     render(): TemplateResult<1>;
@@ -102,0 +101,0 @@ static styles: CSSResult;

dist/index.js

 import { LitElement as u, html as b, nothing as d, unsafeCSS as f } from "lit";
-import { FormControlMixin as y, RtlMixin as k, wrapNativeEvent as v, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
-import { property as n, query as x } from "lit/decorators.js";
-import { ifDefined as $ } from "lit/directives/if-defined.js";
-const C = `*,*:after,*:before{box-sizing:inherit}
-`, h = {
+import { FormControlMixin as y, RtlMixin as v, wrapNativeEvent as g, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
+import { live as x } from "lit/directives/live.js";
+import { property as n, query as $ } from "lit/decorators.js";
+import { ifDefined as C } from "lit/directives/if-defined.js";
+const F = `*,*:after,*:before{box-sizing:inherit}
+`, p = {
   // a default value for the html <input type="checkbox" /> value attribute.
@@ -14,20 +15,12 @@ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
 };
-var F = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (p, e, a, s) => {
-  for (var i = s > 1 ? void 0 : s ? _(e, a) : e, c = p.length - 1, l; c >= 0; c--)
-    (l = p[c]) && (i = (s ? l(e, a, i) : l(i)) || i);
-  return s && i && F(e, a, i), i;
+var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, i = (h, e, a, s) => {
+  for (var o = s > 1 ? void 0 : s ? q(e, a) : e, l = h.length - 1, c; l >= 0; l--)
+    (c = h[l]) && (o = (s ? c(e, a, o) : c(o)) || o);
+  return s && o && _(e, a, o), o;
 };
-const q = "pie-checkbox";
-class t extends y(k(u)) {
+const O = "pie-checkbox";
+class t extends y(v(u)) {
   constructor() {
-    super(...arguments), this.value = h.value, this.checked = h.checked, this.required = h.required, this.indeterminate = h.indeterminate, this.handleChange = (e) => {
-      const { checked: a } = e == null ? void 0 : e.currentTarget;
-      this.checked = a;
-      const s = v(e);
-      this.dispatchEvent(s), this.handleFormAssociation();
-    };
+    super(...arguments), this.value = p.value, this.checked = p.checked, this.required = p.required, this.indeterminate = p.indeterminate;
   }
-  onClick() {
-    this.checked = !this.checked, this.indeterminate = !1;
-  }
   /**
@@ -61,2 +54,12 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
   }
+  /**
+   * Captures the native change event and wraps it in a custom event.
+   * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+   */
+  onChange(e) {
+    const { checked: a } = e == null ? void 0 : e.currentTarget;
+    this.checked = a;
+    const s = g(e);
+    this.dispatchEvent(s), this.handleFormAssociation();
+  }
   render() {
@@ -67,7 +70,7 @@ const {
       name: s,
-      label: i,
-      disabled: c,
-      required: l,
+      label: o,
+      disabled: l,
+      required: c,
       indeterminate: m,
-      aria: o
+      aria: r
     } = this;
@@ -79,15 +82,14 @@ return b`
                 .value=${a}
-                ?checked=${e}
-                name=${$(s)}
-                ?disabled=${c}
-                ?required=${l}
+                ?checked=${x(e)}
+                name=${C(s)}
+                ?disabled=${l}
+                ?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.onClick}
-                @change=${this.handleChange}
+                aria-label=${(r == null ? void 0 : r.label) || d}
+                aria-labelledby=${o ? d : (r == null ? void 0 : r.labelledby) || d}
+                aria-describedby= ${(r == null ? void 0 : r.describedby) || d}
+                @change=${this.onChange}
                 data-test-id="checkbox-input"
             />
-            ${i}
+            ${o}
         </label>`;
@@ -97,34 +99,34 @@ }
 t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
-t.styles = f(C);
-r([
+t.styles = f(F);
+i([
   n({ type: String })
 ], t.prototype, "value", 2);
-r([
+i([
   n({ type: String })
 ], t.prototype, "label", 2);
-r([
+i([
   n({ type: String })
 ], t.prototype, "name", 2);
-r([
+i([
   n({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-r([
+i([
   n({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-r([
+i([
   n({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-r([
+i([
   n({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-r([
+i([
   n({ type: Object })
 ], t.prototype, "aria", 2);
-r([
-  x('input[type="checkbox"]')
+i([
+  $('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-g(q, t);
+k(O, t);
 export {
   t as PieCheckbox,
-  h as defaultProps
+  p as defaultProps
 };

dist/react.d.ts

@@ -78,3 +78,2 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     private checkbox?;
-    private onClick;
     /**
@@ -102,3 +101,3 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
      */
-    private handleChange;
+    onChange(event: Event): void;
     render(): TemplateResult<1>;
@@ -105,0 +104,0 @@ static styles: CSSResult;

dist/react.js

 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } from "./index.js";
-import { defaultProps as h } from "./index.js";
+import { defaultProps as k } from "./index.js";
 import "lit";
 import "@justeattakeaway/pie-webc-core";
+import "lit/directives/live.js";
 import "lit/decorators.js";
@@ -15,6 +16,6 @@ import "lit/directives/if-defined.js";
   events: {}
-}), x = r;
+}), C = r;
 export {
-  x as PieCheckbox,
-  h as defaultProps
+  C as PieCheckbox,
+  k as defaultProps
 };

package.json

 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.0.0-snapshot-release-20240527152623",
+  "version": "0.0.0-snapshot-release-20240529145609",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

src/index.ts

@@ -10,2 +10,3 @@ import {
 } from '@justeattakeaway/pie-webc-core';
+import { live } from 'lit/directives/live.js';
 import { property, query } from 'lit/decorators.js';
@@ -56,7 +57,2 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
-    private onClick () {
-        this.checked = !this.checked;
-        this.indeterminate = false;
-    }
-
     /**
@@ -106,3 +102,3 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
      */
-    private handleChange = (event: Event) => {
+    onChange (event: Event) {
         const { checked } = event?.currentTarget as HTMLInputElement;
@@ -116,3 +112,3 @@ this.checked = checked;
         this.handleFormAssociation();
-    };
+    }
 
@@ -136,3 +132,3 @@ render () {
                 .value=${value}
-                ?checked=${checked}
+                ?checked=${live(checked)}
                 name=${ifDefined(name)}
@@ -145,4 +141,3 @@ ?disabled=${disabled}
                 aria-describedby= ${aria?.describedby || nothing}
-                @click=${this.onClick}
-                @change=${this.handleChange}
+                @change=${this.onChange}
                 data-test-id="checkbox-input"
@@ -149,0 +144,0 @@ />

No alert changes

Worsened metrics

Total package byte prevSize

35278

decreased by-0.45%

Lines of code

828

decreased by-1.08%

No dependency changes