statuspage/ts_web/elements/lele-card.ts

import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';

@customElement('lele-card')
export class LeleCard extends LitElement {
  public static demo = () => html`
    <lele-card
      imgsrc="https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg"
      .links="${[
        {
          text: 'Visit Website',
          url: 'https://lossless.com'
        }
      ]}"
      .tabledata="${[
        {
          key: 'name',
          value: 'Lossless GmbH'
        },
        {
          key: 'domain',
          value: 'https://lossless.com'
        }
      ]}"
    ></lele-card>
  `;

  @property()
  public heading: string = 'loading...';

  @property()
  public imgsrc: string = 'https://assetbroker.lossless.one/brandfiles/00general/square_lossless.svg';

  @property({type: Array})
  public links: {text: string; url: string}[] = [];

  @property({type: Array})
  public tabledata: {key: string, value: string}[] = [];

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>

        :host(:hover) .mainbox {
          border-top: 1px solid var(--lelecv-color-accent, #e4002b);
        }

        :host(:hover) .mainbox .topimage img {
          filter: grayscale(0%);
        }

        .mainbox {
          display: block;
          position: relative;
          max-width: 400px;
          max-height: 600px; 
          background: #212121;
          transition: border-top 0.1s ease;
          border-top: 1px solid #444;
          box-sizing: border-box;
          border-radius: 3px;
          box-shadow: 0px 0px 6px rgba(0,0,0,0.6);
          overflow: hidden;
          min-height: 100px;
          color: #ccc;
        }

        .topimage {
          position: relative;
          width: 100%;
        }

        .topimage img {
          display: block;
          width: 100%;
          height: auto;
          min-height: 20px;
          transition: all 0.1s;
          filter: grayscale(100%);
        }

        .heading {
          font-size: 25px;
          font-weight: 100;
          position: absolute;
          padding: 10px;
          top: 55px;
          left: 0px;
        }

        .content {
          position: relative;
          padding: 10px;
          min-height: 100px;
          box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
          border-top: 1px #444 dotted;
          border-bottom: 1px #444 dotted;
        }

        .links {
          position: relative;
          height: 35px;
          text-align: right;
        }
        
        .link {
          display: inline-block; 
          padding: 0px 5px;
          line-height: 35px;
          height: 35px;
          font-size: 15px;
        }

        a {
          transition: color 0.1s ease;
          text-decoration: none;
          color: #888;
        }

        a:hover {
          color: #CCC;
        }

        .tableline {
          margin-left: -5px;
          margin-right: -5px;
          padding: 10px;
          color: #cccccc;
          font-size: 14px;
        }
        .tableline:hover {
          color: #ffffff;
        }

        .tableline:nth-child(even) {
          background: rgba(0,0,0,0.2);
        }
        .tableline .key {
          font-family: 'Roboto Mono', monospace;
          font-size: 12px;
          color: #bbbbbb;
          font-weight: bold;
        }
        .tableline .value {
          font-family: 'Roboto Mono', monospace;
        }
        
      </style>
      <div class="mainbox">
        <div class="topimage"><img src="${this.imgsrc}" width="100" height="100" loading="lazy"></div>
        <div class="content">
          <slot>
            ${this.tabledata ? this.tabledata.map(datapoint => html`
              <div class="tableline">
                <div class="key">
                  ${datapoint.key}:
                </div>
                <div class="value">
                  ${datapoint.value}
                </div>
              </div>
            `) : null}
          </slot>
        </div>
        <div class="links">
          ${this.links.map(linkArg => {
            return html`
              <div class="link"><a target="_blank" href="${linkArg.url}">${linkArg.text}</a></div>
            `;
          })}
        </div>
      </div>

    `;
  }
}