@3mo/data-grid 0.5.5 → 0.5.6

package/dist/rows/DataGridRow.js

@@ -16,17 +16,18 @@ export class DataGridRow extends Component {
         super(...arguments);
         this.selected = false;
         this.detailsOpen = false;
+        this.level = 0;
         this.contextMenuOpen = false;
     }
     get detailsElement() {
-        var _a;
-        return (_a = this.renderRoot.querySelector('#detailsContainer')) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        return this.renderRoot.querySelector('#detailsContainer')?.firstElementChild;
     }
     initialized() {
         this.toggleAttribute('mo-data-grid-row', true);
     }
     updated(...parameters) {
         this.cells.forEach(cell => cell.requestUpdate());
+        this.subRows.forEach(subRow => subRow.requestUpdate());
         if (this.detailsElement instanceof LitElement) {
             this.detailsElement.requestUpdate();
         }
@@ -36,157 +37,159 @@ export class DataGridRow extends Component {
         return this.dataGrid.hasDetail(this.data);
     }
     static get styles() {
-        return css `
-			:host {
-				display: block;
-				position: relative;
-				height: auto;
-				width: 100%;
-			}
-
-			:host(:hover) #contentContainer {
-				color: inherit;
-				background: var(--mo-color-accent-transparent) !important;
-			}
-
-			:host(:hover) #contentContainer::before, #detailsContainer::before {
-				content: '';
-				width: 2px;
-				height: 100%;
-				top: 0;
-				inset-inline-start: 0;
-				position: absolute;
-				background-color: var(--mo-color-accent);
-			}
-
-			:host([data-has-alternating-background]) {
-				background: var(--mo-data-grid-alternating-background);
-			}
-
-			#contentContainer {
-				cursor: pointer;
-				transition: 250ms;
-			}
-
-			:host([selected]) #contentContainer, :host([contextMenuOpen]) #contentContainer {
-				background: var(--mo-data-grid-selection-background) !important;
-			}
-
-			:host([selected]:not(:last-of-type)) #contentContainer:after {
-				content: '';
-				position: absolute;
-				bottom: 0;
-				inset-inline-start: 0;
-				width: 100%;
-				border-bottom: 1px solid var(--mo-color-gray-transparent);
-			}
-
-			#contextMenuIconButton {
-				transition: 250ms;
-				opacity: 0.5;
-				color: var(--mo-color-gray);
-			}
-
-			:host([selected]) #contextMenuIconButton, :host([contextMenuOpen]) #contextMenuIconButton {
-				color: var(--mo-color-foreground);
-				opacity: 1;
-			}
-
-			#contentContainer:hover #contextMenuIconButton {
-				color: var(--mo-color-accent);
-				opacity: 1;
-			}
-
-			#detailsExpanderIconButton {
-				transition: 250ms;
-			}
-
-			#detailsExpanderIconButton:hover {
-				color: var(--mo-color-accent);
-			}
-
-			:host([detailsOpen]) #detailsExpanderIconButton {
-				transform: rotate(90deg);
-			}
-
-			#detailsContainer {
-				display: inline-block;
-				padding: 0;
-				width: 100%;
-			}
-
-			#detailsContainer:empty {
-				display: none;
-			}
-
-			#detailsContainer > :first-child {
-				padding: 8px 0;
-			}
+        return css `
+			:host {
+				display: block;
+				position: relative;
+				height: auto;
+				width: 100%;
+			}
+
+			:host(:hover) #contentContainer {
+				color: inherit;
+				background: var(--mo-color-accent-transparent) !important;
+			}
+
+			:host(:hover) #contentContainer::before, #detailsContainer::before {
+				content: '';
+				width: 2px;
+				height: 100%;
+				top: 0;
+				inset-inline-start: 0;
+				position: absolute;
+				background-color: var(--mo-color-accent);
+			}
+
+			:host([data-has-alternating-background]) {
+				background: var(--mo-data-grid-alternating-background);
+			}
+
+			#contentContainer {
+				cursor: pointer;
+				transition: 250ms;
+			}
+
+			:host([selected]) #contentContainer, :host([contextMenuOpen]) #contentContainer {
+				background: var(--mo-data-grid-selection-background) !important;
+			}
+
+			:host([selected]:not(:last-of-type)) #contentContainer:after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				inset-inline-start: 0;
+				width: 100%;
+				border-bottom: 1px solid var(--mo-color-gray-transparent);
+			}
+
+			#contextMenuIconButton {
+				transition: 250ms;
+				opacity: 0.5;
+				color: var(--mo-color-gray);
+			}
+
+			:host([selected]) #contextMenuIconButton, :host([contextMenuOpen]) #contextMenuIconButton {
+				color: var(--mo-color-foreground);
+				opacity: 1;
+			}
+
+			#contentContainer:hover #contextMenuIconButton {
+				color: var(--mo-color-accent);
+				opacity: 1;
+			}
+
+			#detailsExpanderIconButton {
+				transition: 250ms;
+			}
+
+			#detailsExpanderIconButton:hover {
+				color: var(--mo-color-accent);
+			}
+
+			:host([detailsOpen]) #detailsExpanderIconButton {
+				transform: rotate(90deg);
+			}
+
+			#detailsContainer {
+				display: inline-block;
+				padding: 0;
+				width: 100%;
+			}
+
+			#detailsContainer:empty {
+				display: none;
+			}
+
+			#detailsContainer > :first-child {
+				padding: 8px 0;
+			}
+
+			mo-data-grid-cell:first-of-type:not([alignment=end]), mo-data-grid-cell[alignment=end]:first-of-type + mo-data-grid-cell {
+				margin-inline-start: calc(var(--_level, 0) * var(--mo-data-grid-column-sub-row-indentation, 10px));
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-grid id='contentContainer'
-				@click=${() => this.handleContentClick()}
-				@dblclick=${() => this.handleContentDoubleClick()}
-				@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
-				@contextmenu=${(e) => this.openContextMenu(e)}
-			>
-				${this.rowTemplate}
-			</mo-grid>
-			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
+        return html `
+			<mo-grid id='contentContainer'
+				@click=${() => this.handleContentClick()}
+				@dblclick=${() => this.handleContentDoubleClick()}
+				@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
+				@contextmenu=${(e) => this.openContextMenu(e)}
+			>
+				${this.rowTemplate}
+			</mo-grid>
+			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
 		`;
     }
     get detailsExpanderTemplate() {
-        var _a, _b;
-        return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center' ${style({ width: 'var(--mo-data-grid-column-details-width)' })}
-				@click=${(e) => e.stopPropagation()}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-			${this.hasDetails === false ? html.nothing : html `
-				<mo-icon-button id='detailsExpanderIconButton' ${style({ color: 'var(--mo-color-foreground)' })}
-					icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
-					?disabled=${((_b = (_a = this.dataGrid).hasDataDetail) === null || _b === void 0 ? void 0 : _b.call(_a, this.data)) === false}
-					@click=${() => this.toggleDetails()}
-				></mo-icon-button>
-			`}
-			</mo-flex>
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center' ${style({ width: 'var(--mo-data-grid-column-details-width)' })}
+				@click=${(e) => e.stopPropagation()}
+				@dblclick=${(e) => e.stopPropagation()}
+			>
+			${this.hasDetails === false ? html.nothing : html `
+				<mo-icon-button id='detailsExpanderIconButton' ${style({ color: 'var(--mo-color-foreground)' })}
+					icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+					?disabled=${this.dataGrid.hasDataDetail?.(this.data) === false}
+					@click=${() => this.toggleDetails()}
+				></mo-icon-button>
+			`}
+			</mo-flex>
 		`;
     }
     get selectionTemplate() {
-        var _a, _b;
-        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
-			<mo-flex id='selectionContainer' ${style({ width: 'var(--mo-data-grid-column-selection-width)' })} justifyContent='center' alignItems='center'
-				@click=${(e) => e.stopPropagation()}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-				<mo-checkbox
-					tabindex='-1'
-					?disabled=${((_b = (_a = this.dataGrid).isDataSelectable) === null || _b === void 0 ? void 0 : _b.call(_a, this.data)) === false}
-					?selected=${this.selected}
-					@change=${(e) => this.setSelection(e.detail)}
-				></mo-checkbox>
-			</mo-flex>
+        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
+			<mo-flex id='selectionContainer' ${style({ width: 'var(--mo-data-grid-column-selection-width)' })} justifyContent='center' alignItems='center'
+				@click=${(e) => e.stopPropagation()}
+				@dblclick=${(e) => e.stopPropagation()}
+			>
+				<mo-checkbox
+					tabindex='-1'
+					?disabled=${this.dataGrid.isDataSelectable?.(this.data) === false}
+					?selected=${this.selected}
+					@change=${(e) => this.setSelection(e.detail)}
+				></mo-checkbox>
+			</mo-flex>
 		`;
     }
     getCellTemplate(column) {
-        return column.hidden ? html.nothing : html `
-			<mo-data-grid-cell
-				.row=${this}
-				.column=${column}
-				.value=${getValueByKeyPath(this.data, column.dataSelector)}
-			></mo-data-grid-cell>
+        return column.hidden ? html.nothing : html `
+			<mo-data-grid-cell
+				.row=${this}
+				.column=${column}
+				.value=${getValueByKeyPath(this.data, column.dataSelector)}
+			></mo-data-grid-cell>
 		`;
     }
     get contextMenuIconButtonTemplate() {
-        return this.dataGrid.hasContextMenu === false ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'
-				@click=${this.openContextMenu}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-				<mo-icon-button id='contextMenuIconButton' icon='more_vert'></mo-icon-button>
-			</mo-flex>
+        return this.dataGrid.hasContextMenu === false ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'
+				@click=${this.openContextMenu}
+				@dblclick=${(e) => e.stopPropagation()}
+			>
+				<mo-icon-button id='contextMenuIconButton' icon='more_vert'></mo-icon-button>
+			</mo-flex>
 		`;
     }
     get detailsTemplate() {
@@ -198,10 +201,10 @@ export class DataGridRow extends Component {
         }
         const subData = this.dataGrid.getSubData(this.data);
         if (subData) {
-            return html `
-				<mo-flex style='width: 100%; padding: 0px'>
-					${subData.map(data => this.dataGrid.getRowTemplate(data))}
-				</mo-flex>
+            return html `
+				<mo-flex style='width: 100%; padding: 0px'>
+					${subData.map(data => this.dataGrid.getRowTemplate(data, undefined, this.level + 1))}
+				</mo-flex>
 			`;
         }
         return html.nothing;
@@ -228,10 +231,9 @@ export class DataGridRow extends Component {
         this.dataGrid.rowMiddleClick.dispatch(this);
     }
     async clickOnPrimaryContextMenuItemIfApplicable() {
-        var _a, _b;
         if (this.dataGrid.hasContextMenu === true && this.dataGrid.primaryContextMenuItemOnDoubleClick === true) {
             await this.openContextMenu();
-            (_b = (_a = ContextMenu.openInstance) === null || _a === void 0 ? void 0 : _a.items.find(item => item instanceof DataGridPrimaryContextMenuItem)) === null || _b === void 0 ? void 0 : _b.click();
+            ContextMenu.openInstance?.items.find(item => item instanceof DataGridPrimaryContextMenuItem)?.click();
             this.contextMenuOpen = false;
         }
     }
@@ -239,7 +241,7 @@ export class DataGridRow extends Component {
         if (!this.dataGrid.hasContextMenu) {
             return;
         }
-        mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.stopPropagation();
+        mouseEvent?.stopPropagation();
         if (this.dataGrid.selectedData.includes(this.data) === false) {
             this.dataGrid.select(this.dataGrid.selectionMode !== DataGridSelectionMode.None ? [this.data] : []);
         }
@@ -260,8 +262,7 @@ export class DataGridRow extends Component {
             : this.dataGrid.selectedData;
     }
     get contextMenuTemplate() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.dataGrid).getRowContextMenuTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.contextMenuData)) !== null && _c !== void 0 ? _c : html.nothing;
+        return this.dataGrid.getRowContextMenuTemplate?.(this.contextMenuData) ?? html.nothing;
     }
     async closeContextMenu() {
         this.contextMenuOpen = false;
@@ -281,6 +282,9 @@ __decorate([
 __decorate([
     queryAll('mo-data-grid-cell')
 ], DataGridRow.prototype, "cells", void 0);
+__decorate([
+    queryAll('[mo-data-grid-row]')
+], DataGridRow.prototype, "subRows", void 0);
 __decorate([
     property({ type: Object })
 ], DataGridRow.prototype, "dataGrid", void 0);
@@ -306,6 +310,14 @@ __decorate([
         }
     })
 ], DataGridRow.prototype, "detailsOpen", void 0);
+__decorate([
+    property({
+        type: Number,
+        updated() {
+            this.style.setProperty('--_level', this.level.toString());
+        }
+    })
+], DataGridRow.prototype, "level", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DataGridRow.prototype, "contextMenuOpen", void 0);