113 lines
2.5 KiB
JavaScript
113 lines
2.5 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 { ControlState } from '@tp/helpers/control-state.js';
|
|
import { Inert } from '@tp/helpers/inert';
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
class TpRadio extends Inert(ControlState(FormElement(LitElement))) {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.circle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: solid 1px var(--tp-radio-color, #000);
|
|
background: var(--tp-radio-bg, #fff);
|
|
border-radius: 100%;
|
|
width: var(--tp-radio-width, 18px);
|
|
height: var(--tp-radio-height, 18px);
|
|
}
|
|
|
|
.dot {
|
|
border-radius: 100%;
|
|
background: var(--tp-radio-dot-color, var(--tp-radio-color, #000));
|
|
width: calc(var(--tp-radio-width, 18px) - 4px);
|
|
height: calc(var(--tp-radio-height, 18px) - 4px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.dot[visible] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
margin-left: 8px;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
const { checked } = this;
|
|
|
|
return html`
|
|
<div class="wrap" part="wrap" @click=${this.check}>
|
|
<div class="circle" part="circle">
|
|
<div class="dot" ?visible=${checked}></div>
|
|
</div>
|
|
<div class="label" part="label"><slot></slot></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
checked: { type: Boolean, reflect: true },
|
|
role: { type: String, reflect: true },
|
|
_value: { type: String },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.role = 'radio';
|
|
this.checked = false;
|
|
this._value = '';
|
|
}
|
|
|
|
firstUpdated() {
|
|
super.firstUpdated();
|
|
this.setAttribute('tabindex', '0');
|
|
}
|
|
|
|
check() {
|
|
this.checked = true;
|
|
this.dispatchEvent(new CustomEvent('checked', { detail: this.value, bubbles: true, composed: true }));
|
|
}
|
|
|
|
updated(changes) {
|
|
if (changes.has('checked')) {
|
|
this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.value, bubbles: true, composed: true }));
|
|
}
|
|
}
|
|
|
|
get value() {
|
|
if (!this._value !== '') {
|
|
return this._value;
|
|
}
|
|
return this.checked;
|
|
}
|
|
|
|
set value(val) {
|
|
this._value = val;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-radio', TpRadio);
|