128 lines
3.0 KiB
JavaScript
128 lines
3.0 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2022 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import '@tp/tp-icon/tp-icon.js';
|
|
import { FormElement } from '@tp/helpers/form-element';
|
|
import { ControlState } from '@tp/helpers/control-state';
|
|
import { Inert } from '@tp/helpers/inert';
|
|
import { LitElement, html, css, svg } from 'lit';
|
|
|
|
class TpCheckbox extends Inert(ControlState(FormElement(LitElement))) {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: solid 2px #000;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
width: var(--tp-checkbox-width, 18px);
|
|
height: var(--tp-checkbox-height, 18px);
|
|
min-width: var(--tp-checkbox-width, 18px);
|
|
min-height: var(--tp-checkbox-height, 18px);
|
|
}
|
|
|
|
tp-icon {
|
|
--tp-icon-width: var(--tp-checkbox-width, 18px);
|
|
--tp-icon-height: var(--tp-checkbox-height, 18px);
|
|
}
|
|
|
|
.wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.label {
|
|
margin-left: 8px;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
const { checked } = this;
|
|
|
|
return html`
|
|
<div class="wrap" part="wrap" @click=${this.toggle}>
|
|
<div class="box" part="box">
|
|
<tp-icon ?hidden=${!checked} .icon=${TpCheckbox.checkedIcon}></tp-icon>
|
|
</div>
|
|
<div class="label" part="label"><slot></slot></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static get checkedIcon() {
|
|
return svg`<path fill="var(--tp-checkbox-icon-color)" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
checked: { type: Boolean, reflect: true },
|
|
role: { type: String, reflect: true },
|
|
invalid: { type: Boolean, reflect: true },
|
|
_value: { type: String },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.role = 'checkbox';
|
|
this.checked = false;
|
|
this._value = '';
|
|
}
|
|
|
|
firstUpdated() {
|
|
super.firstUpdated();
|
|
this.setAttribute('tabindex', '0');
|
|
}
|
|
|
|
toggle() {
|
|
this.checked = !this.checked;
|
|
this.dispatchEvent(new CustomEvent('toggled', { detail: this.checked, bubbles: true, composed: true }));
|
|
}
|
|
|
|
updated(changes) {
|
|
if (changes.has('checked')) {
|
|
this.dispatchEvent(new CustomEvent('checked-changed', { detail: this.checked, bubbles: true, composed: true }));
|
|
}
|
|
}
|
|
|
|
validate() {
|
|
if (this.required && !this.checked) {
|
|
this.invalid = true;
|
|
return false;
|
|
}
|
|
|
|
this.invalid = false;
|
|
return true;
|
|
}
|
|
|
|
get value() {
|
|
if (this._value !== '' && this._value !== null && this._value !== undefined) {
|
|
return this._value;
|
|
}
|
|
return this.checked;
|
|
}
|
|
|
|
set value(val) {
|
|
this._value = val || '';
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-checkbox', TpCheckbox);
|