diff --git a/src/textswitch.js b/src/textswitch.js new file mode 100644 index 0000000000000000000000000000000000000000..3ae72322cfbc18353ad35e43ae790a4818e8e6e0 --- /dev/null +++ b/src/textswitch.js @@ -0,0 +1,101 @@ +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> + `; + } +} diff --git a/src/vpu-qualified-signature-pdf-upload.js b/src/vpu-qualified-signature-pdf-upload.js index b2d6f83e924960e700978834a7877d3177d16903..0561c44e6f2f337171222ed406cac4e66c06b27e 100644 --- a/src/vpu-qualified-signature-pdf-upload.js +++ b/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">