import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-input-checkbox': DeesInputCheckbox; } } @customElement('dees-input-checkbox') export class DeesInputCheckbox extends DeesElement { // STATIC public static demo = () => html``; // INSTANCE public changeSubject = new domtools.rxjs.Subject(); @property({ type: String, }) public key: string; @property({ type: String, }) public label: string = 'Label'; @property({ type: Boolean, }) public value: boolean = false; @property({ type: Boolean, }) public required: boolean = false; @property({ type: Boolean }) public disabled: boolean = false; public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
${this.value ? html`
` : html``}
${this.label}
`; } public async toggleSelected() { if (this.disabled) { return; } this.value = !this.value; this.dispatchEvent( new CustomEvent('newValue', { detail: this.value, bubbles: true, }) ); this.changeSubject.next(this); } public focus(): void { const checkboxDiv = this.shadowRoot.querySelector('.checkbox'); if (checkboxDiv) { (checkboxDiv as any).focus(); } } }