@3mo/data-grid 0.0.1

package/dist/DataGrid.js

@@ -0,0 +1,977 @@
+var DataGrid_1;
+import { __decorate } from "tslib";
+import { property, component, Component, html, css, live, query, nothing, ifDefined, event, queryAll, style, literal, staticHtml } from '@a11d/lit';
+import { NotificationHost } from '@a11d/lit-application';
+import { LocalStorage } from '@a11d/local-storage';
+import { InstanceofAttributeController } from '@3mo/instanceof-attribute-controller';
+import { SlotController } from '@3mo/slot-controller';
+import { tooltip } from '@3mo/tooltip';
+import { observeMutation } from '@3mo/mutation-observer';
+import { MediaQueryController } from '@3mo/media-query-observer';
+import { observeResize } from '@3mo/resize-observer';
+import { Localizer } from '@3mo/localization';
+import { contextMenu } from '@3mo/context-menu';
+import { CsvGenerator, DataGridColumn } from './index.js';
+Localizer.register("en" /* LanguageCode.English */, {
+    '${count:pluralityNumber} entries selected': [
+        '1 entry selected',
+        '${count} entries selected',
+    ]
+});
+Localizer.register("de" /* LanguageCode.German */, {
+    'Exporting excel file': 'Die Excel-Datei wird exportiert',
+    'No results': 'Kein Ergebnis',
+    '${count:pluralityNumber} entries selected': [
+        '1 Eintrag ausgewählt',
+        '${count} Einträge ausgewählt',
+    ],
+    'Options': 'Optionen',
+    'More Filters': 'Weitere Filter',
+    'Deselect All': 'Alle deselektieren',
+});
+/**
+ * @element mo-data-grid
+ *
+ * @attr data - The data to be displayed in the DataGrid. It is an array of objects, where each object represents a row.
+ * @attr columns - The columns to be displayed in the DataGrid. It is an array of objects, where each object represents a column.
+ * @attr headerHidden - Whether the header should be hidden.
+ * @attr preventVerticalContentScroll - Whether the content should be prevented from scrolling vertically.
+ * @attr page - The current page.
+ * @attr pagination - The pagination mode. It can be either `auto` or a number.
+ * @attr sorting - The sorting mode. It is an object with `selector` and `strategy` properties.
+ * @attr selectionMode - The selection mode.
+ * @attr isDataSelectable - Whether data of a given row is selectable.
+ * @attr selectedData - The selected data.
+ * @attr selectOnClick - Whether the row should be selected on click.
+ * @attr selectionBehaviorOnDataChange - The behavior of the selection when the data changes.
+ * @attr multipleDetails - Whether multiple details can be opened at the same time.
+ * @attr subDataGridDataSelector - The key path of the sub data grid data.
+ * @attr hasDataDetail - Whether the data has a detail.
+ * @attr detailsOnClick - Whether the details should be opened on click.
+ * @attr primaryContextMenuItemOnDoubleClick - The primary context menu item on double click.
+ * @attr editability - The editability mode.
+ * @attr getRowDetailsTemplate - A function which returns a template for the details of a given row.
+ * @attr getRowContextMenuTemplate - A function which returns a template for the context menu of a given row.
+ * @attr sidePanelTab - The side panel tab.
+ * @attr sidePanelHidden - Whether the side panel should be hidden.
+ * @attr selectionToolbarDisabled - Whether the selection toolbar should be disabled.
+ * @attr hasAlternatingBackground - Whether the rows should have alternating background.
+ * @attr preventFabCollapse - Whether the FAB should be prevented from collapsing.
+ *
+ * @slot - Use this slot only for declarative DataGrid APIs e.g. setting ColumnDefinitions via `mo-data-grid-columns` tag.
+ * @slot toolbar - The horizontal bar above DataGrid's contents.
+ * @slot filter - A vertical bar for elements which filter DataGrid's data. It is opened through an icon-button in the toolbar.
+ * @slot sum - A horizontal bar in the DataGrid's footer for showing sums. Calculated sums are also placed here by default.
+ * @slot settings - A vertical bar for elements which change DataGrid's settings. It is pre-filled with columns' settings and can be opened through an icon-button in the toolbar.
+ * @slot fab - A wrapper at the bottom right edge, floating right above the footer, expecting Floating Action Button to be placed in.
+ * @slot error-no-content - A slot for displaying an error message when no data is available.
+ *
+ * @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 rowClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires rowConnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires rowDisconnected {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires rowDoubleClick {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires rowDetailsOpen {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires rowDetailsClose {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires rowEdit {CustomEvent<DataGridRow<TData, TDetailsElement>>}
+ * @fires cellEdit {CustomEvent<DataGridCell<any, TData, TDetailsElement>>}
+ */
+let DataGrid = DataGrid_1 = class DataGrid extends Component {
+    constructor() {
+        super(...arguments);
+        this.data = new Array();
+        this.columns = new Array();
+        this.headerHidden = false;
+        this.preventVerticalContentScroll = false;
+        this.page = 1;
+        this.selectionMode = "none" /* DataGridSelectionMode.None */;
+        this.selectedData = new Array();
+        this.selectOnClick = false;
+        this.selectionBehaviorOnDataChange = "reset" /* DataGridSelectionBehaviorOnDataChange.Reset */;
+        this.multipleDetails = false;
+        this.detailsOnClick = false;
+        this.primaryContextMenuItemOnDoubleClick = false;
+        this.editability = "never" /* DataGridEditability.Never */;
+        this.sidePanelHidden = false;
+        this.selectionToolbarDisabled = false;
+        this.hasAlternatingBackground = DataGrid_1.hasAlternatingBackground.value;
+        this.preventFabCollapse = false;
+        this.fabSlotCollapsed = false;
+        this.slotController = new SlotController(this, async () => {
+            var _a;
+            this.hasSums;
+            this.hasFabs;
+            await this.updateComplete;
+            this.style.setProperty('--mo-data-grid-fab-slot-width', `${((_a = this.renderRoot.querySelector('slot[name=fab]')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 75}px`);
+        });
+        this.instanceofAttributeController = new InstanceofAttributeController(this);
+        this.smallScreenObserverController = new MediaQueryController(this, '(max-width: 768px)');
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.lastScrollElementTop = 0;
+        this.handleScroll = (e) => {
+            var _a;
+            if (this.preventFabCollapse === false) {
+                if (!e.composed) {
+                    e.preventDefault();
+                    (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event('scroll', { composed: true, bubbles: true }));
+                    if (this.hasFabs) {
+                        const targetElement = e.composedPath()[0];
+                        const scrollTop = targetElement.scrollTop;
+                        const isUpScrolling = scrollTop <= this.lastScrollElementTop;
+                        this.fabSlotCollapsed = !isUpScrolling;
+                        this.lastScrollElementTop = scrollTop <= 0 ? 0 : scrollTop;
+                    }
+                }
+            }
+        };
+    }
+    setPage(page) {
+        this.page = page;
+        this.pageChange.dispatch(page);
+    }
+    handlePageChange(page) {
+        this.setPage(page);
+    }
+    setPagination(pagination) {
+        this.pagination = pagination;
+        this.paginationChange.dispatch(pagination);
+    }
+    handlePaginationChange(pagination) {
+        this.setPagination(pagination);
+    }
+    setData(data, selectionBehavior = this.selectionBehaviorOnDataChange) {
+        this.data = data;
+        switch (selectionBehavior) {
+            case "reset" /* DataGridSelectionBehaviorOnDataChange.Reset */:
+                this.deselectAll();
+                break;
+            case "maintain" /* DataGridSelectionBehaviorOnDataChange.Maintain */:
+                this.select(this.previouslySelectedData);
+                break;
+        }
+        this.dataChange.dispatch(data);
+    }
+    selectAll() {
+        if (this.selectionMode === "multiple" /* DataGridSelectionMode.Multiple */) {
+            this.select([...this.data]);
+        }
+    }
+    deselectAll() {
+        this.select([]);
+    }
+    select(data) {
+        if (this.hasSelection) {
+            const selectableData = data.filter(d => this.isSelectable(d));
+            this.selectedData = selectableData;
+            this.selectionChange.dispatch(selectableData);
+        }
+    }
+    isSelectable(data) {
+        var _a, _b;
+        return (_b = (_a = this.isDataSelectable) === null || _a === void 0 ? void 0 : _a.call(this, data)) !== null && _b !== void 0 ? _b : true;
+    }
+    hasDetail(data) {
+        var _a, _b;
+        const hasAutomatedSubDataGrid = !this.subDataGridDataSelector || this.subDataGridDataSelector && Array.isArray(getValueByKeyPath(data, this.subDataGridDataSelector));
+        return hasAutomatedSubDataGrid && ((_b = (_a = this.hasDataDetail) === null || _a === void 0 ? void 0 : _a.call(this, data)) !== null && _b !== void 0 ? _b : true);
+    }
+    async openRowDetails() {
+        await Promise.all(this.detailedRows.map(row => row.setDetails(true)));
+    }
+    async closeRowDetails() {
+        await Promise.all(this.detailedRows.map(row => row.setDetails(false)));
+    }
+    sort(sorting) {
+        this.sorting = sorting;
+        this.sortingChange.dispatch(sorting);
+    }
+    unsort() {
+        this.sort(undefined);
+    }
+    handleSortChange(sorting) {
+        this.sort(sorting);
+    }
+    setColumns(columns) {
+        this.columns = columns;
+        this.columnsChange.dispatch(columns);
+        this.requestUpdate();
+    }
+    extractColumnsIfNotSetExplicitly() {
+        if (this.columns.length === 0) {
+            this.extractColumns();
+        }
+    }
+    extractColumns() {
+        const extractedColumns = this.elementExtractedColumns.length > 0
+            ? this.elementExtractedColumns
+            : this.autoGeneratedColumns;
+        this.setColumns(extractedColumns);
+    }
+    handleEdit(data, dataSelector, value) {
+        const row = this.rows.find(r => r.data === data);
+        const cell = row === null || row === void 0 ? void 0 : row.cells.find(c => c.dataSelector === dataSelector);
+        if (row && cell && value !== undefined && cell.value !== value) {
+            row.requestUpdate();
+            setValueByKeyPath(data, dataSelector, value);
+            this.cellEdit.dispatch(cell);
+        }
+    }
+    navigateToSidePanelTab(tab) {
+        this.sidePanelTab = tab;
+        !tab ? this.sidePanelClose.dispatch() : this.sidePanelOpen.dispatch(tab);
+    }
+    exportExcelFile() {
+        var _a, _b;
+        try {
+            const selectors = this.visibleColumns.map(c => c.dataSelector);
+            CsvGenerator.generate(this.data, selectors);
+            (_a = NotificationHost.instance) === null || _a === void 0 ? void 0 : _a.notifyInfo(t('Exporting excel file'));
+        }
+        catch (error) {
+            (_b = NotificationHost.instance) === null || _b === void 0 ? void 0 : _b.notifyError(error.message);
+            throw error;
+        }
+    }
+    get detailedRows() {
+        return this.rows.filter(row => this.hasDetail(row.data));
+    }
+    get hasDetails() {
+        return !!this.getRowDetailsTemplate && this.data.some(data => this.hasDetail(data));
+    }
+    get hasSelection() {
+        return this.selectionMode !== "none" /* DataGridSelectionMode.None */;
+    }
+    get hasContextMenu() {
+        return this.getRowContextMenuTemplate !== undefined;
+    }
+    get toolbarElements() {
+        return Array.from(this.children).filter(c => c.slot === 'toolbar' && c.getAttribute('hidden') !== '');
+    }
+    get filterElements() {
+        return Array.from(this.children).filter(c => c.slot === 'filter' && c.getAttribute('hidden') !== '');
+    }
+    get hasToolbar() {
+        return this.toolbarElements.length > 0;
+    }
+    get hasFilters() {
+        return this.filterElements.length > 0;
+    }
+    get hasSums() {
+        const hasSums = !!this.columns.find(c => c.sumHeading) || !!this.querySelector('* [slot="sum"]') || !!this.renderRoot.querySelector('slot[name="sum"] > *');
+        this.toggleAttribute('hasSums', hasSums);
+        return hasSums;
+    }
+    get hasFabs() {
+        const hasFabs = !!this.querySelector('* [slot=fab]') || !!this.renderRoot.querySelector('#flexFab *:not(slot[name=fab])');
+        this.toggleAttribute('hasFabs', hasFabs);
+        return hasFabs;
+    }
+    get hasPagination() {
+        return this.pagination !== undefined;
+    }
+    get supportsDynamicPageSize() {
+        return this.hasPagination;
+    }
+    get pageSize() {
+        var _a;
+        const dynamicPageSize = (pageSize) => this.supportsDynamicPageSize ? pageSize : DataGrid_1.pageSize.value;
+        if (!this.pagination) {
+            return dynamicPageSize(this.data.length);
+        }
+        if (this.pagination === 'auto') {
+            const rowsHeight = (_a = this.rowsContainer) === null || _a === void 0 ? void 0 : _a.clientHeight;
+            const rowHeight = DataGrid_1.rowHeight.value;
+            const pageSize = Math.floor((rowsHeight || 0) / rowHeight) || 1;
+            return dynamicPageSize(pageSize);
+        }
+        return this.pagination;
+    }
+    get hasFooter() {
+        return this.hasPagination || this.hasSums;
+    }
+    get dataLength() {
+        return this.data.length;
+    }
+    get maxPage() {
+        return Math.ceil(this.dataLength / this.pageSize);
+    }
+    get hasNextPage() {
+        return this.page !== this.maxPage;
+    }
+    updated(...parameters) {
+        var _a, _b, _c;
+        (_a = this.header) === null || _a === void 0 ? void 0 : _a.requestUpdate();
+        (_b = this.sidePanel) === null || _b === void 0 ? void 0 : _b.requestUpdate();
+        (_c = this.footer) === null || _c === void 0 ? void 0 : _c.requestUpdate();
+        this.rows.forEach(row => row.requestUpdate());
+        return super.updated(...parameters);
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this.extractColumnsIfNotSetExplicitly();
+        this.rowEdit.subscribe(() => this.requestUpdate());
+        this.cellEdit.subscribe(() => this.requestUpdate());
+        this.setPage(1);
+    }
+    static get styles() {
+        return css `
+			:host {
+				--mo-data-grid-column-details-width: 20px;
+				--mo-data-grid-column-selection-width: 40px;
+				--mo-data-grid-column-more-width: 20px;
+
+				--mo-data-grid-header-height: 32px;
+				--mo-data-grid-footer-min-height: 40px;
+				--mo-data-grid-toolbar-padding: 14px;
+				--mo-data-grid-border: 1px solid var(--mo-color-transparent-gray-3);
+
+				/* --mo-data-grid-columns Generated in JS */
+				--mo-data-grid-columns-gap: 6px;
+
+				--mo-data-grid-row-tree-line-width: 8px;
+				--mo-details-data-grid-start-margin: 26px;
+				--mo-data-grid-cell-padding: 3px;
+
+				--mo-data-grid-selection-background: rgba(var(--mo-color-accent-base), 0.5);
+
+				--mo-data-grid-row-height: ${DataGrid_1.rowHeight.value}px;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				overflow-x: hidden;
+			}
+
+			/* Don't try to use ":nth-child(even)" as it won't work for virtualized data-grids */
+			[mo-data-grid-row][data-has-alternating-background] {
+				background: var(--mo-alternating-background);
+			}
+
+			:host([preventVerticalContentScroll]) mo-scroller {
+				overflow-y: hidden;
+			}
+
+			:host([preventVerticalContentScroll]) mo-scroller::part(container) {
+				position: relative;
+			}
+
+			:host(:not([selectionMode="none"])) {
+				--mo-data-grid-row-tree-line-width: 18px;
+			}
+
+			:host([hasDetails]) {
+				--mo-data-grid-row-tree-line-width: 18px;
+			}
+
+			#flexToolbar {
+				position: relative;
+				padding: var(--mo-data-grid-toolbar-padding);
+			}
+
+			#flexToolbar mo-icon-button {
+				align-self: flex-start;
+				color: var(--mo-color-gray);
+			}
+
+			#flexSelectionToolbar {
+				background: var(--mo-color-surface);
+				position: absolute;
+				inset: 0px;
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+			}
+
+			#flexSelectionToolbar > mo-flex {
+				background: var(--mo-data-grid-selection-background);
+				height: 100%;
+				align-items: center;
+			}
+
+			#flexSelectionToolbar mo-icon-button {
+				align-self: center;
+				color: var(--mo-color-foreground);
+			}
+
+			#flexActions {
+				align-items: center;
+				justify-content: center;
+				padding-inline: 14px 6px;
+				margin: 6px 0;
+				cursor: pointer;
+				background: var(--mo-color-accent-transparent);
+				height: calc(100% - calc(2 * 6px));
+				max-height: 45px;
+			}
+
+			#flexFab {
+				position: absolute;
+				top: -28px;
+				inset-inline-end: 16px;
+				transition: var(--mo-data-grid-fab-transition, var(--mo-duration-quick));
+			}
+
+			:host([fabSlotCollapsed][hasFabs]) #flexFab {
+				transform: scale(0);
+				opacity: 0;
+			}
+
+			mo-data-grid-footer {
+				transition: var(--mo-data-grid-fab-transition, var(--mo-duration-quick));
+			}
+
+			:host([hasSums][hasFabs]:not([fabSlotCollapsed])) mo-data-grid-footer {
+				--mo-data-grid-footer-trailing-padding: calc(var(--mo-data-grid-fab-slot-width, 56px) + 16px);
+			}
+
+			slot[name=fab] {
+				display: block;
+				z-index: 1;
+			}
+
+			mo-empty-state, ::slotted(mo-empty-state) {
+				height: 100%;
+			}
+
+			#overlayModeContainer {
+				position: relative;
+				height: 100%;
+				width: 100%;
+			}
+
+			#overlayModeContainer mo-data-grid-side-panel {
+				position: absolute;
+				inset: 0;
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+				background-color: var(--mo-color-surface);
+			}
+		`;
+    }
+    get template() {
+        return html `
+			<slot name='column' hidden ${observeMutation(() => this.requestUpdate())}>${this.columnsTemplate}</slot>
+			${this.toolbarTemplate}
+			${this.smallScreenObserverController.matches ? this.overlayModeTemplate : this.splitterModeTemplate}
+		`;
+    }
+    get splitterModeTemplate() {
+        return html `
+			<mo-splitter direction='horizontal-reversed' ${style({ height: '100%' })} .resizerTemplate=${html `
+				<mo-splitter-resizer-line style='--mo-splitter-resizer-line-thickness: 1px; --mo-splitter-resizer-line-idle-background: var(--mo-color-transparent-gray-3); --mo-splitter-resizer-line-horizontal-transform: scaleX(5);'></mo-splitter-resizer-line>
+			`}>
+				${this.sidePanelTab === undefined ? nothing : html `
+					<mo-splitter-item size='min(25%, 300px)' min='max(15%, 250px)' max='clamp(100px, 50%, 750px)'>
+						${this.sidePanelTemplate}
+					</mo-splitter-item>
+				`}
+
+				<mo-splitter-item min='0px' ${style({ position: 'relative' })}>
+					${this.dataGridTemplate}
+				</mo-splitter-item>
+			</mo-splitter>
+		`;
+    }
+    get overlayModeTemplate() {
+        return html `
+			<mo-flex id='overlayModeContainer'>
+				${this.dataGridTemplate}
+				${this.sidePanelTab === undefined ? nothing : this.sidePanelTemplate}
+			</mo-flex>
+		`;
+    }
+    get sidePanelTemplate() {
+        return html `
+			<mo-data-grid-side-panel
+				.dataGrid=${this}
+				tab=${ifDefined(this.sidePanelTab)}
+			>
+				<slot slot='settings' name='settings'>${this.settingsDefaultTemplate}</slot>
+				<slot slot='filter' name='filter'>${this.filtersDefaultTemplate}</slot>
+			</mo-data-grid-side-panel>
+		`;
+    }
+    get settingsDefaultTemplate() {
+        return nothing;
+    }
+    get filtersDefaultTemplate() {
+        return nothing;
+    }
+    get columnsTemplate() {
+        return nothing;
+    }
+    get rowElementTag() {
+        return literal `mo-data-grid-default-row`;
+    }
+    get fabTemplate() {
+        // These also update the respective attributes for now
+        this.hasSums;
+        this.hasFabs;
+        return html `
+			<slot name='fab' @slotchange=${() => { this.hasSums; this.hasFabs; }}></slot>
+		`;
+    }
+    get contentTemplate() {
+        return !this.data.length ? this.noContentTemplate : this.rowsTemplate;
+    }
+    get noContentTemplate() {
+        return html `
+			<slot name='error-no-content'>
+				<mo-empty-state icon='youtube_searched_for'>${t('No results')}</mo-empty-state>
+			</slot>
+		`;
+    }
+    get dataGridTemplate() {
+        this.provideCssColumnsProperties();
+        this.toggleAttribute('hasDetails', this.hasDetails);
+        return html `
+			<mo-flex ${style({ width: '*', position: 'relative' })}>
+				<mo-grid ${style({ height: '*' })} rows='* auto'>
+					<mo-scroller ${style({ minHeight: 'var(--mo-data-grid-content-min-height, calc(2.5 * var(--mo-data-grid-row-height) + var(--mo-data-grid-header-height)))', paddingBottom: '2px' })}>
+						<mo-grid ${style({ height: '100%' })} rows='auto *'>
+							${this.headerTemplate}
+							${this.contentTemplate}
+						</mo-grid>
+					</mo-scroller>
+					${this.footerTemplate}
+				</mo-grid>
+			</mo-flex>
+		`;
+    }
+    get headerTemplate() {
+        return this.headerHidden ? nothing : html `
+			<mo-data-grid-header .dataGrid=${this}></mo-data-grid-header>
+		`;
+    }
+    get rowsTemplate() {
+        const getRowTemplate = (data, index) => this.getRowTemplate(data, index);
+        const shallVirtualize = !this.preventVerticalContentScroll && this.renderData.length > DataGrid_1.virtualizationThreshold;
+        const content = shallVirtualize === false
+            ? this.renderData.map(getRowTemplate)
+            : html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate}></mo-virtualized-scroller>`;
+        return html `
+			<mo-scroller id='rowsContainer'
+				${style({ gridRow: '2', gridColumn: '1 / last-line' })}
+				${observeResize(() => this.requestUpdate())}
+				@scroll=${this.handleScroll}
+			>
+				${content}
+			</mo-scroller>
+		`;
+    }
+    getRowTemplate(data, index) {
+        return staticHtml `
+			<${this.rowElementTag} part='row'
+				.dataGrid=${this}
+				.data=${data}
+				?selected=${live(this.selectedData.includes(data))}
+				?data-has-alternating-background=${this.hasAlternatingBackground && index % 2 === 1}
+			></${this.rowElementTag}>
+		`;
+    }
+    get footerTemplate() {
+        return html `
+			<mo-flex ${style({ position: 'relative' })}>
+				<mo-flex id='flexFab' direction='vertical-reversed' gap='8px'>
+					${this.fabTemplate}
+				</mo-flex>
+				${this.hasFooter === false ? nothing : html `
+					<mo-data-grid-footer
+						.dataGrid=${this}
+						page=${this.page}
+					>
+						<slot name='sum' slot='sum'>${this.sumDefaultTemplate}</slot>
+					</mo-data-grid-footer>
+				`}
+			</mo-flex>
+		`;
+    }
+    get sumsTemplate() {
+        return html `${this.columns.map(column => this.getSumTemplate(column))}`;
+    }
+    getSumTemplate(column) {
+        if (column.sumHeading === undefined || column.getSumTemplate === undefined) {
+            return;
+        }
+        const sum = this.renderData
+            .map(data => parseFloat(getValueByKeyPath(data, column.dataSelector)))
+            .filter(n => isNaN(n) === false)
+            .reduce(((a, b) => a + b), 0)
+            || 0;
+        return html `
+			<mo-data-grid-footer-sum heading=${column.sumHeading}>
+				${column.getSumTemplate(sum)}
+			</mo-data-grid-footer-sum>
+		`;
+    }
+    get toolbarTemplate() {
+        return this.hasToolbar === false ? nothing : html `
+			<mo-flex id='flexToolbar' direction='horizontal' gap='8px' wrap='wrap' justifyContent='end' alignItems='center'>
+				<mo-flex direction='horizontal' alignItems='inherit' gap='8px' wrap='wrap' ${style({ width: '*' })}>
+					<slot name='toolbar'>${this.toolbarDefaultTemplate}</slot>
+				</mo-flex>
+				<mo-flex direction='horizontal' gap='8px'>
+					<slot name='toolbarAction'>${this.toolbarActionDefaultTemplate}</slot>
+					${this.toolbarActionsTemplate}
+					${this.selectionToolbarTemplate}
+				</mo-flex>
+			</mo-flex>
+		`;
+    }
+    get toolbarDefaultTemplate() {
+        return nothing;
+    }
+    get toolbarActionDefaultTemplate() {
+        return nothing;
+    }
+    get sumDefaultTemplate() {
+        return nothing;
+    }
+    get selectionToolbarTemplate() {
+        return this.selectionToolbarDisabled === true || this.selectedData.length === 0 ? nothing : html `
+			<mo-flex id='flexSelectionToolbar'>
+				<mo-flex direction='horizontal' gap='30px' ${style({ placeSelf: 'stretch' })}>
+					<div ${style({ fontWeight: '500', margin: '0 6px' })}>
+						${t('${count:pluralityNumber} entries selected', { count: this.selectedData.length })}
+					</div>
+					${!this.getRowContextMenuTemplate ? nothing : html `
+						<mo-flex id='flexActions' direction='horizontal' ${!this.getRowContextMenuTemplate ? nothing : contextMenu(this.getRowContextMenuTemplate(this.selectedData))}>
+							<div ${style({ width: '*' })}>${t('Options')}</div>
+							<mo-icon-button dense icon='arrow_drop_down' ${style({ display: 'flex', alignItems: 'center', justifyContent: 'center' })}></mo-icon-button>
+						</mo-flex>
+					`}
+					<div ${style({ width: '*' })}></div>
+					<mo-icon-button icon='close'
+						${tooltip(t('Deselect All'))}
+						@click=${() => this.deselectAll()}
+					></mo-icon-button>
+				</mo-flex>
+			</mo-flex>
+		`;
+    }
+    get toolbarActionsTemplate() {
+        return html `
+			${!this.hasFilters ? nothing : html `
+				<mo-icon-button icon='filter_list'
+					${tooltip(t('More Filters'))}
+					${style({ color: this.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+					@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? undefined : "filters" /* DataGridSidePanelTab.Filters */)}
+				></mo-icon-button>
+			`}
+
+			<mo-icon-button icon='settings'
+				${tooltip(t('Settings'))}
+				${style({ color: this.sidePanelTab === "settings" /* DataGridSidePanelTab.Settings */ ? 'var(--mo-color-accent)' : 'var(--mo-color-gray)' })}
+				@click=${() => this.navigateToSidePanelTab(this.sidePanelTab === "settings" /* DataGridSidePanelTab.Settings */ ? undefined : "settings" /* DataGridSidePanelTab.Settings */)}
+			></mo-icon-button>
+		`;
+    }
+    // The reason for not doing this in the CSS is that we need to trim all the 0px values out of the columns
+    // because the 'grid column gap' renders a gap no matter if the column is 0px or not
+    provideCssColumnsProperties() {
+        this.style.setProperty('--mo-data-grid-content-width', this.dataColumnsWidths.join(' '));
+        this.style.setProperty('--mo-data-grid-columns', this.columnsWidths.join(' '));
+    }
+    get columnsWidths() {
+        return [
+            this.detailsColumnWidth,
+            this.selectionColumnWidth,
+            ...this.dataColumnsWidths,
+            this.moreColumnWidth
+        ].filter((c) => c !== undefined);
+    }
+    get detailsColumnWidth() {
+        return !this.hasDetails ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-details-width');
+    }
+    get selectionColumnWidth() {
+        return !this.hasSelection ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-selection-width');
+    }
+    get dataColumnsWidths() {
+        return this.visibleColumns
+            .map(c => c.width)
+            .filter((c) => c !== undefined);
+    }
+    get moreColumnWidth() {
+        return this.sidePanelHidden && !this.hasContextMenu ? undefined : window.getComputedStyle(this).getPropertyValue('--mo-data-grid-column-more-width');
+    }
+    get sortedData() {
+        const sorting = this.sorting;
+        if (!sorting) {
+            return this.data;
+        }
+        const dataClone = [...this.data];
+        const compare = (a, b) => {
+            var _a, _b, _c, _d;
+            const valueA = (_a = getValueByKeyPath(a, sorting.selector)) !== null && _a !== void 0 ? _a : Infinity;
+            const valueB = (_b = getValueByKeyPath(b, sorting.selector)) !== null && _b !== void 0 ? _b : Infinity;
+            return (_d = (_c = valueB === null || valueB === void 0 ? void 0 : valueB.localeCompare) === null || _c === void 0 ? void 0 : _c.call(valueB, valueA)) !== null && _d !== void 0 ? _d : (valueB - valueA);
+        };
+        switch (sorting.strategy) {
+            case "ascending" /* DataGridSortingStrategy.Ascending */:
+                return dataClone.sort((a, b) => compare(a, b));
+            case "descending" /* DataGridSortingStrategy.Descending */:
+                return dataClone.sort((a, b) => compare(b, a));
+        }
+    }
+    get renderData() {
+        if (this.hasPagination === false) {
+            return this.sortedData;
+        }
+        const from = (this.page - 1) * this.pageSize;
+        const to = this.page * this.pageSize;
+        return this.sortedData.slice(from, to);
+    }
+    get elementExtractedColumns() {
+        var _a;
+        if (!this.columnsSlot) {
+            return [];
+        }
+        const children = this.columnsSlot.children.length > 0 ? Array.from(this.columnsSlot.children) : undefined;
+        const assigned = this.columnsSlot.assignedElements().length > 0 ? Array.from(this.columnsSlot.assignedElements()) : undefined;
+        return Array.from((_a = assigned !== null && assigned !== void 0 ? assigned : children) !== null && _a !== void 0 ? _a : [])
+            .filter((c) => {
+            const isColumn = c instanceof DataGridColumn;
+            if (isColumn) {
+                c.dataGrid = this;
+            }
+            return isColumn;
+        })
+            .map(c => c.definition);
+    }
+    get autoGeneratedColumns() {
+        if (!this.dataLength) {
+            return [];
+        }
+        const getDefaultColumnElement = (value) => {
+            switch (typeof value) {
+                case 'number':
+                case 'bigint':
+                    return 'mo-data-grid-column-number';
+                case 'boolean':
+                    return 'mo-data-grid-column-boolean';
+                default:
+                    return 'mo-data-grid-column-text';
+            }
+        };
+        const sampleData = this.data[0];
+        return Object.keys(sampleData || {})
+            .filter(key => !key.startsWith('_'))
+            .map(key => {
+            const columnElement = document.createElement(getDefaultColumnElement(getValueByKeyPath(sampleData, key)));
+            columnElement.remove();
+            return {
+                heading: key.replace(/([A-Z])/g, ' $1').charAt(0).toUpperCase() + key.replace(/([A-Z])/g, ' $1').slice(1),
+                dataSelector: key,
+                width: '1fr',
+                hidden: false,
+                getContentTemplate: columnElement.getContentTemplate.bind(columnElement),
+                getEditContentTemplate: columnElement.getEditContentTemplate.bind(columnElement),
+            };
+        });
+    }
+    get visibleColumns() {
+        return this.columns.filter(c => c.hidden === false);
+    }
+    get previouslySelectedData() {
+        const hasId = this.selectedData.every(d => Object.keys(d).includes('id'));
+        if (hasId) {
+            const selectedIds = this.selectedData.map((d) => d.id);
+            return this.data.filter((d) => selectedIds.includes(d.id));
+        }
+        else {
+            const selectedDataJson = this.selectedData.map(d => JSON.stringify(d));
+            return this.data.filter(d => selectedDataJson.includes(JSON.stringify(d)));
+        }
+    }
+};
+DataGrid.rowHeight = new LocalStorage('MoDeL.Components.DataGrid.RowHeight', 35);
+DataGrid.pageSize = new LocalStorage('MoDeL.Components.DataGrid.PageSize', 25);
+DataGrid.hasAlternatingBackground = new LocalStorage('MoDeL.Components.DataGrid.HasAlternatingBackground', true);
+DataGrid.virtualizationThreshold = 50;
+__decorate([
+    event()
+], DataGrid.prototype, "dataChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "selectionChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "pageChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "paginationChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "columnsChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "sidePanelOpen", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "sidePanelClose", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "sortingChange", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowConnected", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowDisconnected", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowClick", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowDoubleClick", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowDetailsOpen", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowDetailsClose", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "rowEdit", void 0);
+__decorate([
+    event()
+], DataGrid.prototype, "cellEdit", void 0);
+__decorate([
+    property({ type: Array })
+], DataGrid.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], DataGrid.prototype, "columns", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGrid.prototype, "headerHidden", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGrid.prototype, "preventVerticalContentScroll", void 0);
+__decorate([
+    property({ type: Number })
+], DataGrid.prototype, "page", void 0);
+__decorate([
+    property({ reflect: true, converter: (value) => Number.isNaN(Number(value)) ? value : Number(value) })
+], DataGrid.prototype, "pagination", void 0);
+__decorate([
+    property({ type: Object })
+], DataGrid.prototype, "sorting", void 0);
+__decorate([
+    property({ reflect: true })
+], DataGrid.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Object })
+], DataGrid.prototype, "isDataSelectable", void 0);
+__decorate([
+    property({ type: Array })
+], DataGrid.prototype, "selectedData", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "selectOnClick", void 0);
+__decorate([
+    property()
+], DataGrid.prototype, "selectionBehaviorOnDataChange", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "multipleDetails", void 0);
+__decorate([
+    property({ updated: subDataGridSelectorChanged })
+], DataGrid.prototype, "subDataGridDataSelector", void 0);
+__decorate([
+    property({ type: Object })
+], DataGrid.prototype, "hasDataDetail", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "detailsOnClick", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "primaryContextMenuItemOnDoubleClick", void 0);
+__decorate([
+    property({ reflect: true })
+], DataGrid.prototype, "editability", void 0);
+__decorate([
+    property({ type: Object })
+], DataGrid.prototype, "getRowDetailsTemplate", void 0);
+__decorate([
+    property({ type: Object })
+], DataGrid.prototype, "getRowContextMenuTemplate", void 0);
+__decorate([
+    property()
+], DataGrid.prototype, "sidePanelTab", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "sidePanelHidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "selectionToolbarDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "hasAlternatingBackground", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataGrid.prototype, "preventFabCollapse", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGrid.prototype, "fabSlotCollapsed", void 0);
+__decorate([
+    queryAll('[mo-data-grid-row]')
+], DataGrid.prototype, "rows", void 0);
+__decorate([
+    query('mo-data-grid-header')
+], DataGrid.prototype, "header", void 0);
+__decorate([
+    query('#rowsContainer')
+], DataGrid.prototype, "rowsContainer", void 0);
+__decorate([
+    query('mo-data-grid-footer')
+], DataGrid.prototype, "footer", void 0);
+__decorate([
+    query('mo-data-grid-side-panel')
+], DataGrid.prototype, "sidePanel", void 0);
+__decorate([
+    query('slot[name=column]')
+], DataGrid.prototype, "columnsSlot", void 0);
+DataGrid = DataGrid_1 = __decorate([
+    component('mo-data-grid')
+], DataGrid);
+export { DataGrid };
+function subDataGridSelectorChanged() {
+    const selector = this.subDataGridDataSelector;
+    if (selector === undefined || !!this.getRowDetailsTemplate) {
+        return;
+    }
+    this.getRowDetailsTemplate = (data) => html `
+		<mo-data-grid ${style({ padding: '0px' })}
+			.data=${getValueByKeyPath(data, selector)}
+			headerHidden
+			sidePanelHidden
+			.columns=${this.columns}
+			.subDataGridDataSelector=${this.subDataGridDataSelector}
+			.hasDataDetail=${this.hasDataDetail}
+			.selectionMode=${this.selectionMode}
+			.isDataSelectable=${this.isDataSelectable}
+			?selectOnClick=${this.selectOnClick}
+			?primaryContextMenuItemOnDoubleClick=${this.primaryContextMenuItemOnDoubleClick}
+			?multipleDetails=${this.multipleDetails}
+			?detailsOnClick=${this.detailsOnClick}
+			.getRowContextMenuTemplate=${this.getRowContextMenuTemplate}
+			editability=${this.editability}
+			@rowConnected=${(e) => this.rowConnected.dispatch(e.detail)}
+			@rowDisconnected=${(e) => this.rowDisconnected.dispatch(e.detail)}
+			@rowClick=${(e) => this.rowClick.dispatch(e.detail)}
+			@rowDoubleClick=${(e) => this.rowDoubleClick.dispatch(e.detail)}
+			@rowDetailsOpen=${(e) => this.rowDetailsOpen.dispatch(e.detail)}
+			@rowDetailsClose=${(e) => this.rowDetailsClose.dispatch(e.detail)}
+			@rowEdit=${(e) => this.rowEdit.dispatch(e.detail)}
+			@cellEdit=${(e) => this.cellEdit.dispatch(e.detail)}
+		></mo-data-grid>
+	`;
+}