import {Checkbox} from '@material/mwc-checkbox';
import {html, LitElement} from 'lit';
import {property, queryAssignedElements} from 'lit/decorators.js';
export interface CellCheckedEventDetail {
checked: boolean
}
export class DataTableCellBase extends LitElement {
/**
* Cell type. If `checkbox`, the checkbox inside the cell will also be created if not supplied via default slot.
* If `numeric`, the cell text will be aligned to the right.
*/
@property({type: String, reflect: true}) type?: '' | 'numeric' | 'checkbox';
/** @internal */
@queryAssignedElements({selector: 'mwc-checkbox', flatten: true}) protected checkboxSlotElements!: Checkbox[];
/** @internal */
get checkbox(): Checkbox | undefined {
return this.checkboxSlotElements?.[0];
}
render() {
return html`
${this.renderCheckbox()}
`;
}
renderCheckbox() {
if (this.type === 'checkbox') {
return html``;
}
return;
}
onSlotChanged() {
this.requestUpdate();
this.checkbox?.removeEventListener('change', this.onCheckboxClicked);
this.checkbox?.addEventListener('change', this.onCheckboxClicked);
}
onCheckboxClicked = (e: Event) => {
const checkbox = e.target as Checkbox;
/**
* Event emitted when the cell checkbox has been checked or unchecked.
*
* Event detail: `CellCheckedEventDetail`.
*/
this.dispatchEvent(new CustomEvent('checked', {
detail: {
checked: checkbox.checked
}
}));
};
}