@3mo/data-grid 0.26.3 → 0.26.4

package/dist/DataGridHeader.js

@@ -55,98 +55,98 @@ let DataGridHeader = class DataGridHeader extends Component {
         this.columnHeaders.forEach(h => h.requestUpdate());
     }
     static get styles() {
-        return css `
-			:host {
-				--mo-data-grid-header-separator-height: 15px;
-				--mo-data-grid-header-separator-width: 2px;
-				display: grid;
-				grid-template-columns: subgrid;
-				position: sticky;
-				grid-column: -1 / 1;
-				background: var(--mo-data-grid-header-background, var(--mo-data-grid-sticky-part-color));
-				top: 0;
-				z-index: 4;
-				font-size: small;
-				border-block: var(--mo-data-grid-border);
-				height: var(--mo-data-grid-header-height);
-			}
-
-			.reorder, .details, .selection, .actions, .context-menu {
-				position: sticky;
-				background: var(--mo-data-grid-sticky-part-color);
-				z-index: 5;
-			}
-
-			.actions, .context-menu {
-				inset-inline-end: 0px;
-			}
-
-			.actions {
-				mo-icon-button {
-					color: var(--mo-color-accent);
-					font-size: large;
-				}
-			}
-
-			.context-menu {
-				background-color: var(--mo-color-surface);
-				&[data-multiple-selected] {
-					background-color: var(--mo-color-accent);
-				}
-				mo-icon-button {
-					color: var(--mo-color-on-accent);
-					font-size: 20px;
-					&:not([data-multiple-selected]) {
-						opacity: 0;
-						pointer-events: none;
-					}
-				}
-			}
+        return css `
+			:host {
+				--mo-data-grid-header-separator-height: 15px;
+				--mo-data-grid-header-separator-width: 2px;
+				display: grid;
+				grid-template-columns: subgrid;
+				position: sticky;
+				grid-column: -1 / 1;
+				background: var(--mo-data-grid-header-background, var(--mo-data-grid-sticky-part-color));
+				top: 0;
+				z-index: 4;
+				font-size: small;
+				border-block: var(--mo-data-grid-border);
+				height: var(--mo-data-grid-header-height);
+			}
+
+			.reorder, .details, .selection, .actions, .context-menu {
+				position: sticky;
+				background: var(--mo-data-grid-sticky-part-color);
+				z-index: 5;
+			}
+
+			.actions, .context-menu {
+				inset-inline-end: 0px;
+			}
+
+			.actions {
+				mo-icon-button {
+					color: var(--mo-color-accent);
+					font-size: large;
+				}
+			}
+
+			.context-menu {
+				background-color: var(--mo-color-surface);
+				&[data-multiple-selected] {
+					background-color: var(--mo-color-accent);
+				}
+				mo-icon-button {
+					color: var(--mo-color-on-accent);
+					font-size: 20px;
+					&:not([data-multiple-selected]) {
+						opacity: 0;
+						pointer-events: none;
+					}
+				}
+			}
 		`;
     }
     get template() {
-        return html `
-			${this.reorderabilityTemplate}
-			${this.detailsExpanderTemplate}
-			${this.selectionTemplate}
-			${this.contentTemplate}
-			${this.fillerTemplate}
-			${this.actionsTemplate}
+        return html `
+			${this.reorderabilityTemplate}
+			${this.detailsExpanderTemplate}
+			${this.selectionTemplate}
+			${this.contentTemplate}
+			${this.fillerTemplate}
+			${this.actionsTemplate}
 		`;
     }
     get reorderabilityTemplate() {
-        return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
-			<mo-flex class='reorder'
-				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}
-				${this.getResizeObserver('reordering')}
-			></mo-flex>
+        return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
+			<mo-flex class='reorder'
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}
+				${this.getResizeObserver('reordering')}
+			></mo-flex>
 		`;
     }
     get detailsExpanderTemplate() {
-        return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex class='details' justifyContent='center' alignItems='center'
-				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
-				${this.getResizeObserver('details')}
-			>
-				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
-					<mo-icon-button dense
-						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
-						@click=${() => this.toggleAllDetails()}
-					></mo-icon-button>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex class='details' justifyContent='center' alignItems='center'
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
+				${this.getResizeObserver('details')}
+			>
+				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
+					<mo-icon-button dense
+						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
+						@click=${() => this.toggleAllDetails()}
+					></mo-icon-button>
+				`}
+			</mo-flex>
 		`;
     }
     get selectionTemplate() {
-        return !this.dataGrid.hasSelection ? html.nothing : html `
-			<mo-flex class='selection' justifyContent='center' alignItems='center'
-				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
-				${this.getResizeObserver('selection')}
-			>
-				${this.dataGrid.selectability !== DataGridSelectability.Multiple ? html.nothing : html `
-					<mo-checkbox .selected=${live(this.selection)} @change=${this.handleSelectionChange}></mo-checkbox>
-				`}
-			</mo-flex>
+        return !this.dataGrid.hasSelection ? html.nothing : html `
+			<mo-flex class='selection' justifyContent='center' alignItems='center'
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
+				${this.getResizeObserver('selection')}
+			>
+				${this.dataGrid.selectability !== DataGridSelectability.Multiple ? html.nothing : html `
+					<mo-checkbox .selected=${live(this.selection)} @change=${this.handleSelectionChange}></mo-checkbox>
+				`}
+			</mo-flex>
 		`;
     }
     get selection() {
@@ -160,10 +160,10 @@ let DataGridHeader = class DataGridHeader extends Component {
         }
     }
     get contentTemplate() {
-        return html `
-			${repeat(this.dataGrid.visibleColumns, c => c.dataSelector, (column, index) => html `
-				<mo-data-grid-column-header .reorderabilityController=${this.reorderabilityController} .index=${index} .column=${column}></mo-data-grid-column-header>
-			`)}
+        return html `
+			${repeat(this.dataGrid.visibleColumns, c => c.dataSelector, (column, index) => html `
+				<mo-data-grid-column-header .reorderabilityController=${this.reorderabilityController} .index=${index} .column=${column}></mo-data-grid-column-header>
+			`)}
 		`;
     }
     get fillerTemplate() {
@@ -172,25 +172,25 @@ let DataGridHeader = class DataGridHeader extends Component {
     get actionsTemplate() {
         if (this.dataGrid.hasContextMenu) {
             const multipleSelected = this.dataGrid.selectedData.length > 1;
-            return html `
-				<mo-flex ?data-multiple-selected=${multipleSelected} class='context-menu' alignItems='end' justifyContent='center' ${this.getResizeObserver('actions')}>
-					<mo-popover-container>
-						<mo-icon-button ?data-multiple-selected=${multipleSelected} dense icon='more_vert' title=${t('Actions for ${count:pluralityNumber} selected entries', { count: this.dataGrid.selectedData.length })}></mo-icon-button>
-
-						<mo-menu slot='popover'>
-							${this.dataGrid.contextMenuController.getMenuContentTemplate()}
-						</mo-menu>
-					</mo-popover-container>
-				</mo-flex>
+            return html `
+				<mo-flex ?data-multiple-selected=${multipleSelected} class='context-menu' alignItems='end' justifyContent='center' ${this.getResizeObserver('actions')}>
+					<mo-popover-container>
+						<mo-icon-button ?data-multiple-selected=${multipleSelected} dense icon='more_vert' title=${t('Actions for ${count:pluralityNumber} selected entries', { count: this.dataGrid.selectedData.length })}></mo-icon-button>
+
+						<mo-menu slot='popover'>
+							${this.dataGrid.contextMenuController.getMenuContentTemplate()}
+						</mo-menu>
+					</mo-popover-container>
+				</mo-flex>
 			`;
         }
         if (!this.dataGrid.hasToolbar && !this.dataGrid.sidePanelHidden) {
-            return html `
-				<mo-flex class='actions' alignItems='end' justifyContent='center' ${this.getResizeObserver('actions')}>
-					<mo-icon-button dense icon='settings'
-						@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
-					></mo-icon-button>
-				</mo-flex>
+            return html `
+				<mo-flex class='actions' alignItems='end' justifyContent='center' ${this.getResizeObserver('actions')}>
+					<mo-icon-button dense icon='settings'
+						@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
+					></mo-icon-button>
+				</mo-flex>
 			`;
         }
         return html.nothing;

package/dist/custom-elements.json

@@ -772,7 +772,7 @@
 				{
 					"name": "resizeController",
 					"type": "ResizeController<number>",
-					"default": "\"new ResizeController(this, {\\r\\n\\t\\tcallback: () => requestIdleCallback(() => this.column.widthInPixels = this.getBoundingClientRect().width)\\r\\n\\t})\""
+					"default": "\"new ResizeController(this, {\\n\\t\\tcallback: () => requestIdleCallback(() => this.column.widthInPixels = this.getBoundingClientRect().width)\\n\\t})\""
 				},
 				{
 					"name": "template",
@@ -846,7 +846,7 @@
 				{
 					"name": "reorderabilityController",
 					"type": "ReorderabilityController",
-					"default": "\"new ReorderabilityController(this, {\\r\\n\\t\\thandleReorder: (source, destination) => {\\r\\n\\t\\t\\tconst sourceColumn = this.dataGrid.visibleColumns[source]!\\r\\n\\t\\t\\tconst destinationColumn = this.dataGrid.visibleColumns[destination]!\\r\\n\\t\\t\\tconst sourceIndex = this.dataGrid.columns.indexOf(sourceColumn)\\r\\n\\t\\t\\tconst destinationIndex = this.dataGrid.columns.indexOf(destinationColumn)\\r\\n\\t\\t\\tthis.dataGrid.columns.splice(sourceIndex, 1)\\r\\n\\t\\t\\tthis.dataGrid.columns.splice(destinationIndex, 0, sourceColumn)\\r\\n\\t\\t\\tthis.dataGrid.setColumns(this.dataGrid.columns)\\r\\n\\t\\t}\\r\\n\\t})\""
+					"default": "\"new ReorderabilityController(this, {\\n\\t\\thandleReorder: (source, destination) => {\\n\\t\\t\\tconst sourceColumn = this.dataGrid.visibleColumns[source]!\\n\\t\\t\\tconst destinationColumn = this.dataGrid.visibleColumns[destination]!\\n\\t\\t\\tconst sourceIndex = this.dataGrid.columns.indexOf(sourceColumn)\\n\\t\\t\\tconst destinationIndex = this.dataGrid.columns.indexOf(destinationColumn)\\n\\t\\t\\tthis.dataGrid.columns.splice(sourceIndex, 1)\\n\\t\\t\\tthis.dataGrid.columns.splice(destinationIndex, 0, sourceColumn)\\n\\t\\t\\tthis.dataGrid.setColumns(this.dataGrid.columns)\\n\\t\\t}\\n\\t})\""
 				}
 			]
 		},

package/dist/rows/DataGridDefaultRow.js

@@ -3,25 +3,25 @@ import { css, component, html } from '@a11d/lit';
 import { DataGridRow } from './DataGridRow.js';
 let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
     static get styles() {
-        return css `
-			${super.styles}
-
-			:host {
-				display: grid;
-				grid-template-columns: subgrid;
-				grid-column: -1 / 1;
-				min-height: var(--mo-data-grid-row-height);
-			}
-
-			mo-flex {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-
-			#selectionContainer {
-				height: var(--mo-data-grid-row-height);
-			}
+        return css `
+			${super.styles}
+
+			:host {
+				display: grid;
+				grid-template-columns: subgrid;
+				grid-column: -1 / 1;
+				min-height: var(--mo-data-grid-row-height);
+			}
+
+			mo-flex {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+
+			#selectionContainer {
+				height: var(--mo-data-grid-row-height);
+			}
 		`;
     }
     updated(...parameters) {
@@ -32,13 +32,13 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
         }
     }
     get rowTemplate() {
-        return html `
-			${this.reorderabilityTemplate}
-			${this.detailsExpanderTemplate}
-			${this.selectionTemplate}
-			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
-			${this.fillerTemplate}
-			${this.contextMenuIconButtonTemplate}
+        return html `
+			${this.reorderabilityTemplate}
+			${this.detailsExpanderTemplate}
+			${this.selectionTemplate}
+			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
+			${this.fillerTemplate}
+			${this.contextMenuIconButtonTemplate}
 		`;
     }
 };