@justeattakeaway/pie-checkbox - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

custom-elements.json

@@ -21,3 +21,3 @@ {
           },
-          "default": "{\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n    value: 'on',\n    required: false,\n    indeterminate: false,\n    checked: false,\n}"
+          "default": "{\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n    value: 'on',\n    required: false,\n    defaultChecked: false,\n    indeterminate: false,\n    checked: false,\n}"
         }
@@ -87,2 +87,9 @@ ],
               "kind": "field",
+              "name": "defaultChecked",
+              "privacy": "public",
+              "attribute": "defaultChecked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "disabled",
@@ -129,3 +136,3 @@ "type": {
               "type": {
-                "text": "HTMLInputElement | undefined"
+                "text": "HTMLInputElement"
               },
@@ -189,2 +196,13 @@ "privacy": "private"
               "description": "Captures the native change event and wraps it in a custom event."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
             }
@@ -225,2 +243,6 @@ ],
             {
+              "name": "defaultChecked",
+              "fieldName": "defaultChecked"
+            },
+            {
               "name": "disabled",
@@ -227,0 +249,0 @@ "type": {

dist/index.d.ts

@@ -34,4 +34,8 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox (not necessarily the same as the current checked state).
      */
+    defaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox.
+     */
     checked?: boolean;
@@ -53,3 +57,3 @@ /**
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
@@ -72,2 +76,3 @@ export declare const defaultProps: DefaultProps;
     checked: boolean;
+    defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
@@ -77,3 +82,3 @@ required?: CheckboxProps['required'];
     aria: CheckboxProps['aria'];
-    private checkbox?;
+    private checkbox;
     /**
@@ -102,2 +107,8 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     private handleChange;
+    /**
+     * Called when the form that contains this component is reset.
+     * If the current checked state is different to the default checked state,
+     * the checked state is reset to the default checked state and a `change` event is emitted.
+     */
+    formResetCallback(): void;
     render(): TemplateResult<1>;
@@ -104,0 +115,0 @@ static styles: CSSResult;

dist/index.js

@@ -1,8 +0,8 @@
-import { LitElement as u, html as b, nothing as d, unsafeCSS as f } from "lit";
-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 a, query as $ } from "lit/decorators.js";
-import { ifDefined as C } from "lit/directives/if-defined.js";
+import { LitElement as u, html as f, nothing as h, unsafeCSS as b } from "lit";
+import { FormControlMixin as y, RtlMixin as k, wrapNativeEvent as v, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { live as g } from "lit/directives/live.js";
+import { property as s, query as x } from "lit/decorators.js";
+import { ifDefined as $ } from "lit/directives/if-defined.js";
 const F = `*,*:after,*:before{box-sizing:inherit}
-`, p = {
+`, d = {
   // a default value for the html <input type="checkbox" /> value attribute.
@@ -12,14 +12,15 @@ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
   required: !1,
+  defaultChecked: !1,
   indeterminate: !1,
   checked: !1
 };
-var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, i = (h, e, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? q(e, n) : e, l = h.length - 1, c; l >= 0; l--)
-    (c = h[l]) && (o = (s ? c(e, n, o) : c(o)) || o);
-  return s && o && _(e, n, o), o;
+var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (p, e, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? q(e, n) : e, c = p.length - 1, l; c >= 0; c--)
+    (l = p[c]) && (o = (a ? l(e, n, o) : l(o)) || o);
+  return a && o && E(e, n, o), o;
 };
-const O = "pie-checkbox";
-class t extends y(v(u)) {
+const A = "pie-checkbox";
+class t extends y(k(u)) {
   constructor() {
-    super(...arguments), this.value = p.value, this.checked = p.checked, this.required = p.required, this.indeterminate = p.indeterminate;
+    super(...arguments), this.value = d.value, this.checked = d.checked, this.defaultChecked = d.defaultChecked, this.required = d.required, this.indeterminate = d.indeterminate;
   }
@@ -37,3 +38,3 @@ /**
   handleFormAssociation() {
-    !!this._internals.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
+    !!this.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
   }
@@ -62,5 +63,17 @@ /**
     this.checked = n;
-    const s = g(e);
-    this.dispatchEvent(s), this.handleFormAssociation();
+    const a = v(e);
+    this.dispatchEvent(a), this.handleFormAssociation();
   }
+  /**
+   * Called when the form that contains this component is reset.
+   * If the current checked state is different to the default checked state,
+   * the checked state is reset to the default checked state and a `change` event is emitted.
+   */
+  formResetCallback() {
+    if (this.checked === this.defaultChecked)
+      return;
+    this.checked = this.defaultChecked;
+    const e = new Event("change", { bubbles: !0, composed: !0 });
+    this.dispatchEvent(e), this.handleFormAssociation();
+  }
   render() {
@@ -70,10 +83,10 @@ const {
       value: n,
-      name: s,
+      name: a,
       label: o,
-      disabled: l,
-      required: c,
+      disabled: c,
+      required: l,
       indeterminate: m,
-      aria: r
+      aria: i
     } = this;
-    return b`
+    return f`
         <label data-test-id="checkbox-component">
@@ -83,10 +96,10 @@ <input
                 .value=${n}
-                ?checked=${x(e)}
-                name=${C(s)}
-                ?disabled=${l}
-                ?required=${c}
-                .indeterminate=${m}
-                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}
+                .checked=${g(e)}
+                name=${$(a)}
+                ?disabled=${c}
+                ?required=${l}
+                .indeterminate=${!!m}
+                aria-label=${(i == null ? void 0 : i.label) || h}
+                aria-labelledby=${o ? h : (i == null ? void 0 : i.labelledby) || h}
+                aria-describedby= ${(i == null ? void 0 : i.describedby) || h}
                 @change=${this.handleChange}
@@ -100,34 +113,37 @@ data-test-id="checkbox-input"
 t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
-t.styles = f(F);
-i([
-  a({ type: String })
+t.styles = b(F);
+r([
+  s({ type: String })
 ], t.prototype, "value", 2);
-i([
-  a({ type: String })
+r([
+  s({ type: String })
 ], t.prototype, "label", 2);
-i([
-  a({ type: String })
+r([
+  s({ type: String })
 ], t.prototype, "name", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "defaultChecked", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-i([
-  a({ type: Object })
+r([
+  s({ type: Object })
 ], t.prototype, "aria", 2);
-i([
-  $('input[type="checkbox"]')
+r([
+  x('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-k(O, t);
+C(A, t);
 export {
   t as PieCheckbox,
-  p as defaultProps
+  d as defaultProps
 };

dist/react.d.ts

@@ -35,4 +35,8 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox (not necessarily the same as the current checked state).
      */
+    defaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox.
+     */
     checked?: boolean;
@@ -54,3 +58,3 @@ /**
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
@@ -75,2 +79,3 @@ export declare const defaultProps: DefaultProps;
     checked: boolean;
+    defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
@@ -80,3 +85,3 @@ required?: CheckboxProps['required'];
     aria: CheckboxProps['aria'];
-    private checkbox?;
+    private checkbox;
     /**
@@ -105,2 +110,8 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     private handleChange;
+    /**
+     * Called when the form that contains this component is reset.
+     * If the current checked state is different to the default checked state,
+     * the checked state is reset to the default checked state and a `change` event is emitted.
+     */
+    formResetCallback(): void;
     render(): TemplateResult<1>;
@@ -107,0 +118,0 @@ static styles: CSSResult;

package.json

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

README.md

@@ -33,7 +33,5 @@ <p align="center">
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-checkbox
+npm i @justeattakeaway/pie-checkbox
 
-# yarn
-$ yarn add @justeattakeaway/pie-checkbox
+yarn add @justeattakeaway/pie-checkbox
 ```
@@ -84,3 +82,4 @@
 | `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
-| `checked` | `boolean` | `false` | Indicates whether or not the checkbox is checked by default (when the page loads). |
+| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
+| `defaultChecked` | `boolean` | `false` | Sets the default checked state for the checkbox. This does not directly set the initial checked state when the page loads, use `checked` for that. If the checkbox is inside a form which is reset, the `checked` state will be updated to match `defaultChecked`. |
 | `indeterminate` | `boolean` | `false` | Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick. It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state. |
@@ -112,2 +111,2 @@ | `aria` | `object` | {} | accepts `label`, `labeledby` and `describedby` keys with string values. |
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

src/defs.ts

@@ -30,4 +30,9 @@ import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox (not necessarily the same as the current checked state).
      */
+    defaultChecked?: boolean;
+
+    /**
+     * The checked state of the checkbox.
+     */
     checked?: boolean;
@@ -52,3 +57,3 @@
 
-export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' >;
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
@@ -60,5 +65,5 @@ export const defaultProps: DefaultProps = {
     required: false,
+    defaultChecked: false,
     indeterminate: false,
     checked: false,
 };
-

src/index.ts

@@ -42,2 +42,5 @@ import {
     @property({ type: Boolean, reflect: true })
+    public defaultChecked = defaultProps.defaultChecked;
+
+    @property({ type: Boolean, reflect: true })
     public disabled?: CheckboxProps['disabled'];
@@ -55,3 +58,3 @@
     @query('input[type="checkbox"]')
-    private checkbox?: HTMLInputElement;
+    private checkbox!: HTMLInputElement;
 
@@ -70,3 +73,3 @@ /**
     private handleFormAssociation () : void {
-        const isFormAssociated = !!this._internals.form && !!this.name;
+        const isFormAssociated = !!this.form && !!this.name;
         if (isFormAssociated) {
@@ -114,2 +117,20 @@ this._internals.setFormValue(this.checked ? this.value : null);
 
+    /**
+     * Called when the form that contains this component is reset.
+     * If the current checked state is different to the default checked state,
+     * the checked state is reset to the default checked state and a `change` event is emitted.
+     */
+    public formResetCallback () : void {
+        if (this.checked === this.defaultChecked) {
+            return;
+        }
+
+        this.checked = this.defaultChecked;
+
+        const changeEvent = new Event('change', { bubbles: true, composed: true });
+        this.dispatchEvent(changeEvent);
+
+        this.handleFormAssociation();
+    }
+
     render () {
@@ -132,7 +153,7 @@ const {
                 .value=${value}
-                ?checked=${live(checked)}
+                .checked=${live(checked)}
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 ?required=${required}
-                .indeterminate=${indeterminate}
+                .indeterminate=${!!indeterminate}
                 aria-label=${aria?.label || nothing}
@@ -139,0 +160,0 @@ aria-labelledby=${label ? nothing : aria?.labelledby || nothing}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39091

increased by10.09%

Lines of code

924

increased by9.61%

No dependency changes