92 lines
1.9 KiB
JavaScript
92 lines
1.9 KiB
JavaScript
/**
|
|
@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);
|