@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240412121709 to 0.0.0-snapshot-release-20240412134443

custom-elements.json

@@ -161,2 +161,6 @@ {
             {
+              "description": "Testing the attribute reassignment",
+              "name": "test"
+            },
+            {
               "description": "Default slot",
@@ -328,2 +332,9 @@ "name": ""
             {
+              "kind": "field",
+              "name": "_testSlotElement",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
               "kind": "method",
@@ -330,0 +341,0 @@ "name": "_simulateNativeButtonClick",

dist/index.d.ts

@@ -96,2 +96,3 @@ import type { CSSResult } from 'lit';
  * @slot icon - The icon slot
+ * @slot test - Testing the attribute reassignment
  * @slot - Default slot
@@ -120,2 +121,3 @@ */
     _iconSlotElement: Array<HTMLElement>;
+    _testSlotElement: Array<HTMLElement>;
     /**
@@ -122,0 +124,0 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

dist/index.js

@@ -1,3 +0,3 @@
-import { LitElement as Mt, html as N, nothing as B, unsafeCSS as Ct } from "lit";
-import { property as p, queryAssignedElements as St } from "lit/decorators.js";
+import { LitElement as Ct, html as N, nothing as B, unsafeCSS as St } from "lit";
+import { property as p, queryAssignedElements as ct } from "lit/decorators.js";
 import { ifDefined as At } from "lit/directives/if-defined.js";
@@ -20,3 +20,3 @@ import { FormControlMixin as Ft, validPropertyValues as P, defineCustomElement as Lt } from "@justeattakeaway/pie-webc-core";
   (function(E) {
-    const n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
+    const n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
       ariaAtomic: "aria-atomic",
@@ -63,3 +63,3 @@ ariaAutoComplete: "aria-autocomplete",
       role: "role"
-    }, ct = (e, t) => {
+    }, dt = (e, t) => {
       for (let i in L) {
@@ -102,21 +102,21 @@ t[i] = null;
     }) : {};
-    function R(e) {
+    function _(e) {
       e.forEach((t) => {
         const { addedNodes: i, removedNodes: r } = t, o = Array.from(i), s = Array.from(r);
         o.forEach((l) => {
-          var u;
+          var f;
           if (c.has(l) && l.constructor.formAssociated && G(l), A.has(l)) {
-            const d = A.get(l);
-            Object.keys(L).filter((g) => d[g] !== null).forEach((g) => {
-              l.setAttribute(L[g], d[g]);
+            const v = A.get(l);
+            Object.keys(L).filter((g) => v[g] !== null).forEach((g) => {
+              l.setAttribute(L[g], v[g]);
             }), A.delete(l);
           }
           if (F.has(l)) {
-            const d = F.get(l);
-            l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), F.delete(l);
+            const v = F.get(l);
+            l.setAttribute("internals-valid", v.validity.valid.toString()), l.setAttribute("internals-invalid", (!v.validity.valid).toString()), l.setAttribute("aria-invalid", (!v.validity.valid).toString()), F.delete(l);
           }
           if (l.localName === "form") {
-            const d = b.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
+            const v = b.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
               acceptNode(H) {
-                return c.has(H) && H.constructor.formAssociated && !(d && d.has(H)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return c.has(H) && H.constructor.formAssociated && !(v && v.has(H)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
@@ -128,10 +128,10 @@ });
           }
-          l.localName === "fieldset" && ((u = z.observe) == null || u.call(z, l, Q), J(l, !0));
+          l.localName === "fieldset" && ((f = z.observe) == null || f.call(z, l, Q), J(l, !0));
         }), s.forEach((l) => {
-          const u = c.get(l);
-          u && h.get(u) && X(u), k.has(l) && k.get(l).disconnect();
+          const f = c.get(l);
+          f && m.get(f) && X(f), k.has(l) && k.get(l).disconnect();
         });
       });
     }
-    function dt(e) {
+    function vt(e) {
       e.forEach((t) => {
@@ -145,9 +145,9 @@ const { removedNodes: i } = t;
     }
-    const vt = (e) => {
+    const ht = (e) => {
       var i, r;
-      const t = new MutationObserver(dt);
+      const t = new MutationObserver(vt);
       (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (r = t.observe) == null || r.call(t, e, { childList: !0 }), U.set(e, t);
     };
-    V() && new MutationObserver(R);
-    const _ = {
+    V() && new MutationObserver(_);
+    const R = {
       childList: !0,
@@ -158,11 +158,11 @@ subtree: !0
     }, X = (e) => {
-      h.get(e).forEach((i) => {
+      m.get(e).forEach((i) => {
         i.remove();
-      }), h.set(e, []);
+      }), m.set(e, []);
     }, Y = (e, t) => {
       const i = document.createElement("input");
-      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
-    }, ht = (e, t) => {
+      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), m.get(t).push(i), i;
+    }, mt = (e, t) => {
       var i;
-      h.set(t, []), (i = z.observe) == null || i.call(z, e, Q);
+      m.set(t, []), (i = z.observe) == null || i.call(z, e, Q);
     }, Z = (e, t) => {
@@ -177,7 +177,7 @@ if (t.length) {
       e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
-    }, mt = (e) => {
-      I(T(e.target));
     }, pt = (e) => {
       I(T(e.target));
     }, ut = (e) => {
+      I(T(e.target));
+    }, ft = (e) => {
       const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
@@ -189,6 +189,6 @@ e.addEventListener("click", (i) => {
             return;
-          o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
+          o.size && Array.from(o).reverse().map((f) => c.get(f).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, ft = (e) => {
+    }, bt = (e) => {
       const t = b.get(e.target);
@@ -205,3 +205,3 @@ t && t.size && t.forEach((i) => {
           const o = /* @__PURE__ */ new Set();
-          o.add(e), b.set(t, o), ut(t), t.addEventListener("reset", ft), t.addEventListener("input", mt), t.addEventListener("change", pt);
+          o.add(e), b.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", pt), t.addEventListener("change", ut);
         }
@@ -232,3 +232,3 @@ y.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
     }
-    class bt {
+    class gt {
       constructor() {
@@ -238,3 +238,3 @@ this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
     }
-    const gt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), yt = (e, t, i) => (e.valid = wt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && I(i), e), wt = (e) => {
+    const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && I(i), e), xt = (e) => {
       let t = !0;
@@ -284,3 +284,3 @@ for (let i in e)
     }
-    function xt(e, t, i, r, o) {
+    function Et(e, t, i, r, o) {
       if (r === "m")
@@ -295,5 +295,5 @@ throw new TypeError("Private method is not writable");
     var M;
-    class Et {
+    class zt {
       constructor(t) {
-        M.set(this, void 0), xt(this, M, t, "f");
+        M.set(this, void 0), Et(this, M, t, "f");
         for (let i = 0; i < t.length; i++) {
@@ -318,3 +318,3 @@ let r = t[i];
     }
-    function zt() {
+    function kt() {
       const e = HTMLFormElement.prototype.checkValidity;
@@ -335,7 +335,7 @@ HTMLFormElement.prototype.checkValidity = i;
         get(...s) {
-          const l = o.call(this, ...s), u = Array.from(b.get(this) || []);
-          if (u.length === 0)
+          const l = o.call(this, ...s), f = Array.from(b.get(this) || []);
+          if (f.length === 0)
             return l;
-          const d = Array.from(l).concat(u).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
-          return new Et(d);
+          const v = Array.from(l).concat(f).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
+          return new zt(v);
         }
@@ -351,4 +351,4 @@ });
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), r = new bt();
-        this.states = new $(t), n.set(this, t), a.set(this, r), c.set(t, this), ct(t, this), ht(t, this), Object.seal(this), i instanceof DocumentFragment && vt(i);
+        const i = t.getRootNode(), r = new gt();
+        this.states = new $(t), n.set(this, t), a.set(this, r), c.set(t, this), dt(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
       }
@@ -415,9 +415,9 @@ checkValidity() {
           l[x] = t[x];
-        Object.keys(l).length === 0 && gt(s);
-        const u = { ...s, ...l };
-        delete u.valid;
-        const { valid: d } = yt(s, u, this.form);
-        if (!d && !i)
+        Object.keys(l).length === 0 && yt(s);
+        const f = { ...s, ...l };
+        delete f.valid;
+        const { valid: v } = wt(s, f, this.form);
+        if (!v && !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.");
-        f.set(this, d ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
+        u.set(this, v ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
       }
@@ -430,3 +430,3 @@ get shadowRoot() {
         const t = n.get(this);
-        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
+        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
       }
@@ -442,3 +442,3 @@ get validity() {
     }
-    function kt() {
+    function Mt() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
@@ -501,4 +501,4 @@ return !1;
             if (K.set(this, o), V()) {
-              const s = new MutationObserver(R);
-              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), k.set(this, s);
+              const s = new MutationObserver(_);
+              window.ShadyDOM ? s.observe(this, R) : s.observe(o, R), k.set(this, s);
             }
@@ -510,15 +510,15 @@ return o;
         }
-        V() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
+        V() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (kt() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : lt(!1)), E.forceCustomStateSetPolyfill = W, E.forceElementInternalsPolyfill = lt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
+    return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : lt(!1)), E.forceCustomStateSetPolyfill = W, E.forceElementInternalsPolyfill = lt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
   })({});
 })();
-var Rt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, m = (E, n, a, h) => {
-  for (var c = h > 1 ? void 0 : h ? _t(n, a) : n, f = E.length - 1, y; f >= 0; f--)
-    (y = E[f]) && (c = (h ? y(n, a, c) : y(c)) || c);
-  return h && c && Rt(n, a, c), c;
+var _t = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, h = (E, n, a, m) => {
+  for (var c = m > 1 ? void 0 : m ? Rt(n, a) : n, u = E.length - 1, y; u >= 0; u--)
+    (y = E[u]) && (c = (m ? y(n, a, c) : y(c)) || c);
+  return m && c && _t(n, a, c), c;
 };
 const C = "pie-button";
-class v extends Ft(Mt) {
+class d extends Ft(Ct) {
   constructor() {
@@ -545,6 +545,8 @@ super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (n) => {
   updated(n) {
-    var h, c;
+    var c, u;
     super.updated(n);
     const [a] = this._iconSlotElement;
-    a && (this.size === "xsmall" && a.setAttribute("size", "xs"), (this.size === "small-expressive" || this.size === "small-productive") && a.setAttribute("size", "s"), (this.size === "medium" || this.size === "large") && a.setAttribute("size", "m")), n.has("type") && (this.type === "submit" ? (h = this.form) == null || h.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
+    a && (this.size === "xsmall" && a.setAttribute("size", "xs"), (this.size === "small-expressive" || this.size === "small-productive") && a.setAttribute("size", "s"), (this.size === "medium" || this.size === "large") && a.setAttribute("size", "m"));
+    const [m] = this._testSlotElement;
+    m && m.setAttribute("size", "small"), n.has("type") && (this.type === "submit" ? (c = this.form) == null || c.addEventListener("keydown", this._handleFormKeyDown) : (u = this.form) == null || u.removeEventListener("keydown", this._handleFormKeyDown));
   }
@@ -574,8 +576,8 @@ /**
   renderSpinner() {
-    const { size: n, variant: a, disabled: h } = this, c = n && n.includes("small") ? "small" : "medium";
-    let f;
-    return h ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
+    const { size: n, variant: a, disabled: m } = this, c = n && n.includes("small") ? "small" : "medium";
+    let u;
+    return m ? u = a === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
                     <pie-spinner
                         size="${c}"
-                        variant="${f}">
+                        variant="${u}">
                     </pie-spinner>`;
@@ -587,5 +589,5 @@ }
       disabled: a,
-      isFullWidth: h,
+      isFullWidth: m,
       variant: c,
-      size: f,
+      size: u,
       isLoading: y,
@@ -602,6 +604,6 @@ isResponsive: k,
                 variant=${c || "primary"}
-                size=${f || "medium"}
+                size=${u || "medium"}
                 responsiveSize=${At(S)}
                 ?disabled=${a}
-                ?isFullWidth=${h}
+                ?isFullWidth=${m}
                 ?isResponsive=${k}
@@ -611,2 +613,3 @@ ?isLoading=${y}>
                     ${b === "leading" ? N`<slot name="icon"></slot>` : B}
+                    <slot name="test"></slot>
                     <slot></slot>
@@ -621,61 +624,64 @@ ${b === "trailing" ? N`<slot name="icon"></slot>` : B}
 }
-v.styles = Ct(Pt);
-m([
+d.styles = St(Pt);
+h([
   p(),
   P(C, It, "medium")
-], v.prototype, "size", 2);
-m([
+], d.prototype, "size", 2);
+h([
   p(),
   P(C, Tt, "submit")
-], v.prototype, "type", 2);
-m([
+], d.prototype, "type", 2);
+h([
   p(),
   P(C, Vt, "primary")
-], v.prototype, "variant", 2);
-m([
+], d.prototype, "variant", 2);
+h([
   p({ type: String }),
   P(C, Nt, "leading")
-], v.prototype, "iconPlacement", 2);
-m([
+], d.prototype, "iconPlacement", 2);
+h([
   p({ type: Boolean })
-], v.prototype, "disabled", 2);
-m([
+], d.prototype, "disabled", 2);
+h([
   p({ type: Boolean, reflect: !0 })
-], v.prototype, "isLoading", 2);
-m([
+], d.prototype, "isLoading", 2);
+h([
   p({ type: Boolean })
-], v.prototype, "isFullWidth", 2);
-m([
+], d.prototype, "isFullWidth", 2);
+h([
   p({ type: Boolean })
-], v.prototype, "isResponsive", 2);
-m([
+], d.prototype, "isResponsive", 2);
+h([
   p({ type: String })
-], v.prototype, "name", 2);
-m([
+], d.prototype, "name", 2);
+h([
   p({ type: String })
-], v.prototype, "value", 2);
-m([
+], d.prototype, "value", 2);
+h([
   p()
-], v.prototype, "formaction", 2);
-m([
+], d.prototype, "formaction", 2);
+h([
   p()
-], v.prototype, "formenctype", 2);
-m([
+], d.prototype, "formenctype", 2);
+h([
   p()
-], v.prototype, "formmethod", 2);
-m([
+], d.prototype, "formmethod", 2);
+h([
   p({ type: Boolean })
-], v.prototype, "formnovalidate", 2);
-m([
+], d.prototype, "formnovalidate", 2);
+h([
   p()
-], v.prototype, "formtarget", 2);
-m([
+], d.prototype, "formtarget", 2);
+h([
   p({ type: String })
-], v.prototype, "responsiveSize", 2);
-m([
-  St({ slot: "icon" })
-], v.prototype, "_iconSlotElement", 2);
-Lt(C, v);
+], d.prototype, "responsiveSize", 2);
+h([
+  ct({ slot: "icon" })
+], d.prototype, "_iconSlotElement", 2);
+h([
+  ct({ slot: "test" })
+], d.prototype, "_testSlotElement", 2);
+Lt(C, d);
 export {
-  v as PieButton,
+  d as PieButton,
   qt as formEncodingtypes,
@@ -682,0 +688,0 @@ Ut as formMethodTypes,

dist/react.d.ts

@@ -99,2 +99,3 @@ import type { CSSResult } from 'lit';
  * @slot icon - The icon slot
+ * @slot test - Testing the attribute reassignment
  * @slot - Default slot
@@ -123,2 +124,3 @@ */
     _iconSlotElement: Array<HTMLElement>;
+    _testSlotElement: Array<HTMLElement>;
     /**
@@ -125,0 +127,0 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.0.0-snapshot-release-20240412121709",
+  "version": "0.0.0-snapshot-release-20240412134443",
   "description": "PIE design system button built using web components",
@@ -5,0 +5,0 @@ "type": "module",

src/index.ts

@@ -22,2 +22,3 @@ import {
  * @slot icon - The icon slot
+ * @slot test - Testing the attribute reassignment
  * @slot - Default slot
@@ -61,2 +62,9 @@ */
 
+        // Testing setting attributes to a default slot while icon component doesn't work in ssr
+        const [testElement] = this._testSlotElement;
+
+        if (testElement) {
+            testElement.setAttribute('size', 'small');
+        }
+
         if (changedProperties.has('type')) {
@@ -127,2 +135,5 @@ // If the new type is "submit", add the keydown event listener
 
+    @queryAssignedElements({ slot: 'test' })
+        _testSlotElement!: Array<HTMLElement>;
+
     /**
@@ -265,2 +276,3 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                    <slot name="test"></slot>
                     <slot></slot>
@@ -267,0 +279,0 @@ ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}

No alert changes

Improved metrics

Total package byte prevSize

96688

increased by1.18%

Lines of code

1921

increased by1.53%

No dependency changes