@3mo/data-grid
Version:
A data grid web component
42 lines (41 loc) • 1.58 kB
JavaScript
import { __decorate } from "tslib";
import { property, html, staticHtml } from '@a11d/lit';
import { hasChanged } from '@a11d/equals';
import { FieldDateTimePrecision } from '@3mo/date-time-fields';
import { DataGridColumnComponent } from '../DataGridColumnComponent.js';
/**
* @attr formatOptions - Options to pass to DateTime.prototype.format()
* @attr precision - The precision of the date/time.
* @attr pickerHidden - Hides the date/time picker
*/
export class DataGridColumnDateTimeBase extends DataGridColumnComponent {
constructor() {
super(...arguments);
this.precision = FieldDateTimePrecision.Minute;
this.pickerHidden = false;
}
getFormatOptions(defaultPrecision) {
return this.formatOptions || (this.precision === defaultPrecision ? undefined : this.precision.formatOptions);
}
getEditContentTemplate(value, data) {
return html `
${staticHtml `
<${this.fieldTag} dense autofocus selectOnFocus
.precision=${this.precision}
?pickerHidden=${this.pickerHidden}
.value=${value}
@change=${(e) => this.handleEdit(e.detail, data)}
></${this.fieldTag}>
`}
`;
}
}
__decorate([
property({ type: Object, hasChanged })
], DataGridColumnDateTimeBase.prototype, "formatOptions", void 0);
__decorate([
property({ type: String, converter: value => FieldDateTimePrecision.parse(value || undefined) })
], DataGridColumnDateTimeBase.prototype, "precision", void 0);
__decorate([
property({ type: Boolean })
], DataGridColumnDateTimeBase.prototype, "pickerHidden", void 0);