@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/loading-spinner/loading-spinner.js

@@ -1,814 +1,151 @@
-import { css as p, html as t, nothing as m } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as g } from "../cre8-element.js";
-const h = p`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './loading-spinner.styles.js';
 /**
- * Visually hidden from display
+ * A loading spinner notifies the user that their request is being processed while the front end is retrieving data
+ * or performing slow computations.
+ *
+ * Providing visibility of a system's status is one of the most important rules of UI design. When the user has to
+ * guess or assume that the system is responding to their input, they may send a command such as submit multiple
+ * times, while also being anxious that the application is frozen or not working.
+ *
+ * While it is most ideal to improve system performance such that there is no perceptible delay, in some cases this
+ * is not possible. In these cases, the immediate response should be a progress indicator to give a visual indication
+ * that their command was received and that the application is working.
+ *
+ * The length of time for the system response is a good general guideline for which progress indicator to use.
+ *
+ * ## Determinable vs indeterminate progress
+ *
+ * A progress meter provides feedback that the system is working and gives the user an indication of how much time
+ * they will wait. This indicator should be used when the system response time is longer and determinable. See
+ * ProgressMeter component for further examples and accessibility considerations.
+ *
+ * ## How to Use
+ *
+ * The loading-spinner component can be used to indicate loading state on the component level all the way up to the
+ * page level. There are two loading styles: determinate (loading progress represents percentage of total load time)
+ * and indeterminate (a spinning animation that persists while loading continues)
+ *
+ * 1. Choose determinate or indeterminate. UX best practices leans more towards recommending the indeterminate
+ * progress indicator if load time is unknown, while determinate is less user friendly unless the label indicates
+ * the percentage loaded as well.
+ * 2. Choose a size and use it according to context, guidance should be given by your design or content team.
+ * 3. A common label to use is `Loading…`, guidance should be given by your design content team.
+ * 4. If you choose to use the determinate loader then you must also control the progress attribute's value which
+ * controls the percentage of the circle that shows (values 0-100 accepted);
+ * 5. For dark backgrounds, add the `inverse` attribute to the `<cre8-loading-spinner>` tag.
+ * 6. For accessibility reasons, always include a label input unless explicitly informed to do otherwise by design or
+ * accessibility teams.
+ * 7. The lg variant is usually suitable for containers or block level loading placeholders while the sm size is
+ * meant for more inline loading states.
+ *
  */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+export class Cre8LoadingSpinner extends Cre8Element {
+    constructor() {
+        super();
+        /**
+         * Progress to display, between 0 and 100. Requires determinate property to be set to true.
+         * */
+        this.progress = 0;
+        /**
+         * Size of the progress indicator and position of the label, if a label has been defined using the label property.
+         * - **large** renders a large progress indicator at 72px in width/height with the label below.
+         * - **small** renders a small progress indicator at 24px in width/height with the label to the right.
+         */
+        this.size = 'large';
+        const randomId = Math.floor(Math.random() * 900000) + 100000;
+        this.labelId = `cre8-spinner-${randomId}`;
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
-    }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/* ------------------------------------ *\\
-#SPINNER
-\\* ------------------------------------ */
-@keyframes loading {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes spinner-circle-animation {
-  0%, 25% {
-    stroke-dashoffset: 280;
-    transform: rotate(0);
-  }
-  50%, 75% {
-    stroke-dashoffset: 75;
-    transform: rotate(45deg);
-  }
-  100% {
-    stroke-dashoffset: 280;
-    transform: rotate(360deg);
-  }
-}
-:host {
-  display: inline-block;
-  --spinner-stroke-dasharray: 282.743px;
-  --spinner-large-stroke-width: 10;
-  --spinner-small-stroke-width: 14;
-  --spinner-large-width: 4.5rem;
-  --spinner-small-width: 1.5rem;
-  font-family: var(--cre8-typography-label-small-font-family);
-  font-size: var(--cre8-typography-label-small-font-size);
-  font-weight: var(--cre8-typography-label-small-font-weight);
-  line-height: var(--cre8-typography-label-small-line-height);
-  text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-}
-
-.cre8-c-spinner,
-.cre8-c-spinner--large {
-  --spinner-height: var(--spinner-large-width);
-  --spinner-width: var(--spinner-large-width);
-  --icon-color: var(--cre8-color-content-brand);
-}
-.cre8-c-spinner .cre8-c-spinner__icon,
-.cre8-c-spinner--large .cre8-c-spinner__icon {
-  display: block;
-}
-.cre8-c-spinner .cre8-c-spinner__label,
-.cre8-c-spinner--large .cre8-c-spinner__label {
-  display: block;
-  margin-top: var(--cre8-spacing-8);
-}
-
-.cre8-c-spinner--small {
-  --spinner-height: var(--spinner-small-width);
-  --spinner-width: var(--spinner-small-width);
-  --icon-color: var(--cre8-color-content-brand);
-  display: flex;
-  align-items: center;
-}
-.cre8-c-spinner--small .cre8-c-spinner__label {
-  display: inline-block;
-  margin-left: var(--cre8-spacing-8);
-  margin-top: 0;
-  vertical-align: 0.35rem;
-}
-
-.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-content-brand-knockout);
-  --label-color: var(--cre8-color-content-brand-knockout);
-}
-
-.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral {
-  --icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-  --label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
-}
-
-.cre8-c-spinner--neutral {
-  --icon-color: var(--cre8-color-button-secondary-neutral-content-active);
-}
-
-.cre8-c-spinner--primary.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-button-primary-inverse-content-active);
-}
-
-.cre8-c-spinner--secondary.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-button-secondary-inverse-content-active);
-}
-
-.cre8-c-spinner--tertiary.cre8-c-spinner--inverse {
-  --icon-color: var(--cre8-color-button-tertiary-inverse-content-active);
-}
-
-.cre8-c-spinner__label {
-  color: var(--label-color, var(--cre8-color-content-default));
-}
-
-.cre8-c-spinner__hidden-label {
-  display: none;
-}
-
-.cre8-c-spinner__icon {
-  height: var(--spinner-height, 1em);
-  width: var(--spinner-width, 1em);
-}
-.cre8-c-spinner__icon circle {
-  fill: transparent;
-  stroke: var(--icon-color, inherit);
-  stroke-dasharray: var(--spinner-stroke-dasharray);
-  stroke-linecap: round;
-  stroke-width: var(--spinner-large-stroke-width);
-  transform-origin: 50% 50%;
-}
-
-.cre8-c-spinner__icon-small circle {
-  stroke-width: var(--spinner-small-stroke-width);
-}
-
-.cre8-c-spinner--indeterminate .cre8-c-spinner__icon {
-  animation: loading 2s linear 0s infinite;
-}
-.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle {
-  animation-duration: 1.4s;
-  animation-iteration-count: infinite;
-  animation-name: spinner-circle-animation;
-  animation-timing-function: ease-in-out;
-}
-
-.cre8-c-spinner--determinate .cre8-c-spinner__icon {
-  overflow: hidden;
-  transform: rotate(-90deg);
-  transform-origin: center center;
-}`;
-var u = Object.defineProperty, n = (l, r, o, f) => {
-  for (var a = void 0, s = l.length - 1, c; s >= 0; s--)
-    (c = l[s]) && (a = c(r, o, a) || a);
-  return a && u(r, o, a), a;
-};
-const d = class d extends g {
-  constructor() {
-    super(), this.progress = 0, this.size = "large";
-    const r = Math.floor(Math.random() * 9e5) + 1e5;
-    this.labelId = `cre8-spinner-${r}`;
-  }
-  renderDeterminateSpinner() {
-    const r = Math.max(Math.min(100, this.progress === 0 ? this.progress = 1 : this.progress), 0), o = 2 * 3.1415926 * 45 - r / 100 * (2 * 3.1415926 * 45);
-    return t` ${this.size === "small" ? t`
+    renderDeterminateSpinner() {
+        const progress = Math.max(Math.min(100, this.progress === 0 ? (this.progress = 1) : this.progress), 0);
+        const dashOffset = 2 * 3.1415926 * 45 - (progress / 100) * (2 * 3.1415926 * 45);
+        return html ` ${this.size === 'small'
+            ? html `
           <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
-            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${o}"></circle>
+            <circle cx="50%" cy="50%" r="43" stroke-dashoffset="${dashOffset}"></circle>
           </svg>
-        ` : t` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
-          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${o}"></circle>
+        `
+            : html ` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
+          <circle cx="50%" cy="50%" r="45" stroke-dashoffset="${dashOffset}"></circle>
         </svg>`}`;
-  }
-  renderInDeterminateSpinner() {
-    return t` ${this.size === "small" ? t`
+    }
+    renderInDeterminateSpinner() {
+        return html ` ${this.size === 'small'
+            ? html `
           <svg class="cre8-c-spinner__icon cre8-c-spinner__icon-small" aria-hidden="true" viewBox="0 0 100 100">
             <circle cx="50%" cy="50%" r="43"></circle>
           </svg>
-        ` : t` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
+        `
+            : html ` <svg class="cre8-c-spinner__icon" aria-hidden="true" viewBox="0 0 100 100">
           <circle cx="50%" cy="50%" r="45"></circle>
         </svg>`}`;
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-spinner", {
-      "cre8-c-spinner--large": this.size === "large",
-      "cre8-c-spinner--small": this.size === "small",
-      "cre8-c-spinner--inverse": this.inverse,
-      "cre8-c-spinner--neutral": this.neutral,
-      "cre8-c-spinner--primary": this.buttonVariant === "primary",
-      "cre8-c-spinner--secondary": this.buttonVariant === "secondary",
-      "cre8-c-spinner--tertiary": this.buttonVariant === "tertiary",
-      "cre8-c-spinner--determinate": this.determinate,
-      "cre8-c-spinner--indeterminate": !this.determinate
-    });
-    return t`
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-spinner', {
+            'cre8-c-spinner--large': this.size === 'large',
+            'cre8-c-spinner--small': this.size === 'small',
+            'cre8-c-spinner--inverse': this.inverse,
+            'cre8-c-spinner--neutral': this.neutral,
+            'cre8-c-spinner--primary': this.buttonVariant === 'primary',
+            'cre8-c-spinner--secondary': this.buttonVariant === 'secondary',
+            'cre8-c-spinner--tertiary': this.buttonVariant === 'tertiary',
+            'cre8-c-spinner--determinate': this.determinate,
+            'cre8-c-spinner--indeterminate': !this.determinate,
+        });
+        return html `
       <div
-        class="${r}"
+        class="${componentClassNames}"
         role="progressbar"
         aria-labelledby="${this.labelId}"
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow="${this.determinate ? this.progress : m}"
+        aria-valuenow="${this.determinate ? this.progress : nothing}"
         part="base"
       >
         ${this.determinate ? this.renderDeterminateSpinner() : this.renderInDeterminateSpinner()}
         <div
           id="${this.labelId}"
-          class="${this.label ? "cre8-c-spinner__label" : "cre8-c-spinner__hidden-label"}"
+          class="${!this.label ? 'cre8-c-spinner__hidden-label' : 'cre8-c-spinner__label'}"
           part="label"
         >
           ${this.label}
         </div>
       </div>
     `;
-  }
-};
-d.styles = h;
-let e = d;
-n([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "determinate");
-n([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "inverse");
-n([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "neutral");
-n([
-  i()
-], e.prototype, "buttonVariant");
-n([
-  i()
-], e.prototype, "label");
-n([
-  i({ reflect: !0, type: Number })
-], e.prototype, "progress");
-n([
-  i()
-], e.prototype, "size");
-customElements.get("cre8-loading-spinner") === void 0 && customElements.define("cre8-loading-spinner", e);
-export {
-  e as Cre8LoadingSpinner,
-  e as default
-};
+    }
+}
+Cre8LoadingSpinner.styles = (styles);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LoadingSpinner.prototype, "determinate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LoadingSpinner.prototype, "inverse", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8LoadingSpinner.prototype, "neutral", void 0);
+__decorate([
+    property()
+], Cre8LoadingSpinner.prototype, "buttonVariant", void 0);
+__decorate([
+    property()
+], Cre8LoadingSpinner.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Cre8LoadingSpinner.prototype, "progress", void 0);
+__decorate([
+    property()
+], Cre8LoadingSpinner.prototype, "size", void 0);
+if (customElements.get('cre8-loading-spinner') === undefined) {
+    customElements.define('cre8-loading-spinner', Cre8LoadingSpinner);
+}
+export default Cre8LoadingSpinner;
+//# sourceMappingURL=loading-spinner.js.map