@3mo/data-grid 0.2.6 → 0.2.8

package/dist/DataGridSidePanel.js

@@ -13,7 +13,7 @@ Localizer.register("de" /* LanguageCode.German */, {
  * @attr dataGrid
  * @attr tab
  */
-export let DataGridSidePanel = class DataGridSidePanel extends Component {
+let DataGridSidePanel = class DataGridSidePanel extends Component {
     constructor() {
         super(...arguments);
         this.getColumnTemplate = (column) => {
@@ -24,117 +24,117 @@ export let DataGridSidePanel = class DataGridSidePanel extends Component {
                 this.dataGrid.requestUpdate();
                 await this.dataGrid.updateComplete;
             };
-            return html `
-			<mo-checkbox ${style({ height: '30px' })}
-				label=${column.heading}
-				?checked=${column.hidden === false}
-				@change=${change}
-			></mo-checkbox>
+            return html `
+			<mo-checkbox ${style({ height: '30px' })}
+				label=${column.heading}
+				?checked=${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-section mo-checkbox {
-				margin-inline-start: -6px;
-			}
-
-			mo-section mo-icon-button {
-				margin-inline-start: -10px;
-			}
+        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-section mo-checkbox {
+				margin-inline-start: -6px;
+			}
+
+			mo-section mo-icon-button {
+				margin-inline-start: -10px;
+			}
 		`;
     }
     get template() {
-        return html `
-			<mo-flex ${style({ height: '100%' })}>
-				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? nothing : html `
-					<mo-tab-bar
-						value=${ifDefined(this.dataGrid.sidePanelTab)}
-						@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : "settings" /* DataGridSidePanelTab.Settings */); }}
-					>
-						<mo-tab icon='filter_list' value=${"filters" /* DataGridSidePanelTab.Filters */}></mo-tab>
-						<mo-tab icon='settings' value=${"settings" /* DataGridSidePanelTab.Settings */}></mo-tab>
-					</mo-tab-bar>
-				`}
-
-				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? nothing : html `
-					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
-						<mo-heading typography='heading6' ${style({ width: '*', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === "filters" /* 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({ height: '*' })}>
-					${this.dataGrid.sidePanelTab === "filters" /* DataGridSidePanelTab.Filters */ ? this.filtersTemplate : this.settingsTemplate}
-				</mo-scroller>
-			</mo-flex>
+        return html `
+			<mo-flex ${style({ height: '100%' })}>
+				${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? nothing : html `
+					<mo-tab-bar
+						value=${ifDefined(this.dataGrid.sidePanelTab)}
+						@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : "settings" /* DataGridSidePanelTab.Settings */); }}
+					>
+						<mo-tab icon='filter_list' value=${"filters" /* DataGridSidePanelTab.Filters */}></mo-tab>
+						<mo-tab icon='settings' value=${"settings" /* DataGridSidePanelTab.Settings */}></mo-tab>
+					</mo-tab-bar>
+				`}
+
+				${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? nothing : html `
+					<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
+						<mo-heading typography='heading6' ${style({ width: '*', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === "filters" /* 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({ height: '*' })}>
+					${this.dataGrid.sidePanelTab === "filters" /* 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'>
+				<slot name='filter'></slot>
+			</mo-flex>
 		`;
     }
     get settingsTemplate() {
-        return html `
-			<mo-flex gap='14px'>
-				<slot name='settings'></slot>
-
-				<mo-section heading=${t('Columns')}>
-					${this.dataGrid.columns.map(this.getColumnTemplate)}
-				</mo-section>
-
-				<mo-section heading='Tools'>
-					<mo-icon-button icon='file_download'
-						${tooltip('Export as Excel file')}
-						@click=${() => this.dataGrid.exportExcelFile()}
-					></mo-icon-button>
-				</mo-section>
-			</mo-flex>
+        return html `
+			<mo-flex gap='14px'>
+				<slot name='settings'></slot>
+
+				<mo-section heading=${t('Columns')}>
+					${this.dataGrid.columns.map(this.getColumnTemplate)}
+				</mo-section>
+
+				<mo-section heading='Tools'>
+					<mo-icon-button icon='file_download'
+						${tooltip('Export as Excel file')}
+						@click=${() => this.dataGrid.exportExcelFile()}
+					></mo-icon-button>
+				</mo-section>
+			</mo-flex>
 		`;
     }
 };
@@ -147,3 +147,4 @@ __decorate([
 DataGridSidePanel = __decorate([
     component('mo-data-grid-side-panel')
 ], DataGridSidePanel);
+export { DataGridSidePanel };

package/dist/FieldSelectDataGridPageSize.js

@@ -2,15 +2,15 @@ var FieldSelectDataGridPageSize_1;
 import { __decorate } from "tslib";
 import { component, html, property, nothing } from '@a11d/lit';
 import { FieldSelect } from '@3mo/select-field';
-export let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
+let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
     get optionsTemplate() {
-        return html `
-			${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? 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 ? nothing : html `
+				<mo-option value='auto'>Auto</mo-option>
+			`}
+			${FieldSelectDataGridPageSize_1.data.map(size => html `
+				<mo-option value=${size}>${size.format()}</mo-option>
+			`)}
 		`;
     }
 };
@@ -21,3 +21,4 @@ __decorate([
 FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = __decorate([
     component('mo-field-select-data-grid-page-size')
 ], FieldSelectDataGridPageSize);
+export { FieldSelectDataGridPageSize };

package/dist/columns/DataGridColumnBoolean.js

@@ -9,7 +9,7 @@ import { DataGridColumn } from './DataGridColumn.js';
  * @attr trueIconColor - Color of the true icon
  * @attr falseIconColor - Color of the false icon
  */
-export let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
+let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
     constructor() {
         super(...arguments);
         this.trueIcon = 'done';
@@ -19,18 +19,18 @@ export let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridC
     }
     // 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 label=${this.heading} data-focus
-				?checked=${value}
-				@change=${(e) => this.handleEdit(e.detail === 'checked', data)}
-			></mo-checkbox>
+        return html `
+			<mo-checkbox label=${this.heading} data-focus
+				?checked=${value}
+				@change=${(e) => this.handleEdit(e.detail === 'checked', data)}
+			></mo-checkbox>
 		`;
     }
 };
@@ -49,3 +49,4 @@ __decorate([
 DataGridColumnBoolean = __decorate([
     component('mo-data-grid-column-boolean')
 ], DataGridColumnBoolean);
+export { DataGridColumnBoolean };

package/dist/columns/DataGridColumnCurrency.js

@@ -3,7 +3,7 @@ import { component, html, ifDefined, property, style } from '@a11d/lit';
 import { Currency } from '@3mo/localization';
 import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
 /** @element mo-data-grid-column-currency */
-export let DataGridColumnCurrency = class DataGridColumnCurrency extends DataGridColumnNumberBase {
+let DataGridColumnCurrency = class DataGridColumnCurrency extends DataGridColumnNumberBase {
     constructor() {
         super(...arguments);
         this.currency = Currency.EUR;
@@ -13,17 +13,17 @@ export let DataGridColumnCurrency = class DataGridColumnCurrency extends DataGri
         return html `${(value !== null && value !== void 0 ? value : 0).formatAsCurrency(this.currency)}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-currency dense data-focus
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-currency>
+        return html `
+			<mo-field-currency dense data-focus
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-currency>
 		`;
     }
     getSumTemplate(sum) {
-        return html `
-			<span ${style({ fontWeight: '500', color: 'var(--mo-color-accent)' })}>${sum.formatAsCurrency(this.currency)}</span>
+        return html `
+			<span ${style({ fontWeight: '500', color: 'var(--mo-color-accent)' })}>${sum.formatAsCurrency(this.currency)}</span>
 		`;
     }
 };
@@ -33,3 +33,4 @@ __decorate([
 DataGridColumnCurrency = __decorate([
     component('mo-data-grid-column-currency')
 ], DataGridColumnCurrency);
+export { DataGridColumnCurrency };

package/dist/columns/DataGridColumnDate.js

@@ -5,7 +5,7 @@ import { DataGridColumn } from './DataGridColumn.js';
  * @element mo-data-grid-column-date
  * @attr hideDatePicker - Hide the date picker
  */
-export let DataGridColumnDate = class DataGridColumnDate extends DataGridColumn {
+let DataGridColumnDate = class DataGridColumnDate extends DataGridColumn {
     constructor() {
         super(...arguments);
         this.hideDatePicker = false;
@@ -16,13 +16,13 @@ export let DataGridColumnDate = class DataGridColumnDate extends DataGridColumn
         return html `${value ? (_a = value.formatAsDate()) !== null && _a !== void 0 ? _a : '' : ''}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-date dense data-focus
-				?hideDatePicker=${this.hideDatePicker}
-				label=${this.heading}
-				.value=${value}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-date>
+        return html `
+			<mo-field-date dense data-focus
+				?hideDatePicker=${this.hideDatePicker}
+				label=${this.heading}
+				.value=${value}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-date>
 		`;
     }
 };
@@ -32,3 +32,4 @@ __decorate([
 DataGridColumnDate = __decorate([
     component('mo-data-grid-column-date')
 ], DataGridColumnDate);
+export { DataGridColumnDate };

package/dist/columns/DataGridColumnDateTime.js

@@ -4,7 +4,7 @@ import { DataGridColumn } from './DataGridColumn.js';
 /**
  * @element mo-data-grid-column-date-time
  */
-export let DataGridColumnDateTime = class DataGridColumnDateTime extends DataGridColumn {
+let DataGridColumnDateTime = class DataGridColumnDateTime extends DataGridColumn {
     constructor() {
         super(...arguments);
         this.getEditContentTemplate = undefined;
@@ -18,3 +18,4 @@ export let DataGridColumnDateTime = class DataGridColumnDateTime extends DataGri
 DataGridColumnDateTime = __decorate([
     component('mo-data-grid-column-date-time')
 ], DataGridColumnDateTime);
+export { DataGridColumnDateTime };

package/dist/columns/DataGridColumnDeletion.js

@@ -13,7 +13,7 @@ Localizer.register("de" /* LanguageCode.German */, {
  *
  * @fires delete
  */
-export let DataGridColumnDeletion = class DataGridColumnDeletion extends DataGridColumn {
+let DataGridColumnDeletion = class DataGridColumnDeletion extends DataGridColumn {
     constructor() {
         super(...arguments);
         this.prevent = false;
@@ -38,3 +38,4 @@ __decorate([
 DataGridColumnDeletion = __decorate([
     component('mo-data-grid-column-deletion')
 ], DataGridColumnDeletion);
+export { DataGridColumnDeletion };

package/dist/columns/DataGridColumnImage.js

@@ -2,18 +2,19 @@ import { __decorate } from "tslib";
 import { component, html, nothing } from '@a11d/lit';
 import { DataGridColumn } from './DataGridColumn.js';
 /** @element mo-data-grid-column-image */
-export let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
+let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
     constructor() {
         super(...arguments);
         this.getEditContentTemplate = undefined;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
-        return !value ? nothing : html `
-			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
+        return !value ? nothing : html `
+			<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
 		`;
     }
 };
 DataGridColumnImage = __decorate([
     component('mo-data-grid-column-image')
 ], DataGridColumnImage);
+export { DataGridColumnImage };

package/dist/columns/DataGridColumnNumber.js

@@ -2,18 +2,18 @@ import { __decorate } from "tslib";
 import { nothing, component, html, ifDefined, style } from '@a11d/lit';
 import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
 /** @element mo-data-grid-column-number */
-export let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumberBase {
+let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumberBase {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
         var _a;
         return html `${Number.isFinite(value) ? (_a = value === null || value === void 0 ? void 0 : value.format()) !== null && _a !== void 0 ? _a : nothing : nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-number dense label=${this.heading} data-focus
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-number>
+        return html `
+			<mo-field-number dense label=${this.heading} data-focus
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-number>
 		`;
     }
     getSumTemplate(sum) {
@@ -23,3 +23,4 @@ export let DataGridColumnNumber = class DataGridColumnNumber extends DataGridCol
 DataGridColumnNumber = __decorate([
     component('mo-data-grid-column-number')
 ], DataGridColumnNumber);
+export { DataGridColumnNumber };

package/dist/columns/DataGridColumnPercent.js

@@ -2,19 +2,19 @@ import { __decorate } from "tslib";
 import { component, html, ifDefined, nothing } from '@a11d/lit';
 import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
 /** @element mo-data-grid-column-percent */
-export let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNumberBase {
+let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNumberBase {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     getContentTemplate(value, _data) {
         var _a;
         return html `${Number.isFinite(value) ? (_a = value === null || value === void 0 ? void 0 : value.formatAsPercent()) !== null && _a !== void 0 ? _a : nothing : nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-percent dense data-focus
-				label=${this.heading}
-				value=${ifDefined(value)}
-				@change=${(e) => this.handleEdit(e.detail, data)}
-			></mo-field-percent>
+        return html `
+			<mo-field-percent dense data-focus
+				label=${this.heading}
+				value=${ifDefined(value)}
+				@change=${(e) => this.handleEdit(e.detail, data)}
+			></mo-field-percent>
 		`;
     }
     getSumTemplate(sum) {
@@ -24,3 +24,4 @@ export let DataGridColumnPercent = class DataGridColumnPercent extends DataGridC
 DataGridColumnPercent = __decorate([
     component('mo-data-grid-column-percent')
 ], DataGridColumnPercent);
+export { DataGridColumnPercent };

package/dist/columns/DataGridColumnText.js

@@ -2,20 +2,21 @@ import { __decorate } from "tslib";
 import { component, html, ifDefined } from '@a11d/lit';
 import { DataGridColumn } from './DataGridColumn.js';
 /** @element mo-data-grid-column-text */
-export let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
+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 : ''}`;
     }
     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>
 		`;
     }
 };
 DataGridColumnText = __decorate([
     component('mo-data-grid-column-text')
 ], DataGridColumnText);
+export { DataGridColumnText };

package/dist/columns/DataGridFooterSum.js

@@ -5,35 +5,35 @@ import { component, property, Component, html, css } from '@a11d/lit';
  * @attr heading
  * @slot - Sum of values
  */
-export let DataGridFooterSum = class DataGridFooterSum extends Component {
+let DataGridFooterSum = class DataGridFooterSum extends Component {
     constructor() {
         super(...arguments);
         this.heading = '';
     }
     static get styles() {
-        return css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				max-height: 100%;
-				line-height: 1em;
-			}
-
-			div {
-				color: var(--mo-color-foreground-transparent);
-				font-size: x-small;
-				text-transform: uppercase;
-				text-align: center;
-			}
+        return css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				max-height: 100%;
+				line-height: 1em;
+			}
+
+			div {
+				color: var(--mo-color-foreground-transparent);
+				font-size: x-small;
+				text-transform: uppercase;
+				text-align: center;
+			}
 		`;
     }
     get template() {
-        return html `
-			<div>${this.heading}</div>
-			<mo-flex direction='horizontal' justifyContent='center'>
-				<slot></slot>
-			</mo-flex>
+        return html `
+			<div>${this.heading}</div>
+			<mo-flex direction='horizontal' justifyContent='center'>
+				<slot></slot>
+			</mo-flex>
 		`;
     }
 };
@@ -43,3 +43,4 @@ __decorate([
 DataGridFooterSum = __decorate([
     component('mo-data-grid-footer-sum')
 ], DataGridFooterSum);
+export { DataGridFooterSum };