@3mo/data-grid
Version:
A data grid web component
32 lines (31 loc) • 1.14 kB
JavaScript
import { __decorate } from "tslib";
import { component, html, ifDefined } from '@a11d/lit';
import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
/** @element mo-data-grid-column-percent */
let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNumberBase {
getContentTemplate(value, data) {
data;
return html `${this.getNumber(value)?.formatAsPercent() ?? html.nothing}`;
}
getEditContentTemplate(value, data) {
return html `
<mo-field-percent dense autofocus selectOnFocus
min=${ifDefined(this.getMin(data))}
max=${ifDefined(this.getMax(data))}
step=${ifDefined(this.getStep(data))}
value=${ifDefined(value)}
@change=${(e) => this.handleEdit(e.detail, data)}
></mo-field-percent>
`;
}
getSumTemplate(sum) {
return html `${sum.formatAsPercent()}`;
}
*generateCsvHeading() {
yield* [...super.generateCsvHeading()].map(heading => `${heading} (%)`);
}
};
DataGridColumnPercent = __decorate([
component('mo-data-grid-column-percent')
], DataGridColumnPercent);
export { DataGridColumnPercent };