dees-catalog/ts_web/elements/dees-spinner.ts

import {
  customElement,
  html,
  DeesElement,
  property,
  TemplateResult,
  cssManager,
  css,
  unsafeCSS,
} from '@designestate/dees-element';

import * as domtools from '@designestate/dees-domtools';

declare global {
  interface HTMLElementTagNameMap {
    'dees-spinner': DeesSpinner;
  }
}

@customElement('dees-spinner')
export class DeesSpinner extends DeesElement {
  public static demo = () => html`
    <dees-spinner></dees-spinner>
    <dees-spinner status="success"></dees-spinner>
    <dees-spinner status="error"></dees-spinner>
    <dees-spinner size=${64} status="success"></dees-spinner>
    <dees-spinner .size=${64} status="error"></dees-spinner>
  `;

  @property({
    type: Number,
  })
  public size = 20;

  @property({
    type: String,
  })
  public bnw: boolean = false;

  @property()
  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
      }

      #loading {
        position: relative;
        transition: none;
        display: flex;
        justify-content: center;
        align-content: center;
        background: #8bc34a00;
        border: 3px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.3)')};
        border-radius: 50%;
        border-top-color: ${cssManager.bdTheme('#333', '#fff')};
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
      }

      #loading.success {
        border: none;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }

      #loading.error {
        border: none;
        border-radius: 50%;
        animation: none;
        -webkit-animation: none;
      }

      @keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }
      @-webkit-keyframes spin {
        to {
          -webkit-transform: rotate(360deg);
        }
      }

      dees-icon {
        position: absolute;
        height: 100%;
        width: 100%;
      }
    `,
  ];

  render() {
    return html`
      <style>
        #loading {
          width: ${this.size}px;
          height: ${this.size}px;
        }
        #loading.success {
          color: ${cssManager.bdTheme(this.bnw ? '#333': `#8bc34a`, this.bnw ? '#fff' : `#8bc34a`)};
          
        }
        #loading.error {
          color: ${cssManager.bdTheme(this.bnw ? '#333': `#e64a19`, this.bnw ? '#fff' : `#e64a19`)};
        }
        dees-icon {
          font-size: ${this.size}px;
        }
      </style>
      <div class="${this.status}" id="loading">
        ${(() => {
          if (this.status === 'success') {
            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
          } else if (this.status === 'error') {
            return  html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
          }
        })()}
      </div>
    `;
  }
}