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

184 lines
4.1 KiB
TypeScript
Raw Normal View History

2021-08-25 11:51:55 +00:00
import {
customElement,
DeesElement,
2023-08-07 18:02:18 +00:00
type TemplateResult,
2021-08-25 11:51:55 +00:00
property,
html,
2021-08-26 19:30:35 +00:00
css,
2023-08-07 18:02:18 +00:00
cssManager,
type CSSResult,
2023-08-07 17:13:29 +00:00
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
2020-09-13 16:24:48 +00:00
2021-03-06 15:48:02 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-input-checkbox': DeesInputCheckbox;
}
}
2020-09-13 16:24:48 +00:00
@customElement('dees-input-checkbox')
2020-12-09 23:05:13 +00:00
export class DeesInputCheckbox extends DeesElement {
2021-08-19 22:25:14 +00:00
// STATIC
2020-09-13 16:24:48 +00:00
public static demo = () => html`<dees-input-checkbox></dees-input-checkbox>`;
2021-08-25 11:51:55 +00:00
2021-08-19 22:25:14 +00:00
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
2020-09-13 16:24:48 +00:00
2021-08-25 11:51:55 +00:00
@property({
type: String,
2023-08-28 07:49:51 +00:00
reflect: true,
2021-08-25 11:51:55 +00:00
})
2020-09-13 16:24:48 +00:00
public key: string;
2021-08-25 11:51:55 +00:00
@property({
type: String,
})
2020-09-13 16:24:48 +00:00
public label: string = 'Label';
2021-08-25 11:51:55 +00:00
@property({
type: Boolean,
})
2020-09-13 16:24:48 +00:00
public value: boolean = false;
2021-08-25 11:51:55 +00:00
@property({
type: Boolean,
})
public required: boolean = false;
2021-08-19 22:25:14 +00:00
2021-08-26 19:30:35 +00:00
@property({
type: Boolean
})
public disabled: boolean = false;
2020-09-13 16:24:48 +00:00
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
* {
box-sizing: border-box;
}
:host {
display: block;
position: relative;
margin: 20px 0px;
cursor: pointer;
}
.maincontainer {
display: grid;
grid-template-columns: 25px auto;
padding: 5px 0px;
2020-12-09 23:05:13 +00:00
color: ${this.goBright ? '#333' : '#ccc'};
2020-09-13 16:24:48 +00:00
}
.maincontainer:hover {
2020-12-09 23:05:13 +00:00
${this.goBright ? '#000' : '#ccc'};
2020-09-13 16:24:48 +00:00
}
.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.1s;
box-sizing: border-box;
2020-12-09 23:05:13 +00:00
border: 1px solid ${this.goBright ? '#CCC' : '#999'};
2020-09-13 16:24:48 +00:00
border-radius: 2px;
height: 24px;
width: 24px;
display: inline-block;
2020-12-09 23:05:13 +00:00
background: ${this.goBright ? '#fafafa' : '#222'};
2020-09-13 16:24:48 +00:00
}
.checkbox.selected {
background: #039BE5;
border: 1px solid #039BE5;
}
2021-08-26 19:30:35 +00:00
.checkbox.disabled {
background: none;
border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
}
2021-08-27 11:38:08 +00:00
.checkbox .checkmark {
2020-09-13 16:24:48 +00:00
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
2021-08-27 11:38:08 +00:00
.checkbox .checkmark_stem {
2020-09-13 16:24:48 +00:00
position: absolute;
width: 3px;
height: 9px;
2021-08-27 11:38:08 +00:00
background-color: #fff;
2020-09-13 16:24:48 +00:00
left: 11px;
top: 6px;
}
2021-08-27 11:38:08 +00:00
.checkbox .checkmark_kick {
2020-09-13 16:24:48 +00:00
position: absolute;
width: 3px;
height: 3px;
background-color: #fff;
left: 8px;
top: 12px;
}
2021-08-27 11:38:08 +00:00
.checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
background-color: ${cssManager.bdTheme('#333', '#fff')};
}
2020-09-13 16:24:48 +00:00
img {
padding: 4px;
}
</style>
<div class="maincontainer" @click="${this.toggleSelected}">
2023-08-19 09:47:45 +00:00
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
2020-09-13 16:24:48 +00:00
${this.value
? html`
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
`
: html``}
</div>
<div class="label">${this.label}</div>
</div>
`;
}
public async toggleSelected() {
2021-08-26 19:30:35 +00:00
if (this.disabled) {
return;
}
2020-09-13 16:24:48 +00:00
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
}
2023-08-19 09:47:45 +00:00
public focus(): void {
const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
if (checkboxDiv) {
(checkboxDiv as any).focus();
}
}
2020-09-13 16:24:48 +00:00
}