tp-pending-text/tp-pending-text.js

/**
@license
Copyright (c) 2023 trading_peter
This program is available under Apache License Version 2.0
*/

import { LitElement, html, css } from 'lit';

class TpPendingText extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: inline-block;
          --tp-pending-text-color: #039BE5;
          --tp-pending-text-faded: #039ae516;
          --tp-pending-text-dot-size: 5px;
        }

        .content {
          display: flex;
          flex-direction: row;
          align-items: baseline;
          padding-right: calc(3 * var(--tp-pending-text-dot-size) + 15px);
        }

        .dot-flashing {
          position: relative;
          right: calc(var(--tp-pending-text-dot-size)*-3);
          width: var(--tp-pending-text-dot-size);
          height: var(--tp-pending-text-dot-size);
          border-radius: 5px;
          background-color: var(--tp-pending-text-color);
          color: var(--tp-pending-text-color);
          animation: dot-flashing 1s infinite linear alternate;
          animation-delay: 0.5s;
        }

        .dot-flashing::before, .dot-flashing::after {
          content: "";
          display: inline-block;
          position: absolute;
          top: 0;
        }

        .dot-flashing::before {
          left: calc(-5px - var(--tp-pending-text-dot-size));
          width: var(--tp-pending-text-dot-size);
          height: var(--tp-pending-text-dot-size);
          border-radius: var(--tp-pending-text-dot-size);
          background-color: var(--tp-pending-text-color);
          color: var(--tp-pending-text-color);
          animation: dot-flashing 1s infinite alternate;
          animation-delay: 0s;
        }

        .dot-flashing::after {
          left: calc(5px + var(--tp-pending-text-dot-size));
          width: var(--tp-pending-text-dot-size);
          height: var(--tp-pending-text-dot-size);
          border-radius: 5px;
          background-color: var(--tp-pending-text-color);
          color: var(--tp-pending-text-color);
          animation: dot-flashing 1s infinite alternate;
          animation-delay: 1s;
        }

        @keyframes dot-flashing {
          0% {
            background-color: var(--tp-pending-text-color);
          }
          50%, 100% {
            background-color: var(--tp-pending-text-faded);
          }
        }
      `
    ];
  }

  render() {
    return html`
      <div class="content">
        <div>
          <slot></slot>
        </div>
        <div class="dot-flashing"></div>
      </div>
    `;
  }
}

window.customElements.define('tp-pending-text', TpPendingText);