@3mo/data-grid 0.4.14 → 0.4.16

package/dist/DataGridCell.js

@@ -100,46 +100,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: 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;
+			}
 		`;
     }
     get tooltip() { return this.valueTextContent; }

package/dist/DataGridFooter.js

@@ -20,44 +20,44 @@ 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);
-			}
-
-			img {
-				height: 100%;
-				transition: .25s;
-				-webkit-filter: grayscale(100%);
-				filter: grayscale(100%);
-			}
-
-			img:hover {
-				-webkit-filter: grayscale(0%);
-				filter: grayscale(0%);
-			}
+        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);
+			}
+
+			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 ? 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='1vw' ${style({ flexBasis: 'auto' })}>
-					${this.paginationTemplate}
-				</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='1vw' ${style({ flexBasis: 'auto' })}>
+					${this.paginationTemplate}
+				</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() {
@@ -71,51 +71,51 @@ let DataGridFooter = class DataGridFooter extends Component {
             `${(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' 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>
+        return !this.dataGrid.hasPagination ? html.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: '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>
 		`;
     }
     handlePaginationChange(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) {

package/dist/DataGridHeaderSeparator.js

@@ -13,51 +13,51 @@ let DataGridHeaderSeparator = class DataGridHeaderSeparator extends Component {
         };
     }
     static get styles() {
-        return css `
-			div.separator {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				inset-inline-start: calc(var(--mo-data-grid-columns-gap) * -1);
-				width: var(--mo-data-grid-columns-gap);
-				height: 100%;
-				cursor: col-resize;
-				user-select: none;
-			}
-
-			.knob {
-				height: var(--mo-data-grid-header-separator-height);
-				width: var(--mo-data-grid-header-separator-width);
-				border-radius: 100px;
-				background-color: var(--mo-color-gray);
-				transition: 0.2s;
-			}
-
-			.separator:hover .knob {
-				--mo-data-grid-header-separator-height: 30px;
-				--mo-data-grid-header-separator-width: 8px;
-				background-color: var(--mo-color-accent);
-				cursor: col-resize;
-			}
-
-			.resizerOverlay {
-				position: fixed;
-				top: 0;
-				height: 100%;
-				background: var(--mo-color-gray);
-				width: 2px;
-			}
+        return css `
+			div.separator {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				inset-inline-start: calc(var(--mo-data-grid-columns-gap) * -1);
+				width: var(--mo-data-grid-columns-gap);
+				height: 100%;
+				cursor: col-resize;
+				user-select: none;
+			}
+
+			.knob {
+				height: var(--mo-data-grid-header-separator-height);
+				width: var(--mo-data-grid-header-separator-width);
+				border-radius: 100px;
+				background-color: var(--mo-color-gray);
+				transition: 0.2s;
+			}
+
+			.separator:hover .knob {
+				--mo-data-grid-header-separator-height: 30px;
+				--mo-data-grid-header-separator-width: 8px;
+				background-color: var(--mo-color-accent);
+				cursor: col-resize;
+			}
+
+			.resizerOverlay {
+				position: fixed;
+				top: 0;
+				height: 100%;
+				background: var(--mo-color-gray);
+				width: 2px;
+			}
 		`;
     }
     get template() {
-        return html `
-			<div class='separator' @mousedown=${this.handleMouseDown}>
-				<div class='knob'></div>
-			</div>
-
-			${this.isResizing === false ? html.nothing : html `
-				<div class='resizerOverlay' ${style({ marginInlineStart: `${this.delta}px` })}></div>
-			`}
+        return html `
+			<div class='separator' @mousedown=${this.handleMouseDown}>
+				<div class='knob'></div>
+			</div>
+
+			${this.isResizing === false ? html.nothing : html `
+				<div class='resizerOverlay' ${style({ marginInlineStart: `${this.delta}px` })}></div>
+			`}
 		`;
     }
     handleMouseUp() {

package/dist/DataGridPrimaryContextMenuItem.js

@@ -3,11 +3,11 @@ import { component, css } from '@a11d/lit';
 import { ContextMenuItem } from '@3mo/context-menu';
 let DataGridPrimaryContextMenuItem = class DataGridPrimaryContextMenuItem extends ContextMenuItem {
     static get styles() {
-        return css `
-			${super.styles}
-			:host {
-				font-weight: bold;
-			}
+        return css `
+			${super.styles}
+			:host {
+				font-weight: bold;
+			}
 		`;
     }
 };