@justeattakeaway/pie-spinner 0.3.0 → 0.3.2

package/dist/index.js

@@ -1,65 +1,47 @@
-import { unsafeCSS as f, LitElement as h, html as v, nothing as m } from "lit";
-import { property as c } from "lit/decorators.js";
-const b = (n, e, o) => function(s, i) {
-  const t = `#${i}`;
-  Object.defineProperty(s, i, {
-    get() {
-      return this[t];
-    },
-    set(l) {
-      e.includes(l) ? this[t] = l : (console.error(
-        `<${n}> Invalid value "${l}" provided for property "${i}".`,
-        `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${o}"`
-      ), this[t] = o);
-    },
-    configurable: !0
-  });
+import { unsafeCSS as b, LitElement as m, html as v, nothing as h } from "lit";
+import { property as l } from "lit/decorators.js";
+import { validPropertyValues as d, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
+const z = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner[variant=secondary]{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner[variant=inverse]{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner[size=xsmall]{--spinner-size: 16px}.c-spinner[size=small]{--spinner-size: 20px}.c-spinner[size=large]{--spinner-size: 32px}.c-spinner[size=xlarge]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
+`, u = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"];
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (i, n, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? g(n, s) : n, a = i.length - 1, t; a >= 0; a--)
+    (t = i[a]) && (e = (r ? t(n, s, e) : t(e)) || e);
+  return r && e && y(n, s, e), e;
 };
-function u(n, e) {
-  customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
-}
-const y = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner[variant=secondary]{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner[variant=inverse]{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner[size=xsmall]{--spinner-size: 16px}.c-spinner[size=small]{--spinner-size: 20px}.c-spinner[size=large]{--spinner-size: 32px}.c-spinner[size=xlarge]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
-`, z = ["xsmall", "small", "medium", "large", "xlarge"], g = ["brand", "secondary", "inverse"];
-var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (n, e, o, r) => {
-  for (var s = r > 1 ? void 0 : r ? P(e, o) : e, i = n.length - 1, t; i >= 0; i--)
-    (t = n[i]) && (s = (r ? t(e, o, s) : t(s)) || s);
-  return r && s && x(e, o, s), s;
-};
-const d = "pie-spinner";
-class a extends h {
+const c = "pie-spinner";
+class o extends m {
   constructor() {
     super(...arguments), this.size = "medium", this.variant = "brand";
   }
   render() {
-    const { variant: e, size: o, aria: r } = this;
+    const { variant: n, size: s, aria: r } = this;
     return v`
             <div 
                 data-test-id="pie-spinner"
                 class="c-spinner"
                 role="status"
                 aria-live="polite"
-                size="${o}"
-                variant="${e}">
-                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : m}
+                size="${s}"
+                variant="${n}">
+                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : h}
                 </div>`;
   }
 }
-a.styles = f(y);
+o.styles = b(z);
 p([
-  c({ type: Object })
-], a.prototype, "aria", 2);
+  l({ type: Object })
+], o.prototype, "aria", 2);
 p([
-  c(),
-  b(d, z, "medium")
-], a.prototype, "size", 2);
+  l(),
+  d(c, u, "medium")
+], o.prototype, "size", 2);
 p([
-  c(),
-  b(d, g, "brand")
-], a.prototype, "variant", 2);
-u(d, a);
+  l(),
+  d(c, x, "brand")
+], o.prototype, "variant", 2);
+f(c, o);
 export {
-  a as PieSpinner,
-  z as sizes,
-  g as variants
+  o as PieSpinner,
+  u as sizes,
+  x as variants
 };

package/dist/react.js

@@ -1,10 +1,11 @@
 import * as e from "react";
 import { createComponent as r } from "@lit/react";
 import { PieSpinner as i } from "./index.js";
-import { sizes as c, variants as f } from "./index.js";
+import { sizes as f, variants as P } from "./index.js";
 import "lit";
 import "lit/decorators.js";
-const m = r({
+import "@justeattakeaway/pie-webc-core";
+const a = r({
   displayName: "PieSpinner",
   elementClass: i,
   react: e,
@@ -12,7 +13,7 @@ const m = r({
   events: {}
 });
 export {
-  m as PieSpinner,
-  c as sizes,
-  f as variants
+  a as PieSpinner,
+  f as sizes,
+  P as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.0"
+    "@justeattakeaway/pie-components-config": "0.7.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.12.0"
+    "@justeattakeaway/pie-webc-core": "0.14.0"
   },
   "volta": {
     "extends": "../../../package.json"