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

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

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

declare global {
  interface HTMLElementTagNameMap {
    'dees-button': DeesButton;
  }
}

@customElement('dees-button')
export class DeesButton extends DeesElement {
  public static demo = () => html`<dees-button></dees-button>`

  @property()
  text: string;

  @property()
  eventDetailData: string;

  @property()
  disabled = false;

  @property()
  isHidden = false;

  @property()
  public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';

  constructor() {
    super();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          display: block;
          box-sizing: border-box;
        }
        :host([hidden]) {
          display: none;
        }

        .button {
          transition: all 0.2s ease;
          font-size: 14px;
          display: block;
          text-align: center;
          background: ${this.goBright ? '#eee' : '#333'};
          border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
          border-radius: 2px;
          line-height: 40px;
          padding: 0px 10px;
          min-width: 100px;
          user-select: none;
          color: ${this.goBright ? '#333' : ' #ccc'};
        }

        .button:hover {
          cursor: pointer;
          background: #039BE5;
          border-top: 1px solid #039BE5;
          color: #ffffff;
        }

        .button:active {
          background: #0277BD;
          border-top: 1px solid #0277BD;
        }

        .button.disabled {
          background: #fff;
          border: 1px solid #eeeff3;
          color: #9b9b9e;
          cursor: default;
        }

        .button.highlighted {
          background: #e4002b;
          color: #fff;
        }

        .button.discreet {
          background: none;
          border: 1px solid #9b9b9e;
          color: #000;
        }

        .button.discreet:hover {
          background: rgba(0,0,0,0.1)
        }
        .hidden {
            display: none;
        }

        .big {
          display: inline-block;
          line-height: 48px;
          font-size: 16px;
          padding: 0px 48px;
          margin-top: 36px;
        }
      </style>
      <div class="button ${this.isHidden ? 'hidden' : 'block'}  ${this.type} ${this.disabled ? 'disabled' : null}" @click="${this.dispatchClick}">
        ${this.text ? this.text : this.textContent}
      </div>
    `;
  }

  public async dispatchClick() {
    if (this.disabled) {

      return;
    }

    this.dispatchEvent(new CustomEvent('clicked', {
      detail: {
        data: this.eventDetailData
      },
      bubbles: true
    }));
  }

  public async firstUpdated () {
    if (!this.textContent) {
      this.textContent = 'Button';
      this.performUpdate();
    }
  }
}