@3mo/data-grid 0.5.12 → 0.5.14

package/dist/CsvGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CsvGenerator.d.ts","sourceRoot":"","sources":["../CsvGenerator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,qBAAa,YAAY;IACxB,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;CAWrD"}
+{"version":3,"file":"CsvGenerator.d.ts","sourceRoot":"","sources":["../CsvGenerator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,qBAAa,YAAY;IACxB,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;CA0BrD"}

package/dist/CsvGenerator.js

@@ -1,13 +1,26 @@
 import { Downloader } from '@3mo/downloader';
 export class CsvGenerator {
     static generate(dataGrid) {
-        const csv = [
-            dataGrid.visibleColumns.map(c => c.heading),
-            ...dataGrid.data.map(data => dataGrid.visibleColumns.map(c => getValueByKeyPath(data, c.dataSelector)?.toString() ?? '').join(',')),
-        ].join('\n');
+        const flattenedData = [...dataGrid['getFlattenedData']()];
+        const maxLevel = Math.max(...flattenedData.map(d => d.level));
+        const [firstHeading, ...restHeadings] = dataGrid.visibleColumns.map(c => c.heading);
+        const rows = [
+            [firstHeading, ...Array.from({ length: maxLevel }).fill(''), ...restHeadings],
+            ...flattenedData.map(d => {
+                const nestedPadding = Array.from({ length: d.level }).fill('');
+                const childrenPadding = Array.from({ length: maxLevel - d.level }).fill('');
+                const [first, ...rest] = dataGrid.visibleColumns.flatMap(column => getValueByKeyPath(d.data, column.dataSelector));
+                return [
+                    ...nestedPadding,
+                    first,
+                    ...childrenPadding,
+                    ...rest
+                ];
+            })
+        ];
+        const csv = rows.map(row => row.join(',')).join('\n');
         // @ts-expect-error manifest can be undefined
-        const manifest = globalThis.manifest;
-        const fileName = (manifest?.short_name ?? '') + 'Export'.replace(/ /g, '_');
+        const fileName = (globalThis.manifest?.short_name ?? '') + 'Export'.replace(/ /g, '_');
         Downloader.download(`data:text/csv;charset=utf-8,${encodeURIComponent(csv)}`, `${fileName}.csv`);
     }
 }

package/dist/DataGrid.d.ts

@@ -81,20 +81,20 @@ export type DataGridSorting<TData> = DataGridSortingDefinition<TData> | Array<Da
  * @cssprop --mo-data-grid-cell-padding - The inline padding of the cells. Default to 3px.
  * @cssprop --mo-data-grid-column-sub-row-indentation - The indentation of the first column in the sub row. Default to 10px.
  *
- * @fires dataChange {CustomEvent<Array<TData>>}
- * @fires selectionChange {CustomEvent<Array<TData>>}
- * @fires pageChange {CustomEvent<number>}
- * @fires paginationChange {CustomEvent<DataGridPagination | undefined>}
- * @fires columnsChange {CustomEvent<Array<ColumnDefinition<TData>>>}
- * @fires sidePanelOpen {CustomEvent<DataGridSidePanelTab>}
- * @fires sidePanelClose {CustomEvent}
- * @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
- * @fires rowDetailsOpen {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDetailsClose {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowMiddleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
+ * @fires dataChange
+ * @fires selectionChange
+ * @fires pageChange
+ * @fires paginationChange
+ * @fires columnsChange
+ * @fires sidePanelOpen
+ * @fires sidePanelClose
+ * @fires sortingChange
+ * @fires rowDetailsOpen
+ * @fires rowDetailsClose
+ * @fires rowClick
+ * @fires rowDoubleClick
+ * @fires rowMiddleClick
+ * @fires cellEdit
  */
 export declare class DataGrid<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
     static readonly rowHeight: LocalStorage<number>;

package/dist/DataGrid.js

@@ -101,20 +101,20 @@ export var DataGridEditability;
  * @cssprop --mo-data-grid-cell-padding - The inline padding of the cells. Default to 3px.
  * @cssprop --mo-data-grid-column-sub-row-indentation - The indentation of the first column in the sub row. Default to 10px.
  *
- * @fires dataChange {CustomEvent<Array<TData>>}
- * @fires selectionChange {CustomEvent<Array<TData>>}
- * @fires pageChange {CustomEvent<number>}
- * @fires paginationChange {CustomEvent<DataGridPagination | undefined>}
- * @fires columnsChange {CustomEvent<Array<ColumnDefinition<TData>>>}
- * @fires sidePanelOpen {CustomEvent<DataGridSidePanelTab>}
- * @fires sidePanelClose {CustomEvent}
- * @fires sortingChange {CustomEvent<DataGridSorting<TData>>}
- * @fires rowDetailsOpen {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDetailsClose {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires rowMiddleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
- * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
+ * @fires dataChange
+ * @fires selectionChange
+ * @fires pageChange
+ * @fires paginationChange
+ * @fires columnsChange
+ * @fires sidePanelOpen
+ * @fires sidePanelClose
+ * @fires sortingChange
+ * @fires rowDetailsOpen
+ * @fires rowDetailsClose
+ * @fires rowClick
+ * @fires rowDoubleClick
+ * @fires rowMiddleClick
+ * @fires cellEdit
  */
 let DataGrid = DataGrid_1 = class DataGrid extends Component {
     constructor() {
@@ -391,7 +391,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 				--mo-data-grid-row-tree-line-width: 8px;
 				--mo-details-data-grid-start-margin: 26px;
 
-				--mo-data-grid-selection-background: rgba(var(--mo-color-accent-base), 0.5);
+				--mo-data-grid-selection-background: color-mix(in srgb, var(--mo-color-accent), transparent 50%);
 				display: flex;
 				flex-direction: column;
 				height: 100%;
@@ -399,11 +399,11 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
 			}
 
 			:host([data-theme=light]) {
-				--mo-data-grid-alternating-background: rgba(var(--mo-color-foreground-base), 0.05);
+				--mo-data-grid-alternating-background: color-mix(in srgb, black, transparent 95%);
 			}
 
 			:host([data-theme=dark]) {
-				--mo-data-grid-alternating-background: rgba(var(--mo-color-background-base), 0.2);
+				--mo-data-grid-alternating-background: color-mix(in srgb, black, transparent 80%);
 			}
 
 			:host([preventVerticalContentScroll]) mo-scroller {
@@ -799,16 +799,16 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
     }
     *getFlattenedData() {
         if (!this.subDataGridDataSelector) {
-            yield* this.data;
+            yield* this.data.map(d => ({ level: 0, data: d }));
             return;
         }
-        const flatten = (data) => {
+        const flatten = (data, level = 0) => {
             const subData = getValueByKeyPath(data, this.subDataGridDataSelector);
             return [
-                data,
+                { data, level },
                 ...!Array.isArray(subData)
                     ? []
-                    : subData.flatMap(flatten)
+                    : subData.flatMap(d => flatten(d, level + 1))
             ];
         };
         for (const data of this.data) {
@@ -817,7 +817,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
         return;
     }
     get flattenedData() {
-        return [...this.getFlattenedData()];
+        return [...this.getFlattenedData()].map(({ data }) => data);
     }
     get sortedData() {
         const sorting = this.getSorting();

package/dist/DataGridCell.d.ts

@@ -12,7 +12,7 @@ export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData =
     column: ColumnDefinition<TData, TValue>;
     row: DataGridRow<TData, TDetailsElement>;
     private editing;
-    get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
+    get dataGrid(): import("DataGrid.js").DataGrid<TData, TDetailsElement>;
     get data(): TData;
     get dataSelector(): object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends TData[T] ? string : TData[T] extends infer T_1 ? T_1 extends TData[T] ? T_1 extends readonly any[] ? Extract<keyof T_1, `${number}`> | (Extract<keyof T_1, `${number}`> extends infer T_2 ? T_2 extends Extract<keyof T_1, `${number}`> ? T_2 extends keyof T_1 ? never : never : never : never) : T_1 extends object ? Extract<keyof T_1, string> | (Extract<keyof T_1, string> extends infer T_3 ? T_3 extends Extract<keyof T_1, string> ? T_3 extends keyof T_1 ? never : never : never : never) : never : never : never}` : never : never : never) : TData extends object ? Extract<keyof TData, string> | (Extract<keyof TData, string> extends infer T_4 ? T_4 extends Extract<keyof TData, string> ? T_4 extends keyof TData ? `${T_4}.${object extends TData[T_4] ? string : TData[T_4] extends infer T_5 ? T_5 extends TData[T_4] ? T_5 extends readonly any[] ? Extract<keyof T_5, `${number}`> | (Extract<keyof T_5, `${number}`> extends infer T_6 ? T_6 extends Extract<keyof T_5, `${number}`> ? T_6 extends keyof T_5 ? never : never : never : never) : T_5 extends object ? Extract<keyof T_5, string> | (Extract<keyof T_5, string> extends infer T_7 ? T_7 extends Extract<keyof T_5, string> ? T_7 extends keyof T_5 ? never : never : never : never) : never : never : never}` : never : never : never) : never;
     private get cellIndex();

package/dist/DataGridCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
+{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,2DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}

package/dist/DataGridFooter.js

@@ -23,33 +23,33 @@ let DataGridFooter = class DataGridFooter extends Component {
         this.manualPageSize = false;
     }
     static get styles() {
-        return css `
-			:host {
-				grid-column: 1 / last-line;
-				grid-row: 3;
-				min-height: var(--mo-data-grid-footer-min-height);
-				background: var(--mo-data-grid-footer-background);
-			}
-
-			:host(:not([hideTopBorder])) {
-				border-top: var(--mo-data-grid-border);
-			}
+        return css `
+			:host {
+				grid-column: 1 / last-line;
+				grid-row: 3;
+				min-height: var(--mo-data-grid-footer-min-height);
+				background: var(--mo-data-grid-footer-background);
+			}
+
+			:host(:not([hideTopBorder])) {
+				border-top: var(--mo-data-grid-border);
+			}
 		`;
     }
     get template() {
         this.toggleAttribute('hideTopBorder', this.dataGrid.hasFooter === false);
-        return this.dataGrid.hasFooter === false ? html.nothing : html `
-			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
-				<mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
-					${this.paginationTemplate}
-					${this.exportTemplate}
-				</mo-flex>
-
-				<mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
-					${this.dataGrid.sumsTemplate}
-					<slot name='sum'></slot>
-				</mo-flex>
-			</mo-flex>
+        return this.dataGrid.hasFooter === false ? html.nothing : html `
+			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
+				<mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
+					${this.paginationTemplate}
+					${this.exportTemplate}
+				</mo-flex>
+
+				<mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
+					${this.dataGrid.sumsTemplate}
+					<slot name='sum'></slot>
+				</mo-flex>
+			</mo-flex>
 		`;
     }
     get paginationTemplate() {
@@ -62,53 +62,53 @@ let DataGridFooter = class DataGridFooter extends Component {
             `${(Math.min(from, to)).format()}-${to.format()}`,
             hasUnknownDataLength ? undefined : this.dataGrid.dataLength.format(),
         ].filter(Boolean).join(' / ');
-        return !this.dataGrid.hasPagination ? html.nothing : html `
-			<mo-flex direction='horizontal' alignItems='center' gap='1vw'>
-				<mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
-					<mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
-						?disabled=${this.page === 1}
-						@click=${() => this.setPage(1)}
-					></mo-icon-button>
-
-					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
-						?disabled=${this.page === 1}
-						@click=${() => this.setPage(this.page - 1)}
-					></mo-icon-button>
-
-					<div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
-						${this.manualPagination ? html `
-							<mo-field-number dense
-								value=${this.page}
-								@change=${(e) => this.handleManualPageChange(e.detail)}>
-							</mo-field-number>
-						` : html `
-							<div ${style({ fontSize: 'small' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
-						`}
-					</div>
-
-					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-						?disabled=${!this.dataGrid.hasNextPage}
-						@click=${() => this.setPage(this.page + 1)}
-					></mo-icon-button>
-
-					<mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
-						?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
-						@click=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
-					></mo-icon-button>
-				</mo-flex>
-
-				<div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
-					${!this.manualPageSize ? html `
-						<div ${style({ fontSize: 'small' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
-					` : html `
-						<mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
-							.dataGrid=${this.dataGrid}
-							value=${ifDefined(this.dataGrid.pagination)}
-							@change=${(e) => this.handlePaginationChange(e.detail)}>
-						</mo-field-select-data-grid-page-size>
-					`}
-				</div>
-			</mo-flex>
+        return !this.dataGrid.hasPagination ? html.nothing : html `
+			<mo-flex direction='horizontal' alignItems='center' gap='1vw'>
+				<mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
+					<mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
+						?disabled=${this.page === 1}
+						@click=${() => this.setPage(1)}
+					></mo-icon-button>
+
+					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
+						?disabled=${this.page === 1}
+						@click=${() => this.setPage(this.page - 1)}
+					></mo-icon-button>
+
+					<div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
+						${this.manualPagination ? html `
+							<mo-field-number dense
+								value=${this.page}
+								@change=${(e) => this.handleManualPageChange(e.detail)}>
+							</mo-field-number>
+						` : html `
+							<div ${style({ fontSize: 'small' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
+						`}
+					</div>
+
+					<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+						?disabled=${!this.dataGrid.hasNextPage}
+						@click=${() => this.setPage(this.page + 1)}
+					></mo-icon-button>
+
+					<mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
+						?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
+						@click=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
+					></mo-icon-button>
+				</mo-flex>
+
+				<div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
+					${!this.manualPageSize ? html `
+						<div ${style({ fontSize: 'small' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
+					` : html `
+						<mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
+							.dataGrid=${this.dataGrid}
+							value=${ifDefined(this.dataGrid.pagination)}
+							@change=${(e) => this.handlePaginationChange(e.detail)}>
+						</mo-field-select-data-grid-page-size>
+					`}
+				</div>
+			</mo-flex>
 		`;
     }
     handlePaginationChange(value) {
@@ -126,28 +126,28 @@ let DataGridFooter = class DataGridFooter extends Component {
         this.manualPagination = false;
     }
     get exportTemplate() {
-        return !this.dataGrid.exportable ? html.nothing : html `
-			<style>
-				#export {
-					height: 21px;
-					width: 21px;
-					aspect-ratio: 1 / 1;
-					transition: .25s;
-					-webkit-filter: grayscale(100%);
-					filter: grayscale(100%);
-					cursor: pointer;
-				}
-
-				#export:hover {
-					-webkit-filter: grayscale(0%);
-					filter: grayscale(0%);
-				}
-			</style>
-			<img id='export'
-				src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
-				${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
-				@click=${() => this.dataGrid.exportExcelFile()}
-			/>
+        return !this.dataGrid.exportable ? html.nothing : html `
+			<style>
+				#export {
+					height: 21px;
+					width: 21px;
+					aspect-ratio: 1 / 1;
+					transition: .25s;
+					-webkit-filter: grayscale(100%);
+					filter: grayscale(100%);
+					cursor: pointer;
+				}
+
+				#export:hover {
+					-webkit-filter: grayscale(0%);
+					filter: grayscale(0%);
+				}
+			</style>
+			<img id='export'
+				src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
+				${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
+				@click=${() => this.dataGrid.exportExcelFile()}
+			/>
 		`;
     }
     setPage(value) {

package/dist/DataGridHeaderSeparator.d.ts

@@ -1,6 +1,6 @@
 import { Component } from '@a11d/lit';
 import { ColumnDefinition, DataGrid } from './index.js';
-/** @fires columnUpdate {CustomEvent} */
+/** @fires columnUpdate */
 export declare class DataGridHeaderSeparator extends Component {
     static disableResizing: boolean;
     readonly columnUpdate: EventDispatcher;

package/dist/DataGridHeaderSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsE,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEvD,wCAAwC;AACxC,qBACa,uBAAwB,SAAQ,SAAS;IACrD,MAAM,CAAC,eAAe,UAAQ;IAErB,QAAQ,CAAC,YAAY,EAAG,eAAe,CAAA;IAEpB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,KAAK,CAAI;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAuCzB;IAED,cAAuB,QAAQ,0CAW9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAM/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
+{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsE,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEvD,0BAA0B;AAC1B,qBACa,uBAAwB,SAAQ,SAAS;IACrD,MAAM,CAAC,eAAe,UAAQ;IAErB,QAAQ,CAAC,YAAY,EAAG,eAAe,CAAA;IAEpB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,KAAK,CAAI;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAuCzB;IAED,cAAuB,QAAQ,0CAW9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAM/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}

package/dist/DataGridHeaderSeparator.js

@@ -1,7 +1,7 @@
 var DataGridHeaderSeparator_1;
 import { __decorate } from "tslib";
 import { Component, component, property, html, css, state, event, eventListener, style } from '@a11d/lit';
-/** @fires columnUpdate {CustomEvent} */
+/** @fires columnUpdate */
 let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSeparator extends Component {
     constructor() {
         super(...arguments);

package/dist/DataGridPrimaryContextMenuItem.js

@@ -3,11 +3,11 @@ import { component, css } from '@a11d/lit';
 import { ContextMenuItem } from '@3mo/context-menu';
 let DataGridPrimaryContextMenuItem = class DataGridPrimaryContextMenuItem extends ContextMenuItem {
     static get styles() {
-        return css `
-			${super.styles}
-			:host {
-				font-weight: bold;
-			}
+        return css `
+			${super.styles}
+			:host {
+				font-weight: bold;
+			}
 		`;
     }
 };

package/dist/FieldSelectDataGridPageSize.js

@@ -4,13 +4,13 @@ import { component, html, property } from '@a11d/lit';
 import { FieldSelect } from '@3mo/select-field';
 let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
     get optionsTemplate() {
-        return html `
-			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
-				<mo-option value='auto'>Auto</mo-option>
-			`}
-			${FieldSelectDataGridPageSize_1.data.map(size => html `
-				<mo-option value=${size}>${size.format()}</mo-option>
-			`)}
+        return html `
+			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
+				<mo-option value='auto'>Auto</mo-option>
+			`}
+			${FieldSelectDataGridPageSize_1.data.map(size => html `
+				<mo-option value=${size}>${size.format()}</mo-option>
+			`)}
 		`;
     }
 };

package/dist/columns/DataGridColumnImage.js

@@ -11,8 +11,8 @@ let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return !value ? html.nothing : html `
-			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
+        return !value ? html.nothing : html `
+			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
 		`;
     }
 };

package/dist/columns/number/DataGridFooterSum.js

@@ -13,29 +13,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
         this.heading = '';
     }
     static get styles() {
-        return css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				max-height: 100%;
-				line-height: 1em;
-				user-select: all;
-				align-items: flex-end;
-			}
-
-			div {
-				color: var(--mo-color-gray);
-				font-size: 0.75rem;
-			}
+        return css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				max-height: 100%;
+				line-height: 1em;
+				user-select: all;
+				align-items: flex-end;
+			}
+
+			div {
+				color: var(--mo-color-gray);
+				font-size: 0.75rem;
+			}
 		`;
     }
     get template() {
-        return html `
-			<div>${this.heading}</div>
-			<mo-flex direction='horizontal' justifyContent='center'>
-				<slot></slot>
-			</mo-flex>
+        return html `
+			<div>${this.heading}</div>
+			<mo-flex direction='horizontal' justifyContent='center'>
+				<slot></slot>
+			</mo-flex>
 		`;
     }
 };