@3mo/data-grid 0.5.5 → 0.5.7

package/dist/DataGridHeaderSeparator.js

@@ -17,55 +17,55 @@ let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSe
         };
     }
     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%;
-				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;
-			}
-
-			:host(:not([disabled])) div.separator {
-				cursor: col-resize;
-			}
-
-			:host(:not([disabled])) .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;
-			}
-
-			:host(:not([disabled])) .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%;
+				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;
+			}
+
+			:host(:not([disabled])) div.separator {
+				cursor: col-resize;
+			}
+
+			:host(:not([disabled])) .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;
+			}
+
+			:host(:not([disabled])) .resizerOverlay {
+				position: fixed;
+				top: 0;
+				height: 100%;
+				background: var(--mo-color-gray);
+				width: 2px;
+			}
 		`;
     }
     get template() {
         this.toggleAttribute('disabled', DataGridHeaderSeparator_1.disableResizing);
-        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() {
@@ -93,11 +93,10 @@ let DataGridHeaderSeparator = DataGridHeaderSeparator_1 = class DataGridHeaderSe
         }
     }
     getColumnWidth(column) {
-        var _a;
         if (column.hidden === true) {
             return 0;
         }
-        column.width = (_a = column.width) !== null && _a !== void 0 ? _a : '1fr';
+        column.width = column.width ?? '1fr';
         const columnIndex = this.dataGrid.visibleColumns.findIndex(c => c === this.column);
         const targetColumnIndex = this.dataGrid.visibleColumns.findIndex(c => c === column);
         let targetColumn = this.previousElementSibling;

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;
+			}
 		`;
     }
 };

package/dist/DataGridSelectionController.js

@@ -26,8 +26,7 @@ export class DataGridSelectionController extends Controller {
         }
     }
     isSelectable(data) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this.dataGrid).isDataSelectable) === null || _b === void 0 ? void 0 : _b.call(_a, data)) !== null && _c !== void 0 ? _c : true;
+        return this.dataGrid.isDataSelectable?.(data) ?? true;
     }
     selectAll() {
         if (this.mode === DataGridSelectionMode.Multiple) {

package/dist/DataGridSidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridSidePanel.d.ts","sourceRoot":"","sources":["../DataGridSidePanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAkC,MAAM,WAAW,CAAA;AAKvF,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAWxC,oBAAY,oBAAoB;IAC/B,QAAQ,aAAa;IACrB,OAAO,YAAY;CACnB;AAED;;;;GAIG;AACH,qBACa,iBAAiB,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1B,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/C,GAAG,CAAC,EAAE,oBAAoB,CAAA;IAEtC,WAAoB,MAAM,kCAkDzB;IAED,cAAuB,QAAQ,0CAmC9B;IAED,SAAS,KAAK,eAAe,0CAM5B;IAED,SAAS,KAAK,gBAAgB,0CAsC7B;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAcjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;KACrD;CACD"}
+{"version":3,"file":"DataGridSidePanel.d.ts","sourceRoot":"","sources":["../DataGridSidePanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAwC,MAAM,WAAW,CAAA;AAK7F,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAYxC,oBAAY,oBAAoB;IAC/B,QAAQ,aAAa;IACrB,OAAO,YAAY;CACnB;AAED;;;;GAIG;AACH,qBACa,iBAAiB,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1B,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IAC/C,GAAG,CAAC,EAAE,oBAAoB,CAAA;IAEtC,WAAoB,MAAM,kCA2CzB;IAED,cAAuB,QAAQ,0CAmC9B;IAED,SAAS,KAAK,eAAe,0CAM5B;IAED,SAAS,KAAK,gBAAgB,0CAgC7B;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAcjC;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAA;KACrD;CACD"}

package/dist/DataGridSidePanel.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { component, style, Component, css, html, ifDefined, property } from '@a11d/lit';
+import { component, style, Component, css, html, ifDefined, property, bind } from '@a11d/lit';
 import { Localizer } from '@3mo/localization';
 import { tooltip } from '@3mo/tooltip';
 Localizer.register('de', {
@@ -9,6 +9,7 @@ Localizer.register('de', {
     'Font Size': 'Schriftgröße',
     'Row Height': 'Zeilenhöhe',
     'Tools': 'Tools',
+    'Design': 'Design',
 });
 export var DataGridSidePanelTab;
 (function (DataGridSidePanelTab) {
@@ -25,152 +26,138 @@ let DataGridSidePanel = class DataGridSidePanel extends Component {
         super(...arguments);
         this.getColumnTemplate = (column) => {
             const change = async (e) => {
-                var _a;
-                column.hidden = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.selected) === false;
+                column.hidden = e.target?.selected === false;
                 this.dataGrid.setColumns(this.dataGrid.columns);
                 this.dataGrid.requestUpdate();
                 await this.dataGrid.updateComplete;
             };
-            return html `
-			<mo-checkbox ${style({ height: '30px' })}
-				label=${column.heading}
-				?selected=${column.hidden === false}
-				@change=${change}
-			></mo-checkbox>
+            return html `
+			<mo-checkbox ${style({ height: '30px' })}
+				label=${column.heading}
+				?selected=${column.hidden === false}
+				@change=${change}
+			></mo-checkbox>
 		`;
         };
     }
     static get styles() {
-        return css `
-			:host {
-				display: inline-block !important;
-				transition: 250ms;
-				width: 100%;
-				height: 100%;
-				transform-origin: right center;
-			}
-
-			:host(:not([hidden])) {
-				border-inline-start: var(--mo-data-grid-border);
-				background: var(--mo-color-transparent-gray-1);
-				opacity: 1;
-			}
-
-			:host([hidden]) {
-				opacity: 0;
-				transform: scale(0, 1);
-				width: 0;
-			}
-
-			#flexHeading {
-				border-top: var(--mo-data-grid-border);
-				border-bottom: var(--mo-data-grid-border);
-				height: var(--mo-data-grid-header-height);
-				padding-inline-start: 14px;
-			}
-
-			mo-scroller {
-				width: calc(100% - calc(2 * 14px));
-				padding: 0 14px;
-				margin-top: 14px;
-				overflow-x: hidden;
-			}
-
-			mo-scroller::part(container) {
-				width: calc(100% - calc(2 * 14px));
-			}
-
-			mo-flex[slot=heading] {
-				align-items: center;
-			}
-
-			mo-flex[slot=heading] div {
-				color: var(--mo-color-gray);
-				margin-inline-start: 8px;
-				font-size: small;
-			}
+        return css `
+			:host {
+				display: inline-block !important;
+				transition: 250ms;
+				width: 100%;
+				height: 100%;
+				transform-origin: right center;
+			}
+
+			:host(:not([hidden])) {
+				border-inline-start: var(--mo-data-grid-border);
+				background: var(--mo-color-transparent-gray-1);
+				opacity: 1;
+			}
+
+			:host([hidden]) {
+				opacity: 0;
+				transform: scale(0, 1);
+				width: 0;
+			}
+
+			#flexHeading {
+				border-top: var(--mo-data-grid-border);
+				border-bottom: var(--mo-data-grid-border);
+				height: var(--mo-data-grid-header-height);
+				padding-inline-start: 14px;
+			}
+
+			mo-scroller {
+				overflow-x: hidden;
+			}
+
+			mo-section {
+				padding: 10px 14px 20px;
+				border-bottom: var(--mo-data-grid-border);
+			}
+
+			mo-section::part(heading) {
+				font-size: min(1em, 14px);
+				letter-spacing: 0.15px;
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-flex ${style({ height: '100%' })}>
-				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? html.nothing : html `
-					<mo-tab-bar ${style({ height: '60px' })}
-						value=${ifDefined(this.dataGrid.sidePanelTab)}
-						@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : DataGridSidePanelTab.Settings); }}
-					>
-						<mo-tab value=${DataGridSidePanelTab.Filters}>
-							<mo-icon icon='filter_list'></mo-icon>
-							${t('Extended Filters')}
-						</mo-tab>
-						<mo-tab value=${DataGridSidePanelTab.Settings}>
-							<mo-icon icon='settings'></mo-icon>
-							${t('Settings')}
-						</mo-tab>
-					</mo-tab-bar>
-				`}
-
-				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? html.nothing : html `
-					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
-						<mo-heading typography='heading6' ${style({ flex: '1', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? 'Extended Filters' : 'Settings')}</mo-heading>
-						<mo-icon-button icon='close' dense
-							${tooltip(t('Close'))}
-							${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
-							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
-						></mo-icon-button>
-					</mo-flex>
-				`}
-
-				<mo-scroller ${style({ flex: '1' })}>
-					${this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? this.filtersTemplate : this.settingsTemplate}
-				</mo-scroller>
-			</mo-flex>
+        return html `
+			<mo-flex ${style({ height: '100%' })}>
+				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? html.nothing : html `
+					<mo-tab-bar ${style({ height: '60px' })}
+						value=${ifDefined(this.dataGrid.sidePanelTab)}
+						@change=${(e) => this.dataGrid.navigateToSidePanelTab(e.detail ?? DataGridSidePanelTab.Settings)}
+					>
+						<mo-tab value=${DataGridSidePanelTab.Filters}>
+							<mo-icon icon='filter_list'></mo-icon>
+							${t('Extended Filters')}
+						</mo-tab>
+						<mo-tab value=${DataGridSidePanelTab.Settings}>
+							<mo-icon icon='settings'></mo-icon>
+							${t('Settings')}
+						</mo-tab>
+					</mo-tab-bar>
+				`}
+
+				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? html.nothing : html `
+					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
+						<mo-heading typography='heading6' ${style({ flex: '1', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? 'Extended Filters' : 'Settings')}</mo-heading>
+						<mo-icon-button icon='close' dense
+							${tooltip(t('Close'))}
+							${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
+							@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
+						></mo-icon-button>
+					</mo-flex>
+				`}
+
+				<mo-scroller ${style({ flex: '1' })}>
+					${this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? this.filtersTemplate : this.settingsTemplate}
+				</mo-scroller>
+			</mo-flex>
 		`;
     }
     get filtersTemplate() {
-        return html `
-			<mo-flex gap='14px'>
-				<slot name='filter'></slot>
-			</mo-flex>
+        return html `
+			<mo-flex gap='14px' style='padding: 14px'>
+				<slot name='filter'></slot>
+			</mo-flex>
 		`;
     }
     get settingsTemplate() {
-        return html `
-			<mo-flex gap='14px'>
-				<slot name='settings'></slot>
-
-				<mo-section>
-					<mo-flex slot='heading' direction='horizontal'>
-						<mo-heading typography='heading4'>${t('Columns')}</mo-heading>
-						<div>${this.dataGrid.visibleColumns.length.format()} / ${this.dataGrid.columns.length.format()}</div>
-					</mo-flex>
-					${this.dataGrid.columns.map(this.getColumnTemplate)}
-				</mo-section>
-
-				<mo-section>
-					<mo-flex slot='heading' direction='horizontal'>
-						<mo-heading typography='heading4'>${t('Font Size')}</mo-heading>
-						<div>${(this.dataGrid.cellFontSize * 100).formatAsPercent()}</div>
-					</mo-flex>
-
-					<mo-slider min='0.8' max='1.2' step='0.1'
-						value=${this.dataGrid.cellFontSize}
-						@input=${(e) => this.dataGrid.cellFontSize = e.detail}
-					></mo-slider>
-				</mo-section>
-
-				<mo-section>
-					<mo-flex slot='heading' direction='horizontal'>
-						<mo-heading typography='heading4'>${t('Row Height')}</mo-heading>
-						<div>${this.dataGrid.rowHeight.format()} px</div>
-					</mo-flex>
-
-					<mo-slider min='30' max='60' step='5'
-						value=${this.dataGrid.rowHeight}
-						@input=${(e) => this.dataGrid.rowHeight = e.detail}
-					></mo-slider>
-				</mo-section>
-			</mo-flex>
+        return html `
+			<mo-flex>
+				<slot name='settings'></slot>
+
+				<mo-section heading=${t('Design')}>
+					<mo-flex gap='16px'>
+						<mo-field-select label=${t('Font Size')} ${bind(this, 'dataGrid', { keyPath: 'cellFontSize' })}>
+							${Array.from({ length: 5 }).map((_, i) => {
+            const value = 0.8 + i * 0.1;
+            return html `<mo-option value=${value}>${(value * 100).formatAsPercent()}</mo-option>`;
+        })}
+						</mo-field-select>
+						<mo-field-select label=${t('Row Height')} ${bind(this, 'dataGrid', { keyPath: 'rowHeight' })}>
+							${Array.from({ length: 7 }).map((_, i) => {
+            const value = 30 + i * 5;
+            return html `<mo-option value=${value}>${value}px</mo-option>`;
+        })}
+						</mo-field-select>
+					</mo-flex>
+				</mo-section>
+
+				<mo-section .heading=${html `
+					${t('Columns')}
+					<span style='color: var(--mo-color-gray)'>
+						${this.dataGrid.visibleColumns.length.format()}/${this.dataGrid.columns.length.format()}
+					</span>
+				`}>
+					${this.dataGrid.columns.map(this.getColumnTemplate)}
+				</mo-section>
+			</mo-flex>
 		`;
     }
 };

package/dist/FieldSelectDataGridPageSize.js

@@ -4,13 +4,13 @@ import { component, html, property } from '@a11d/lit';
 import { FieldSelect } from '@3mo/select-field';
 let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
     get optionsTemplate() {
-        return html `
-			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
-				<mo-option value='auto'>Auto</mo-option>
-			`}
-			${FieldSelectDataGridPageSize_1.data.map(size => html `
-				<mo-option value=${size}>${size.format()}</mo-option>
-			`)}
+        return html `
+			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
+				<mo-option value='auto'>Auto</mo-option>
+			`}
+			${FieldSelectDataGridPageSize_1.data.map(size => html `
+				<mo-option value=${size}>${size.format()}</mo-option>
+			`)}
 		`;
     }
 };

package/dist/columns/DataGridColumn.js

@@ -26,7 +26,6 @@ export class DataGridColumn extends Component {
         return Number(value.replace(DataGridColumn.regex, '$1') || 1);
     }
     get definition() {
-        var _a;
         const nonEditable = this.nonEditable;
         return {
             dataSelector: this.dataSelector,
@@ -39,12 +38,11 @@ export class DataGridColumn extends Component {
             sortable: !this.nonSortable,
             editable: this.getEditContentTemplate !== undefined && (typeof nonEditable !== 'function' ? !nonEditable : x => !nonEditable(x)),
             getContentTemplate: this.getContentTemplate.bind(this),
-            getEditContentTemplate: (_a = this.getEditContentTemplate) === null || _a === void 0 ? void 0 : _a.bind(this),
+            getEditContentTemplate: this.getEditContentTemplate?.bind(this),
         };
     }
     handleEdit(value, data) {
-        var _a;
-        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.handleEdit(data, this.dataSelector, value);
+        this.dataGrid?.handleEdit(data, this.dataSelector, value);
     }
     connectedCallback() {
         if (this.parentElement instanceof DataGrid) {
@@ -53,9 +51,8 @@ export class DataGridColumn extends Component {
         super.connectedCallback();
     }
     updated() {
-        var _a, _b;
-        (_a = this.dataGrid) === null || _a === void 0 ? void 0 : _a.extractColumns();
-        (_b = this.dataGrid) === null || _b === void 0 ? void 0 : _b.requestUpdate();
+        this.dataGrid?.extractColumns();
+        this.dataGrid?.requestUpdate();
     }
 }
 DataGridColumn.regex = /^\s*(0|[1-9][0-9]*)?\s*\*\s*$/;

package/dist/columns/DataGridColumn.test.js

@@ -4,12 +4,12 @@ describe('DataGridColumn', () => {
     describe('nonEditable', () => {
         it('should not trigger update when a new passed predicate is equal but not identical', () => {
             const hasChanged = DataGridColumn.getPropertyOptions('nonEditable').hasChanged;
-            expect(hasChanged === null || hasChanged === void 0 ? void 0 : hasChanged(false, false)).toBe(false);
-            expect(hasChanged === null || hasChanged === void 0 ? void 0 : hasChanged(true, true)).toBe(false);
-            expect(hasChanged === null || hasChanged === void 0 ? void 0 : hasChanged(() => true, () => true)).toBe(false);
-            expect(hasChanged === null || hasChanged === void 0 ? void 0 : hasChanged(false, true)).toBe(true);
-            expect(hasChanged === null || hasChanged === void 0 ? void 0 : hasChanged(true, false)).toBe(true);
-            expect(hasChanged === null || hasChanged === void 0 ? void 0 : hasChanged(() => false, () => true)).toBe(true);
+            expect(hasChanged?.(false, false)).toBe(false);
+            expect(hasChanged?.(true, true)).toBe(false);
+            expect(hasChanged?.(() => true, () => true)).toBe(false);
+            expect(hasChanged?.(false, true)).toBe(true);
+            expect(hasChanged?.(true, false)).toBe(true);
+            expect(hasChanged?.(() => false, () => true)).toBe(true);
         });
     });
 });

package/dist/columns/DataGridColumnBoolean.js

@@ -19,18 +19,18 @@ let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return html `
-			<mo-flex justifyContent='center' ${style({ height: '100%' })}>
-				<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
-			</mo-flex>
+        return html `
+			<mo-flex justifyContent='center' ${style({ height: '100%' })}>
+				<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
+			</mo-flex>
 		`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-checkbox data-focus
-				?selected=${value}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-checkbox>
+        return html `
+			<mo-checkbox data-focus
+				?selected=${value}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-checkbox>
 		`;
     }
 };

package/dist/columns/DataGridColumnImage.js

@@ -11,8 +11,8 @@ let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return !value ? html.nothing : html `
-			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
+        return !value ? html.nothing : html `
+			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
 		`;
     }
 };

package/dist/columns/DataGridColumnText.js

@@ -5,14 +5,14 @@ import { DataGridColumn } from './DataGridColumn.js';
 let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return html `${value !== null && value !== void 0 ? value : ''}`;
+        return html `${value ?? ''}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-text dense label=${this.heading} data-focus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-text>
+        return html `
+			<mo-field-text dense label=${this.heading} data-focus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-text>
 		`;
     }
 };

package/dist/columns/date-time/DataGridColumnDate.js

@@ -8,9 +8,8 @@ let DataGridColumnDate = class DataGridColumnDate extends DataGridColumnDateTime
         this.fieldTag = literal `mo-field-date`;
     }
     getContentTemplate(value, data) {
-        var _a;
         data;
-        return html `${value ? (_a = value.formatAsDate(this.formatOptionsValue)) !== null && _a !== void 0 ? _a : '' : ''}`;
+        return html `${value ? value.formatAsDate(this.formatOptionsValue) ?? '' : ''}`;
     }
 };
 DataGridColumnDate = __decorate([

package/dist/columns/date-time/DataGridColumnDateRange.js

@@ -8,9 +8,8 @@ let DataGridColumnDateRange = class DataGridColumnDateRange extends DataGridColu
         this.fieldTag = literal `mo-field-date-range`;
     }
     getContentTemplate(value, data) {
-        var _a;
         data;
-        return html `${value ? (_a = value.formatAsDateRange(this.formatOptionsValue)) !== null && _a !== void 0 ? _a : '' : ''}`;
+        return html `${value ? value.formatAsDateRange(this.formatOptionsValue) ?? '' : ''}`;
     }
 };
 DataGridColumnDateRange = __decorate([

package/dist/columns/date-time/DataGridColumnDateTime.js

@@ -8,9 +8,8 @@ let DataGridColumnDateTime = class DataGridColumnDateTime extends DataGridColumn
         this.fieldTag = literal `mo-field-date-time`;
     }
     getContentTemplate(value, data) {
-        var _a;
         data;
-        return html `${value ? (_a = value.format(this.formatOptionsValue)) !== null && _a !== void 0 ? _a : '' : ''}`;
+        return html `${value ? value.format(this.formatOptionsValue) ?? '' : ''}`;
     }
 };
 DataGridColumnDateTime = __decorate([

package/dist/columns/date-time/DataGridColumnDateTimeBase.js

@@ -11,19 +11,18 @@ export class DataGridColumnDateTimeBase extends DataGridColumn {
         this.pickerHidden = false;
     }
     get formatOptionsValue() {
-        var _a;
-        return (_a = this.formatOptions) !== null && _a !== void 0 ? _a : this.constructor.defaultFormatOptions;
+        return this.formatOptions ?? this.constructor.defaultFormatOptions;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			${staticHtml `
-				<${this.fieldTag} dense data-focus
-					?pickerHidden=${this.pickerHidden}
-					label=${this.heading}
-					.value=${value}
-					@change=${(e) => this.handleEdit(e.detail, data)}
-				></${this.fieldTag}>
-			`}
+        return html `
+			${staticHtml `
+				<${this.fieldTag} dense data-focus
+					?pickerHidden=${this.pickerHidden}
+					label=${this.heading}
+					.value=${value}
+					@change=${(e) => this.handleEdit(e.detail, data)}
+				></${this.fieldTag}>
+			`}
 		`;
     }
 }

package/dist/columns/date-time/DataGridColumnDateTimeRange.js

@@ -8,9 +8,8 @@ let DataGridColumnDateTimeRange = class DataGridColumnDateTimeRange extends Data
         this.fieldTag = literal `mo-field-date-time-range`;
     }
     getContentTemplate(value, data) {
-        var _a;
         data;
-        return html `${value ? (_a = value.format(this.formatOptionsValue)) !== null && _a !== void 0 ? _a : '' : ''}`;
+        return html `${value ? value.format(this.formatOptionsValue) ?? '' : ''}`;
     }
 };
 DataGridColumnDateTimeRange = __decorate([