@3mo/data-grid 0.0.1

package/dist/DataGridCell.d.ts

@@ -0,0 +1,27 @@
+import { Component } from '@a11d/lit';
+import { ColumnDefinition, DataGridRow } from './index.js';
+/**
+ * @element mo-data-grid-cell
+ *
+ * @attr value
+ * @attr column
+ * @attr row
+ * @attr editing
+ */
+export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData = any, TDetailsElement extends Element | undefined = undefined> extends Component {
+    value: TValue;
+    column: ColumnDefinition<TData, TValue>;
+    row: DataGridRow<TData, TDetailsElement>;
+    editing: boolean;
+    get data(): TData;
+    get dataSelector(): KeyPathOf<TData>;
+    static get styles(): import("@a11d/lit").CSSResult;
+    private get tooltip();
+    protected get template(): import("lit-html").HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-cell': DataGridCell<unknown>;
+    }
+}
+//# sourceMappingURL=DataGridCell.d.ts.map

package/dist/DataGridCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAuB,MAAM,WAAW,CAAA;AAErE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAO1D;;;;;;;GAOG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IACzB,OAAO,UAAQ;IAE3D,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,qBAAsC;IAEtD,WAAoB,MAAM,kCAsCzB;IAED,OAAO,KAAK,OAAO,GAGlB;IAED,cAAuB,QAAQ,0CAQ9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}

package/dist/DataGridCell.js

@@ -0,0 +1,92 @@
+import { __decorate } from "tslib";
+import { component, Component, html, property, css } from '@a11d/lit';
+import { Localizer } from '@3mo/localization';
+Localizer.register("de" /* LanguageCode.German */, {
+    'Using the clipboard is not allowed in an insecure browser environment': 'In einer unsicheren Browser-Umgebung darf kein Text in die Zwischenablage kopiert werden',
+    'Copied to clipboard': 'In die Zwischenablage kopiert',
+});
+/**
+ * @element mo-data-grid-cell
+ *
+ * @attr value
+ * @attr column
+ * @attr row
+ * @attr editing
+ */
+let DataGridCell = class DataGridCell extends Component {
+    constructor() {
+        super(...arguments);
+        this.editing = false;
+    }
+    get data() { return this.row.data; }
+    get dataSelector() { return this.column.dataSelector; }
+    static get styles() {
+        return css `
+			:host {
+				position: relative;
+				padding: 0px var(--mo-data-grid-cell-padding, 3px);
+				user-select: none;
+				line-height: var(--mo-data-grid-row-height);
+				white-space: nowrap;
+				overflow: hidden !important;
+				text-overflow: ellipsis;
+				font-size: var(--mo-font-size-s);
+			}
+
+			:host([editing]) {
+				display: grid;
+			}
+
+			:host([alignment=end]) {
+				text-align: end;
+			}
+
+			:host([alignment=start]) {
+				text-align: start
+			}
+
+			:host([alignment=center]) {
+				text-align: center;
+			}
+
+			:host > :first-child {
+				line-height: var(--mo-data-grid-row-height);
+			}
+
+			:host([editing]) > :first-child {
+				align-self: center;
+				justify-self: stretch;
+			}
+		`;
+    }
+    get tooltip() {
+        const allowedTitleTypes = ['string', 'number', 'bigint', 'boolean'];
+        return allowedTitleTypes.includes(typeof this.value) ? String(this.value) : '';
+    }
+    get template() {
+        var _a, _b, _c, _d, _e;
+        this.title = this.tooltip;
+        const contentTemplate = (_c = (_b = (_a = this.column).getContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data)) !== null && _c !== void 0 ? _c : this.value;
+        const editContentTemplate = (_e = (_d = this.column).getEditContentTemplate) === null || _e === void 0 ? void 0 : _e.call(_d, this.value, this.data);
+        this.setAttribute('alignment', this.column.alignment || 'start');
+        return this.column.editable && this.editing && editContentTemplate ? editContentTemplate : html `
+			${contentTemplate}
+		`;
+    }
+};
+__decorate([
+    property({ type: Object })
+], DataGridCell.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], DataGridCell.prototype, "column", void 0);
+__decorate([
+    property({ type: Object })
+], DataGridCell.prototype, "row", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGridCell.prototype, "editing", void 0);
+DataGridCell = __decorate([
+    component('mo-data-grid-cell')
+], DataGridCell);
+export { DataGridCell };

package/dist/DataGridFooter.d.ts

@@ -0,0 +1,27 @@
+import { Component } from '@a11d/lit';
+import { DataGrid } from './index.js';
+/**
+ * @element mo-data-grid-footer
+ * @attr dataGrid
+ * @attr page
+ */
+export declare class DataGridFooter<TData> extends Component {
+    dataGrid: DataGrid<TData, any>;
+    page: number;
+    private manualPagination;
+    private manualPageSize;
+    private readonly pageNumberField;
+    private readonly pageSizeSelectField;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").HTMLTemplateResult;
+    private get paginationTemplate();
+    private handlePaginationChange;
+    private handleManualPageChange;
+    private setPage;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-footer': DataGridFooter<unknown>;
+    }
+}
+//# sourceMappingURL=DataGridFooter.d.ts.map

package/dist/DataGridFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFooter.d.ts","sourceRoot":"","sources":["../DataGridFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAsD,MAAM,WAAW,CAAA;AAG9G,OAAO,EAAE,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAUtF;;;;GAIG;AACH,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IACvB,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAE/B,IAAI,SAAI;IAWjC,OAAO,CAAC,gBAAgB,CAAQ;IAWhC,OAAO,CAAC,cAAc,CAAQ;IAEP,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAc;IAC1B,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAA8B;IAEhH,WAAoB,MAAM,kCAwBzB;IAED,cAAuB,QAAQ,0CAc9B;IAED,OAAO,KAAK,kBAAkB,GAwD7B;IAED,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,OAAO;CAcf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}

package/dist/DataGridFooter.js

@@ -0,0 +1,186 @@
+import { __decorate } from "tslib";
+import { component, property, Component, css, state, html, nothing, query, ifDefined, style } from '@a11d/lit';
+import { Localizer } from '@3mo/localization';
+Localizer.register("de" /* LanguageCode.German */, {
+    '${page:number} of ${maxPage:number}': '${page} von ${maxPage}',
+});
+Localizer.register("fa" /* LanguageCode.Farsi */, {
+    '${page:number} of ${maxPage:number}': '${page} از ${maxPage}',
+});
+/**
+ * @element mo-data-grid-footer
+ * @attr dataGrid
+ * @attr page
+ */
+let DataGridFooter = class DataGridFooter extends Component {
+    constructor() {
+        super(...arguments);
+        this.page = 1;
+        this.manualPagination = false;
+        this.manualPageSize = false;
+    }
+    static get styles() {
+        return css `
+			:host {
+				grid-column: 1 / last-line;
+				grid-row: 3;
+				min-height: var(--mo-data-grid-footer-min-height);
+			}
+
+			:host(:not([hideTopBorder])) {
+				border-top: var(--mo-data-grid-border);
+			}
+
+			img {
+				height: 100%;
+				transition: .25s;
+				-webkit-filter: grayscale(100%);
+				filter: grayscale(100%);
+			}
+
+			img:hover {
+				-webkit-filter: grayscale(0%);
+				filter: grayscale(0%);
+			}
+		`;
+    }
+    get template() {
+        this.toggleAttribute('hideTopBorder', this.dataGrid.hasFooter === false);
+        return this.dataGrid.hasFooter === false ? nothing : html `
+			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '6px' })}>
+				<mo-flex direction='horizontal' alignItems='center' gap='1vw' ${style({ flexBasis: 'auto' })}>
+					${this.paginationTemplate}
+				</mo-flex>
+
+				<mo-flex direction='horizontal' alignItems='center' gap='8px' wrap='wrap-reverse' ${style({ textAlign: 'right', paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
+					${this.dataGrid.sumsTemplate}
+					<slot name='sum'></slot>
+				</mo-flex>
+			</mo-flex>
+		`;
+    }
+    get paginationTemplate() {
+        var _a;
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const hasUnknownDataLength = this.dataGrid.maxPage === undefined;
+        const pageText = hasUnknownDataLength ? this.page : t('${page:number} of ${maxPage:number}', { page: this.page, maxPage: (_a = this.dataGrid.maxPage) !== null && _a !== void 0 ? _a : 0 });
+        const from = (this.page - 1) * this.dataGrid.pageSize + 1;
+        const to = from + this.dataGrid.renderData.length - 1;
+        const pageSizeText = [
+            `${(Math.min(from, to)).format()}-${to.format()}`,
+            hasUnknownDataLength ? undefined : this.dataGrid.dataLength.format(),
+        ].filter(Boolean).join(' / ');
+        return !this.dataGrid.hasPagination ? nothing : html `
+			<mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
+				<mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
+					?disabled=${this.page === 1}
+					@click=${() => this.setPage(1)}
+				></mo-icon-button>
+
+				<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
+					?disabled=${this.page === 1}
+					@click=${() => this.setPage(this.page - 1)}
+				></mo-icon-button>
+
+				<div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
+					${this.manualPagination ? html `
+						<mo-field-number dense
+							value=${this.page}
+							@change=${(e) => this.handleManualPageChange(e.detail)}>
+						</mo-field-number>
+					` : html `
+						<div ${style({ fontSize: 'var(--mo-font-size-s)' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
+					`}
+				</div>
+
+				<mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
+					?disabled=${!this.dataGrid.hasNextPage}
+					@click=${() => this.setPage(this.page + 1)}
+				></mo-icon-button>
+
+				<mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
+					?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
+					@click=${() => { var _a; return this.setPage((_a = this.dataGrid.maxPage) !== null && _a !== void 0 ? _a : 1); }}
+				></mo-icon-button>
+			</mo-flex>
+
+			<div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
+				${!this.manualPageSize ? html `
+					<div ${style({ fontSize: 'var(--mo-font-size-s)' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
+				` : html `
+					<mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
+						.dataGrid=${this.dataGrid}
+						value=${ifDefined(this.dataGrid.pagination)}
+						@change=${(e) => this.handlePaginationChange(e.detail)}>
+					</mo-field-select-data-grid-page-size>
+				`}
+			</div>
+		`;
+    }
+    handlePaginationChange(value) {
+        if (this.dataGrid.maxPage && this.dataGrid.page > this.dataGrid.maxPage) {
+            this.dataGrid.page = this.dataGrid.maxPage;
+        }
+        this.dataGrid.handlePaginationChange(value);
+        this.manualPageSize = false;
+    }
+    handleManualPageChange(value) {
+        if (this.page === value) {
+            return;
+        }
+        this.setPage(value);
+        this.manualPagination = false;
+    }
+    setPage(value) {
+        if (value < 1) {
+            value = 1;
+        }
+        if (this.dataGrid.maxPage && value > this.dataGrid.maxPage) {
+            value = this.dataGrid.maxPage;
+        }
+        this.manualPagination = false;
+        this.manualPageSize = false;
+        this.page = value;
+        this.dataGrid.handlePageChange(value);
+    }
+};
+__decorate([
+    property({ type: Object })
+], DataGridFooter.prototype, "dataGrid", void 0);
+__decorate([
+    property({ type: Number })
+], DataGridFooter.prototype, "page", void 0);
+__decorate([
+    state({
+        async updated(value) {
+            if (value === true) {
+                await this.updateComplete;
+                await new Promise(resolve => setTimeout(resolve, 10));
+                this.pageNumberField.focus();
+                this.pageNumberField.select();
+            }
+        }
+    })
+], DataGridFooter.prototype, "manualPagination", void 0);
+__decorate([
+    state({
+        async updated(value) {
+            if (value === true) {
+                await this.updateComplete;
+                await new Promise(resolve => setTimeout(resolve, 10));
+                this.pageSizeSelectField.focus();
+                this.pageSizeSelectField.open = true;
+            }
+        }
+    })
+], DataGridFooter.prototype, "manualPageSize", void 0);
+__decorate([
+    query('mo-field-number')
+], DataGridFooter.prototype, "pageNumberField", void 0);
+__decorate([
+    query('mo-field-select-data-grid-page-size')
+], DataGridFooter.prototype, "pageSizeSelectField", void 0);
+DataGridFooter = __decorate([
+    component('mo-data-grid-footer')
+], DataGridFooter);
+export { DataGridFooter };

package/dist/DataGridHeader.d.ts

@@ -0,0 +1,32 @@
+import { Component } from '@a11d/lit';
+import { DataGrid } from './index.js';
+export declare class DataGridHeader<TData> extends Component {
+    readonly pageChange: EventDispatcher<number>;
+    readonly modeSelectionChange: EventDispatcher<string>;
+    dataGrid: DataGrid<TData, any>;
+    selection: CheckboxValue;
+    overlayOpen: boolean;
+    protected connected(): void;
+    protected disconnected(): void;
+    private readonly handleDataGridDataChange;
+    private readonly handleDataGridSelectionChange;
+    static get styles(): import("@a11d/lit").CSSResult;
+    private get skeletonColumns();
+    private get separatorAdjustedColumns();
+    protected get template(): import("lit-html").TemplateResult<1>;
+    private get detailsExpanderTemplate();
+    private get selectionTemplate();
+    private get contentTemplate();
+    private getHeaderCellTemplate;
+    private get moreTemplate();
+    private sort;
+    private get areAllDetailsOpen();
+    private toggleAllDetails;
+    private readonly handleSelectionChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-header': DataGridHeader<unknown>;
+    }
+}
+//# sourceMappingURL=DataGridHeader.d.ts.map

package/dist/DataGridHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA+D,MAAM,WAAW,CAAA;AAE7G,OAAO,EAAoE,QAAQ,EAAwB,MAAM,YAAY,CAAA;AAE7H,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/C,SAAS,EAAE,aAAa,CAAc;IACN,WAAW,UAAQ;cAE5C,SAAS;cAKT,YAAY;IAK/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;IAED,OAAO,CAAC,QAAQ,CAAC,6BAA6B,CAQ7C;IAED,WAAoB,MAAM,kCA4BzB;IAED,OAAO,KAAK,eAAe,GAO1B;IAED,OAAO,KAAK,wBAAwB,GAEnC;IAED,cAAuB,QAAQ,yCAS9B;IAED,OAAO,KAAK,uBAAuB,GAYlC;IAED,OAAO,KAAK,iBAAiB,GAQ5B;IAED,OAAO,KAAK,eAAe,GAY1B;IAED,OAAO,CAAC,qBAAqB;IAkB7B,OAAO,KAAK,YAAY,GAQvB;IAED,OAAO,CAAC,IAAI;IAkBZ,OAAO,KAAK,iBAAiB,GAG5B;YAEa,gBAAgB;IAS9B,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAOrC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}

package/dist/DataGridHeader.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { component, Component, css, html, ifDefined, property, event, join, style, nothing } from '@a11d/lit';
+let DataGridHeader = class DataGridHeader extends Component {
+    constructor() {
+        super(...arguments);
+        this.selection = 'unchecked';
+        this.overlayOpen = false;
+        this.handleDataGridDataChange = () => {
+            this.requestUpdate();
+        };
+        this.handleDataGridSelectionChange = (selectedData) => {
+            if (selectedData.length === 0) {
+                this.selection = 'unchecked';
+            }
+            else if (selectedData.length === this.dataGrid.dataLength) {
+                this.selection = 'checked';
+            }
+            else {
+                this.selection = 'indeterminate';
+            }
+        };
+        this.handleSelectionChange = (e) => {
+            const selection = e.target.value;
+            if (selection === 'checked') {
+                this.dataGrid.selectAll();
+            }
+            else if (selection === 'unchecked') {
+                this.dataGrid.deselectAll();
+            }
+        };
+    }
+    connected() {
+        this.dataGrid.dataChange.subscribe(this.handleDataGridDataChange);
+        this.dataGrid.selectionChange.subscribe(this.handleDataGridSelectionChange);
+    }
+    disconnected() {
+        this.dataGrid.dataChange.unsubscribe(this.handleDataGridDataChange);
+        this.dataGrid.selectionChange.unsubscribe(this.handleDataGridSelectionChange);
+    }
+    static get styles() {
+        return css `
+			:host {
+				--mo-data-grid-header-separator-height: 15px;
+				--mo-data-grid-header-separator-width: 2px;
+				display: inherit;
+				font-size: var(--mo-font-size-s);
+			}
+
+			#grdHeader {
+				border-top: var(--mo-data-grid-border);
+				border-bottom: var(--mo-data-grid-border);
+				position: relative;
+				height: var(--mo-data-grid-header-height);
+				background: var(--mo-data-grid-header-background);
+			}
+
+			.headerContent {
+				padding: 0 var(--mo-data-grid-cell-padding, 3px);
+				display: inline-block;
+				overflow: hidden !important;
+				color: var(--mo-color-foreground);
+				font-weight: 500;
+				line-height: var(--mo-data-grid-header-height);
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		`;
+    }
+    get skeletonColumns() {
+        return [
+            this.dataGrid.detailsColumnWidth,
+            this.dataGrid.selectionColumnWidth,
+            '1fr',
+            this.dataGrid.moreColumnWidth
+        ].filter((c) => c !== undefined).join(' ');
+    }
+    get separatorAdjustedColumns() {
+        return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap) ');
+    }
+    get template() {
+        return html `
+			<mo-grid id='grdHeader' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap)'>
+				${this.detailsExpanderTemplate}
+				${this.selectionTemplate}
+				${this.contentTemplate}
+				${this.moreTemplate}
+			</mo-grid>
+		`;
+    }
+    get detailsExpanderTemplate() {
+        return this.dataGrid.hasDetails === false ? nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? nothing : html `
+					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
+						${style({ display: 'inherit' })}
+						icon=${this.areAllDetailsOpen ? 'unfold_less' : 'unfold_more'}
+						@click=${() => this.toggleAllDetails()}
+					></mo-icon-button>
+				`}
+			</mo-flex>
+		`;
+    }
+    get selectionTemplate() {
+        return this.dataGrid.hasSelection === false ? nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${this.dataGrid.selectionMode !== "multiple" /* DataGridSelectionMode.Multiple */ ? nothing : html `
+					<mo-checkbox ${style({ position: 'absolute' })} value=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
+				`}
+			</mo-flex>
+		`;
+    }
+    get contentTemplate() {
+        return html `
+			<mo-grid columns=${this.separatorAdjustedColumns}>
+				${join(this.dataGrid.visibleColumns.map(column => this.getHeaderCellTemplate(column)), index => html `
+					<mo-data-grid-header-separator
+						.dataGrid=${this.dataGrid}
+						.column=${this.dataGrid.visibleColumns[index]}
+						@columnUpdate=${() => this.dataGrid.requestUpdate()}
+					></mo-data-grid-header-separator>
+				`)}
+			</mo-grid>
+		`;
+    }
+    getHeaderCellTemplate(column) {
+        const sortIcon = !this.dataGrid.sorting || !column.dataSelector || this.dataGrid.sorting.selector !== column.dataSelector ? undefined
+            : this.dataGrid.sorting.strategy === "ascending" /* DataGridSortingStrategy.Ascending */ ? 'arrow_upward' : 'arrow_downward';
+        return html `
+			<mo-flex direction=${column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal'} alignItems='center'
+				${style({ overflow: 'hidden', position: 'relative', cursor: 'pointer', userSelect: 'none' })}
+				@click=${() => this.sort(column)}
+			>
+				<div class='headerContent' ${style({ width: '100%', textAlign: column.alignment })} title=${column.title || column.heading}>${column.heading}</div>
+
+				${sortIcon === undefined ? nothing : html `
+					<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
+				`}
+			</mo-flex>
+		`;
+    }
+    get moreTemplate() {
+        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? nothing : html `
+			<mo-flex alignItems='center' justifyContent='center' ${style({ marginInlineEnd: '8px', cursor: 'pointer', position: 'relative' })}>
+				<mo-icon-button dense icon='settings' ${style({ color: 'var(--mo-color-accent)', fontSize: 'var(--mo-font-size-l)' })}
+					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : "settings" /* DataGridSidePanelTab.Settings */)}
+				></mo-icon-button>
+			</mo-flex>
+		`;
+    }
+    sort(column) {
+        var _a;
+        if (column.sortable === false) {
+            return;
+        }
+        const defaultSortingStrategy = "descending" /* DataGridSortingStrategy.Descending */;
+        if (((_a = this.dataGrid.sorting) === null || _a === void 0 ? void 0 : _a.selector) !== column.dataSelector) {
+            this.dataGrid.handleSortChange({ selector: column.dataSelector, strategy: defaultSortingStrategy });
+        }
+        else if (this.dataGrid.sorting.strategy === "descending" /* DataGridSortingStrategy.Descending */) {
+            this.dataGrid.handleSortChange({ selector: column.dataSelector, strategy: "ascending" /* DataGridSortingStrategy.Ascending */ });
+        }
+        else {
+            this.dataGrid.handleSortChange(undefined);
+        }
+        this.requestUpdate();
+    }
+    get areAllDetailsOpen() {
+        return this.dataGrid.detailedRows.length !== 0
+            && this.dataGrid.detailedRows.every(row => row.detailsOpen);
+    }
+    async toggleAllDetails() {
+        if (this.areAllDetailsOpen) {
+            await this.dataGrid.closeRowDetails();
+        }
+        else {
+            await this.dataGrid.openRowDetails();
+        }
+        this.requestUpdate();
+    }
+};
+__decorate([
+    event()
+], DataGridHeader.prototype, "pageChange", void 0);
+__decorate([
+    event()
+], DataGridHeader.prototype, "modeSelectionChange", void 0);
+__decorate([
+    property({ type: Object })
+], DataGridHeader.prototype, "dataGrid", void 0);
+__decorate([
+    property()
+], DataGridHeader.prototype, "selection", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DataGridHeader.prototype, "overlayOpen", void 0);
+DataGridHeader = __decorate([
+    component('mo-data-grid-header')
+], DataGridHeader);
+export { DataGridHeader };

package/dist/DataGridHeaderSeparator.d.ts

@@ -0,0 +1,25 @@
+import { Component } from '@a11d/lit';
+import type { ColumnDefinition, DataGrid } from './index.js';
+/** @fires columnUpdate {CustomEvent} */
+export declare class DataGridHeaderSeparator extends Component {
+    readonly columnUpdate: EventDispatcher;
+    dataGrid: DataGrid<unknown>;
+    column: ColumnDefinition<unknown>;
+    private isResizing;
+    private delta;
+    private readonly minimum;
+    private initialWidth?;
+    private targetWidth?;
+    static get styles(): import("@a11d/lit").CSSResult;
+    protected get template(): import("lit-html").TemplateResult<1>;
+    protected handleMouseUp(): void;
+    protected handleMouseMove(e: MouseEvent): void;
+    private readonly handleMouseDown;
+    private getColumnWidth;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mo-data-grid-header-separator': DataGridHeaderSeparator;
+    }
+}
+//# sourceMappingURL=DataGridHeaderSeparator.d.ts.map

package/dist/DataGridHeaderSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+E,MAAM,WAAW,CAAA;AAClH,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE5D,wCAAwC;AACxC,qBACa,uBAAwB,SAAQ,SAAS;IAC5C,QAAQ,CAAC,YAAY,EAAG,eAAe,CAAA;IAEpB,QAAQ,EAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC5B,MAAM,EAAG,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErD,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,KAAK,CAAI;IAE1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAK;IAE7B,OAAO,CAAC,YAAY,CAAC,CAAQ;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAE5B,WAAoB,MAAM,kCAoCzB;IAED,cAAuB,QAAQ,yCAU9B;IAGD,SAAS,CAAC,aAAa;IAYvB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAG/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}