tp-checkbox/tp-checkbox.js

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

import '@tp/tp-icon/tp-icon.js';
import { FormElement } from '@tp/helpers/form-element';
import { ControlState } from '@tp/helpers/control-state';
import { Inert } from '@tp/helpers/inert';
import { LitElement, html, css, svg } from 'lit';

class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
  static get styles() {
    return [
      css`
        :host {
          display: block;
          cursor: pointer;
        }

        [hidden] {
          display: none;
        }

        .box {
          display: flex;
          align-items: center;
          justify-content: center;
          border: solid 2px #000;
          background: #fff;
          border-radius: 2px;
          width: var(--tp-checkbox-width, 18px);
          height: var(--tp-checkbox-height, 18px);
        }

        tp-icon {
          --tp-icon-width: var(--tp-checkbox-width, 18px);
          --tp-icon-height: var(--tp-checkbox-height, 18px);
        }

        .wrap {
          display: flex;
          align-items: center;
        }

        .label {
          margin-left: 8px;
        }
      `
    ];
  }

  render() {
    const { checked } = this;

    return html`
      <div class="wrap" part="wrap" @click=${this.toggle}>
        <div class="box" part="box">
          <tp-icon ?hidden=${!checked} .icon=${TpCheckbox.checkedIcon}></tp-icon>
        </div>
        <div class="label" part="label"><slot></slot></div>
      </div>
    `;
  }

  static get checkedIcon() {
    return svg`<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />`;
  }

  static get properties() {
    return {
      checked: { type: Boolean, reflect: true },
      role: { type: String, reflect: true },
      _value: { type: String },
    };
  }

  constructor() {
    super();
    this.role = 'checkbox';
    this.checked = false;
    this._value = '';
  }

  firstUpdated() {
    super.firstUpdated();
    this.setAttribute('tabindex', '0');
  }

  toggle() {
    this.checked = !this.checked;
  }

  get value() {
    if (this._value !== '') {
      return this._value;
    }
    return this.checked;
  }

  set value(val) {
    this._value = val;
  }
}

window.customElements.define('tp-checkbox', TpCheckbox);