import { LitElement, customElement, html, internalProperty, property, query, unsafeCSS } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import { event, EventEmitter } from '../../internal/event';
import styles from 'sass:./checkbox.scss';
let id = 0;
/**
* @since 2.0
* @status stable
*
* @slot - The checkbox's label.
*
* @part base - The component's base wrapper.
* @part control - The checkbox control.
* @part checked-icon - The container the wraps the checked icon.
* @part indeterminate-icon - The container that wraps the indeterminate icon.
* @part label - The checkbox label.
*/
@customElement('sl-checkbox')
export class SlCheckbox extends LitElement {
static styles = unsafeCSS(styles);
@query('input[type="checkbox"]') input: HTMLInputElement;
private inputId = `checkbox-${++id}`;
private labelId = `checkbox-label-${id}`;
@internalProperty() private hasFocus = false;
/** The checkbox's name attribute. */
@property({ reflect: true }) name: string;
/** The checkbox's value attribute. */
@property() value: string;
/** Disables the checkbox. */
@property({ type: Boolean, reflect: true }) disabled = false;
/** Makes the checkbox a required field. */
@property({ type: Boolean, reflect: true }) required = false;
/** Draws the checkbox in a checked state. */
@property({ type: Boolean, reflect: true }) checked = false;
/** Draws the checkbox in an indeterminate state. */
@property({ type: Boolean, reflect: true }) indeterminate = false;
/** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
@property({ type: Boolean, reflect: true }) invalid = false;
/** Emitted when the control loses focus. */
@event('sl-blur') slBlur: EventEmitter;
/** Emitted when the control's checked state changes. */
@event('sl-change') slChange: EventEmitter;
/** Emitted when the control gains focus. */
@event('sl-focus') slFocus: EventEmitter;
firstUpdated() {
this.input.indeterminate = this.indeterminate;
}
/** Sets focus on the checkbox. */
setFocus(options?: FocusOptions) {
this.input.focus(options);
}
/** Removes focus from the checkbox. */
removeFocus() {
this.input.blur();
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
return this.input.reportValidity();
}
/** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
setCustomValidity(message: string) {
this.input.setCustomValidity(message);
this.invalid = !this.input.checkValidity();
}
handleClick() {
this.checked = !this.checked;
this.indeterminate = false;
}
handleBlur() {
this.hasFocus = false;
this.slBlur.emit();
}
handleFocus() {
this.hasFocus = true;
this.slFocus.emit();
}
handleLabelMouseDown(event: MouseEvent) {
// Prevent clicks on the label from briefly blurring the input
event.preventDefault();
this.input.focus();
}
handleStateChange() {
if (this.input) {
this.input.checked = this.checked;
this.input.indeterminate = this.indeterminate;
this.slChange.emit();
}
}
checkedChanged() {
this.handleStateChange();
}
indeterminateChanged() {
this.handleStateChange();
}
render() {
return html`
`;
}
}