@3mo/data-grid 0.5.4 → 0.5.6

package/dist/DataGridCell.js

@@ -24,7 +24,7 @@ let DataGridCell = class DataGridCell extends Component {
     get dataSelector() { return this.column.dataSelector; }
     get cellIndex() { return this.row.cells.indexOf(this); }
     get rowIndex() { return this.dataGrid.rows.indexOf(this.row); }
-    get valueTextContent() { var _a; return ((_a = this.renderRoot.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''; }
+    get valueTextContent() { return this.renderRoot.textContent?.trim() || ''; }
     get isEditable() {
         return this.dataGrid.editability !== DataGridEditability.Never
             && [undefined, null].includes(this.editContentTemplate) === false
@@ -46,7 +46,6 @@ let DataGridCell = class DataGridCell extends Component {
         }
     }
     async handleKeyDown(event) {
-        var _a, _b;
         switch (event.key) {
             case 'Enter':
                 event.preventDefault();
@@ -80,10 +79,10 @@ let DataGridCell = class DataGridCell extends Component {
                 this.focusCell(event, this.row.cells.at(this.cellIndex === 0 ? this.dataGrid.visibleColumns.length - 1 : this.cellIndex - 1));
                 break;
             case 'ArrowUp':
-                this.focusCell(event, (_a = this.dataGrid.rows.at(this.rowIndex === 0 ? this.dataGrid.rows.length - 1 : this.rowIndex - 1)) === null || _a === void 0 ? void 0 : _a.cells.at(this.cellIndex));
+                this.focusCell(event, this.dataGrid.rows.at(this.rowIndex === 0 ? this.dataGrid.rows.length - 1 : this.rowIndex - 1)?.cells.at(this.cellIndex));
                 break;
             case 'ArrowDown':
-                this.focusCell(event, (_b = this.dataGrid.rows.at(this.rowIndex === this.dataGrid.rows.length - 1 ? 0 : this.rowIndex + 1)) === null || _b === void 0 ? void 0 : _b.cells.at(this.cellIndex));
+                this.focusCell(event, this.dataGrid.rows.at(this.rowIndex === this.dataGrid.rows.length - 1 ? 0 : this.rowIndex + 1)?.cells.at(this.cellIndex));
                 break;
             default:
                 break;
@@ -100,46 +99,46 @@ let DataGridCell = class DataGridCell extends Component {
         }
     }
     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-data-grid-cell-font-size);
-			}
-
-			:host(:not([isEditing]):focus) {
-				outline: 2px solid var(--mo-color-accent);
-			}
-
-			:host([isEditing]) {
-				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([isEditing]) > :first-child {
-				align-self: center;
-				justify-self: stretch;
-			}
+        return css `
+			:host {
+				position: relative;
+				padding-inline: 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-data-grid-cell-font-size);
+			}
+
+			:host(:not([isEditing]):focus) {
+				outline: 2px solid var(--mo-color-accent);
+			}
+
+			:host([isEditing]) {
+				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([isEditing]) > :first-child {
+				align-self: center;
+				justify-self: stretch;
+			}
 		`;
     }
     get tooltip() { return this.valueTextContent; }
@@ -156,12 +155,10 @@ let DataGridCell = class DataGridCell extends Component {
         return this.isEditing ? this.editContentTemplate : this.contentTemplate;
     }
     get contentTemplate() {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.column).getContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data)) !== null && _c !== void 0 ? _c : html `${this.value}`;
+        return this.column.getContentTemplate?.(this.value, this.data) ?? html `${this.value}`;
     }
     get editContentTemplate() {
-        var _a, _b;
-        return (_b = (_a = this.column).getEditContentTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.data);
+        return this.column.getEditContentTemplate?.(this.value, this.data);
     }
 };
 __decorate([
@@ -176,9 +173,8 @@ __decorate([
 __decorate([
     state({
         updated() {
-            var _a;
             if (this.isEditing) {
-                (_a = this.renderRoot.querySelector('[data-focus]')) === null || _a === void 0 ? void 0 : _a.focus();
+                this.renderRoot.querySelector('[data-focus]')?.focus();
             }
         }
     })

package/dist/DataGridFooter.js

@@ -23,93 +23,92 @@ let DataGridFooter = class DataGridFooter extends Component {
         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);
-				background: var(--mo-data-grid-footer-background);
-			}
-
-			:host(:not([hideTopBorder])) {
-				border-top: var(--mo-data-grid-border);
-			}
+        return css `
+			:host {
+				grid-column: 1 / last-line;
+				grid-row: 3;
+				min-height: var(--mo-data-grid-footer-min-height);
+				background: var(--mo-data-grid-footer-background);
+			}
+
+			:host(:not([hideTopBorder])) {
+				border-top: var(--mo-data-grid-border);
+			}
 		`;
     }
     get template() {
         this.toggleAttribute('hideTopBorder', this.dataGrid.hasFooter === false);
-        return this.dataGrid.hasFooter === false ? html.nothing : html `
-			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
-				<mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
-					${this.paginationTemplate}
-					${this.exportTemplate}
-				</mo-flex>
-
-				<mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
-					${this.dataGrid.sumsTemplate}
-					<slot name='sum'></slot>
-				</mo-flex>
-			</mo-flex>
+        return this.dataGrid.hasFooter === false ? html.nothing : html `
+			<mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
+				<mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
+					${this.paginationTemplate}
+					${this.exportTemplate}
+				</mo-flex>
+
+				<mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ 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 pageText = hasUnknownDataLength ? this.page : t('${page:number} of ${maxPage:number}', { page: this.page, maxPage: this.dataGrid.maxPage ?? 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 ? html.nothing : html `
-			<mo-flex direction='horizontal' alignItems='center' gap='1vw'>
-				<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: 'small' })} @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: 'small' })} @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>
-			</mo-flex>
+        return !this.dataGrid.hasPagination ? html.nothing : html `
+			<mo-flex direction='horizontal' alignItems='center' gap='1vw'>
+				<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: 'small' })} @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=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
+					></mo-icon-button>
+				</mo-flex>
+
+				<div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
+					${!this.manualPageSize ? html `
+						<div ${style({ fontSize: 'small' })} @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>
+			</mo-flex>
 		`;
     }
     handlePaginationChange(value) {
@@ -127,28 +126,28 @@ let DataGridFooter = class DataGridFooter extends Component {
         this.manualPagination = false;
     }
     get exportTemplate() {
-        return !this.dataGrid.exportable ? html.nothing : html `
-			<style>
-				#export {
-					height: 21px;
-					width: 21px;
-					aspect-ratio: 1 / 1;
-					transition: .25s;
-					-webkit-filter: grayscale(100%);
-					filter: grayscale(100%);
-					cursor: pointer;
-				}
-
-				#export:hover {
-					-webkit-filter: grayscale(0%);
-					filter: grayscale(0%);
-				}
-			</style>
-			<img id='export'
-				src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
-				${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
-				@click=${() => this.dataGrid.exportExcelFile()}
-			/>
+        return !this.dataGrid.exportable ? html.nothing : html `
+			<style>
+				#export {
+					height: 21px;
+					width: 21px;
+					aspect-ratio: 1 / 1;
+					transition: .25s;
+					-webkit-filter: grayscale(100%);
+					filter: grayscale(100%);
+					cursor: pointer;
+				}
+
+				#export:hover {
+					-webkit-filter: grayscale(0%);
+					filter: grayscale(0%);
+				}
+			</style>
+			<img id='export'
+				src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
+				${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
+				@click=${() => this.dataGrid.exportExcelFile()}
+			/>
 		`;
     }
     setPage(value) {

package/dist/DataGridHeader.js

@@ -40,45 +40,45 @@ let DataGridHeader = class DataGridHeader extends Component {
         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: small;
-			}
-
-			#header {
-				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;
-			}
-
-			.sort-rank {
-				background: var(--mo-color-transparent-gray-3);
-				color: var(--mo-color-foreground);
-				border: 1px solid var(--mo-color-gray-transparent);
-				border-radius: 50%;
-				width: 20px;
-				height: 20px;
-				aspect-ratio: 1 / 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
+        return css `
+			:host {
+				--mo-data-grid-header-separator-height: 15px;
+				--mo-data-grid-header-separator-width: 2px;
+				display: inherit;
+				font-size: small;
+			}
+
+			#header {
+				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;
+			}
+
+			.sort-rank {
+				background: var(--mo-color-transparent-gray-3);
+				color: var(--mo-color-foreground);
+				border: 1px solid var(--mo-color-gray-transparent);
+				border-radius: 50%;
+				width: 20px;
+				height: 20px;
+				aspect-ratio: 1 / 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
 		`;
     }
     get skeletonColumns() {
@@ -93,75 +93,75 @@ let DataGridHeader = class DataGridHeader extends Component {
         return this.dataGrid.dataColumnsWidths.join(' var(--mo-data-grid-columns-gap) ');
     }
     get template() {
-        return html `
-			<mo-grid id='header' columns=${this.skeletonColumns} columnGap='var(--mo-data-grid-columns-gap)'>
-				${this.detailsExpanderTemplate}
-				${this.selectionTemplate}
-				${this.contentTemplate}
-				${this.moreTemplate}
-			</mo-grid>
+        return html `
+			<mo-grid id='header' 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 ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'>
-				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
-					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
-						${style({ display: 'inherit' })}
-						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
-						@click=${() => this.toggleAllDetails()}
-					></mo-icon-button>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasDetails === false ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${!this.dataGrid.hasDetails || !this.dataGrid.multipleDetails ? html.nothing : html `
+					<mo-icon-button dense ${style({ padding: '-10px 0px 0 -10px' })}
+						${style({ display: 'inherit' })}
+						icon=${this.dataGrid.allRowDetailsOpen ? 'unfold_less' : 'unfold_more'}
+						@click=${() => this.toggleAllDetails()}
+					></mo-icon-button>
+				`}
+			</mo-flex>
 		`;
     }
     get selectionTemplate() {
-        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
-			<mo-flex justifyContent='center' alignItems='center'>
-				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
-					<mo-checkbox ${style({ position: 'absolute' })} .selected=${this.selection} @change=${this.handleSelectionChange}></mo-checkbox>
-				`}
-			</mo-flex>
+        return this.dataGrid.hasSelection === false || this.dataGrid.selectionCheckboxesHidden ? html.nothing : html `
+			<mo-flex justifyContent='center' alignItems='center'>
+				${this.dataGrid.selectionMode !== DataGridSelectionMode.Multiple ? html.nothing : html `
+					<mo-checkbox ${style({ position: 'absolute' })} .selected=${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>
+        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 sortingDefinition = this.dataGrid.getSortingDefinition(column);
         const sortIcon = !sortingDefinition ? undefined : sortingDefinition.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
         const sortingRank = !sortingDefinition || this.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
-        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 ? html.nothing : html `
-					${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
-					<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
-				`}
-			</mo-flex>
+        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 ? html.nothing : html `
+					${!sortingRank ? html.nothing : html `<span class='sort-rank'>${sortingRank}</span>`}
+					<mo-icon ${style({ color: 'var(--mo-color-accent)' })} icon=${ifDefined(sortIcon)}></mo-icon>
+				`}
+			</mo-flex>
 		`;
     }
     get moreTemplate() {
-        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.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: 'large' })}
-					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
-				></mo-icon-button>
-			</mo-flex>
+        return this.dataGrid.hasToolbar || this.dataGrid.sidePanelHidden ? html.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: 'large' })}
+					@click=${() => this.dataGrid.navigateToSidePanelTab(this.dataGrid.sidePanelTab ? undefined : DataGridSidePanelTab.Settings)}
+				></mo-icon-button>
+			</mo-flex>
 		`;
     }
     sort(column) {
@@ -173,7 +173,7 @@ let DataGridHeader = class DataGridHeader extends Component {
         const sortingDefinition = this.dataGrid.getSortingDefinition(column);
         if (KeyboardController.shift || KeyboardController.meta || KeyboardController.ctrl) {
             const sortings = this.dataGrid.getSorting();
-            if ((sortingDefinition === null || sortingDefinition === void 0 ? void 0 : sortingDefinition.selector) !== sortDataSelector) {
+            if (sortingDefinition?.selector !== sortDataSelector) {
                 this.dataGrid.handleSortChange([...sortings, { selector: sortDataSelector, strategy: defaultSortingStrategy }]);
             }
             else if (sortingDefinition.strategy === DataGridSortingStrategy.Descending) {
@@ -187,7 +187,7 @@ let DataGridHeader = class DataGridHeader extends Component {
             }
         }
         else {
-            if ((sortingDefinition === null || sortingDefinition === void 0 ? void 0 : sortingDefinition.selector) !== sortDataSelector) {
+            if (sortingDefinition?.selector !== sortDataSelector) {
                 this.dataGrid.handleSortChange({ selector: sortDataSelector, strategy: defaultSortingStrategy });
             }
             else if (sortingDefinition.strategy === DataGridSortingStrategy.Descending) {

package/dist/DataGridHeaderSeparator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsE,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEvD,wCAAwC;AACxC,qBACa,uBAAwB,SAAQ,SAAS;IACrD,MAAM,CAAC,eAAe,UAAQ;IAErB,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,kCAyCzB;IAED,cAAuB,QAAQ,0CAU9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAM/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}
+{"version":3,"file":"DataGridHeaderSeparator.d.ts","sourceRoot":"","sources":["../DataGridHeaderSeparator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsE,MAAM,WAAW,CAAA;AACzG,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEvD,wCAAwC;AACxC,qBACa,uBAAwB,SAAQ,SAAS;IACrD,MAAM,CAAC,eAAe,UAAQ;IAErB,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,kCAuCzB;IAED,cAAuB,QAAQ,0CAW9B;IAGD,SAAS,CAAC,aAAa;IAavB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;IAmBvC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAM/B;IAED,OAAO,CAAC,cAAc;CAmBtB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,+BAA+B,EAAE,uBAAuB,CAAA;KACxD;CACD"}