tp-multi-toggle/tp-multi-toggle.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 { LitElement, html, css } from 'lit';
import { closest } from '@tp/helpers/closest.js';

class TpMultiToggle extends FormElement(LitElement) {
  static get styles() {
    return [
      css`
        :host {
          display: flex;
          flex-direction: row;
          align-items: center;
        }

        ::slotted(tp-button) {
          border-radius: 0;
          flex: 1;
        }

        ::slotted(tp-button:not([selected])) {
          border-radius: 0;
        }

        ::slotted(tp-button:first-of-type) {
          border-radius: 4px 0 0 4px;
        }

        ::slotted(tp-button:last-of-type) {
          border-radius: 0 4px 4px 0;
        }

        ::slotted(tp-button:not(:last-of-type)) {
          margin-right: 1px;
        }
      `
    ];
  }

  render() {
    return html`
      <slot></slot>
    `;
  }

  static get properties() {
    return {
      attr: { type: String },
    };
  }

  get value() {
    const btn = this.querySelector('tp-button[selected]');

    if (btn) {
      return btn.getAttribute(this.attr || 'id');
    }
  }

  constructor() {
    super();
    this.boundClick = this.onClick.bind(this);
  }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.boundClick);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('click', this.boundClick);
  }

  onClick(e) {
    const btn = closest(e.target, 'tp-button', true);

    if (btn) {
      this.querySelectorAll('tp-button').forEach(el => el.removeAttribute('selected'));
      btn.setAttribute('selected', '');
      this.dispatchEvent(new CustomEvent('selection-changed', { detail: this.value, bubbles: true, composed: true }));
    }
  }
}

window.customElements.define('to-multi-toggle', TpMultiToggle);