@3mo/data-grid 0.20.0 → 0.20.2
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/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +243 -245
- package/dist/DataGridColumn.js +1 -1
- package/dist/DataGridColumnHeader.d.ts +1 -1
- package/dist/DataGridColumnHeader.d.ts.map +1 -1
- package/dist/DataGridColumnHeader.js +185 -191
- package/dist/DataGridContextMenuController.js +1 -1
- package/dist/DataGridFooter.js +2 -2
- package/dist/DataGridHeader.d.ts.map +1 -1
- package/dist/DataGridHeader.js +104 -98
- package/dist/DataGridSidePanel.js +1 -1
- package/dist/custom-elements.json +3 -3
- package/dist/rows/DataGridDefaultRow.js +25 -25
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +196 -197
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +59 -59
|
@@ -19,130 +19,124 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
|
|
|
19
19
|
super(...arguments);
|
|
20
20
|
this.menuOpen = false;
|
|
21
21
|
this.resizeController = new ResizeController(this, {
|
|
22
|
-
callback:
|
|
23
|
-
// It is necessary to defer the callback to avoid
|
|
24
|
-
// this resize-observer triggering other resize-observers in a loop
|
|
25
|
-
await new Promise(r => requestIdleCallback(r));
|
|
26
|
-
this.column.widthInPixels = entry?.contentRect.width ?? 0;
|
|
27
|
-
}
|
|
22
|
+
callback: () => requestIdleCallback(() => this.column.widthInPixels = this.getBoundingClientRect().width)
|
|
28
23
|
});
|
|
29
24
|
}
|
|
30
25
|
static get styles() {
|
|
31
|
-
return css `
|
|
32
|
-
:host {
|
|
33
|
-
display: flex;
|
|
34
|
-
position: relative;
|
|
35
|
-
padding: 0 var(--mo-data-grid-cell-padding);
|
|
36
|
-
transition: background 0.1s;
|
|
37
|
-
anchor-name: --mo-data-grid-column-header;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:host(:hover) {
|
|
41
|
-
background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
:host([data-sticky]) {
|
|
45
|
-
position: sticky;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
:host([data-sticky]) /*[data-sticking]*/ {
|
|
49
|
-
z-index: 6;
|
|
50
|
-
background: var(--mo-data-grid-sticky-part-color);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
mo-data-grid-header-separator {
|
|
54
|
-
z-index: 5;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([data-sticky]) /*[data-sticking]*/ mo-data-grid-header-separator {
|
|
58
|
-
z-index: 7;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
#container {
|
|
62
|
-
transition: margin-inline-end 0.1s;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
#content {
|
|
66
|
-
display: inline-block;
|
|
67
|
-
overflow: hidden !important;
|
|
68
|
-
color: var(--mo-color-foreground);
|
|
69
|
-
font-weight: 500;
|
|
70
|
-
line-height: var(--mo-data-grid-header-height);
|
|
71
|
-
white-space: nowrap;
|
|
72
|
-
text-overflow: ellipsis;
|
|
73
|
-
user-select: none;
|
|
74
|
-
width: 100%;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
#sort {
|
|
78
|
-
position: relative;
|
|
79
|
-
|
|
80
|
-
&[data-preview] {
|
|
81
|
-
display: none;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
mo-icon-button {
|
|
85
|
-
transition: 0.1s;
|
|
86
|
-
font-size: 20px;
|
|
87
|
-
color: var(--mo-color-accent);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
span {
|
|
91
|
-
position: absolute;
|
|
92
|
-
inset-inline-end: 0;
|
|
93
|
-
inset-block-end: 0;
|
|
94
|
-
color: var(--mo-color-accent);
|
|
95
|
-
border-radius: 50%;
|
|
96
|
-
width: fit-content;
|
|
97
|
-
user-select: none;
|
|
98
|
-
font-size: 0.8rem;
|
|
99
|
-
aspect-ratio: 1 / 1;
|
|
100
|
-
display: flex;
|
|
101
|
-
align-items: center;
|
|
102
|
-
justify-content: center;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
:host(:hover) #sort[data-preview] {
|
|
107
|
-
display: flex;
|
|
108
|
-
mo-icon-button {
|
|
109
|
-
color: var(--mo-color-gray);
|
|
110
|
-
opacity: 0.5;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
#menu-icon {
|
|
115
|
-
position: absolute;
|
|
116
|
-
inset-inline-end: calc(var(--mo-data-grid-cell-padding) - 6px);
|
|
117
|
-
inset-block-start: 2px;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
26
|
+
return css `
|
|
27
|
+
:host {
|
|
28
|
+
display: flex;
|
|
29
|
+
position: relative;
|
|
30
|
+
padding: 0 var(--mo-data-grid-cell-padding);
|
|
31
|
+
transition: background 0.1s;
|
|
32
|
+
anchor-name: --mo-data-grid-column-header;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host(:hover) {
|
|
36
|
+
background: color-mix(in srgb, var(--mo-color-surface), var(--mo-color-gray) 8%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([data-sticky]) {
|
|
40
|
+
position: sticky;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host([data-sticky]) /*[data-sticking]*/ {
|
|
44
|
+
z-index: 6;
|
|
45
|
+
background: var(--mo-data-grid-sticky-part-color);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
mo-data-grid-header-separator {
|
|
49
|
+
z-index: 5;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([data-sticky]) /*[data-sticking]*/ mo-data-grid-header-separator {
|
|
53
|
+
z-index: 7;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#container {
|
|
57
|
+
transition: margin-inline-end 0.1s;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
#content {
|
|
61
|
+
display: inline-block;
|
|
62
|
+
overflow: hidden !important;
|
|
63
|
+
color: var(--mo-color-foreground);
|
|
64
|
+
font-weight: 500;
|
|
65
|
+
line-height: var(--mo-data-grid-header-height);
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
user-select: none;
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
#sort {
|
|
73
|
+
position: relative;
|
|
74
|
+
|
|
75
|
+
&[data-preview] {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
mo-icon-button {
|
|
80
|
+
transition: 0.1s;
|
|
81
|
+
font-size: 20px;
|
|
82
|
+
color: var(--mo-color-accent);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
span {
|
|
86
|
+
position: absolute;
|
|
87
|
+
inset-inline-end: 0;
|
|
88
|
+
inset-block-end: 0;
|
|
89
|
+
color: var(--mo-color-accent);
|
|
90
|
+
border-radius: 50%;
|
|
91
|
+
width: fit-content;
|
|
92
|
+
user-select: none;
|
|
93
|
+
font-size: 0.8rem;
|
|
94
|
+
aspect-ratio: 1 / 1;
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host(:hover) #sort[data-preview] {
|
|
102
|
+
display: flex;
|
|
103
|
+
mo-icon-button {
|
|
104
|
+
color: var(--mo-color-gray);
|
|
105
|
+
opacity: 0.5;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
#menu-icon {
|
|
110
|
+
position: absolute;
|
|
111
|
+
inset-inline-end: calc(var(--mo-data-grid-cell-padding) - 6px);
|
|
112
|
+
inset-block-start: 2px;
|
|
113
|
+
opacity: 0;
|
|
114
|
+
font-size: 20px;
|
|
115
|
+
transition: 0.1s;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:host(:hover), :host([menuOpen]) {
|
|
119
|
+
#container {
|
|
120
|
+
margin-inline-end: 20px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
#menu-icon {
|
|
124
|
+
opacity: 1;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
mo-menu {
|
|
129
|
+
position-anchor: --mo-data-grid-column-header;
|
|
130
|
+
|
|
131
|
+
&::part(popover) {
|
|
132
|
+
margin-inline-start: 4px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
mo-heading {
|
|
136
|
+
padding: 0.5rem 1rem;
|
|
137
|
+
opacity: 0.5;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
146
140
|
`;
|
|
147
141
|
}
|
|
148
142
|
get template() {
|
|
@@ -157,97 +151,97 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
|
|
|
157
151
|
this.setAttribute('data-sticky', this.column.sticky);
|
|
158
152
|
}
|
|
159
153
|
const direction = this.column.alignment === 'end' ? 'horizontal-reversed' : 'horizontal';
|
|
160
|
-
return html `
|
|
161
|
-
<mo-flex id='container' alignItems='center' gap='0.2rem'
|
|
162
|
-
direction=${direction}
|
|
163
|
-
@click=${() => this.column.toggleSort()}
|
|
164
|
-
@contextmenu=${(e) => { e.preventDefault(); this.menuOpen = true; }}
|
|
165
|
-
${style({ flex: '1', overflow: 'hidden'
|
|
166
|
-
>
|
|
167
|
-
${this.contentTemplate}
|
|
168
|
-
${this.sortingTemplate}
|
|
169
|
-
</mo-flex>
|
|
170
|
-
${this.menuTemplate}
|
|
171
|
-
${this.separatorTemplate}
|
|
154
|
+
return html `
|
|
155
|
+
<mo-flex id='container' alignItems='center' gap='0.2rem'
|
|
156
|
+
direction=${direction}
|
|
157
|
+
@click=${() => this.column.toggleSort()}
|
|
158
|
+
@contextmenu=${(e) => { e.preventDefault(); this.menuOpen = true; }}
|
|
159
|
+
${style({ flex: '1', overflow: 'hidden' })}
|
|
160
|
+
>
|
|
161
|
+
${this.contentTemplate}
|
|
162
|
+
${this.sortingTemplate}
|
|
163
|
+
</mo-flex>
|
|
164
|
+
${this.menuTemplate}
|
|
165
|
+
${this.separatorTemplate}
|
|
172
166
|
`;
|
|
173
167
|
}
|
|
174
168
|
get contentTemplate() {
|
|
175
|
-
return html `
|
|
176
|
-
<div id='content'
|
|
177
|
-
${style({ textAlign: this.column.alignment })}
|
|
178
|
-
${!this.column.description ? html.nothing : tooltip(this.column.description)}
|
|
179
|
-
>${this.column.heading}</div>
|
|
169
|
+
return html `
|
|
170
|
+
<div id='content'
|
|
171
|
+
${style({ textAlign: this.column.alignment })}
|
|
172
|
+
${!this.column.description ? html.nothing : tooltip(this.column.description)}
|
|
173
|
+
>${this.column.heading}</div>
|
|
180
174
|
`;
|
|
181
175
|
}
|
|
182
176
|
get sortingTemplate() {
|
|
183
177
|
const sortingDefinition = this.column.sortingDefinition;
|
|
184
178
|
const sortIcon = sortingDefinition?.strategy === DataGridSortingStrategy.Ascending ? 'arrow_upward' : 'arrow_downward';
|
|
185
179
|
const sortingRank = !sortingDefinition || this.column.dataGrid.getSorting().length <= 1 ? undefined : sortingDefinition.rank;
|
|
186
|
-
return !this.column.sortable ? html.nothing : html `
|
|
187
|
-
<mo-flex id='sort' direction='horizontal' ?data-preview=${!sortingDefinition?.strategy}>
|
|
188
|
-
<mo-icon-button dense icon=${sortIcon}></mo-icon-button>
|
|
189
|
-
${!sortingRank ? html.nothing : html `<span>${sortingRank}</span>`}
|
|
190
|
-
</mo-flex>
|
|
180
|
+
return !this.column.sortable ? html.nothing : html `
|
|
181
|
+
<mo-flex id='sort' direction='horizontal' ?data-preview=${!sortingDefinition?.strategy}>
|
|
182
|
+
<mo-icon-button dense icon=${sortIcon}></mo-icon-button>
|
|
183
|
+
${!sortingRank ? html.nothing : html `<span>${sortingRank}</span>`}
|
|
184
|
+
</mo-flex>
|
|
191
185
|
`;
|
|
192
186
|
}
|
|
193
187
|
get menuTemplate() {
|
|
194
188
|
const additionalItems = this.column.getMenuItemsTemplate?.();
|
|
195
|
-
return html `
|
|
196
|
-
<mo-popover-container placement='block-end' alignment='end' style='display: contents'>
|
|
197
|
-
<mo-icon-button dense id='menu-icon' icon='more_vert'></mo-icon-button>
|
|
198
|
-
|
|
199
|
-
<mo-menu slot='popover' .anchor=${this} target='menu-icon' ?open=${bind(this, 'menuOpen')}>
|
|
200
|
-
<mo-line></mo-line>
|
|
189
|
+
return html `
|
|
190
|
+
<mo-popover-container placement='block-end' alignment='end' style='display: contents'>
|
|
191
|
+
<mo-icon-button dense id='menu-icon' icon='more_vert'></mo-icon-button>
|
|
192
|
+
|
|
193
|
+
<mo-menu slot='popover' .anchor=${this} target='menu-icon' ?open=${bind(this, 'menuOpen')}>
|
|
194
|
+
<mo-line></mo-line>
|
|
201
195
|
${join([
|
|
202
196
|
!this.column.sortable ? undefined : this.getSortingItemsTemplate(additionalItems instanceof Map ? additionalItems.get('sorting') : undefined),
|
|
203
197
|
// Hide stickiness items for now
|
|
204
198
|
true ? undefined : this.getStickinessItemsTemplate(additionalItems instanceof Map ? additionalItems.get('stickiness') : undefined),
|
|
205
199
|
this.getMoreItemsTemplate(additionalItems instanceof Map ? additionalItems.get('more') : additionalItems),
|
|
206
|
-
].filter(Boolean), html `<mo-line></mo-line>`)}
|
|
207
|
-
</mo-menu>
|
|
208
|
-
</mo-popover-container>
|
|
200
|
+
].filter(Boolean), html `<mo-line></mo-line>`)}
|
|
201
|
+
</mo-menu>
|
|
202
|
+
</mo-popover-container>
|
|
209
203
|
`;
|
|
210
204
|
}
|
|
211
205
|
getSortingItemsTemplate(additionalItems) {
|
|
212
|
-
return html `
|
|
213
|
-
<mo-heading typography='subtitle2'>${t('Sorting')}</mo-heading>
|
|
214
|
-
<mo-selectable-menu-item icon='arrow_downward'
|
|
215
|
-
?disabled=${this.column.sortable === false}
|
|
216
|
-
?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
|
|
217
|
-
@click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
|
|
218
|
-
>${t('Sort descending')}</mo-selectable-menu-item>
|
|
219
|
-
<mo-selectable-menu-item icon='arrow_upward'
|
|
220
|
-
?disabled=${this.column.sortable === false}
|
|
221
|
-
?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
|
|
222
|
-
@click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
|
|
223
|
-
>${t('Sort ascending')}</mo-selectable-menu-item>
|
|
224
|
-
${additionalItems}
|
|
206
|
+
return html `
|
|
207
|
+
<mo-heading typography='subtitle2'>${t('Sorting')}</mo-heading>
|
|
208
|
+
<mo-selectable-menu-item icon='arrow_downward'
|
|
209
|
+
?disabled=${this.column.sortable === false}
|
|
210
|
+
?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Descending}
|
|
211
|
+
@click=${() => this.column.toggleSort(DataGridSortingStrategy.Descending)}
|
|
212
|
+
>${t('Sort descending')}</mo-selectable-menu-item>
|
|
213
|
+
<mo-selectable-menu-item icon='arrow_upward'
|
|
214
|
+
?disabled=${this.column.sortable === false}
|
|
215
|
+
?selected=${this.column.sortingDefinition?.strategy === DataGridSortingStrategy.Ascending}
|
|
216
|
+
@click=${() => this.column.toggleSort(DataGridSortingStrategy.Ascending)}
|
|
217
|
+
>${t('Sort ascending')}</mo-selectable-menu-item>
|
|
218
|
+
${additionalItems}
|
|
225
219
|
`;
|
|
226
220
|
}
|
|
227
221
|
getStickinessItemsTemplate(additionalItems) {
|
|
228
|
-
return html `
|
|
229
|
-
<mo-heading typography='subtitle2'>${t('Stickiness')}</mo-heading>
|
|
230
|
-
<mo-selectable-menu-item icon='push_pin'
|
|
231
|
-
?selected=${this.column.sticky === 'start'}
|
|
232
|
-
@click=${() => this.column.toggleSticky('start')}
|
|
233
|
-
>${t('Stick to start')}</mo-selectable-menu-item>
|
|
234
|
-
<mo-selectable-menu-item icon='push_pin'
|
|
235
|
-
?selected=${this.column.sticky === 'both'}
|
|
236
|
-
@click=${() => this.column.toggleSticky('both')}
|
|
237
|
-
>${t('Stick to both')}</mo-selectable-menu-item>
|
|
238
|
-
<mo-selectable-menu-item icon='push_pin'
|
|
239
|
-
?selected=${this.column.sticky === 'end'}
|
|
240
|
-
@click=${() => this.column.toggleSticky('end')}
|
|
241
|
-
>${t('Stick to end')}</mo-selectable-menu-item>
|
|
242
|
-
${additionalItems}
|
|
222
|
+
return html `
|
|
223
|
+
<mo-heading typography='subtitle2'>${t('Stickiness')}</mo-heading>
|
|
224
|
+
<mo-selectable-menu-item icon='push_pin'
|
|
225
|
+
?selected=${this.column.sticky === 'start'}
|
|
226
|
+
@click=${() => this.column.toggleSticky('start')}
|
|
227
|
+
>${t('Stick to start')}</mo-selectable-menu-item>
|
|
228
|
+
<mo-selectable-menu-item icon='push_pin'
|
|
229
|
+
?selected=${this.column.sticky === 'both'}
|
|
230
|
+
@click=${() => this.column.toggleSticky('both')}
|
|
231
|
+
>${t('Stick to both')}</mo-selectable-menu-item>
|
|
232
|
+
<mo-selectable-menu-item icon='push_pin'
|
|
233
|
+
?selected=${this.column.sticky === 'end'}
|
|
234
|
+
@click=${() => this.column.toggleSticky('end')}
|
|
235
|
+
>${t('Stick to end')}</mo-selectable-menu-item>
|
|
236
|
+
${additionalItems}
|
|
243
237
|
`;
|
|
244
238
|
}
|
|
245
239
|
getMoreItemsTemplate(additionalItems) {
|
|
246
|
-
return html `
|
|
247
|
-
<mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
|
|
248
|
-
${t('Hide')}
|
|
249
|
-
</mo-menu-item>
|
|
250
|
-
${additionalItems}
|
|
240
|
+
return html `
|
|
241
|
+
<mo-menu-item icon='visibility_off' @click=${() => this.column.hide()}>
|
|
242
|
+
${t('Hide')}
|
|
243
|
+
</mo-menu-item>
|
|
244
|
+
${additionalItems}
|
|
251
245
|
`;
|
|
252
246
|
}
|
|
253
247
|
get separatorTemplate() {
|
|
@@ -255,12 +249,12 @@ let DataGridColumnHeader = class DataGridColumnHeader extends Component {
|
|
|
255
249
|
return html.nothing;
|
|
256
250
|
}
|
|
257
251
|
const index = this.column.dataGrid.visibleColumns.indexOf(this.column);
|
|
258
|
-
return html `
|
|
259
|
-
<mo-data-grid-header-separator
|
|
260
|
-
?data-last=${this.column.dataGrid.visibleColumns.length - 1 === index}
|
|
261
|
-
.dataGrid=${this.column.dataGrid}
|
|
262
|
-
.column=${this.column.dataGrid.visibleColumns[index]}
|
|
263
|
-
></mo-data-grid-header-separator>
|
|
252
|
+
return html `
|
|
253
|
+
<mo-data-grid-header-separator
|
|
254
|
+
?data-last=${this.column.dataGrid.visibleColumns.length - 1 === index}
|
|
255
|
+
.dataGrid=${this.column.dataGrid}
|
|
256
|
+
.column=${this.column.dataGrid.visibleColumns[index]}
|
|
257
|
+
></mo-data-grid-header-separator>
|
|
264
258
|
`;
|
|
265
259
|
}
|
|
266
260
|
};
|
|
@@ -30,7 +30,7 @@ export class DataGridContextMenuController extends Controller {
|
|
|
30
30
|
return this.host.getRowContextMenuTemplate !== undefined;
|
|
31
31
|
}
|
|
32
32
|
getMenuContentTemplate(data = this.host.selectedData) {
|
|
33
|
-
return !this.hasContextMenu ? html.nothing : html `
|
|
33
|
+
return !this.hasContextMenu || !data.length ? html.nothing : html `
|
|
34
34
|
${data.length === 1 ? html.nothing : html `
|
|
35
35
|
<div ${style(DataGridContextMenuController.infoStyle)}>
|
|
36
36
|
<span ${style(DataGridContextMenuController.infoCountStyle)}>${data.length.format()}</span>
|
package/dist/DataGridFooter.js
CHANGED
|
@@ -167,7 +167,7 @@ let DataGridFooter = class DataGridFooter extends Component {
|
|
|
167
167
|
@click=${() => this.setPage(this.page - 1)}
|
|
168
168
|
></mo-icon-button>
|
|
169
169
|
|
|
170
|
-
<div ${style({
|
|
170
|
+
<div ${style({ width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
|
|
171
171
|
${this.manualPagination ? html `
|
|
172
172
|
<mo-field-number dense
|
|
173
173
|
value=${this.page}
|
|
@@ -199,7 +199,7 @@ let DataGridFooter = class DataGridFooter extends Component {
|
|
|
199
199
|
const rangeText = `${(Math.min(from, to)).format()}-${to.format()}`;
|
|
200
200
|
return html `
|
|
201
201
|
<mo-popover-container id='page-info' placement='block-start'>
|
|
202
|
-
<mo-flex alignItems='center' gap='6px' direction='horizontal'
|
|
202
|
+
<mo-flex alignItems='center' gap='6px' direction='horizontal'>
|
|
203
203
|
<mo-flex direction='horizontal' alignItems='center'>
|
|
204
204
|
${join([
|
|
205
205
|
this.dataGrid.selectedData.length
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAqD,MAAM,WAAW,CAAA;AAGnG,OAAO,EAAyB,KAAK,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAiBlH,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;cAEjF,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,
|
|
1
|
+
{"version":3,"file":"DataGridHeader.d.ts","sourceRoot":"","sources":["../DataGridHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAqD,MAAM,WAAW,CAAA;AAGnG,OAAO,EAAyB,KAAK,QAAQ,EAAmD,MAAM,YAAY,CAAA;AAiBlH,qBACa,cAAc,CAAC,KAAK,CAAE,SAAQ,SAAS;IAC1C,QAAQ,CAAC,UAAU,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAC7C,QAAQ,CAAC,mBAAmB,EAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAEnC,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;IACf,WAAW,UAAQ;IAEvB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;cAEjF,SAAS;cAIT,YAAY;IAI/B,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAExC;cAEkB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAK1E,WAAoB,MAAM,kCAyDzB;IAED,cAAuB,QAAQ,0CAQ9B;IAED,OAAO,KAAK,uBAAuB,GAclC;IAED,OAAO,KAAK,iBAAiB,GAW5B;IAED,OAAO,KAAK,SAAS,GASpB;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAQrC;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,eAAe,GA2B1B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;CAIxB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,qBAAqB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;KAC9C;CACD"}
|