Add a very basic text switch web component

MVP, hardcoded to two elements for now to keep it simple.

src/textswitch.js

+import {html, LitElement, css} from 'lit-element';
+import * as commonStyles from 'vpu-common/styles';
+
+const BUTTON1 = "button1";
+const BUTTON2 = "button2";
+
+/**
+ * Attributes:
+ *  value1/value2: The values of the buttons
+ *  name1/name2: The names of the buttons
+ *  name: Tshe active name
+ *  disabled: Disable the switch
+ * 
+ * Events:
+ *  change: emitted when the active name changes
+ * 
+ * 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()}
+
+            #button1 {
+                border-right-width: 0;
+            }
+
+            .active {
+                background-color: var(--vpu-primary-bg-color) !important;
+                color: var(--vpu-primary-text-color) !important;
+            }
+        `;
+    }
+
+    update(changedProperties) {
+        changedProperties.forEach((oldValue, propName) => {
+            if (propName === "name") {
+                if (this[propName] == this.name1) {
+                    this._active = BUTTON1;
+                }
+                if (this[propName] == this.name2) {
+                    this._active = BUTTON2;
+                }
+            } else if (propName === "_active") {
+                const event = new CustomEvent("change", {
+                    bubbles: true,
+                    cancelable: false,
+                });
+                this.dispatchEvent(event);
+            }
+        });
+
+        if (this._active === BUTTON1) {
+            this.name = this.name1;
+        } else {
+            this.name = this.name2;
+        }
+
+        super.update(changedProperties);
+    }
+
+    render() {
+        const onClick = function (e) {
+            this._active = e.target.id;
+        };
+
+        return html`
+            <button @click="${onClick}" class="button ${this._active === BUTTON1 ? `active` : ``}" id="${BUTTON1}" ?disabled="${this.disabled}">
+                ${this.value1}
+            </button><button @click="${onClick}" class="button ${this._active === BUTTON2 ? `active` : ``}" id="${BUTTON2}" ?disabled="${this.disabled}">
+                ${this.value2}
+            </button>
+        `;
+    }
+}

src/vpu-qualified-signature-pdf-upload.js

@@ -13,6 +13,7 @@ import * as commonStyles from 'vpu-common/styles';
 import {classMap} from 'lit-html/directives/class-map.js';
 import {FileUpload} from 'vpu-file-upload';
 import JSONLD from "vpu-common/jsonld";
+import {TextSwitch} from './textswitch.js';
 
 const i18n = createI18nInstance();
 
@@ -49,6 +50,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
           'vpu-pdf-preview': PdfPreview,
           'vpu-mini-spinner': MiniSpinner,
           'vpu-button': Button,
+          'vpu-textswitch': TextSwitch,
         };
     }
 
@@ -507,6 +509,7 @@ class QualifiedSignaturePdfUpload extends ScopedElementsMixin(VPUSignatureLitEle
     render() {
         return html`
             <div class="${classMap({hidden: !this.isLoggedIn() || !this.hasSignaturePermissions() || this.isLoading()})}">
+                <vpu-textswitch name1="auto" name2="manual" value1="Automatic" value2="Manual" @change=${ (e) => console.log(e.target.name) }></vpu-textswitch>
                 <div class="field">
                     <h2>${i18n.t('qualified-pdf-upload.upload-field-label')}</h2>
                     <div class="control">