@3mo/data-grid 0.2.5 → 0.2.6

package/dist/rows/DataGridDefaultRow.js

@@ -1,50 +1,50 @@
 import { __decorate } from "tslib";
 import { css, component, html } from '@a11d/lit';
 import { DataGridRow } from './DataGridRow.js';
-let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
+export let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
     static get styles() {
-        return css `
-			${super.styles}
-
-			mo-grid {
-				height: var(--mo-data-grid-row-height);
-				grid-template-columns: var(--mo-data-grid-columns);
-				column-gap: var(--mo-data-grid-columns-gap);
-			}
-
-			mo-flex {
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-
-			#selectionContainer {
-				height: var(--mo-data-grid-row-height);
-			}
-
-			#detailsContainer [instanceof*=mo-data-grid] {
-				--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
-				--mo-data-grid-alternating-background: transparent;
-				--mo-data-grid-content-min-height: 0px;
-			}
-
-			#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
-				background: var(--mo-color-transparent-gray-1);
-			}
-
-			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
-				margin: 16px var(--mo-details-data-grid-start-margin);
-				width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
-			}
-
-			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid] {
-				padding: 0px !important;
-			}
-
-			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
-				margin-inline-start: var(--mo-details-data-grid-start-margin);
-				width: calc(100% - var(--mo-details-data-grid-start-margin));
-			}
+        return css `
+			${super.styles}
+
+			mo-grid {
+				height: var(--mo-data-grid-row-height);
+				grid-template-columns: var(--mo-data-grid-columns);
+				column-gap: var(--mo-data-grid-columns-gap);
+			}
+
+			mo-flex {
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+			}
+
+			#selectionContainer {
+				height: var(--mo-data-grid-row-height);
+			}
+
+			#detailsContainer [instanceof*=mo-data-grid] {
+				--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
+				--mo-data-grid-alternating-background: transparent;
+				--mo-data-grid-content-min-height: 0px;
+			}
+
+			#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
+				background: var(--mo-color-transparent-gray-1);
+			}
+
+			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
+				margin: 16px var(--mo-details-data-grid-start-margin);
+				width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
+			}
+
+			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid] {
+				padding: 0px !important;
+			}
+
+			:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
+				margin-inline-start: var(--mo-details-data-grid-start-margin);
+				width: calc(100% - var(--mo-details-data-grid-start-margin));
+			}
 		`;
     }
     updated(...parameters) {
@@ -55,15 +55,14 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
         }
     }
     get rowTemplate() {
-        return html `
-			${this.detailsExpanderTemplate}
-			${this.selectionTemplate}
-			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
-			${this.contextMenuIconButtonTemplate}
+        return html `
+			${this.detailsExpanderTemplate}
+			${this.selectionTemplate}
+			${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
+			${this.contextMenuIconButtonTemplate}
 		`;
     }
 };
 DataGridDefaultRow = __decorate([
     component('mo-data-grid-default-row')
 ], DataGridDefaultRow);
-export { DataGridDefaultRow };

package/dist/rows/DataGridRow.js

@@ -37,156 +37,156 @@ 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) {
-				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);
-			}
-
-			#contentContainer {
-				cursor: pointer;
-				transition: 250ms;
-			}
-
-			:host([detailsOpen]) #contentContainer {
-				background: var(--mo-data-grid-row-background-on-opened-detail-element, var(--mo-color-accent-transparent));
-			}
-
-			: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) {
+				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);
+			}
+
+			#contentContainer {
+				cursor: pointer;
+				transition: 250ms;
+			}
+
+			:host([detailsOpen]) #contentContainer {
+				background: var(--mo-data-grid-row-background-on-opened-detail-element, var(--mo-color-accent-transparent));
+			}
+
+			: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;
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-grid id='contentContainer'
-				@click=${() => this.handleContentClick()}
-				@dblclick=${() => this.handleContentDoubleClick()}
-				@contextmenu=${(e) => this.openContextMenu(e)}
-			>
-				${this.rowTemplate}
-			</mo-grid>
-			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : nothing}</slot>
+        return html `
+			<mo-grid id='contentContainer'
+				@click=${() => this.handleContentClick()}
+				@dblclick=${() => this.handleContentDoubleClick()}
+				@contextmenu=${(e) => this.openContextMenu(e)}
+			>
+				${this.rowTemplate}
+			</mo-grid>
+			<slot id='detailsContainer'>${this.detailsOpen ? this.detailsTemplate : nothing}</slot>
 		`;
     }
     get detailsExpanderTemplate() {
         var _a, _b;
-        return this.dataGrid.hasDetails === false ? 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 ? 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 ? 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 ? 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>
 		`;
     }
     get selectionTemplate() {
         var _a, _b;
-        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? 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}
-					?checked=${this.selected}
-					@change=${(e) => this.setSelection(e.detail === 'checked')}
-				></mo-checkbox>
-			</mo-flex>
+        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? 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}
+					?checked=${this.selected}
+					@change=${(e) => this.setSelection(e.detail === 'checked')}
+				></mo-checkbox>
+			</mo-flex>
 		`;
     }
     getCellTemplate(column) {
-        return column.hidden ? nothing : html `
-			<mo-data-grid-cell
-				.row=${this}
-				.column=${column}
-				.value=${getValueByKeyPath(this.data, column.dataSelector)}
-			></mo-data-grid-cell>
+        return column.hidden ? 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 ? 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 ? 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() {