Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@justeattakeaway/pie-spinner
Advanced tools
@justeattakeaway/pie-spinner - npm Package Compare versions
Comparing version 0.0.0-snapshot-release-20240516144918 to 0.0.0-snapshot-release-20240619133108
| import { unsafeCSS as h, LitElement as m, html as d, nothing as z } from "lit"; | ||
| import { property as p } from "lit/decorators.js"; | ||
| import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core"; | ||
| const u = `*,*: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[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} | ||
| `, y = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"], s = { | ||
| const u = `*,*: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);--spinner-animation-speed: 1.15s;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 var(--spinner-animation-speed) 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} | ||
| `, y = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"], o = { | ||
| size: "medium", | ||
| variant: "brand" | ||
| }; | ||
| var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, n, i, e) => { | ||
| for (var r = e > 1 ? void 0 : e ? w(n, i) : n, t = a.length - 1, l; t >= 0; t--) | ||
| (l = a[t]) && (r = (e ? l(n, i, r) : l(r)) || r); | ||
| return e && r && g(n, i, r), r; | ||
| var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, n, s, e) => { | ||
| for (var r = e > 1 ? void 0 : e ? w(n, s) : n, t = a.length - 1, l; t >= 0; t--) | ||
| (l = a[t]) && (r = (e ? l(n, s, r) : l(r)) || r); | ||
| return e && r && g(n, s, r), r; | ||
| }; | ||
| const v = "pie-spinner"; | ||
| class o extends m { | ||
| class i extends m { | ||
| constructor() { | ||
| super(...arguments), this.size = s.size, this.variant = s.variant; | ||
| super(...arguments), this.size = o.size, this.variant = o.variant; | ||
| } | ||
| render() { | ||
| const { variant: n, size: i, aria: e } = this; | ||
| const { variant: n, size: s, aria: e } = this; | ||
| return d` | ||
@@ -27,4 +27,4 @@ <div | ||
| aria-live="polite" | ||
| size="${i || s.size}" | ||
| variant="${n || s.variant}"> | ||
| size="${s}" | ||
| variant="${n}"> | ||
| ${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : z} | ||
@@ -34,20 +34,20 @@ </div>`; | ||
| } | ||
| o.styles = h(u); | ||
| i.styles = h(u); | ||
| c([ | ||
| p({ type: Object }) | ||
| ], o.prototype, "aria", 2); | ||
| ], i.prototype, "aria", 2); | ||
| c([ | ||
| p(), | ||
| b(v, y, s.size) | ||
| ], o.prototype, "size", 2); | ||
| b(v, y, o.size) | ||
| ], i.prototype, "size", 2); | ||
| c([ | ||
| p(), | ||
| b(v, x, s.variant) | ||
| ], o.prototype, "variant", 2); | ||
| f(v, o); | ||
| b(v, x, o.variant) | ||
| ], i.prototype, "variant", 2); | ||
| f(v, i); | ||
| export { | ||
| o as PieSpinner, | ||
| s as defaultProps, | ||
| i as PieSpinner, | ||
| o as defaultProps, | ||
| y as sizes, | ||
| x as variants | ||
| }; |
| { | ||
| "name": "@justeattakeaway/pie-spinner", | ||
| "description": "PIE Design System Spinner built using Web Components", | ||
| "version": "0.0.0-snapshot-release-20240516144918", | ||
| "version": "0.0.0-snapshot-release-20240619133108", | ||
| "type": "module", | ||
@@ -40,7 +40,7 @@ "main": "dist/index.js", | ||
| "@justeattakeaway/pie-components-config": "0.16.0", | ||
| "@justeattakeaway/pie-wrapper-react": "0.14.0", | ||
| "@justeattakeaway/pie-wrapper-react": "0.14.1", | ||
| "cem-plugin-module-file-extensions": "0.0.5" | ||
| }, | ||
| "dependencies": { | ||
| "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240516144918" | ||
| "@justeattakeaway/pie-webc-core": "0.23.0" | ||
| }, | ||
@@ -47,0 +47,0 @@ "volta": { |
@@ -32,7 +32,5 @@ <p align="center"> | ||
| ```bash | ||
| # npm | ||
| $ npm i @justeattakeaway/pie-spinner | ||
| npm i @justeattakeaway/pie-spinner | ||
| # yarn | ||
| $ yarn add @justeattakeaway/pie-spinner | ||
| yarn add @justeattakeaway/pie-spinner | ||
| ``` | ||
@@ -94,2 +92,2 @@ | ||
| 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). |
@@ -44,4 +44,4 @@ import { | ||
| aria-live="polite" | ||
| size="${size || defaultProps.size}" | ||
| variant="${variant || defaultProps.variant}"> | ||
| size="${size}" | ||
| variant="${variant}"> | ||
| ${aria?.label ? html`<span class="c-spinner-label">${aria.label}</span>` : nothing} | ||
@@ -48,0 +48,0 @@ </div>`; |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.03%
20726
Worsened metrics
- Number of lines in readme file
- decreased by-1.08%
92
Dependency changes
+ Added@justeattakeaway/pie-webc-core@0.23.0(transitive)
- Removed@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240516144918(transitive)