Skip to content
Snippets Groups Projects
Commit ff65809f authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Add a very basic text switch web component

MVP, hardcoded to two elements for now to keep it simple.
parent ce0516a6
No related branches found
No related tags found
No related merge requests found
Pipeline #11016 passed
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>
`;
}
}
......@@ -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">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment