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);
          min-width: var(--tp-checkbox-width, 18px);
          min-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: flex-start;
        }

        .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 fill="var(--tp-checkbox-icon-color)" 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 },
      invalid: { type: Boolean, 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;
    this.dispatchEvent(new CustomEvent('toggled', { detail: this.checked, bubbles: true, composed: true }));
  }

  updated(changes) {
    if (changes.has('checked')) {
      this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true }));
    }
  }

  validate() {
    if (this.required && !this.checked) {
      this.invalid = true;
      return false;
    }

    this.invalid = false;
    return true;
  }

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

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

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