@3mo/data-grid 0.4.15 → 0.4.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CsvGenerator.js +2 -2
- package/dist/DataGrid.js +293 -293
- package/dist/DataGridCell.js +40 -40
- package/dist/DataGridFooter.js +79 -79
- package/dist/DataGridHeader.js +90 -90
- package/dist/DataGridHeaderSeparator.js +42 -42
- package/dist/DataGridPrimaryContextMenuItem.js +5 -5
- package/dist/DataGridSidePanel.js +134 -134
- package/dist/FieldSelectDataGridPageSize.js +7 -7
- package/dist/columns/DataGridColumnBoolean.js +9 -9
- package/dist/columns/DataGridColumnImage.js +2 -2
- package/dist/columns/DataGridColumnText.js +5 -5
- package/dist/columns/date-time/DataGridColumnDateTimeBase.js +9 -9
- package/dist/columns/number/DataGridColumnCurrency.js +9 -9
- package/dist/columns/number/DataGridColumnNumber.js +5 -5
- package/dist/columns/number/DataGridColumnPercent.js +6 -6
- package/dist/columns/number/DataGridFooterSum.js +20 -20
- package/dist/rows/DataGridDefaultRow.js +47 -47
- package/dist/rows/DataGridRow.js +138 -138
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +56 -56
|
@@ -32,153 +32,153 @@ let DataGridSidePanel = class DataGridSidePanel extends Component {
|
|
|
32
32
|
this.dataGrid.requestUpdate();
|
|
33
33
|
await this.dataGrid.updateComplete;
|
|
34
34
|
};
|
|
35
|
-
return html `
|
|
36
|
-
<mo-checkbox ${style({ height: '30px' })}
|
|
37
|
-
label=${column.heading}
|
|
38
|
-
?selected=${column.hidden === false}
|
|
39
|
-
@change=${change}
|
|
40
|
-
></mo-checkbox>
|
|
35
|
+
return html `
|
|
36
|
+
<mo-checkbox ${style({ height: '30px' })}
|
|
37
|
+
label=${column.heading}
|
|
38
|
+
?selected=${column.hidden === false}
|
|
39
|
+
@change=${change}
|
|
40
|
+
></mo-checkbox>
|
|
41
41
|
`;
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
44
|
static get styles() {
|
|
45
|
-
return css `
|
|
46
|
-
:host {
|
|
47
|
-
display: inline-block !important;
|
|
48
|
-
transition: 250ms;
|
|
49
|
-
width: 100%;
|
|
50
|
-
height: 100%;
|
|
51
|
-
transform-origin: right center;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
:host(:not([hidden])) {
|
|
55
|
-
border-inline-start: var(--mo-data-grid-border);
|
|
56
|
-
background: var(--mo-color-transparent-gray-1);
|
|
57
|
-
opacity: 1;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
:host([hidden]) {
|
|
61
|
-
opacity: 0;
|
|
62
|
-
transform: scale(0, 1);
|
|
63
|
-
width: 0;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
#flexHeading {
|
|
67
|
-
border-top: var(--mo-data-grid-border);
|
|
68
|
-
border-bottom: var(--mo-data-grid-border);
|
|
69
|
-
height: var(--mo-data-grid-header-height);
|
|
70
|
-
padding-inline-start: 14px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
mo-scroller {
|
|
74
|
-
width: calc(100% - calc(2 * 14px));
|
|
75
|
-
padding: 0 14px;
|
|
76
|
-
margin-top: 14px;
|
|
77
|
-
overflow-x: hidden;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
mo-scroller::part(container) {
|
|
81
|
-
width: calc(100% - calc(2 * 14px));
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
mo-flex[slot=heading] {
|
|
85
|
-
align-items: center;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
mo-flex[slot=heading] div {
|
|
89
|
-
color: var(--mo-color-gray);
|
|
90
|
-
margin-inline-start: 8px;
|
|
91
|
-
font-size: small;
|
|
92
|
-
}
|
|
45
|
+
return css `
|
|
46
|
+
:host {
|
|
47
|
+
display: inline-block !important;
|
|
48
|
+
transition: 250ms;
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
transform-origin: right center;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host(:not([hidden])) {
|
|
55
|
+
border-inline-start: var(--mo-data-grid-border);
|
|
56
|
+
background: var(--mo-color-transparent-gray-1);
|
|
57
|
+
opacity: 1;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([hidden]) {
|
|
61
|
+
opacity: 0;
|
|
62
|
+
transform: scale(0, 1);
|
|
63
|
+
width: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
#flexHeading {
|
|
67
|
+
border-top: var(--mo-data-grid-border);
|
|
68
|
+
border-bottom: var(--mo-data-grid-border);
|
|
69
|
+
height: var(--mo-data-grid-header-height);
|
|
70
|
+
padding-inline-start: 14px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
mo-scroller {
|
|
74
|
+
width: calc(100% - calc(2 * 14px));
|
|
75
|
+
padding: 0 14px;
|
|
76
|
+
margin-top: 14px;
|
|
77
|
+
overflow-x: hidden;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
mo-scroller::part(container) {
|
|
81
|
+
width: calc(100% - calc(2 * 14px));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
mo-flex[slot=heading] {
|
|
85
|
+
align-items: center;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
mo-flex[slot=heading] div {
|
|
89
|
+
color: var(--mo-color-gray);
|
|
90
|
+
margin-inline-start: 8px;
|
|
91
|
+
font-size: small;
|
|
92
|
+
}
|
|
93
93
|
`;
|
|
94
94
|
}
|
|
95
95
|
get template() {
|
|
96
|
-
return html `
|
|
97
|
-
<mo-flex ${style({ height: '100%' })}>
|
|
98
|
-
${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? html.nothing : html `
|
|
99
|
-
<mo-tab-bar ${style({ height: '60px' })}
|
|
100
|
-
value=${ifDefined(this.dataGrid.sidePanelTab)}
|
|
101
|
-
@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : DataGridSidePanelTab.Settings); }}
|
|
102
|
-
>
|
|
103
|
-
<mo-tab value=${DataGridSidePanelTab.Filters}>
|
|
104
|
-
<mo-icon icon='filter_list'></mo-icon>
|
|
105
|
-
${t('Extended Filters')}
|
|
106
|
-
</mo-tab>
|
|
107
|
-
<mo-tab value=${DataGridSidePanelTab.Settings}>
|
|
108
|
-
<mo-icon icon='settings'></mo-icon>
|
|
109
|
-
${t('Settings')}
|
|
110
|
-
</mo-tab>
|
|
111
|
-
</mo-tab-bar>
|
|
112
|
-
`}
|
|
113
|
-
|
|
114
|
-
${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? html.nothing : html `
|
|
115
|
-
<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
|
|
116
|
-
<mo-heading typography='heading6' ${style({ flex: '1', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? 'Extended Filters' : 'Settings')}</mo-heading>
|
|
117
|
-
<mo-icon-button icon='close' dense
|
|
118
|
-
${tooltip(t('Close'))}
|
|
119
|
-
${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
|
|
120
|
-
@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
|
|
121
|
-
></mo-icon-button>
|
|
122
|
-
</mo-flex>
|
|
123
|
-
`}
|
|
124
|
-
|
|
125
|
-
<mo-scroller ${style({ flex: '1' })}>
|
|
126
|
-
${this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? this.filtersTemplate : this.settingsTemplate}
|
|
127
|
-
</mo-scroller>
|
|
128
|
-
</mo-flex>
|
|
96
|
+
return html `
|
|
97
|
+
<mo-flex ${style({ height: '100%' })}>
|
|
98
|
+
${this.dataGrid.hasToolbar || this.dataGrid.hasFilters === false ? html.nothing : html `
|
|
99
|
+
<mo-tab-bar ${style({ height: '60px' })}
|
|
100
|
+
value=${ifDefined(this.dataGrid.sidePanelTab)}
|
|
101
|
+
@change=${(e) => { var _a; return this.dataGrid.navigateToSidePanelTab((_a = e.detail) !== null && _a !== void 0 ? _a : DataGridSidePanelTab.Settings); }}
|
|
102
|
+
>
|
|
103
|
+
<mo-tab value=${DataGridSidePanelTab.Filters}>
|
|
104
|
+
<mo-icon icon='filter_list'></mo-icon>
|
|
105
|
+
${t('Extended Filters')}
|
|
106
|
+
</mo-tab>
|
|
107
|
+
<mo-tab value=${DataGridSidePanelTab.Settings}>
|
|
108
|
+
<mo-icon icon='settings'></mo-icon>
|
|
109
|
+
${t('Settings')}
|
|
110
|
+
</mo-tab>
|
|
111
|
+
</mo-tab-bar>
|
|
112
|
+
`}
|
|
113
|
+
|
|
114
|
+
${this.dataGrid.hasToolbar === false && this.dataGrid.hasFilters === true ? html.nothing : html `
|
|
115
|
+
<mo-flex id='flexHeading' direction='horizontal' alignItems='center'>
|
|
116
|
+
<mo-heading typography='heading6' ${style({ flex: '1', color: 'var(--mo-color-on-surface)' })}>${t(this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? 'Extended Filters' : 'Settings')}</mo-heading>
|
|
117
|
+
<mo-icon-button icon='close' dense
|
|
118
|
+
${tooltip(t('Close'))}
|
|
119
|
+
${style({ cursor: 'pointer', color: 'var(--mo-color-gray)' })}
|
|
120
|
+
@click=${() => this.dataGrid.navigateToSidePanelTab(undefined)}
|
|
121
|
+
></mo-icon-button>
|
|
122
|
+
</mo-flex>
|
|
123
|
+
`}
|
|
124
|
+
|
|
125
|
+
<mo-scroller ${style({ flex: '1' })}>
|
|
126
|
+
${this.dataGrid.sidePanelTab === DataGridSidePanelTab.Filters ? this.filtersTemplate : this.settingsTemplate}
|
|
127
|
+
</mo-scroller>
|
|
128
|
+
</mo-flex>
|
|
129
129
|
`;
|
|
130
130
|
}
|
|
131
131
|
get filtersTemplate() {
|
|
132
|
-
return html `
|
|
133
|
-
<mo-flex gap='14px'>
|
|
134
|
-
<slot name='filter'></slot>
|
|
135
|
-
</mo-flex>
|
|
132
|
+
return html `
|
|
133
|
+
<mo-flex gap='14px'>
|
|
134
|
+
<slot name='filter'></slot>
|
|
135
|
+
</mo-flex>
|
|
136
136
|
`;
|
|
137
137
|
}
|
|
138
138
|
get settingsTemplate() {
|
|
139
|
-
return html `
|
|
140
|
-
<mo-flex gap='14px'>
|
|
141
|
-
<slot name='settings'></slot>
|
|
142
|
-
|
|
143
|
-
<mo-section>
|
|
144
|
-
<mo-flex slot='heading' direction='horizontal'>
|
|
145
|
-
<mo-heading typography='heading4'>${t('Columns')}</mo-heading>
|
|
146
|
-
<div>${this.dataGrid.visibleColumns.length.format()} / ${this.dataGrid.columns.length.format()}</div>
|
|
147
|
-
</mo-flex>
|
|
148
|
-
${this.dataGrid.columns.map(this.getColumnTemplate)}
|
|
149
|
-
</mo-section>
|
|
150
|
-
|
|
151
|
-
<mo-section>
|
|
152
|
-
<mo-flex slot='heading' direction='horizontal'>
|
|
153
|
-
<mo-heading typography='heading4'>${t('Font Size')}</mo-heading>
|
|
154
|
-
<div>${(this.dataGrid.cellFontSize * 100).formatAsPercent()}</div>
|
|
155
|
-
</mo-flex>
|
|
156
|
-
|
|
157
|
-
<mo-slider min='0.8' max='1.2' step='0.1'
|
|
158
|
-
value=${this.dataGrid.cellFontSize}
|
|
159
|
-
@input=${(e) => this.dataGrid.cellFontSize = e.detail}
|
|
160
|
-
></mo-slider>
|
|
161
|
-
</mo-section>
|
|
162
|
-
|
|
163
|
-
<mo-section>
|
|
164
|
-
<mo-flex slot='heading' direction='horizontal'>
|
|
165
|
-
<mo-heading typography='heading4'>${t('Row Height')}</mo-heading>
|
|
166
|
-
<div>${this.dataGrid.rowHeight.format()} px</div>
|
|
167
|
-
</mo-flex>
|
|
168
|
-
|
|
169
|
-
<mo-slider min='30' max='60' step='5'
|
|
170
|
-
value=${this.dataGrid.rowHeight}
|
|
171
|
-
@input=${(e) => this.dataGrid.rowHeight = e.detail}
|
|
172
|
-
></mo-slider>
|
|
173
|
-
</mo-section>
|
|
174
|
-
|
|
175
|
-
<mo-section heading=${t('Tools')}>
|
|
176
|
-
<mo-icon-button icon='file_download'
|
|
177
|
-
${tooltip('Export as Excel file')}
|
|
178
|
-
@click=${() => this.dataGrid.exportExcelFile()}
|
|
179
|
-
></mo-icon-button>
|
|
180
|
-
</mo-section>
|
|
181
|
-
</mo-flex>
|
|
139
|
+
return html `
|
|
140
|
+
<mo-flex gap='14px'>
|
|
141
|
+
<slot name='settings'></slot>
|
|
142
|
+
|
|
143
|
+
<mo-section>
|
|
144
|
+
<mo-flex slot='heading' direction='horizontal'>
|
|
145
|
+
<mo-heading typography='heading4'>${t('Columns')}</mo-heading>
|
|
146
|
+
<div>${this.dataGrid.visibleColumns.length.format()} / ${this.dataGrid.columns.length.format()}</div>
|
|
147
|
+
</mo-flex>
|
|
148
|
+
${this.dataGrid.columns.map(this.getColumnTemplate)}
|
|
149
|
+
</mo-section>
|
|
150
|
+
|
|
151
|
+
<mo-section>
|
|
152
|
+
<mo-flex slot='heading' direction='horizontal'>
|
|
153
|
+
<mo-heading typography='heading4'>${t('Font Size')}</mo-heading>
|
|
154
|
+
<div>${(this.dataGrid.cellFontSize * 100).formatAsPercent()}</div>
|
|
155
|
+
</mo-flex>
|
|
156
|
+
|
|
157
|
+
<mo-slider min='0.8' max='1.2' step='0.1'
|
|
158
|
+
value=${this.dataGrid.cellFontSize}
|
|
159
|
+
@input=${(e) => this.dataGrid.cellFontSize = e.detail}
|
|
160
|
+
></mo-slider>
|
|
161
|
+
</mo-section>
|
|
162
|
+
|
|
163
|
+
<mo-section>
|
|
164
|
+
<mo-flex slot='heading' direction='horizontal'>
|
|
165
|
+
<mo-heading typography='heading4'>${t('Row Height')}</mo-heading>
|
|
166
|
+
<div>${this.dataGrid.rowHeight.format()} px</div>
|
|
167
|
+
</mo-flex>
|
|
168
|
+
|
|
169
|
+
<mo-slider min='30' max='60' step='5'
|
|
170
|
+
value=${this.dataGrid.rowHeight}
|
|
171
|
+
@input=${(e) => this.dataGrid.rowHeight = e.detail}
|
|
172
|
+
></mo-slider>
|
|
173
|
+
</mo-section>
|
|
174
|
+
|
|
175
|
+
<mo-section heading=${t('Tools')}>
|
|
176
|
+
<mo-icon-button icon='file_download'
|
|
177
|
+
${tooltip('Export as Excel file')}
|
|
178
|
+
@click=${() => this.dataGrid.exportExcelFile()}
|
|
179
|
+
></mo-icon-button>
|
|
180
|
+
</mo-section>
|
|
181
|
+
</mo-flex>
|
|
182
182
|
`;
|
|
183
183
|
}
|
|
184
184
|
};
|
|
@@ -4,13 +4,13 @@ import { component, html, property } from '@a11d/lit';
|
|
|
4
4
|
import { FieldSelect } from '@3mo/select-field';
|
|
5
5
|
let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
|
|
6
6
|
get optionsTemplate() {
|
|
7
|
-
return html `
|
|
8
|
-
${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
|
|
9
|
-
<mo-option value='auto'>Auto</mo-option>
|
|
10
|
-
`}
|
|
11
|
-
${FieldSelectDataGridPageSize_1.data.map(size => html `
|
|
12
|
-
<mo-option value=${size}>${size.format()}</mo-option>
|
|
13
|
-
`)}
|
|
7
|
+
return html `
|
|
8
|
+
${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
|
|
9
|
+
<mo-option value='auto'>Auto</mo-option>
|
|
10
|
+
`}
|
|
11
|
+
${FieldSelectDataGridPageSize_1.data.map(size => html `
|
|
12
|
+
<mo-option value=${size}>${size.format()}</mo-option>
|
|
13
|
+
`)}
|
|
14
14
|
`;
|
|
15
15
|
}
|
|
16
16
|
};
|
|
@@ -19,18 +19,18 @@ let DataGridColumnBoolean = class DataGridColumnBoolean extends DataGridColumn {
|
|
|
19
19
|
}
|
|
20
20
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
21
21
|
getContentTemplate(value, _data) {
|
|
22
|
-
return html `
|
|
23
|
-
<mo-flex justifyContent='center' ${style({ height: '100%' })}>
|
|
24
|
-
<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
|
|
25
|
-
</mo-flex>
|
|
22
|
+
return html `
|
|
23
|
+
<mo-flex justifyContent='center' ${style({ height: '100%' })}>
|
|
24
|
+
<mo-icon icon=${value ? this.trueIcon : this.falseIcon} ${style({ color: value ? this.trueIconColor : this.falseIconColor })}></mo-icon>
|
|
25
|
+
</mo-flex>
|
|
26
26
|
`;
|
|
27
27
|
}
|
|
28
28
|
getEditContentTemplate(value, data) {
|
|
29
|
-
return html `
|
|
30
|
-
<mo-checkbox data-focus
|
|
31
|
-
?selected=${value}
|
|
32
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
33
|
-
></mo-checkbox>
|
|
29
|
+
return html `
|
|
30
|
+
<mo-checkbox data-focus
|
|
31
|
+
?selected=${value}
|
|
32
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
33
|
+
></mo-checkbox>
|
|
34
34
|
`;
|
|
35
35
|
}
|
|
36
36
|
};
|
|
@@ -11,8 +11,8 @@ let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
|
|
|
11
11
|
}
|
|
12
12
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
13
13
|
getContentTemplate(value, _data) {
|
|
14
|
-
return !value ? html.nothing : html `
|
|
15
|
-
<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
|
|
14
|
+
return !value ? html.nothing : html `
|
|
15
|
+
<img style='vertical-align: middle' src=${value} onload='this.hidden = false' onerror='this.hidden = true'/>
|
|
16
16
|
`;
|
|
17
17
|
}
|
|
18
18
|
};
|
|
@@ -8,11 +8,11 @@ let DataGridColumnText = class DataGridColumnText extends DataGridColumn {
|
|
|
8
8
|
return html `${value !== null && value !== void 0 ? value : ''}`;
|
|
9
9
|
}
|
|
10
10
|
getEditContentTemplate(value, data) {
|
|
11
|
-
return html `
|
|
12
|
-
<mo-field-text dense label=${this.heading} data-focus
|
|
13
|
-
value=${ifDefined(value)}
|
|
14
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
15
|
-
></mo-field-text>
|
|
11
|
+
return html `
|
|
12
|
+
<mo-field-text dense label=${this.heading} data-focus
|
|
13
|
+
value=${ifDefined(value)}
|
|
14
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
15
|
+
></mo-field-text>
|
|
16
16
|
`;
|
|
17
17
|
}
|
|
18
18
|
};
|
|
@@ -15,15 +15,15 @@ export class DataGridColumnDateTimeBase extends DataGridColumn {
|
|
|
15
15
|
return (_a = this.formatOptions) !== null && _a !== void 0 ? _a : this.constructor.defaultFormatOptions;
|
|
16
16
|
}
|
|
17
17
|
getEditContentTemplate(value, data) {
|
|
18
|
-
return html `
|
|
19
|
-
${staticHtml `
|
|
20
|
-
<${this.fieldTag} dense data-focus
|
|
21
|
-
?pickerHidden=${this.pickerHidden}
|
|
22
|
-
label=${this.heading}
|
|
23
|
-
.value=${value}
|
|
24
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
25
|
-
></${this.fieldTag}>
|
|
26
|
-
`}
|
|
18
|
+
return html `
|
|
19
|
+
${staticHtml `
|
|
20
|
+
<${this.fieldTag} dense data-focus
|
|
21
|
+
?pickerHidden=${this.pickerHidden}
|
|
22
|
+
label=${this.heading}
|
|
23
|
+
.value=${value}
|
|
24
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
25
|
+
></${this.fieldTag}>
|
|
26
|
+
`}
|
|
27
27
|
`;
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -19,18 +19,18 @@ let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurr
|
|
|
19
19
|
return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.formatAsCurrency(this.currency)) !== null && _b !== void 0 ? _b : html.nothing}`;
|
|
20
20
|
}
|
|
21
21
|
getEditContentTemplate(value, data) {
|
|
22
|
-
return html `
|
|
23
|
-
<mo-field-currency dense data-focus
|
|
24
|
-
.currency=${this.currency}
|
|
25
|
-
label=${this.heading}
|
|
26
|
-
value=${ifDefined(value)}
|
|
27
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
28
|
-
></mo-field-currency>
|
|
22
|
+
return html `
|
|
23
|
+
<mo-field-currency dense data-focus
|
|
24
|
+
.currency=${this.currency}
|
|
25
|
+
label=${this.heading}
|
|
26
|
+
value=${ifDefined(value)}
|
|
27
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
28
|
+
></mo-field-currency>
|
|
29
29
|
`;
|
|
30
30
|
}
|
|
31
31
|
getSumTemplate(sum) {
|
|
32
|
-
return html `
|
|
33
|
-
<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
|
|
32
|
+
return html `
|
|
33
|
+
<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
|
|
34
34
|
`;
|
|
35
35
|
}
|
|
36
36
|
};
|
|
@@ -9,11 +9,11 @@ let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumb
|
|
|
9
9
|
return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.format()) !== null && _b !== void 0 ? _b : html.nothing}`;
|
|
10
10
|
}
|
|
11
11
|
getEditContentTemplate(value, data) {
|
|
12
|
-
return html `
|
|
13
|
-
<mo-field-number dense label=${this.heading} data-focus
|
|
14
|
-
value=${ifDefined(value)}
|
|
15
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
16
|
-
></mo-field-number>
|
|
12
|
+
return html `
|
|
13
|
+
<mo-field-number dense label=${this.heading} data-focus
|
|
14
|
+
value=${ifDefined(value)}
|
|
15
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
16
|
+
></mo-field-number>
|
|
17
17
|
`;
|
|
18
18
|
}
|
|
19
19
|
getSumTemplate(sum) {
|
|
@@ -9,12 +9,12 @@ let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNu
|
|
|
9
9
|
return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.formatAsPercent()) !== null && _b !== void 0 ? _b : html.nothing}`;
|
|
10
10
|
}
|
|
11
11
|
getEditContentTemplate(value, data) {
|
|
12
|
-
return html `
|
|
13
|
-
<mo-field-percent dense data-focus
|
|
14
|
-
label=${this.heading}
|
|
15
|
-
value=${ifDefined(value)}
|
|
16
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
17
|
-
></mo-field-percent>
|
|
12
|
+
return html `
|
|
13
|
+
<mo-field-percent dense data-focus
|
|
14
|
+
label=${this.heading}
|
|
15
|
+
value=${ifDefined(value)}
|
|
16
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
17
|
+
></mo-field-percent>
|
|
18
18
|
`;
|
|
19
19
|
}
|
|
20
20
|
getSumTemplate(sum) {
|
|
@@ -13,29 +13,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
|
|
|
13
13
|
this.heading = '';
|
|
14
14
|
}
|
|
15
15
|
static get styles() {
|
|
16
|
-
return css `
|
|
17
|
-
:host {
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
position: relative;
|
|
21
|
-
max-height: 100%;
|
|
22
|
-
line-height: 1em;
|
|
23
|
-
user-select: all;
|
|
24
|
-
align-items: flex-end;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
div {
|
|
28
|
-
color: var(--mo-color-gray);
|
|
29
|
-
font-size: 0.75rem;
|
|
30
|
-
}
|
|
16
|
+
return css `
|
|
17
|
+
:host {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
position: relative;
|
|
21
|
+
max-height: 100%;
|
|
22
|
+
line-height: 1em;
|
|
23
|
+
user-select: all;
|
|
24
|
+
align-items: flex-end;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
div {
|
|
28
|
+
color: var(--mo-color-gray);
|
|
29
|
+
font-size: 0.75rem;
|
|
30
|
+
}
|
|
31
31
|
`;
|
|
32
32
|
}
|
|
33
33
|
get template() {
|
|
34
|
-
return html `
|
|
35
|
-
<div>${this.heading}</div>
|
|
36
|
-
<mo-flex direction='horizontal' justifyContent='center'>
|
|
37
|
-
<slot></slot>
|
|
38
|
-
</mo-flex>
|
|
34
|
+
return html `
|
|
35
|
+
<div>${this.heading}</div>
|
|
36
|
+
<mo-flex direction='horizontal' justifyContent='center'>
|
|
37
|
+
<slot></slot>
|
|
38
|
+
</mo-flex>
|
|
39
39
|
`;
|
|
40
40
|
}
|
|
41
41
|
};
|
|
@@ -3,48 +3,48 @@ import { css, component, html } from '@a11d/lit';
|
|
|
3
3
|
import { DataGridRow } from './DataGridRow.js';
|
|
4
4
|
let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return css `
|
|
7
|
-
${super.styles}
|
|
8
|
-
|
|
9
|
-
mo-grid {
|
|
10
|
-
height: var(--mo-data-grid-row-height);
|
|
11
|
-
grid-template-columns: var(--mo-data-grid-columns);
|
|
12
|
-
column-gap: var(--mo-data-grid-columns-gap);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
mo-flex {
|
|
16
|
-
white-space: nowrap;
|
|
17
|
-
text-overflow: ellipsis;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#selectionContainer {
|
|
22
|
-
height: var(--mo-data-grid-row-height);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
#detailsContainer [instanceof*=mo-data-grid] {
|
|
26
|
-
--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
|
|
27
|
-
--mo-data-grid-alternating-background: transparent;
|
|
28
|
-
--mo-data-grid-content-min-height: 0px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
32
|
-
background: var(--mo-color-transparent-gray-1);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
36
|
-
margin: 16px var(--mo-details-data-grid-start-margin);
|
|
37
|
-
width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid] {
|
|
41
|
-
padding: 0px !important;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
|
|
45
|
-
margin-inline-start: var(--mo-details-data-grid-start-margin);
|
|
46
|
-
width: calc(100% - var(--mo-details-data-grid-start-margin));
|
|
47
|
-
}
|
|
6
|
+
return css `
|
|
7
|
+
${super.styles}
|
|
8
|
+
|
|
9
|
+
mo-grid {
|
|
10
|
+
height: var(--mo-data-grid-row-height);
|
|
11
|
+
grid-template-columns: var(--mo-data-grid-columns);
|
|
12
|
+
column-gap: var(--mo-data-grid-columns-gap);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
mo-flex {
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
text-overflow: ellipsis;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
#selectionContainer {
|
|
22
|
+
height: var(--mo-data-grid-row-height);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#detailsContainer [instanceof*=mo-data-grid] {
|
|
26
|
+
--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
|
|
27
|
+
--mo-data-grid-alternating-background: transparent;
|
|
28
|
+
--mo-data-grid-content-min-height: 0px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
32
|
+
background: var(--mo-color-transparent-gray-1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
36
|
+
margin: 16px var(--mo-details-data-grid-start-margin);
|
|
37
|
+
width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid] {
|
|
41
|
+
padding: 0px !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host-context(:not([hasDetails]):not([selectionMode=single]):not([selectionMode=multiple])) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
|
|
45
|
+
margin-inline-start: var(--mo-details-data-grid-start-margin);
|
|
46
|
+
width: calc(100% - var(--mo-details-data-grid-start-margin));
|
|
47
|
+
}
|
|
48
48
|
`;
|
|
49
49
|
}
|
|
50
50
|
updated(...parameters) {
|
|
@@ -55,11 +55,11 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
get rowTemplate() {
|
|
58
|
-
return html `
|
|
59
|
-
${this.detailsExpanderTemplate}
|
|
60
|
-
${this.selectionTemplate}
|
|
61
|
-
${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
|
|
62
|
-
${this.contextMenuIconButtonTemplate}
|
|
58
|
+
return html `
|
|
59
|
+
${this.detailsExpanderTemplate}
|
|
60
|
+
${this.selectionTemplate}
|
|
61
|
+
${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
|
|
62
|
+
${this.contextMenuIconButtonTemplate}
|
|
63
63
|
`;
|
|
64
64
|
}
|
|
65
65
|
};
|