textswitch.js

import {html, LitElement, css} from 'lit';
import * as commonStyles from '@dbp-toolkit/common/styles';

const BUTTON1 = 'button1';
const BUTTON2 = 'button2';

/**
 * Attributes:
 *  value1/value2: The values of the buttons
 *  name1/name2: The names of the buttons
 *  name: The active name
 *  disabled: Disable the switch
 *
 * Events:
 *  change: when button is clicked
 *
 * Example:
 *  <my-tag name="one" name1="one" name2="two" value1="One", value2="Two"></my-tag>
 */
export class TextSwitch extends LitElement {
    constructor() {
        super();
        this.value1 = '';
        this.value2 = '';
        this.name1 = '';
        this.name2 = '';
        this.name = '';
        this.disabled = false;
        this._active = BUTTON1;
    }

    static get properties() {
        return {
            value1: {type: String},
            value2: {type: String},
            name1: {type: String},
            name2: {type: String},
            name: {type: String, reflect: true},
            disabled: {type: Boolean},
            _active: {type: Boolean},
        };
    }

    static get styles() {
        // language=css
        return css`
            ${commonStyles.getThemeCSS()}
            ${commonStyles.getButtonCSS()}

            div {
                white-space: nowrap;
                display: flex;
            }

            #button1 {
                border-right-width: 0;
            }

            .button:first-child {
                border-radius: var(--dbp-border-radius) 0 0 var(--dbp-border-radius);
                margin-right: 0px;
            }

            .button:last-child {
                border-radius: 0 var(--dbp-border-radius) var(--dbp-border-radius) 0;
                margin-left: 0px;
            }

            .active {
                background-color: var(--dbp-secondary) !important;