@justeattakeaway/pie-spinner 1.0.1 → 1.1.1

package/custom-elements.json

@@ -118,8 +118,8 @@
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-spinner",
           "customElement": true

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import type { TemplateResult } from 'lit-html';
 
 declare type AriaProps = {
@@ -14,7 +14,7 @@ export declare const defaultProps: DefaultProps;
 /**
  * @tagname pie-spinner
  */
-export declare class PieSpinner extends LitElement implements SpinnerProps {
+export declare class PieSpinner extends PieElement implements SpinnerProps {
     aria: SpinnerProps['aria'];
     size: "xsmall" | "small" | "medium" | "large" | "xlarge";
     variant: "brand" | "secondary" | "inverse";

package/dist/index.js

@@ -1,60 +1,73 @@
-import { LitElement as m, html as b, nothing as f, unsafeCSS as u } from "lit";
-import { property as t } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
+import { LitElement as m, html as b, nothing as u, unsafeCSS as y } from "lit";
+import { property as l } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
 import { validPropertyValues as h, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
-const g = "*,*:after,*:before{box-sizing:inherit}@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.c-spinner--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.c-spinner--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.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", x = ["xsmall", "small", "medium", "large", "xlarge"], w = ["brand", "secondary", "inverse"], i = {
+var x = Object.defineProperty, _ = (i, e, n, c) => {
+  for (var r = void 0, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(e, n, r) || r);
+  return r && x(e, n, r), r;
+};
+class f extends m {
+  constructor() {
+    super(...arguments), this.v = "1.1.1";
+  }
+}
+_([
+  l({ type: String, reflect: !0 })
+], f.prototype, "v");
+const $ = "*,*:after,*:before{box-sizing:inherit}@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.c-spinner--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.c-spinner--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.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["xsmall", "small", "medium", "large", "xlarge"], P = ["brand", "secondary", "inverse"], a = {
   size: "medium",
   variant: "brand"
 };
-var $ = Object.defineProperty, a = (p, r, s, d) => {
-  for (var e = void 0, o = p.length - 1, v; o >= 0; o--)
-    (v = p[o]) && (e = v(r, s, e) || e);
-  return e && $(r, s, e), e;
+var C = Object.defineProperty, p = (i, e, n, c) => {
+  for (var r = void 0, s = i.length - 1, o; s >= 0; s--)
+    (o = i[s]) && (r = o(e, n, r) || r);
+  return r && C(e, n, r), r;
 };
-const l = "pie-spinner", c = class c extends m {
+const d = "pie-spinner", v = class v extends f {
   constructor() {
-    super(...arguments), this.size = i.size, this.variant = i.variant;
+    super(...arguments), this.size = a.size, this.variant = a.variant;
   }
   render() {
-    const { variant: r, size: s } = this, d = {
+    const { variant: e, size: n } = this, c = {
       "c-spinner": !0,
-      [`c-spinner--${s}`]: !0,
-      [`c-spinner--${r}`]: !0
+      [`c-spinner--${n}`]: !0,
+      [`c-spinner--${e}`]: !0
     };
     return b`
             <div
                 data-test-id="pie-spinner"
-                class="${y(d)}"
+                class="${g(c)}"
                 role="status"
                 aria-live="polite">
                 ${this.renderAriaLabel()}
             </div>`;
   }
   renderAriaLabel() {
-    var r;
-    return (r = this.aria) != null && r.label ? b`
+    var e;
+    return (e = this.aria) != null && e.label ? b`
         <span class="c-spinner-label">
             ${this.aria.label}
-        </span>` : f;
+        </span>` : u;
   }
 };
-c.styles = u(g);
-let n = c;
-a([
-  t({ type: Object })
-], n.prototype, "aria");
-a([
-  t({ type: String }),
-  h(l, x, i.size)
-], n.prototype, "size");
-a([
-  t({ type: String }),
-  h(l, w, i.variant)
-], n.prototype, "variant");
-z(l, n);
+v.styles = y($);
+let t = v;
+p([
+  l({ type: Object })
+], t.prototype, "aria");
+p([
+  l({ type: String }),
+  h(d, w, a.size)
+], t.prototype, "size");
+p([
+  l({ type: String }),
+  h(d, P, a.variant)
+], t.prototype, "variant");
+z(d, t);
 export {
-  n as PieSpinner,
-  i as defaultProps,
-  x as sizes,
-  w as variants
+  t as PieSpinner,
+  a as defaultProps,
+  w as sizes,
+  P as variants
 };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
-import type { LitElement } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
@@ -17,7 +17,7 @@ export declare const PieSpinner: React_2.ForwardRefExoticComponent<SpinnerProps
 /**
  * @tagname pie-spinner
  */
-declare class PieSpinner_2 extends LitElement implements SpinnerProps {
+declare class PieSpinner_2 extends PieElement implements SpinnerProps {
     aria: SpinnerProps['aria'];
     size: "xsmall" | "small" | "medium" | "large" | "xlarge";
     variant: "brand" | "secondary" | "inverse";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,13 +39,14 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.15.1",
+    "@justeattakeaway/pie-components-config": "0.19.1",
+    "@justeattakeaway/pie-css": "0.16.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.2"
+    "@justeattakeaway/pie-webc-core": "0.25.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -1,6 +1,7 @@
 import {
-    LitElement, html, nothing, unsafeCSS,
+    html, nothing, unsafeCSS,
 } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -20,7 +21,7 @@ const componentSelector = 'pie-spinner';
 /**
  * @tagname pie-spinner
  */
-export class PieSpinner extends LitElement implements SpinnerProps {
+export class PieSpinner extends PieElement implements SpinnerProps {
     @property({ type: Object })
     public aria: SpinnerProps['aria'];
 

package/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.scss?inline' {
-    const content: Record<string, string>;
-    export default content;
-}