@3mo/data-grid
Version:
A data grid web component
57 lines (56 loc) • 1.92 kB
JavaScript
import { __decorate } from "tslib";
import { component, html, property, style } from '@a11d/lit';
import { DataGridColumnComponent } from './DataGridColumnComponent.js';
/**
* @element mo-data-grid-column-boolean
*
* @attr trueIcon - Icon to show for true values
* @attr falseIcon - Icon to show for false values
* @attr trueIconColor - Color of the true icon
* @attr falseIconColor - Color of the false icon
*/
let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumnComponent {
constructor() {
super(...arguments);
this.trueIcon = 'done';
this.falseIcon = 'clear';
this.trueIconColor = 'var(--mo-color-accent)';
this.falseIconColor = 'var(--mo-color-gray)';
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
getContentTemplate(value, _data) {
return html `
<mo-flex justifyContent='center' ${style({ height: '100%' })}>
<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
</mo-flex>
`;
}
getEditContentTemplate(value, data) {
return html `
<mo-checkbox autofocus
?selected=${value}
@change=${(e) => this.handleEdit(e.detail, data)}
${style({ justifySelf: this.textAlign })}
></mo-checkbox>
`;
}
*generateCsvValue(value) {
yield value ? 'TRUE' : 'FALSE';
}
};
__decorate([
property()
], DataGridColumnBoolean.prototype, "trueIcon", void 0);
__decorate([
property()
], DataGridColumnBoolean.prototype, "falseIcon", void 0);
__decorate([
property()
], DataGridColumnBoolean.prototype, "trueIconColor", void 0);
__decorate([
property()
], DataGridColumnBoolean.prototype, "falseIconColor", void 0);
DataGridColumnBoolean = __decorate([
component('mo-data-grid-column-boolean')
], DataGridColumnBoolean);
export { DataGridColumnBoolean };