@3mo/data-grid 0.4.15 → 0.4.17

package/dist/DataGridSidePanel.js

@@ -32,153 +32,153 @@ 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 {
-				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 {
+				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;
+			}
 		`;
     }
     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) => { 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>
 		`;
     }
     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>
-					<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-section heading=${t('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>
+					<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-section heading=${t('Tools')}>
+					<mo-icon-button icon='file_download'
+						${tooltip('Export as Excel file')}
+						@click=${() => this.dataGrid.exportExcelFile()}
+					></mo-icon-button>
+				</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/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/DataGridColumnDeletion.d.ts

@@ -1,3 +1,4 @@
+import { MaterialIcon } from '@3mo/icon';
 import { DataGridColumn } from './DataGridColumn.js';
 /**
  * @element mo-data-grid-column-deletion
@@ -8,6 +9,7 @@ import { DataGridColumn } from './DataGridColumn.js';
  */
 export declare class DataGridColumnDeletion<TData> extends DataGridColumn<TData, never> {
     readonly delete: EventDispatcher<TData>;
+    icon: MaterialIcon;
     prevent: boolean;
     width: string;
     nonSortable: boolean;

package/dist/columns/DataGridColumnDeletion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnDeletion.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnDeletion.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMpD;;;;;;GAMG;AACH,qBACa,sBAAsB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAEpB,OAAO,UAAQ;IAEnC,KAAK,SAAS;IACd,WAAW,UAAO;IAClB,WAAW,UAAO;IAE3B,kBAAkB,MAAO,KAAK,SAAS,KAAK,2CAK3C;IAED,sBAAsB,YAAY;CAClC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAA;KAC/D;CACD"}
+{"version":3,"file":"DataGridColumnDeletion.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnDeletion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAGxC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMpD;;;;;;GAMG;AACH,qBACa,sBAAsB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,MAAM,EAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAErC,IAAI,EAAE,YAAY,CAAW;IACZ,OAAO,UAAQ;IAEnC,KAAK,SAAS;IACd,WAAW,UAAO;IAClB,WAAW,UAAO;IAE3B,kBAAkB,MAAO,KAAK,SAAS,KAAK,2CAM3C;IAED,sBAAsB,YAAY;CAClC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,8BAA8B,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAA;KAC/D;CACD"}

package/dist/columns/DataGridColumnDeletion.js

@@ -16,13 +16,15 @@ Localizer.register('de', {
 let DataGridColumnDeletion = class DataGridColumnDeletion extends DataGridColumn {
     constructor() {
         super(...arguments);
+        this.icon = 'delete';
         this.prevent = false;
         this.width = '40px';
         this.nonSortable = true;
         this.nonEditable = true;
         this.getContentTemplate = (_, data) => this.prevent ? html.nothing : html `
-		<mo-icon-button icon='delete' ${tooltip('Delete position')}
-			${style({ color: 'var(--mo-color-gray)', height: '40px' })}
+		<mo-icon-button icon=${this.icon}
+			${tooltip(t('Position entfernen'))}
+			${style({ color: 'var(--mo-color-gray)', height: '40px', display: 'flex' })}
 			@click=${() => !data ? void 0 : this.delete.dispatch(data)}
 		></mo-icon-button>
 	`;
@@ -32,6 +34,9 @@ let DataGridColumnDeletion = class DataGridColumnDeletion extends DataGridColumn
 __decorate([
     event()
 ], DataGridColumnDeletion.prototype, "delete", void 0);
+__decorate([
+    property()
+], DataGridColumnDeletion.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean })
 ], DataGridColumnDeletion.prototype, "prevent", void 0);

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

@@ -8,11 +8,11 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
         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>
 		`;
     }
 };

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

@@ -15,15 +15,15 @@ export class DataGridColumnDateTimeBase extends DataGridColumn {
         return (_a = this.formatOptions) !== null && _a !== void 0 ? _a : 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/number/DataGridColumnCurrency.js

@@ -19,18 +19,18 @@ let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurr
         return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.formatAsCurrency(this.currency)) !== null && _b !== void 0 ? _b : html.nothing}`;
     }
     getEditContentTemplate(value, data) {
-        return html `
-			<mo-field-currency dense data-focus
-				.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 data-focus
+				.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

@@ -9,11 +9,11 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
         return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.format()) !== null && _b !== void 0 ? _b : html.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) {

package/dist/columns/number/DataGridColumnPercent.js

@@ -9,12 +9,12 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
         return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.formatAsPercent()) !== null && _b !== void 0 ? _b : html.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) {

package/dist/columns/number/DataGridFooterSum.js

@@ -13,29 +13,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
         this.heading = '';
     }
     static get styles() {
-        return css `
-			:host {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				max-height: 100%;
-				line-height: 1em;
-				user-select: all;
-				align-items: flex-end;
-			}
-
-			div {
-				color: var(--mo-color-gray);
-				font-size: 0.75rem;
-			}
+        return css `
+			:host {
+				display: flex;
+				flex-direction: column;
+				position: relative;
+				max-height: 100%;
+				line-height: 1em;
+				user-select: all;
+				align-items: flex-end;
+			}
+
+			div {
+				color: var(--mo-color-gray);
+				font-size: 0.75rem;
+			}
 		`;
     }
     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>
 		`;
     }
 };