dees-catalog/ts_web/elements/dees-input-radio.ts

120 lines
2.6 KiB
TypeScript
Raw Normal View History

2020-09-13 16:24:48 +00:00
import {customElement, LitElement, TemplateResult, property, html} from 'lit-element';
2021-08-19 22:25:14 +00:00
import * as domtools from '@designestate/dees-domtools';
2020-09-13 16:24:48 +00:00
2021-03-06 15:48:02 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-input-radio': DeesInputRadio;
}
}
2020-09-13 16:24:48 +00:00
@customElement('dees-input-radio')
export class DeesInputRadio extends LitElement {
public static demo = () => html`<dees-input-radio></dees-input-radio>`;
2021-08-19 22:25:14 +00:00
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
2020-09-13 16:24:48 +00:00
@property()
public key: string;
@property()
public label: string = 'Label';
@property()
public value: boolean = false;
2021-08-25 11:51:55 +00:00
@property({
type: Boolean,
})
public required: boolean = false;
constructor() {
super();
}
2020-09-13 16:24:48 +00:00
public render(): TemplateResult {
return html `
<style>
* {
box-sizing: border-box;
}
:host {
display: block;
position: relative;
margin: 20px 0px;
cursor: pointer;
}
.maincontainer {
transition: all 0.3s;
display: grid;
grid-template-columns: 25px auto;
padding: 5px 0px;
color: #ccc;
}
.maincontainer:hover {
color: #fff;
}
.label {
margin-left: 15px;
line-height: 25px;
font-size: 14px;
font-weight: normal;
}
input:focus {
outline: none;
border-bottom: 1px solid #e4002b;
}
.checkbox {
transition: all 0.3s;
box-sizing: border-box;
border-radius: 20px;
border: 1px solid #999;
height: 24px;
width: 24px;
display: inline-block;
background: #222;
}
.checkbox.selected {
background: #039BE5;
border: 1px solid #039BE5;
}
.maincontainer:hover .checkbox.selected {
background: #03A9F4;
}
.innercircle {
transition: all 0.3s;
margin: 6px 0px 0px 6px;
background: #222;
width: 10px;
height: 10px;
border-radius: 10px;
}
</style>
<div class="maincontainer" @click="${this.toggleSelected}">
<div class="checkbox ${this.value ? 'selected' : ''}">
${this.value ? html`<div class="innercircle"></div>`: html``}
</div>
<div class="label">${this.label}</div>
</div>
`;
}
public async toggleSelected () {
this.value = !this.value;
this.dispatchEvent(new CustomEvent('newValue', {
detail: this.value,
bubbles: true
}));
2021-08-19 22:25:14 +00:00
this.changeSubject.next(this);
2020-09-13 16:24:48 +00:00
}
}