@3mo/data-grid 0.26.4 → 0.27.0

package/dist/rows/DataGridRow.js

@@ -50,250 +50,252 @@ export class DataGridRow extends Component {
         return this.dataGrid.detailsController.hasDetail(this.dataRecord);
     }
     static get styles() {
-        return css `
-			:host {
-				display: block;
-				position: relative;
-				height: auto;
-				width: 100%;
-			}
-
-			:host([data-reorderability=${unsafeCSS(ReorderabilityState.Dragging)}]) {
-				opacity: 0.5;
-			}
-
-			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropBefore)}]) {
-				border-top: 2px solid var(--mo-color-accent);
-			}
-
-			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropAfter)}]) {
-				border-bottom: 2px solid var(--mo-color-accent);
-			}
-
-			#reorderability {
-				position: sticky;
-				z-index: 2;
-				width: var(--mo-data-grid-column-reorder-width);
-				height: 100%;
-				background: var(--mo-data-grid-sticky-part-color);
-
-				mo-icon-button {
-					cursor: grab;
-					opacity: 0.5;
-				}
-			}
-
-			#detailsExpanderContainer {
-				position: sticky;
-				z-index: 2;
-				inset-inline-start: 0px;
-				background: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
-			}
-
-			#selectionContainer {
-				width: var(--mo-data-grid-column-selection-width);
-				position: sticky;
-				z-index: 2;
-				height: 100%;
-				background: var(--mo-data-grid-sticky-part-color);
-			}
-
-			:host(:hover) {
-				#contentContainer {
-					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent) 25%) !important;
-					color: inherit;
-					background: var(--mo-color-accent-transparent) !important;
-				}
-
-				#contentContainer, #detailsContainer {
-					&::before {
-						content: '';
-						width: 2px;
-						height: 100%;
-						top: 0;
-						position: absolute;
-						background-color: var(--mo-color-accent);
-						z-index: 2;
-					}
-				}
-			}
-
-			:host([data-has-alternating-background]) {
-				#contentContainer, #detailsContainer:not(:has([instanceof*=mo-data-grid])) {
-					background: var(--mo-data-grid-alternating-background);
-					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), black var(--mo-data-grid-alternating-background-transparency));
-				}
-			}
-
-			#contentContainer {
-				grid-column: -1 / 1;
-			}
-
-			#contextMenuIconButtonContainer {
-				height: 100%;
-				place-self: end;
-				position: sticky;
-				inset-inline-end: 0px;
-				z-index: 3;
-				background: var(--mo-data-grid-sticky-part-color);
-			}
-
-			#contextMenuIconButton {
-				opacity: 0.5;
-				color: var(--mo-color-gray);
-			}
-
-			:host([selected]), :host([data-context-menu-open]) {
-				#contentContainer {
-					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent)) !important;
-					background: var(--mo-data-grid-selection-background) !important;
-				}
-
-				#contextMenuIconButton {
-					color: currentColor;
-					opacity: 1;
-				}
-			}
-
-			#contentContainer:hover #contextMenuIconButton {
-				color: currentColor;
-				opacity: 1;
-			}
-
-			#detailsExpanderIconButton {
-				transition: transform 250ms;
-
-				&[data-rtl] {
-					transform: rotate(180deg);
-				}
-			}
-
-			:host([detailsOpen]) #detailsExpanderIconButton {
-				transform: rotate(90deg);
-			}
-
-			#detailsContainer {
-				display: grid;
-				grid-template-columns: subgrid;
-				grid-column: -1 / 1;
-
-				&:empty {
-					display: none;
-				}
-
-				& > * {
-					grid-column: data / -1;
-					box-sizing: border-box;
-					padding-inline: var(--mo-data-grid-cell-padding);
-					padding-block: 1rem;
-
-					&[mo-data-grid-row] {
-						grid-column: -1 / 1;
-						padding: 0;
-					}
-
-					&[instanceof*=mo-data-grid] {
-						padding-inline: 0;
-						--mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
-						--mo-data-grid-alternating-background: transparent;
-						--mo-data-grid-alternating-background-transparency: 0;
-						--_content-min-height-default: 0px;
-
-						&::part(row) {
-							border-block-end: var(--mo-data-grid-border);
-						}
-					}
-				}
-			}
-
-			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, 20px));
-			}
+        return css `
+			:host {
+				display: block;
+				position: relative;
+				height: auto;
+				width: 100%;
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.Dragging)}]) {
+				opacity: 0.5;
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropBefore)}]) {
+				border-top: 2px solid var(--mo-color-accent);
+			}
+
+			:host([data-reorderability=${unsafeCSS(ReorderabilityState.DropAfter)}]) {
+				border-bottom: 2px solid var(--mo-color-accent);
+			}
+
+			#reorderability {
+				position: sticky;
+				z-index: 2;
+				width: var(--mo-data-grid-column-reorder-width);
+				height: 100%;
+				background: var(--mo-data-grid-sticky-part-color);
+
+				mo-icon-button {
+					cursor: grab;
+					opacity: 0.5;
+				}
+			}
+
+			#detailsExpanderContainer {
+				position: sticky;
+				z-index: 2;
+				inset-inline-start: 0px;
+				background: var(--mo-data-grid-sticky-expander-part-color, var(--mo-data-grid-sticky-part-color));
+			}
+
+			#selectionContainer {
+				width: var(--mo-data-grid-column-selection-width);
+				position: sticky;
+				z-index: 2;
+				height: 100%;
+				background: var(--mo-data-grid-sticky-part-color);
+			}
+
+			:host(:hover) {
+				#contentContainer {
+					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent) 25%) !important;
+					color: inherit;
+					background: var(--mo-color-accent-transparent) !important;
+				}
+
+				#contentContainer, #detailsContainer {
+					&::before {
+						content: '';
+						width: 2px;
+						height: 100%;
+						top: 0;
+						position: absolute;
+						background-color: var(--mo-color-accent);
+						z-index: 2;
+					}
+				}
+			}
+
+			:host([data-has-alternating-background]) {
+				#contentContainer, #detailsContainer:not(:has([instanceof*=mo-data-grid])) {
+					background: var(--mo-data-grid-alternating-background);
+					--mo-data-grid-sticky-part-color: light-dark(
+						color-mix(in srgb, var(--mo-color-surface), black 5%),
+						color-mix(in srgb, var(--mo-color-surface), black 20%)
+					);
+				}
+			}
+
+			#contentContainer {
+				grid-column: -1 / 1;
+			}
+
+			#contextMenuIconButtonContainer {
+				height: 100%;
+				place-self: end;
+				position: sticky;
+				inset-inline-end: 0px;
+				z-index: 3;
+				background: var(--mo-data-grid-sticky-part-color);
+			}
+
+			#contextMenuIconButton {
+				opacity: 0.5;
+				color: var(--mo-color-gray);
+			}
+
+			:host([selected]), :host([data-context-menu-open]) {
+				#contentContainer {
+					--mo-data-grid-sticky-part-color: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-accent)) !important;
+					background: var(--mo-data-grid-selection-background) !important;
+				}
+
+				#contextMenuIconButton {
+					color: currentColor;
+					opacity: 1;
+				}
+			}
+
+			#contentContainer:hover #contextMenuIconButton {
+				color: currentColor;
+				opacity: 1;
+			}
+
+			#detailsExpanderIconButton {
+				transition: transform 250ms;
+
+				&[data-rtl] {
+					transform: rotate(180deg);
+				}
+			}
+
+			:host([detailsOpen]) #detailsExpanderIconButton {
+				transform: rotate(90deg);
+			}
+
+			#detailsContainer {
+				display: grid;
+				grid-template-columns: subgrid;
+				grid-column: -1 / 1;
+
+				&:empty {
+					display: none;
+				}
+
+				& > * {
+					grid-column: data / -1;
+					box-sizing: border-box;
+					padding-inline: var(--mo-data-grid-cell-padding);
+					padding-block: 1rem;
+
+					&[mo-data-grid-row] {
+						grid-column: -1 / 1;
+						padding: 0;
+					}
+
+					&[instanceof*=mo-data-grid] {
+						padding-inline: 0;
+						--mo-data-grid-header-background: color-mix(in srgb, var(--mo-color-foreground), transparent 96%);
+						--mo-data-grid-alternating-background: transparent;
+						--_content-min-height-default: 0px;
+
+						&::part(row) {
+							border-block-end: var(--mo-data-grid-border);
+						}
+					}
+				}
+			}
+
+			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, 20px));
+			}
 		`;
     }
     get template() {
         this.style.setProperty('--_level', this.level.toString());
         this.toggleAttribute('selected', this.dataRecord.isSelected);
         this.toggleAttribute('detailsOpen', this.dataRecord.detailsOpen);
-        return !this.isIntersecting ? html.nothing : html `
-			<mo-grid id='contentContainer' columns='subgrid'
-				@click=${() => this.handleContentClick()}
-				@dblclick=${() => this.handleContentDoubleClick()}
-				@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
-				${this.contextMenuTemplate === html.nothing ? html.nothing : popover(() => html `
-					<mo-context-menu @openChange=${(e) => this.handleContextMenuOpenChange(e.detail)}>
-						${this.contextMenuTemplate}
-					</mo-context-menu>
-				`)}
-			>
-				${this.rowTemplate}
-			</mo-grid>
-			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
+        return !this.isIntersecting ? html.nothing : html `
+			<mo-grid id='contentContainer' columns='subgrid'
+				@click=${() => this.handleContentClick()}
+				@dblclick=${() => this.handleContentDoubleClick()}
+				@auxclick=${(e) => e.button !== 1 ? void 0 : this.handleContentMiddleClick()}
+				${this.contextMenuTemplate === html.nothing ? html.nothing : popover(() => html `
+					<mo-context-menu @openChange=${(e) => this.handleContextMenuOpenChange(e.detail)}>
+						${this.contextMenuTemplate}
+					</mo-context-menu>
+				`)}
+			>
+				${this.rowTemplate}
+			</mo-grid>
+			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : html.nothing}</slot>
 		`;
     }
     get reorderabilityTemplate() {
-        return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
-			<mo-flex id='reorderability' justifyContent='center' alignItems='center' ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}>
-				<mo-icon-button icon='drag_handle'></mo-icon-button>
-			</mo-flex>
+        return !this.dataGrid.reorderabilityController.enabled ? html.nothing : html `
+			<mo-flex id='reorderability' justifyContent='center' alignItems='center' ${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('reordering') })}>
+				<mo-icon-button icon='drag_handle'></mo-icon-button>
+			</mo-flex>
 		`;
     }
     get detailsExpanderTemplate() {
-        return this.dataGrid.hasDetails === false ? html.nothing : html `
-			<mo-flex id='detailsExpanderContainer' justifyContent='center' alignItems='center'
-				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
-				@click=${(e) => e.stopPropagation()}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-				${this.hasDetails === false ? html.nothing : html `
-					<mo-icon-button id='detailsExpanderIconButton'
-						icon='keyboard_arrow_right'
-						?data-rtl=${DirectionsByLanguage.get() === 'rtl'}
-						@click=${() => this.toggleDetails()}
-					></mo-icon-button>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex id='detailsExpanderContainer' justifyContent='center' alignItems='center'
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('details') })}
+				@click=${(e) => e.stopPropagation()}
+				@dblclick=${(e) => e.stopPropagation()}
+			>
+				${this.hasDetails === false ? html.nothing : html `
+					<mo-icon-button id='detailsExpanderIconButton'
+						icon='keyboard_arrow_right'
+						?data-rtl=${DirectionsByLanguage.get() === 'rtl'}
+						@click=${() => this.toggleDetails()}
+					></mo-icon-button>
+				`}
+			</mo-flex>
 		`;
     }
     get selectionTemplate() {
-        return !this.dataGrid.hasSelection ? html.nothing : html `
-			<mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
-				?data-has-details=${this.dataGrid.hasDetails}
-				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
-				@click=${(e) => e.stopPropagation()}
-				@dblclick=${(e) => e.stopPropagation()}
-			>
-				<mo-checkbox
-					tabindex='-1'
-					?disabled=${this.dataRecord.isSelectable === false}
-					.selected=${live(this.selected)}
-					@change=${(e) => this.dataGrid.selectionController.setSelection(this.data, e.detail, true)}
-				></mo-checkbox>
-			</mo-flex>
+        return !this.dataGrid.hasSelection ? html.nothing : html `
+			<mo-flex id='selectionContainer' justifyContent='center' alignItems='center'
+				?data-has-details=${this.dataGrid.hasDetails}
+				${style({ insetInlineStart: this.dataGrid.columnsController.getStickyColumnInsetInline('selection') })}
+				@click=${(e) => e.stopPropagation()}
+				@dblclick=${(e) => e.stopPropagation()}
+			>
+				<mo-checkbox
+					tabindex='-1'
+					?disabled=${this.dataRecord.isSelectable === false}
+					.selected=${live(this.selected)}
+					@change=${(e) => this.dataGrid.selectionController.setSelection(this.data, e.detail, true)}
+				></mo-checkbox>
+			</mo-flex>
 		`;
     }
     getCellTemplate(column) {
-        return column.hidden ? html.nothing : html `
-			<mo-data-grid-cell
-				.row=${this}
-				.column=${column}
-				.value=${KeyPath.get(this.data, column.dataSelector)}
-				@keydown=${this.delegateToCell('handleKeyDown')}
-				@dblclick=${this.delegateToCell('handleDoubleClick')}
-			></mo-data-grid-cell>
+        return column.hidden ? html.nothing : html `
+			<mo-data-grid-cell
+				.row=${this}
+				.column=${column}
+				.value=${KeyPath.get(this.data, column.dataSelector)}
+				@keydown=${this.delegateToCell('handleKeyDown')}
+				@dblclick=${this.delegateToCell('handleDoubleClick')}
+			></mo-data-grid-cell>
 		`;
     }
     get fillerTemplate() {
         return html `<span></span>`;
     }
     get contextMenuIconButtonTemplate() {
-        return this.dataGrid.hasContextMenu === false ? html.nothing : html `
-			<mo-flex id='contextMenuIconButtonContainer' justifyContent='center'>
-				<mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
-					@click=${this.openContextMenu}
-					@dblclick=${(e) => e.stopPropagation()}
-				></mo-icon-button>
-			</mo-flex>
+        return this.dataGrid.hasContextMenu === false ? html.nothing : html `
+			<mo-flex id='contextMenuIconButtonContainer' justifyContent='center'>
+				<mo-icon-button id='contextMenuIconButton' icon='more_vert' dense
+					@click=${this.openContextMenu}
+					@dblclick=${(e) => e.stopPropagation()}
+				></mo-icon-button>
+			</mo-flex>
 		`;
     }
     get detailsTemplate() {
@@ -303,8 +305,8 @@ export class DataGridRow extends Component {
         if (this.dataGrid.getRowDetailsTemplate) {
             return this.dataGrid.getRowDetailsTemplate(this.data);
         }
-        return !this.dataRecord.hasSubData ? html.nothing : html `
-			${this.dataRecord.getSubDataByLevel(this.level + 1)?.map(data => this.dataGrid.getRowTemplate(data))}
+        return !this.dataRecord.hasSubData ? html.nothing : html `
+			${this.dataRecord.getSubDataByLevel(this.level + 1)?.map(data => this.dataGrid.getRowTemplate(data))}
 		`;
     }
     handleContentClick() {