@3mo/data-grid
Version:
A data grid web component
51 lines (50 loc) • 1.65 kB
JavaScript
import { __decorate } from "tslib";
import { component, html, ifDefined, property, style } from '@a11d/lit';
import { DataGridColumnComponent } from './DataGridColumnComponent.js';
/**
* @element mo-data-grid-column-image
*
* @attr tooltipSelector - The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.
*/
let DataGridColumnImage = class DataGridColumnImage extends DataGridColumnComponent {
constructor() {
super(...arguments);
this.nonSortable = true;
this.nonEditable = true;
this.getEditContentTemplate = undefined;
}
getContentTemplate(value, data) {
if (!value) {
return html.nothing;
}
const tooltipText = this.getTooltipText(data);
return !value ? html.nothing : html `
<img
title=${ifDefined(tooltipText)}
alt=${ifDefined(tooltipText)}
${style({ verticalAlign: 'middle' })}
src=${value}
onload='this.hidden = false'
onerror='this.hidden = true'
>
`;
}
*generateCsvValue(value, data) {
value;
yield this.getTooltipText(data) ?? '';
}
getTooltipText(data) {
return !this.tooltipSelector
? undefined
: typeof this.tooltipSelector === 'function'
? this.tooltipSelector(data)
: KeyPath.get(data, this.tooltipSelector);
}
};
__decorate([
property()
], DataGridColumnImage.prototype, "tooltipSelector", void 0);
DataGridColumnImage = __decorate([
component('mo-data-grid-column-image')
], DataGridColumnImage);
export { DataGridColumnImage };