tp-radio/tp-radio.js

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

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

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

        .circle {
          display: flex;
          align-items: center;
          justify-content: center;
          border: solid 1px var(--tp-radio-color, #000);
          background: var(--tp-radio-bg, #fff);
          border-radius: 100%;
          width: var(--tp-radio-width, 18px);
          height: var(--tp-radio-height, 18px);
        }

        .dot {
          border-radius: 100%;
          background: var(--tp-radio-dot-color, var(--tp-radio-color, #000));
          width: calc(var(--tp-radio-width, 18px) - 4px);
          height: calc(var(--tp-radio-height, 18px) - 4px);
          opacity: 0;
        }

        .dot[visible] {
          opacity: 1;
        }

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

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

  render() {
    const { checked } = this;

    return html`
      <div class="wrap" part="wrap" @click=${this.check}>
        <div class="circle" part="circle">
          <div class="dot" ?visible=${checked}></div>
        </div>
        <div class="label" part="label"><slot></slot></div>
      </div>
    `;
  }

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

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

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

  check() {
    this.checked = true;
    this.dispatchEvent(new CustomEvent('checked', { detail: this.value, bubbles: true, composed: true }));
  }

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

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

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

window.customElements.define('tp-radio', TpRadio);