@3mo/data-grid 0.9.0 → 0.9.1

package/dist/DataGridHeader.js

@@ -1,25 +1,44 @@
 import { __decorate } from "tslib";
-import { component, Component, css, html, ifDefined, property, event, style } from '@a11d/lit';
+import { component, Component, css, html, ifDefined, property, event, style, live } from '@a11d/lit';
 import { tooltip } from '@3mo/tooltip';
 import { observeResize } from '@3mo/resize-observer';
+import { Localizer } from '@3mo/localization';
 import { DataGridSelectionMode, DataGridSortingStrategy, DataGridSidePanelTab } from './index.js';
+Localizer.register('en', {
+    '${count:pluralityNumber} entries selected': [
+        '1 entry selected',
+        '${count} entries selected',
+    ],
+    'Options for ${count:pluralityNumber} selected entries': [
+        'Options for the selected entry',
+        'Options for ${count} selected entries',
+    ],
+});
+Localizer.register('de', {
+    '${count:pluralityNumber} entries selected': [
+        '1 Eintrag ausgewählt',
+        '${count} Einträge ausgewählt',
+    ],
+    'Options for ${count:pluralityNumber} selected entries': [
+        'Optionen für den ausgewählten Eintrag',
+        'Optionen für ${count} ausgewählte Einträge',
+    ],
+});
 let DataGridHeader = class DataGridHeader extends Component {
     constructor() {
         super(...arguments);
-        this.selection = false;
         this.overlayOpen = false;
         this.handleDataGridDataChange = () => {
             this.requestUpdate();
         };
-        this.handleDataGridSelectionChange = (selectedData) => {
-            if (selectedData.length === 0) {
-                this.selection = false;
-            }
-            else if (selectedData.length === this.dataGrid.dataLength) {
-                this.selection = true;
+        this.toggleSelection = (e) => {
+            e.stopPropagation();
+            const selection = this.selection === 'indeterminate' ? false : !this.selection;
+            if (selection === true) {
+                this.dataGrid.selectAll();
             }
             else {
-                this.selection = 'indeterminate';
+                this.dataGrid.deselectAll();
             }
         };
         this.getHeaderCellTemplate = (column, index, columns) => {
@@ -60,23 +79,12 @@ let DataGridHeader = class DataGridHeader extends Component {
 			</mo-flex>
 		`;
         };
-        this.handleSelectionChange = (e) => {
-            const selected = e.target.selected;
-            if (selected === true) {
-                this.dataGrid.selectAll();
-            }
-            else if (selected === false) {
-                this.dataGrid.deselectAll();
-            }
-        };
     }
     connected() {
         this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
-        this.dataGrid.selectionChange.subscribe(this.handleDataGridSelectionChange);
     }
     disconnected() {
         this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
-        this.dataGrid.selectionChange.unsubscribe(this.handleDataGridSelectionChange);
     }
     static get styles() {
         return css `
@@ -142,7 +150,7 @@ let DataGridHeader = class DataGridHeader extends Component {
 				z-index: 7;
 			}
 
-			.details, .selection, .more {
+			.details, .selection, .more, .context-menu {
 				position: sticky;
 				background: var(--mo-data-grid-sticky-part-color);
 				z-index: 5;
@@ -156,10 +164,32 @@ let DataGridHeader = class DataGridHeader extends Component {
 				inset-inline-start: 0px;
 			}
 
-			.more {
+			.more, .context-menu {
 				cursor: pointer;
 				inset-inline-end: 0px;
 			}
+
+			.more {
+				mo-icon-button {
+					color: var(--mo-color-accent);
+					font-size: large;
+				}
+			}
+
+			.context-menu {
+				background-color: var(--mo-data-grid-selection-background);
+
+				mo-icon-button {
+					color: var(--mo-color-on-accent);
+					font-size: 22px;
+				}
+
+				mo-menu div {
+					padding: 12px 8px;
+					color: var(--mo-color-gray);
+					pointer-events: none;
+				}
+			}
 		`;
     }
     get template() {
@@ -193,11 +223,21 @@ let DataGridHeader = class DataGridHeader extends Component {
 				${this.getResizeObserver('selectionColumnWidthInPixels')}
 			>
 				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
-					<mo-checkbox .selected=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
+					<mo-checkbox .selected=${live(this.selection)} @click=${this.toggleSelection}></mo-checkbox>
 				`}
 			</mo-flex>
 		`;
     }
+    get selection() {
+        switch (this.dataGrid.selectedData.length) {
+            case 0:
+                return false;
+            case this.dataGrid.dataLength:
+                return true;
+            default:
+                return 'indeterminate';
+        }
+    }
     get contentTemplate() {
         return html `
 			${this.dataGrid.visibleColumns.map(this.getHeaderCellTemplate)}
@@ -207,13 +247,33 @@ let DataGridHeader = class DataGridHeader extends Component {
         return html `<span></span>`;
     }
     get moreTemplate() {
-        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.nothing : html `
-			<mo-flex class='more' alignItems='end' justifyContent='center' ${this.getResizeObserver('moreColumnWidthInPixels')}>
-				<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'large' })}
-					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
-				></mo-icon-button>
-			</mo-flex>
-		`;
+        if (this.dataGrid.hasContextMenu && this.dataGrid.selectedData.length > 1) {
+            return html `
+				<mo-flex class='context-menu' alignItems='end' justifyContent='center' ${this.getResizeObserver('moreColumnWidthInPixels')}>
+					<mo-popover-container fixed>
+						<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'>
+							<div>
+								${t('${count:pluralityNumber} entries selected', { count: this.dataGrid.selectedData.length })}
+							</div>
+							<mo-line></mo-line>
+							${this.dataGrid.getRowContextMenuTemplate?.(this.dataGrid.selectedData) ?? html.nothing}
+						</mo-menu>
+					</mo-popover-container>
+				</mo-flex>
+			`;
+        }
+        if (!this.dataGrid.hasToolbar && !this.dataGrid.sidePanelHidden) {
+            return html `
+				<mo-flex class='more' alignItems='end' justifyContent='center' ${this.getResizeObserver('moreColumnWidthInPixels')}>
+					<mo-icon-button dense icon='settings'
+						@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
+					></mo-icon-button>
+				</mo-flex>
+			`;
+        }
+        return html.nothing;
     }
     getResizeObserver(property) {
         // @ts-expect-error Readonly property set here
@@ -239,9 +299,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], DataGridHeader.prototype, "dataGrid", void 0);
-__decorate([
-    property()
-], DataGridHeader.prototype, "selection", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DataGridHeader.prototype, "overlayOpen", void 0);