@3mo/data-grid 0.0.1

package/dist/rows/DataGridDefaultRow.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { css, component, html } from '@a11d/lit';
+import { DataGridRow } from './DataGridRow.js';
+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-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) {
+        super.updated(...parameters);
+        const subDataGrid = this.renderRoot.querySelector('[instanceof*=mo-data-grid]');
+        if (subDataGrid) {
+            subDataGrid.preventVerticalContentScroll = true;
+        }
+    }
+    get rowTemplate() {
+        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.d.ts

@@ -0,0 +1,51 @@
+import { Component, HTMLTemplateResult } from '@a11d/lit';
+import { ColumnDefinition } from '../ColumnDefinition.js';
+import { DataGrid, DataGridCell } from '../index.js';
+/**
+ * @attr dataGrid
+ * @attr data
+ * @attr selected
+ * @attr contextMenuOpen
+ * @attr detailsOpen
+ */
+export declare abstract class DataGridRow<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
+    readonly cells: Array<DataGridCell<any, TData, TDetailsElement>>;
+    dataGrid: DataGrid<TData, TDetailsElement>;
+    data: TData;
+    selected: boolean;
+    detailsOpen: boolean;
+    protected contextMenuOpen: boolean;
+    protected editing: boolean;
+    private contextMenu?;
+    private setContextMenu;
+    get detailsElement(): TDetailsElement | undefined;
+    protected connected(): void;
+    protected disconnected(): void;
+    protected readonly handleContextMenuOpenChange: (open: boolean) => Promise<void>;
+    protected initialized(): void;
+    updated(...parameters: Parameters<Component['updated']>): void;
+    protected get hasDetails(): boolean;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").TemplateResult<1>;
+    protected abstract get rowTemplate(): HTMLTemplateResult;
+    protected get detailsExpanderTemplate(): HTMLTemplateResult;
+    protected get selectionTemplate(): HTMLTemplateResult;
+    protected getCellTemplate(column: ColumnDefinition<TData, KeyPathValueOf<TData, KeyPathOf<TData>>>): HTMLTemplateResult;
+    protected get contextMenuIconButtonTemplate(): HTMLTemplateResult;
+    protected get detailsTemplate(): HTMLTemplateResult;
+    private setSelection;
+    protected handleContentClick(): void;
+    private dataBeforeEdit?;
+    private enableEditMode;
+    protected handleContentDoubleClick(): Promise<void>;
+    openContextMenu(pointerEvent?: PointerEvent): Promise<void>;
+    closeContextMenu(): Promise<void>;
+    setDetails(value: boolean): Promise<void>;
+    private toggleDetails;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-row': DataGridRow<unknown>;
+    }
+}
+//# sourceMappingURL=DataGridRow.d.ts.map

package/dist/rows/DataGridRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,SAAS,EAAgC,kBAAkB,EAAc,MAAM,WAAW,CAAA;AAG3H,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAA8E,MAAM,aAAa,CAAA;AAEhI;;;;;;GAMG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACnF,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAEpE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAChB,WAAW,UAAQ;IAEnB,SAAS,CAAC,eAAe,UAAQ;IACpE,SAAS,CAAC,OAAO,UAAQ;IAElC,OAAO,CAAC,WAAW,CAAC,CAAa;IACjC,OAAO,CAAC,cAAc;IAKtB,IAAI,cAAc,gCAEjB;cAEkB,SAAS;cAIT,YAAY;IAM/B,SAAS,CAAC,QAAQ,CAAC,2BAA2B,SAAgB,OAAO,mBAUpE;cAEkB,WAAW;IAKrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAQhE,SAAS,KAAK,UAAU,YAMvB;IAED,WAAoB,MAAM,kCAwFzB;IAED,cAAuB,QAAQ,yCAgB9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAcpC;IAED,SAAS,KAAK,iBAAiB,uBAa9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAWlG,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAK5B;IAED,OAAO,CAAC,YAAY;IAkCpB,SAAS,CAAC,kBAAkB;IAiB5B,OAAO,CAAC,cAAc,CAAC,CAAQ;IAE/B,OAAO,CAAC,cAAc;cAgBN,wBAAwB;IAUlC,eAAe,CAAC,YAAY,CAAC,EAAE,YAAY;IAM3C,gBAAgB;IAIhB,UAAU,CAAC,KAAK,EAAE,OAAO;YAWjB,aAAa;CAG3B;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}

package/dist/rows/DataGridRow.js

@@ -0,0 +1,339 @@
+import { __decorate } from "tslib";
+import { nothing, css, property, Component, html, state, queryAll, style, LitElement } from '@a11d/lit';
+import { ContextMenu, contextMenu } from '@3mo/context-menu';
+import { KeyboardController } from '@3mo/keyboard-controller';
+import { DataGridPrimaryContextMenuItem } from '../index.js';
+/**
+ * @attr dataGrid
+ * @attr data
+ * @attr selected
+ * @attr contextMenuOpen
+ * @attr detailsOpen
+ */
+export class DataGridRow extends Component {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.detailsOpen = false;
+        this.contextMenuOpen = false;
+        this.editing = false;
+        this.handleContextMenuOpenChange = async (open) => {
+            if (this.contextMenuOpen) {
+                if (this.dataGrid.selectedData.includes(this.data) === false) {
+                    this.dataGrid.select(this.dataGrid.selectionMode !== "none" /* DataGridSelectionMode.None */ ? [this.data] : []);
+                }
+            }
+            this.contextMenuOpen = open;
+            await this.updateComplete;
+        };
+    }
+    setContextMenu(contextMenu) {
+        this.contextMenu = contextMenu;
+        this.contextMenu.openChange.subscribe(this.handleContextMenuOpenChange);
+    }
+    get detailsElement() {
+        var _a;
+        return (_a = this.renderRoot.querySelector('#detailsContainer')) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    }
+    connected() {
+        this.dataGrid.rowConnected.dispatch(this);
+    }
+    disconnected() {
+        var _a;
+        this.dataGrid.rowDisconnected.dispatch(this);
+        (_a = this.contextMenu) === null || _a === void 0 ? void 0 : _a.openChange.unsubscribe(this.handleContextMenuOpenChange);
+        this.contextMenu = undefined;
+    }
+    initialized() {
+        this.toggleAttribute('mo-data-grid-row', true);
+        this.editing = this.dataGrid.editability === "always" /* DataGridEditability.Always */;
+    }
+    updated(...parameters) {
+        this.cells.forEach(cell => cell.requestUpdate());
+        if (this.detailsElement instanceof LitElement) {
+            this.detailsElement.requestUpdate();
+        }
+        super.updated(...parameters);
+    }
+    get hasDetails() {
+        if (this.dataGrid.subDataGridDataSelector) {
+            return Array.isArray(getValueByKeyPath(this.data, this.dataGrid.subDataGridDataSelector));
+        }
+        return this.dataGrid.hasDetails;
+    }
+    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: var(--mo-duration-quick);
+			}
+
+			: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: var(--mo-duration-quick);
+				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: var(--mo-duration-quick);
+			}
+
+			#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() {
+        var _a, _b, _c;
+        const contextMenuData = this.dataGrid.selectionMode === "none" /* DataGridSelectionMode.None */
+            ? [this.data]
+            : this.dataGrid.selectedData.length === 0
+                ? [this.data]
+                : this.dataGrid.selectedData;
+        return html `
+			<mo-grid id='contentContainer'
+				${contextMenu((_c = (_b = (_a = this.dataGrid).getRowContextMenuTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, contextMenuData)) !== null && _c !== void 0 ? _c : nothing, contextMenu => this.setContextMenu(contextMenu))}
+				@click=${() => this.handleContentClick()}
+				@dblclick=${() => this.handleContentDoubleClick()}
+			>
+				${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' icon=${getComputedStyle(this).direction === 'rtl' ? 'keyboard_arrow_left' : 'keyboard_arrow_right'} ${style({ color: 'var(--mo-color-foreground)' })}
+					?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 ? 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
+					?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
+				?editing=${this.editing}
+				.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>
+		`;
+    }
+    get detailsTemplate() {
+        var _a, _b, _c;
+        return !this.hasDetails
+            ? nothing
+            : (_c = (_b = (_a = this.dataGrid).getRowDetailsTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.data)) !== null && _c !== void 0 ? _c : nothing;
+    }
+    setSelection(value) {
+        if (this.dataGrid.hasSelection && this.dataGrid.isSelectable(this.data)) {
+            this.selected = value;
+            const lastActiveSelection = this.dataGrid.lastActiveSelection;
+            let dataToSelect = this.dataGrid.selectedData;
+            if (this.dataGrid.selectionMode === "multiple" /* DataGridSelectionMode.Multiple */ && KeyboardController.shift && lastActiveSelection) {
+                const indexes = [
+                    this.dataGrid.data.findIndex(data => data === lastActiveSelection.data),
+                    this.dataGrid.data.findIndex(data => data === this.data),
+                ].sort((a, b) => a - b);
+                const range = this.dataGrid.data.slice(indexes[0], indexes[1] + 1);
+                dataToSelect = lastActiveSelection.selected
+                    ? [...dataToSelect, ...range]
+                    : dataToSelect.filter(d => range.includes(d) === false);
+            }
+            else {
+                if (value) {
+                    if (this.dataGrid.selectionMode === "multiple" /* DataGridSelectionMode.Multiple */) {
+                        dataToSelect = [...dataToSelect, this.data];
+                    }
+                    else if (this.dataGrid.selectionMode === "single" /* DataGridSelectionMode.Single */) {
+                        dataToSelect = [this.data];
+                    }
+                }
+                else {
+                    dataToSelect = dataToSelect.filter(data => data !== this.data);
+                }
+            }
+            this.dataGrid.lastActiveSelection = { data: this.data, selected: value };
+            this.dataGrid.select(dataToSelect.filter((value, index, self) => self.indexOf(value) === index));
+        }
+    }
+    handleContentClick() {
+        if (this.dataGrid.selectOnClick && this.dataGrid.editability !== "on-row-click" /* DataGridEditability.OnRowClick */) {
+            this.setSelection(!this.selected);
+        }
+        if (this.dataGrid.detailsOnClick === true && this.dataGrid.editability !== "on-row-click" /* DataGridEditability.OnRowClick */) {
+            this.toggleDetails();
+        }
+        if (this.dataGrid.editability === "on-row-click" /* DataGridEditability.OnRowClick */) {
+            this.enableEditMode();
+        }
+        this.dataGrid.rowClick.dispatch(this);
+    }
+    enableEditMode() {
+        this.dataBeforeEdit = JSON.stringify(this.data);
+        this.editing = true;
+        const handleClick = (e) => {
+            if (e.composedPath().includes(this) === false) {
+                const dataAfterEdit = JSON.stringify(this.data);
+                if (dataAfterEdit !== this.dataBeforeEdit) {
+                    this.dataGrid.rowEdit.dispatch(this);
+                }
+                window.removeEventListener('click', handleClick);
+                this.editing = false;
+            }
+        };
+        window.addEventListener('click', handleClick);
+    }
+    async handleContentDoubleClick() {
+        var _a, _b;
+        if (this.dataGrid.primaryContextMenuItemOnDoubleClick === true && this.dataGrid.hasContextMenu === true && this.dataGrid.selectionMode === "none" /* DataGridSelectionMode.None */) {
+            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();
+            this.contextMenuOpen = false;
+        }
+        this.dataGrid.rowDoubleClick.dispatch(this);
+    }
+    async openContextMenu(pointerEvent) {
+        var _a;
+        pointerEvent === null || pointerEvent === void 0 ? void 0 : pointerEvent.stopPropagation();
+        (_a = this.renderRoot.querySelector('#contentContainer')) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new PointerEvent('contextmenu', { bubbles: true }));
+        await this.handleContextMenuOpenChange(true);
+    }
+    async closeContextMenu() {
+        await this.handleContextMenuOpenChange(false);
+    }
+    async setDetails(value) {
+        if (this.hasDetails) {
+            if (value === true && this.dataGrid.multipleDetails === false) {
+                await this.dataGrid.closeRowDetails();
+            }
+            this.detailsOpen = value;
+            await this.updateComplete;
+            (value ? this.dataGrid.rowDetailsOpen : this.dataGrid.rowDetailsClose).dispatch(this);
+        }
+    }
+    async toggleDetails() {
+        await this.setDetails(!this.detailsOpen);
+    }
+}
+__decorate([
+    queryAll('mo-data-grid-cell')
+], DataGridRow.prototype, "cells", void 0);
+__decorate([
+    property({ type: Object })
+], DataGridRow.prototype, "dataGrid", void 0);
+__decorate([
+    property({ type: Object })
+], DataGridRow.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGridRow.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGridRow.prototype, "detailsOpen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGridRow.prototype, "contextMenuOpen", void 0);
+__decorate([
+    state()
+], DataGridRow.prototype, "editing", void 0);

package/dist/rows/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DataGridDefaultRow.js';
+export * from './DataGridRow.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/rows/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../rows/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA"}

package/dist/rows/index.js

@@ -0,0 +1,2 @@
+export * from './DataGridDefaultRow.js';
+export * from './DataGridRow.js';