@3mo/data-grid 0.20.0 → 0.20.2

package/dist/DataGridHeader.js

@@ -44,92 +44,97 @@ 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);
-			}
-
-			.details, .selection, .actions, .context-menu {
-				position: sticky;
-				background: var(--mo-data-grid-sticky-part-color);
-				z-index: 5;
-			}
-
-			.details {
-				inset-inline-start: 0px;
-			}
-
-			.selection {
-				inset-inline-start: 0px;
-			}
-
-			.actions, .context-menu {
-				cursor: pointer;
-				inset-inline-end: 0px;
-			}
-
-			.actions {
-				mo-icon-button {
-					color: var(--mo-color-accent);
-					font-size: large;
-				}
-			}
-
-			.context-menu {
-				background-color: var(--mo-color-accent);
-
-				mo-icon-button {
-					color: var(--mo-color-on-accent);
-					font-size: 20px;
-				}
-			}
+        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);
+			}
+
+			.details, .selection, .actions, .context-menu {
+				position: sticky;
+				background: var(--mo-data-grid-sticky-part-color);
+				z-index: 5;
+			}
+
+			.details {
+				inset-inline-start: 0px;
+			}
+
+			.selection {
+				inset-inline-start: 0px;
+			}
+
+			.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.detailsExpanderTemplate}
-			${this.selectionTemplate}
-			${this.contentTemplate}
-			${this.fillerTemplate}
-			${this.actionsTemplate}
+        return html `
+			${this.detailsExpanderTemplate}
+			${this.selectionTemplate}
+			${this.contentTemplate}
+			${this.fillerTemplate}
+			${this.actionsTemplate}
 		`;
     }
     get detailsExpanderTemplate() {
-        return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex class='details' justifyContent='center' alignItems='center'
-				${style({ insetInlineStart: '0px' })}
-				${this.getResizeObserver('detailsColumnWidthInPixels')}
-			>
-				${!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: '0px' })}
+				${this.getResizeObserver('detailsColumnWidthInPixels')}
+			>
+				${!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.hasDetails ? '20px' : '0px' })}
-				${this.getResizeObserver('selectionColumnWidthInPixels')}
-			>
-				${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.hasDetails ? '20px' : '0px' })}
+				${this.getResizeObserver('selectionColumnWidthInPixels')}
+			>
+				${this.dataGrid.selectability !== DataGridSelectability.Multiple ? html.nothing : html `
+					<mo-checkbox .selected=${live(this.selection)} @change=${this.handleSelectionChange}></mo-checkbox>
+				`}
+			</mo-flex>
 		`;
     }
     get selection() {
@@ -143,36 +148,37 @@ let DataGridHeader = class DataGridHeader extends Component {
         }
     }
     get contentTemplate() {
-        return html `
-			${this.dataGrid.visibleColumns.map(column => html `
-				<mo-data-grid-column-header .column=${column}></mo-data-grid-column-header>
-			`)}
+        return html `
+			${this.dataGrid.visibleColumns.map(column => html `
+				<mo-data-grid-column-header .column=${column}></mo-data-grid-column-header>
+			`)}
 		`;
     }
     get fillerTemplate() {
         return html `<span></span>`;
     }
     get actionsTemplate() {
-        if (this.dataGrid.hasContextMenu && this.dataGrid.selectedData.length > 1) {
-            return html `
-				<mo-flex class='context-menu' alignItems='end' justifyContent='center' ${this.getResizeObserver('actionsColumnWidthInPixels')}>
-					<mo-popover-container>
-						<mo-icon-button 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.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('actionsColumnWidthInPixels')}>
+					<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('actionsColumnWidthInPixels')}>
-					<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('actionsColumnWidthInPixels')}>
+					<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/DataGridSidePanel.js

@@ -108,7 +108,7 @@ let DataGridSidePanel = class DataGridSidePanel extends Component {
 						<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)' })}
+							${style({ color: 'var(--mo-color-gray)' })}
 							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
 						></mo-icon-button>
 					</mo-flex>

package/dist/custom-elements.json

@@ -727,8 +727,8 @@
 				},
 				{
 					"name": "resizeController",
-					"type": "ResizeController<Promise<void>>",
-					"default": "\"new ResizeController(this, {\\n\\t\\tcallback: async ([entry]) => {\\n\\t\\t\\t// It is necessary to defer the callback to avoid\\n\\t\\t\\t// this resize-observer triggering other resize-observers in a loop\\n\\t\\t\\tawait new Promise(r => requestIdleCallback(r))\\n\\t\\t\\tthis.column.widthInPixels = entry?.contentRect.width ?? 0\\n\\t\\t}\\n\\t})\""
+					"type": "ResizeController<number>",
+					"default": "\"new ResizeController(this, {\\r\\n\\t\\tcallback: () => requestIdleCallback(() => this.column.widthInPixels = this.getBoundingClientRect().width)\\r\\n\\t})\""
 				},
 				{
 					"name": "template",
@@ -3994,7 +3994,7 @@
 				},
 				{
 					"name": "resizeController",
-					"type": "ResizeController<Promise<void>>"
+					"type": "ResizeController<number>"
 				},
 				{
 					"name": "template",

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,12 +32,12 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
         }
     }
     get rowTemplate() {
-        return html `
-			${this.detailsExpanderTemplate}
-			${this.selectionTemplate}
-			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
-			${this.fillerTemplate}
-			${this.contextMenuIconButtonTemplate}
+        return html `
+			${this.detailsExpanderTemplate}
+			${this.selectionTemplate}
+			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
+			${this.fillerTemplate}
+			${this.contextMenuIconButtonTemplate}
 		`;
     }
 };

package/dist/rows/DataGridRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAoB,MAAM,WAAW,CAAA;AAKtH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAkC,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEhG,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE7B,cAAc,UAAO;IAEtB,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,IACkF,eAAe,GAAG,SAAS,CAC9H;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAKX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA8IzB;IAED,cAAuB,QAAQ,uBAmB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAYlG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAY5B;IAED,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAY1C,SAAS,CAAC,2BAA2B,CAAC,IAAI,EAAE,OAAO;IAQnD,OAAO,KAAK,mBAAmB,GAM9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
+{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,KAAK,kBAAkB,EAAoB,MAAM,WAAW,CAAA;AAKtH,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,KAAK,YAAY,EAAkC,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAEhG,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IACjE,QAAQ,CAAC,OAAO,EAAG,WAAW,CAAA;IAE7B,cAAc,UAAO;IAEtB,UAAU,EAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAC1D,IAAI,QAAQ,kDAAsC;IAClD,IAAI,IAAI,UAAkC;IAC1C,IAAI,KAAK,WAAmC;IAC5C,IAAI,KAAK,WAAmC;IAC5C,IAAI,QAAQ,YAAwC;IACpD,IAAI,WAAW,YAAyC;IAExD,IAAI,cAAc,IACkF,eAAe,GAAG,SAAS,CAC9H;IAED,OAAO,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC;IAIjC,SAAS;cAMC,WAAW;cAKX,YAAY;IAItB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA6IzB;IAED,cAAuB,QAAQ,uBAmB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAe9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAYlG,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG9B;IAED,SAAS,KAAK,cAAc,uBAE3B;IAED,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAY5B;IAED,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY;IAY1C,SAAS,CAAC,2BAA2B,CAAC,IAAI,EAAE,OAAO;IAQnD,OAAO,KAAK,mBAAmB,GAM9B;IAEK,gBAAgB;IAKtB,aAAa;CAQb;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}