@3mo/data-grid 0.5.13 → 0.5.15

package/dist/DataGridSidePanel.js

@@ -31,133 +31,133 @@ let DataGridSidePanel = class DataGridSidePanel extends Component {
                 this.dataGrid.requestUpdate();
                 await this.dataGrid.updateComplete;
             };
-            return html `
-			<mo-checkbox ${style({ height: '30px' })}
-				label=${column.heading}
-				?selected=${column.hidden === false}
-				@change=${change}
-			></mo-checkbox>
+            return html `
+			<mo-checkbox ${style({ height: '30px' })}
+				label=${column.heading}
+				?selected=${column.hidden === false}
+				@change=${change}
+			></mo-checkbox>
 		`;
         };
     }
     static get styles() {
-        return css `
-			:host {
-				display: inline-block !important;
-				transition: 250ms;
-				width: 100%;
-				height: 100%;
-				transform-origin: right center;
-			}
-
-			:host(:not([hidden])) {
-				border-inline-start: var(--mo-data-grid-border);
-				background: var(--mo-color-transparent-gray-1);
-				opacity: 1;
-			}
-
-			:host([hidden]) {
-				opacity: 0;
-				transform: scale(0, 1);
-				width: 0;
-			}
-
-			#flexHeading {
-				border-top: var(--mo-data-grid-border);
-				border-bottom: var(--mo-data-grid-border);
-				height: var(--mo-data-grid-header-height);
-				padding-inline-start: 14px;
-			}
-
-			mo-scroller {
-				overflow-x: hidden;
-			}
-
-			mo-section {
-				padding: 10px 14px 20px;
-				border-bottom: var(--mo-data-grid-border);
-			}
-
-			mo-section::part(heading) {
-				font-size: min(1em, 14px);
-				letter-spacing: 0.15px;
-			}
+        return css `
+			:host {
+				display: inline-block !important;
+				transition: 250ms;
+				width: 100%;
+				height: 100%;
+				transform-origin: right center;
+			}
+
+			:host(:not([hidden])) {
+				border-inline-start: var(--mo-data-grid-border);
+				background: var(--mo-color-transparent-gray-1);
+				opacity: 1;
+			}
+
+			:host([hidden]) {
+				opacity: 0;
+				transform: scale(0, 1);
+				width: 0;
+			}
+
+			#flexHeading {
+				border-top: var(--mo-data-grid-border);
+				border-bottom: var(--mo-data-grid-border);
+				height: var(--mo-data-grid-header-height);
+				padding-inline-start: 14px;
+			}
+
+			mo-scroller {
+				overflow-x: hidden;
+			}
+
+			mo-section {
+				padding: 10px 14px 20px;
+				border-bottom: var(--mo-data-grid-border);
+			}
+
+			mo-section::part(heading) {
+				font-size: min(1em, 14px);
+				letter-spacing: 0.15px;
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-flex ${style({ height: '100%' })}>
-				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? html.nothing : html `
-					<mo-tab-bar ${style({ height: '60px' })}
-						value=${ifDefined(this.dataGrid.sidePanelTab)}
-						@change=${(e) => this.dataGrid.navigateToSidePanelTab(e.detail ?? DataGridSidePanelTab.Settings)}
-					>
-						<mo-tab value=${DataGridSidePanelTab.Filters}>
-							<mo-icon icon='filter_list'></mo-icon>
-							${t('Extended Filters')}
-						</mo-tab>
-						<mo-tab value=${DataGridSidePanelTab.Settings}>
-							<mo-icon icon='settings'></mo-icon>
-							${t('Settings')}
-						</mo-tab>
-					</mo-tab-bar>
-				`}
-
-				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? html.nothing : html `
-					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
-						<mo-heading typography='heading6' ${style({ flex: '1', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? 'Extended Filters' : 'Settings')}</mo-heading>
-						<mo-icon-button icon='close' dense
-							${tooltip(t('Close'))}
-							${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
-							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
-						></mo-icon-button>
-					</mo-flex>
-				`}
-
-				<mo-scroller ${style({ flex: '1' })}>
-					${this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? this.filtersTemplate : this.settingsTemplate}
-				</mo-scroller>
-			</mo-flex>
+        return html `
+			<mo-flex ${style({ height: '100%' })}>
+				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? html.nothing : html `
+					<mo-tab-bar ${style({ height: '60px' })}
+						value=${ifDefined(this.dataGrid.sidePanelTab)}
+						@change=${(e) => this.dataGrid.navigateToSidePanelTab(e.detail ?? DataGridSidePanelTab.Settings)}
+					>
+						<mo-tab value=${DataGridSidePanelTab.Filters}>
+							<mo-icon icon='filter_list'></mo-icon>
+							${t('Extended Filters')}
+						</mo-tab>
+						<mo-tab value=${DataGridSidePanelTab.Settings}>
+							<mo-icon icon='settings'></mo-icon>
+							${t('Settings')}
+						</mo-tab>
+					</mo-tab-bar>
+				`}
+
+				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? html.nothing : html `
+					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
+						<mo-heading typography='heading6' ${style({ flex: '1', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? 'Extended Filters' : 'Settings')}</mo-heading>
+						<mo-icon-button icon='close' dense
+							${tooltip(t('Close'))}
+							${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
+							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
+						></mo-icon-button>
+					</mo-flex>
+				`}
+
+				<mo-scroller ${style({ flex: '1' })}>
+					${this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? this.filtersTemplate : this.settingsTemplate}
+				</mo-scroller>
+			</mo-flex>
 		`;
     }
     get filtersTemplate() {
-        return html `
-			<mo-flex gap='14px' style='padding: 14px'>
-				<slot name='filter'></slot>
-			</mo-flex>
+        return html `
+			<mo-flex gap='14px' style='padding: 14px'>
+				<slot name='filter'></slot>
+			</mo-flex>
 		`;
     }
     get settingsTemplate() {
-        return html `
-			<mo-flex>
-				<slot name='settings'></slot>
-
-				<mo-section heading=${t('Design')}>
-					<mo-flex gap='16px'>
-						<mo-field-select label=${t('Font Size')} ${bind(this, 'dataGrid', { keyPath: 'cellFontSize' })}>
+        return html `
+			<mo-flex>
+				<slot name='settings'></slot>
+
+				<mo-section heading=${t('Design')}>
+					<mo-flex gap='16px'>
+						<mo-field-select label=${t('Font Size')} ${bind(this, 'dataGrid', { keyPath: 'cellFontSize' })}>
 							${Array.from({ length: 5 }).map((_, i) => {
             const value = 0.8 + i * 0.1;
             return html `<mo-option value=${value}>${(value * 100).formatAsPercent()}</mo-option>`;
-        })}
-						</mo-field-select>
-						<mo-field-select label=${t('Row Height')} ${bind(this, 'dataGrid', { keyPath: 'rowHeight' })}>
+        })}
+						</mo-field-select>
+						<mo-field-select label=${t('Row Height')} ${bind(this, 'dataGrid', { keyPath: 'rowHeight' })}>
 							${Array.from({ length: 7 }).map((_, i) => {
             const value = 30 + i * 5;
             return html `<mo-option value=${value}>${value}px</mo-option>`;
-        })}
-						</mo-field-select>
-					</mo-flex>
-				</mo-section>
-
-				<mo-section .heading=${html `
-					${t('Columns')}
-					<span style='color: var(--mo-color-gray)'>
-						${this.dataGrid.visibleColumns.length.format()}/${this.dataGrid.columns.length.format()}
-					</span>
-				`}>
-					${this.dataGrid.columns.map(this.getColumnTemplate)}
-				</mo-section>
-			</mo-flex>
+        })}
+						</mo-field-select>
+					</mo-flex>
+				</mo-section>
+
+				<mo-section .heading=${html `
+					${t('Columns')}
+					<span style='color: var(--mo-color-gray)'>
+						${this.dataGrid.visibleColumns.length.format()}/${this.dataGrid.columns.length.format()}
+					</span>
+				`}>
+					${this.dataGrid.columns.map(this.getColumnTemplate)}
+				</mo-section>
+			</mo-flex>
 		`;
     }
 };

package/dist/columns/DataGridColumnBoolean.js

@@ -19,18 +19,18 @@ let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
     }
     // 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>
+        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)}
-			></mo-checkbox>
+        return html `
+			<mo-checkbox autofocus
+				?selected=${value}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-checkbox>
 		`;
     }
 };

package/dist/columns/DataGridColumnImage.d.ts

@@ -1,9 +1,10 @@
 import { DataGridColumn } from './DataGridColumn.js';
 /** @element mo-data-grid-column-image */
 export declare class DataGridColumnImage<TData> extends DataGridColumn<TData, string> {
+    tooltipSelector?: KeyPathOf<TData> | ((data: TData) => string | undefined);
     nonSortable: boolean;
     nonEditable: boolean;
-    getContentTemplate(value: string | undefined, _data: TData): import("lit-html").HTMLTemplateResult;
+    getContentTemplate(value: string | undefined, data: TData): import("lit-html").HTMLTemplateResult;
     getEditContentTemplate: undefined;
 }
 declare global {

package/dist/columns/DataGridColumnImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IACnE,WAAW,UAAO;IAClB,WAAW,UAAO;IAG3B,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,KAAK;IAMjD,sBAAsB,YAAY;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}
+{"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAGpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC,CAAA;IAE7E,WAAW,UAAO;IAClB,WAAW,UAAO;IAE3B,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAsBhD,sBAAsB,YAAY;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}

package/dist/columns/DataGridColumnImage.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
-import { component, html } from '@a11d/lit';
+import { component, html, property, style } from '@a11d/lit';
 import { DataGridColumn } from './DataGridColumn.js';
+import { tooltip } from '@3mo/tooltip';
 /** @element mo-data-grid-column-image */
 let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
     constructor() {
@@ -9,13 +10,29 @@ let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
         this.nonEditable = true;
         this.getEditContentTemplate = undefined;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getContentTemplate(value, _data) {
+    getContentTemplate(value, data) {
+        if (!value) {
+            return html.nothing;
+        }
+        const tooltipText = !this.tooltipSelector
+            ? undefined
+            : typeof this.tooltipSelector === 'function'
+                ? this.tooltipSelector(data)
+                : getValueByKeyPath(data, this.tooltipSelector);
         return !value ? html.nothing : html `
-			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
+			<img
+				${tooltipText ? tooltip(tooltipText) : html.nothing}
+				${style({ verticalAlign: 'middle' })}
+				src=${value}
+				onload='this.hidden = false'
+				onerror='this.hidden = true'
+			/>
 		`;
     }
 };
+__decorate([
+    property()
+], DataGridColumnImage.prototype, "tooltipSelector", void 0);
 DataGridColumnImage = __decorate([
     component('mo-data-grid-column-image')
 ], DataGridColumnImage);

package/dist/columns/DataGridColumnText.js

@@ -8,11 +8,11 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
         return html `${value ?? ''}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-text dense label=${this.heading} autofocus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-text>
+        return html `
+			<mo-field-text dense label=${this.heading} autofocus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-text>
 		`;
     }
 };

package/dist/columns/date-time/DataGridColumnDateTimeBase.js

@@ -14,15 +14,15 @@ export class DataGridColumnDateTimeBase extends DataGridColumn {
         return this.formatOptions ?? this.constructor.defaultFormatOptions;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			${staticHtml `
-				<${this.fieldTag} dense autofocus
-					?pickerHidden=${this.pickerHidden}
-					label=${this.heading}
-					.value=${value}
-					@change=${(e) => this.handleEdit(e.detail, data)}
-				></${this.fieldTag}>
-			`}
+        return html `
+			${staticHtml `
+				<${this.fieldTag} dense autofocus
+					?pickerHidden=${this.pickerHidden}
+					label=${this.heading}
+					.value=${value}
+					@change=${(e) => this.handleEdit(e.detail, data)}
+				></${this.fieldTag}>
+			`}
 		`;
     }
 }

package/dist/columns/number/DataGridColumnCurrency.js

@@ -18,18 +18,18 @@ let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurr
         return html `${this.getNumber(value)?.formatAsCurrency(this.currency) ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-currency dense autofocus
-				.currency=${this.currency}
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-currency>
+        return html `
+			<mo-field-currency dense autofocus
+				.currency=${this.currency}
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-currency>
 		`;
     }
     getSumTemplate(sum) {
-        return html `
-			<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
+        return html `
+			<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
 		`;
     }
 };

package/dist/columns/number/DataGridColumnNumber.js

@@ -8,11 +8,11 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
         return html `${this.getNumber(value)?.format() ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-number dense label=${this.heading} autofocus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-number>
+        return html `
+			<mo-field-number dense label=${this.heading} autofocus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-number>
 		`;
     }
     getSumTemplate(sum) {

package/dist/columns/number/DataGridColumnPercent.js

@@ -8,12 +8,12 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
         return html `${this.getNumber(value)?.formatAsPercent() ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-percent dense autofocus
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-percent>
+        return html `
+			<mo-field-percent dense autofocus
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-percent>
 		`;
     }
     getSumTemplate(sum) {

package/dist/custom-elements.json

@@ -1612,6 +1612,10 @@
 			"name": "mo-data-grid-column-image",
 			"path": ".\\packages\\DataGrid\\columns\\DataGridColumnImage.ts",
 			"attributes": [
+				{
+					"name": "tooltipSelector",
+					"type": "KeyPathOf<TData>"
+				},
 				{
 					"name": "dataGrid",
 					"type": "DataGrid<TData, any> | undefined"
@@ -1669,6 +1673,11 @@
 				}
 			],
 			"properties": [
+				{
+					"name": "tooltipSelector",
+					"attribute": "tooltipSelector",
+					"type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined"
+				},
 				{
 					"name": "getEditContentTemplate",
 					"type": "undefined",
@@ -3693,7 +3702,8 @@
 			],
 			"properties": [
 				{
-					"name": "dataGrid"
+					"name": "dataGrid",
+					"type": "DataGrid<TData, TDetailsElement>"
 				},
 				{
 					"name": "data",
@@ -4564,6 +4574,10 @@
 				}
 			],
 			"properties": [
+				{
+					"name": "tooltipSelector",
+					"type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined"
+				},
 				{
 					"name": "getEditContentTemplate",
 					"type": "undefined"