@3mo/data-grid 0.5.13 → 0.5.14

package/dist/DataGridSidePanel.js

@@ -31,133 +31,133 @@ let DataGridSidePanel = class DataGridSidePanel extends Component {
                 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 {
-				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;
-			}
+        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) => 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>
+        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' style='padding: 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>
-				<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' })}>
+        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' })}>
+        })}
+						</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>
+        })}
+						</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/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 autofocus
-				?selected=${value}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-checkbox>
+        return html `
+			<mo-checkbox autofocus
+				?selected=${value}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-checkbox>
 		`;
     }
 };

package/dist/columns/DataGridColumnText.js

@@ -8,11 +8,11 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
         return html `${value ?? ''}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-text dense label=${this.heading} autofocus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-text>
+        return html `
+			<mo-field-text dense label=${this.heading} autofocus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-text>
 		`;
     }
 };

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

@@ -14,15 +14,15 @@ export class DataGridColumnDateTimeBase extends DataGridColumn {
         return this.formatOptions ?? this.constructor.defaultFormatOptions;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			${staticHtml `
-				<${this.fieldTag} dense autofocus
-					?pickerHidden=${this.pickerHidden}
-					label=${this.heading}
-					.value=${value}
-					@change=${(e) => this.handleEdit(e.detail, data)}
-				></${this.fieldTag}>
-			`}
+        return html `
+			${staticHtml `
+				<${this.fieldTag} dense autofocus
+					?pickerHidden=${this.pickerHidden}
+					label=${this.heading}
+					.value=${value}
+					@change=${(e) => this.handleEdit(e.detail, data)}
+				></${this.fieldTag}>
+			`}
 		`;
     }
 }

package/dist/columns/number/DataGridColumnCurrency.js

@@ -18,18 +18,18 @@ let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurr
         return html `${this.getNumber(value)?.formatAsCurrency(this.currency) ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-currency dense autofocus
-				.currency=${this.currency}
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-currency>
+        return html `
+			<mo-field-currency dense autofocus
+				.currency=${this.currency}
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-currency>
 		`;
     }
     getSumTemplate(sum) {
-        return html `
-			<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
+        return html `
+			<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
 		`;
     }
 };

package/dist/columns/number/DataGridColumnNumber.js

@@ -8,11 +8,11 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
         return html `${this.getNumber(value)?.format() ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-number dense label=${this.heading} autofocus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-number>
+        return html `
+			<mo-field-number dense label=${this.heading} autofocus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-number>
 		`;
     }
     getSumTemplate(sum) {

package/dist/columns/number/DataGridColumnPercent.js

@@ -8,12 +8,12 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
         return html `${this.getNumber(value)?.formatAsPercent() ?? html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-percent dense autofocus
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-percent>
+        return html `
+			<mo-field-percent dense autofocus
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-percent>
 		`;
     }
     getSumTemplate(sum) {