@justeattakeaway/pie-switch 0.30.4 → 0.30.6

package/custom-elements.json

@@ -138,7 +138,7 @@
               "kind": "field",
               "name": "input",
               "type": {
-                "text": "HTMLInputElement | undefined"
+                "text": "HTMLInputElement"
               },
               "privacy": "private"
             },

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export declare class PieSwitch extends PieSwitch_base implements SwitchProps, PI
     value: string;
     name: SwitchProps['name'];
     disabled: boolean;
-    private input?;
+    private input;
     focusTarget: HTMLElement;
     protected firstUpdated(): void;
     protected updated(): void;

package/dist/index.js

@@ -6,7 +6,7 @@ import { FormControlMixin as Te, RtlMixin as Le, wrapNativeEvent as Ne, validPro
 import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
 (function() {
   (function(E) {
-    const o = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), F = {
+    const s = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), F = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -58,8 +58,8 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
           get() {
             return a;
           },
-          set(s) {
-            a = s, t.isConnected ? t.setAttribute(r, s) : A.set(t, e);
+          set(o) {
+            a = o, t.isConnected ? t.setAttribute(r, o) : A.set(t, e);
           }
         });
       }
@@ -70,8 +70,8 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
     }
     const Y = (t, e = !1) => {
       const i = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT, {
-        acceptNode(s) {
-          return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        acceptNode(o) {
+          return l.has(o) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
       let a = i.nextNode();
@@ -89,23 +89,23 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
     }) : {};
     function P(t) {
       t.forEach((e) => {
-        const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), s = Array.from(a);
+        const { addedNodes: i, removedNodes: a } = e, r = Array.from(i), o = Array.from(a);
         r.forEach((n) => {
           var h;
           if (l.has(n) && n.constructor.formAssociated && G(n), A.has(n)) {
-            const d = A.get(n);
-            Object.keys(F).filter((f) => d[f] !== null).forEach((f) => {
-              n.setAttribute(F[f], d[f]);
+            const c = A.get(n);
+            Object.keys(F).filter((f) => c[f] !== null).forEach((f) => {
+              n.setAttribute(F[f], c[f]);
             }), A.delete(n);
           }
           if (x.has(n)) {
-            const d = x.get(n);
-            n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), x.delete(n);
+            const c = x.get(n);
+            n.setAttribute("internals-valid", c.validity.valid.toString()), n.setAttribute("internals-invalid", (!c.validity.valid).toString()), n.setAttribute("aria-invalid", (!c.validity.valid).toString()), x.delete(n);
           }
           if (n.localName === "form") {
-            const d = g.get(n), b = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+            const c = g.get(n), b = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
               acceptNode(W) {
-                return l.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return l.has(W) && W.constructor.formAssociated && !(c && c.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
             let f = b.nextNode();
@@ -113,7 +113,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
               G(f), f = b.nextNode();
           }
           n.localName === "fieldset" && ((h = I.observe) === null || h === void 0 || h.call(I, n, J), Y(n, !0));
-        }), s.forEach((n) => {
+        }), o.forEach((n) => {
           const h = l.get(n);
           h && u.get(h) && Q(h), O.has(n) && O.get(n).disconnect();
         });
@@ -156,7 +156,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         e[0].id || (i = `${e[0].htmlFor}_Label`, e[0].id = i), t.setAttribute("aria-labelledby", i);
       }
     }, V = (t) => {
-      const e = Array.from(t.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(t) || [], a = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), r = [...e, ...a].includes(!1);
+      const e = Array.from(t.elements).filter((o) => !o.tagName.includes("-") && o.validity).map((o) => o.validity.valid), i = g.get(t) || [], a = Array.from(i).filter((o) => o.isConnected).map((o) => l.get(o).validity.valid), r = [...e, ...a].includes(!1);
       t.toggleAttribute("internals-invalid", r), t.toggleAttribute("internals-valid", !r);
     }, me = (t) => {
       V(S(t.target));
@@ -290,22 +290,22 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
       HTMLFormElement.prototype.checkValidity = i;
       const e = HTMLFormElement.prototype.reportValidity;
       HTMLFormElement.prototype.reportValidity = a;
-      function i(...s) {
-        let n = t.apply(this, s);
+      function i(...o) {
+        let n = t.apply(this, o);
         return te(this, n, "checkValidity");
       }
-      function a(...s) {
-        let n = e.apply(this, s);
+      function a(...o) {
+        let n = e.apply(this, o);
         return te(this, n, "reportValidity");
       }
       const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
-        get(...s) {
-          const n = r.call(this, ...s), h = Array.from(g.get(this) || []);
+        get(...o) {
+          const n = r.call(this, ...o), h = Array.from(g.get(this) || []);
           if (h.length === 0)
             return n;
-          const d = Array.from(n).concat(h).sort((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
-          return new Ce(d);
+          const c = Array.from(n).concat(h).sort((b, f) => b.compareDocumentPosition ? b.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
+          return new Ce(c);
         }
       });
     }
@@ -317,13 +317,13 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         if (!e || !e.tagName || e.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
         const i = e.getRootNode(), a = new ge();
-        this.states = new D(e), o.set(this, e), c.set(this, a), l.set(e, this), he(e, this), fe(e, this), Object.seal(this), i instanceof DocumentFragment && pe(i);
+        this.states = new D(e), s.set(this, e), d.set(this, a), l.set(e, this), he(e, this), fe(e, this), Object.seal(this), i instanceof DocumentFragment && pe(i);
       }
       checkValidity() {
-        const e = o.get(this);
+        const e = s.get(this);
         if (w(e, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = c.get(this);
+        const i = d.get(this);
         if (!i.valid) {
           const a = new Event("invalid", {
             bubbles: !1,
@@ -335,19 +335,19 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         return i.valid;
       }
       get form() {
-        const e = o.get(this);
+        const e = s.get(this);
         w(e, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
         let i;
         return e.constructor.formAssociated === !0 && (i = S(e)), i;
       }
       get labels() {
-        const e = o.get(this);
+        const e = s.get(this);
         w(e, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
         const i = e.getAttribute("id"), a = e.getRootNode();
         return a && i ? a.querySelectorAll(`[for="${i}"]`) : [];
       }
       reportValidity() {
-        const e = o.get(this);
+        const e = s.get(this);
         if (w(e, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
         const i = this.checkValidity(), a = U.get(this);
@@ -356,7 +356,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
         return !i && a && (e.focus(), a.focus()), i;
       }
       setFormValue(e) {
-        const i = o.get(this);
+        const i = s.get(this);
         if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Q(this), e != null && !(e instanceof FormData)) {
           if (i.getAttribute("name")) {
             const a = X(i, this);
@@ -364,42 +364,42 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
           }
         } else e != null && e instanceof FormData && Array.from(e).reverse().forEach(([a, r]) => {
           if (typeof r == "string") {
-            const s = X(i, this);
-            s.name = a, s.value = r;
+            const o = X(i, this);
+            o.name = a, o.value = r;
           }
         });
         q.set(i, e);
       }
       setValidity(e, i, a) {
-        const r = o.get(this);
+        const r = s.get(this);
         if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !e)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
         U.set(this, a);
-        const s = c.get(this), n = {};
+        const o = d.get(this), n = {};
         for (const b in e)
           n[b] = e[b];
-        Object.keys(n).length === 0 && ye(s);
-        const h = Object.assign(Object.assign({}, s), n);
+        Object.keys(n).length === 0 && ye(o);
+        const h = Object.assign(Object.assign({}, o), n);
         delete h.valid;
-        const { valid: d } = Ee(s, h, this.form);
-        if (!d && !i)
+        const { valid: c } = Ee(o, h, this.form);
+        if (!c && !i)
           throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-        v.set(this, d ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : x.set(r, this);
+        v.set(this, c ? "" : i), r.isConnected ? (r.toggleAttribute("internals-invalid", !c), r.toggleAttribute("internals-valid", c), r.setAttribute("aria-invalid", `${!c}`)) : x.set(r, this);
       }
       get shadowRoot() {
-        const e = o.get(this), i = B.get(e);
+        const e = s.get(this), i = B.get(e);
         return i || null;
       }
       get validationMessage() {
-        const e = o.get(this);
+        const e = s.get(this);
         return w(e, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), v.get(this);
       }
       get validity() {
-        const e = o.get(this);
-        return w(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
+        const e = s.get(this);
+        return w(e, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), d.get(this);
       }
       get willValidate() {
-        const e = o.get(this);
+        const e = s.get(this);
         return w(e, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(e.disabled || e.hasAttribute("disabled") || e.hasAttribute("readonly"));
       }
     }
@@ -440,9 +440,9 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
           const e = CustomElementRegistry.prototype.define;
           CustomElementRegistry.prototype.define = function(i, a, r) {
             if (a.formAssociated) {
-              const s = a.prototype.connectedCallback;
+              const o = a.prototype.connectedCallback;
               a.prototype.connectedCallback = function() {
-                K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), ie(this);
+                K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), ie(this);
               };
             }
             e.call(this, i, a, r);
@@ -460,8 +460,8 @@ import "@justeattakeaway/pie-icons-webc/dist/IconCheck.js";
           let e = function(...a) {
             const r = i.apply(this, a);
             if (B.set(this, r), T()) {
-              const s = new MutationObserver(P);
-              window.ShadyDOM ? s.observe(this, _) : s.observe(r, _), O.set(this, s);
+              const o = new MutationObserver(P);
+              window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), O.set(this, o);
             }
             return r;
           };
@@ -481,19 +481,18 @@ const _e = "*,*:after,*:before{box-sizing:inherit}*,*:before,*:after{cursor:inhe
   required: !1,
   value: "on"
 };
-var Re = Object.defineProperty, m = (E, o, c, u) => {
+var Re = Object.defineProperty, m = (E, s, d, u) => {
   for (var l = void 0, v = E.length - 1, M; v >= 0; v--)
-    (M = E[v]) && (l = M(o, c, l) || l);
-  return l && Re(o, c, l), l;
+    (M = E[v]) && (l = M(s, d, l) || l);
+  return l && Re(s, d, l), l;
 };
 const de = "pie-switch", z = class z extends Te(Le(Fe)) {
   constructor() {
     super(...arguments), this.labelPlacement = k.labelPlacement, this.checked = k.checked, this.required = k.required, this.value = k.value, this.disabled = k.disabled;
   }
   firstUpdated() {
-    var o;
-    this.handleFormAssociation(), (o = this.input) == null || o.addEventListener("invalid", (c) => {
-      this.dispatchEvent(new Event("invalid", c));
+    this.handleFormAssociation(), this.input.addEventListener("invalid", (s) => {
+      this.dispatchEvent(new Event("invalid", s));
     });
   }
   updated() {
@@ -509,10 +508,10 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
    * The handleChange function updates the checkbox state and emits an event for consumers.
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
    */
-  handleChange(o) {
-    const { checked: c } = o == null ? void 0 : o.currentTarget;
-    this.checked = c;
-    const u = Ne(o);
+  handleChange(s) {
+    const { checked: d } = s == null ? void 0 : s.currentTarget;
+    this.checked = d;
+    const u = Ne(s);
     this.dispatchEvent(u), this.handleFormAssociation();
   }
   /**
@@ -535,9 +534,8 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
    * Allows a consumer to set a custom validation message on the switch. An empty string counts as valid.
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
    */
-  setCustomValidity(o) {
-    var c;
-    (c = this.input) == null || c.setCustomValidity(o), this._internals.setValidity(this.validity, this.validationMessage, this.input);
+  setCustomValidity(s) {
+    this.input.setCustomValidity(s), this._internals.setValidity(this.validity, this.validationMessage, this.input);
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -560,16 +558,16 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
    *
    * @private
    */
-  renderSwitchLabel(o) {
-    const { label: c, labelPlacement: u } = this;
-    return !c || u !== o ? L : N`
+  renderSwitchLabel(s) {
+    const { label: d, labelPlacement: u } = this;
+    return !d || u !== s ? L : N`
             <span data-test-id="switch-label-${u}">
-                ${c}
+                ${d}
             </span>`;
   }
   renderAriaDescription() {
-    var o;
-    return (o = this.aria) != null && o.describedBy ? N`
+    var s;
+    return (s = this.aria) != null && s.describedBy ? N`
             <div
                 id="switch-description"
                 data-test-id="switch-description"
@@ -579,8 +577,8 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
   }
   render() {
     const {
-      aria: o,
-      checked: c,
+      aria: s,
+      checked: d,
       disabled: u,
       isRTL: l,
       required: v
@@ -596,20 +594,20 @@ const de = "pie-switch", z = class z extends Te(Le(Fe)) {
                 <div
                     data-test-id="switch-component"
                     class="c-switch"
-                    ?checked=${c}>
+                    ?checked=${d}>
                     <input
                         data-test-id="switch-input"
                         role="switch"
                         type="checkbox"
                         class="c-switch-input"
                         .required=${v}
-                        .checked="${c}"
+                        .checked="${d}"
                         .disabled="${u}"
                         @change="${this.handleChange}"
-                        aria-label="${Se(o == null ? void 0 : o.label)}"
-                        aria-describedby="${o != null && o.describedBy ? "switch-description" : L}">
+                        aria-label="${Se(s == null ? void 0 : s.label)}"
+                        aria-describedby="${s != null && s.describedBy ? "switch-description" : L}">
                     <div class="c-switch-control">
-                        ${c ? N`<icon-check></icon-check>` : L}
+                        ${d ? N`<icon-check></icon-check>` : L}
                     </div>
                 </div>
                 ${this.renderSwitchLabel("trailing")}

package/dist/react.d.ts

@@ -41,7 +41,7 @@ declare class PieSwitch_2 extends PieSwitch_base implements SwitchProps, PIEInpu
     value: string;
     name: SwitchProps['name'];
     disabled: boolean;
-    private input?;
+    private input;
     focusTarget: HTMLElement;
     protected firstUpdated(): void;
     protected updated(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-switch",
   "description": "PIE Design System Switch built using Web Components",
-  "version": "0.30.4",
+  "version": "0.30.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,7 +41,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "1.0.0",
+    "@justeattakeaway/pie-icons-webc": "1.1.0",
     "@justeattakeaway/pie-webc-core": "0.24.2",
     "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "element-internals-polyfill": "1.3.11"

package/src/index.ts

@@ -50,7 +50,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
     public disabled = defaultProps.disabled;
 
     @query('input[type="checkbox"]')
-    private input?: HTMLInputElement;
+    private input!: HTMLInputElement;
 
     @query('label')
     public focusTarget!: HTMLElement;
@@ -59,7 +59,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
         this.handleFormAssociation();
         // This ensures that invalid events triggered by checkValidity() are propagated to the custom element
         // for consumers to listen to: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
-        this.input?.addEventListener('invalid', (event) => {
+        this.input.addEventListener('invalid', (event) => {
             this.dispatchEvent(new Event('invalid', event));
         });
     }
@@ -108,7 +108,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
      * @returns boolean
      */
     public checkValidity (): boolean {
-        return (this.input as HTMLInputElement).checkValidity();
+        return this.input.checkValidity();
     }
 
     /**
@@ -117,7 +117,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
      * @returns boolean
      */
     public reportValidity (): boolean {
-        return (this.input as HTMLInputElement).reportValidity();
+        return this.input.reportValidity();
     }
 
     /**
@@ -125,7 +125,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
      */
     public setCustomValidity (message: string): void {
-        this.input?.setCustomValidity(message);
+        this.input.setCustomValidity(message);
         this._internals.setValidity(this.validity, this.validationMessage, this.input);
     }
 
@@ -134,7 +134,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
      */
     public get validity (): ValidityState {
-        return (this.input as HTMLInputElement).validity;
+        return this.input.validity;
     }
 
     /**
@@ -143,7 +143,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage
      */
     public get validationMessage (): string {
-        return (this.input as HTMLInputElement).validationMessage;
+        return this.input.validationMessage;
     }
 
     /**