Initial version

tp-multi-toggle.js

@@ -0,0 +1,91 @@
+/**
+@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);