@exmg/exm-grid 1.0.0 → 1.0.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/README.md +1 -1
- package/package.json +4 -4
- package/src/table/exm-grid-base-toolbar.d.ts +2 -2
- package/src/table/exm-grid-base-toolbar.js +9 -9
- package/src/table/exm-grid-pagination.d.ts +2 -2
- package/src/table/exm-grid-pagination.js +10 -10
- package/src/table/exm-grid-setting-selection-list.d.ts +2 -2
- package/src/table/exm-grid-setting-selection-list.js +9 -9
- package/src/table/exm-grid-smart-toolbar.d.ts +2 -2
- package/src/table/exm-grid-smart-toolbar.js +17 -17
- package/src/table/exm-grid-toolbar-filters.d.ts +1 -1
- package/src/table/exm-grid-toolbar-filters.js +9 -9
- package/src/table/exm-grid-toolbar.d.ts +2 -2
- package/src/table/exm-grid-toolbar.js +12 -12
- package/src/table/exm-grid.d.ts +3 -3
- package/src/table/exm-grid.js +31 -31
- package/src/table/featrues/exm-column-sortable.d.ts +3 -3
- package/src/table/featrues/exm-column-sortable.js +1 -1
- package/src/table/featrues/exm-row-expandable.d.ts +3 -3
- package/src/table/featrues/exm-row-expandable.js +1 -1
- package/src/table/featrues/exm-row-selectable.d.ts +3 -3
- package/src/table/featrues/exm-row-selectable.js +1 -1
- package/src/table/featrues/exm-row-sortable.d.ts +3 -3
- package/src/table/featrues/exm-row-sortable.js +1 -1
- package/src/table/utils/exm-query-selectors.d.ts +1 -1
- package/src/table/utils/exm-query-selectors.js +1 -1
package/README.md
CHANGED
|
@@ -496,6 +496,6 @@ By default grid has `table-layout` set to `auto` It can be changed to `fixed`
|
|
|
496
496
|
|
|
497
497
|
## Additional references
|
|
498
498
|
|
|
499
|
-
- [Additional Documentation](https://exmg.github.io/exmachina-web-components/
|
|
499
|
+
- [Additional Documentation](https://exmg.github.io/exmachina-web-components/ExmGrid.html)
|
|
500
500
|
|
|
501
501
|
- [Demo](https://exmg.github.io/exmachina-web-components/demo/?el=exm-grid)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@exmg/exm-grid",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "exmg grid element",
|
|
6
6
|
"contributors": [
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"directory": "packages/exm-grid"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@exmg/exm-sortable": "^1.0.
|
|
31
|
+
"@exmg/exm-sortable": "^1.0.1",
|
|
32
32
|
"@exmg/lit-base": "^2.0.1",
|
|
33
33
|
"@material/typography": "^14.0.0",
|
|
34
|
-
"@material/web": "^
|
|
34
|
+
"@material/web": "^2.2.0",
|
|
35
35
|
"@polymer/iron-dropdown": "^3.0.1",
|
|
36
36
|
"@polymer/iron-flex-layout": "^3.0.1",
|
|
37
37
|
"@polymer/iron-input": "^3.0.1",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "274f2fb879258487017192fcfe33c8cd23244dbb"
|
|
58
58
|
}
|
|
@@ -4,7 +4,7 @@ import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
|
4
4
|
* The following custom properties are available for styling:
|
|
5
5
|
*
|
|
6
6
|
*/
|
|
7
|
-
export declare class
|
|
7
|
+
export declare class ExmGridBaseToolbar extends ExmgElement {
|
|
8
8
|
static styles: import("lit").CSSResult[];
|
|
9
9
|
private actionsCount;
|
|
10
10
|
private settingsCount;
|
|
@@ -18,6 +18,6 @@ export declare class ExmgGridBaseToolbar extends ExmgElement {
|
|
|
18
18
|
}
|
|
19
19
|
declare global {
|
|
20
20
|
interface HTMLElementTagNameMap {
|
|
21
|
-
'exm-grid-base-toolbar':
|
|
21
|
+
'exm-grid-base-toolbar': ExmGridBaseToolbar;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -8,7 +8,7 @@ import { style } from '../styles/exm-grid-base-toolbar-styles-css.js';
|
|
|
8
8
|
* The following custom properties are available for styling:
|
|
9
9
|
*
|
|
10
10
|
*/
|
|
11
|
-
let
|
|
11
|
+
let ExmGridBaseToolbar = class ExmGridBaseToolbar extends ExmgElement {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.actionsCount = 0;
|
|
@@ -71,21 +71,21 @@ let ExmgGridBaseToolbar = class ExmgGridBaseToolbar extends ExmgElement {
|
|
|
71
71
|
`;
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
|
-
|
|
74
|
+
ExmGridBaseToolbar.styles = [style];
|
|
75
75
|
__decorate([
|
|
76
76
|
state()
|
|
77
|
-
],
|
|
77
|
+
], ExmGridBaseToolbar.prototype, "actionsCount", void 0);
|
|
78
78
|
__decorate([
|
|
79
79
|
state()
|
|
80
|
-
],
|
|
80
|
+
], ExmGridBaseToolbar.prototype, "settingsCount", void 0);
|
|
81
81
|
__decorate([
|
|
82
82
|
state()
|
|
83
|
-
],
|
|
83
|
+
], ExmGridBaseToolbar.prototype, "active", void 0);
|
|
84
84
|
__decorate([
|
|
85
85
|
property({ type: Boolean })
|
|
86
|
-
],
|
|
87
|
-
|
|
86
|
+
], ExmGridBaseToolbar.prototype, "disableSeperator", void 0);
|
|
87
|
+
ExmGridBaseToolbar = __decorate([
|
|
88
88
|
customElement('exm-grid-base-toolbar')
|
|
89
|
-
],
|
|
90
|
-
export {
|
|
89
|
+
], ExmGridBaseToolbar);
|
|
90
|
+
export { ExmGridBaseToolbar };
|
|
91
91
|
//# sourceMappingURL=exm-grid-base-toolbar.js.map
|
|
@@ -11,7 +11,7 @@ import './exm-grid-toolbar-filters.js';
|
|
|
11
11
|
* `--exm-theme-table-pagination-bg-color` | pagination background color | `var(--mdc-theme-surface, #ffffff);`
|
|
12
12
|
* `--exm-theme-table-pagination-color` | pagination foreground (mostly text) color | `var(--mdc-theme-on-surface, #02182b);`
|
|
13
13
|
*/
|
|
14
|
-
export declare class
|
|
14
|
+
export declare class ExmGridPagination extends ExmgElement {
|
|
15
15
|
static styles: import("lit").CSSResult[];
|
|
16
16
|
pageSizeLabel: string;
|
|
17
17
|
pageSizeOptions: number[];
|
|
@@ -32,6 +32,6 @@ export declare class ExmgGridPagination extends ExmgElement {
|
|
|
32
32
|
}
|
|
33
33
|
declare global {
|
|
34
34
|
interface HTMLElementTagNameMap {
|
|
35
|
-
'exm-grid-pagination':
|
|
35
|
+
'exm-grid-pagination': ExmGridPagination;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -15,7 +15,7 @@ import { style } from '../styles/exm-grid-pagination-styles-css.js';
|
|
|
15
15
|
* `--exm-theme-table-pagination-bg-color` | pagination background color | `var(--mdc-theme-surface, #ffffff);`
|
|
16
16
|
* `--exm-theme-table-pagination-color` | pagination foreground (mostly text) color | `var(--mdc-theme-on-surface, #02182b);`
|
|
17
17
|
*/
|
|
18
|
-
let
|
|
18
|
+
let ExmGridPagination = class ExmGridPagination extends ExmgElement {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
21
|
this.pageSizeLabel = 'Rows per page:';
|
|
@@ -167,24 +167,24 @@ let ExmgGridPagination = class ExmgGridPagination extends ExmgElement {
|
|
|
167
167
|
// tslint:enable:max-line-length
|
|
168
168
|
}
|
|
169
169
|
};
|
|
170
|
-
|
|
170
|
+
ExmGridPagination.styles = [style];
|
|
171
171
|
__decorate([
|
|
172
172
|
property({ type: String, attribute: 'page-size-label' })
|
|
173
|
-
],
|
|
173
|
+
], ExmGridPagination.prototype, "pageSizeLabel", void 0);
|
|
174
174
|
__decorate([
|
|
175
175
|
property({ type: Array, attribute: 'page-size-options' })
|
|
176
|
-
],
|
|
176
|
+
], ExmGridPagination.prototype, "pageSizeOptions", void 0);
|
|
177
177
|
__decorate([
|
|
178
178
|
property({ type: Number, attribute: 'page-size' })
|
|
179
|
-
],
|
|
179
|
+
], ExmGridPagination.prototype, "pageSize", void 0);
|
|
180
180
|
__decorate([
|
|
181
181
|
property({ type: Number, attribute: 'page-index' })
|
|
182
|
-
],
|
|
182
|
+
], ExmGridPagination.prototype, "pageIndex", void 0);
|
|
183
183
|
__decorate([
|
|
184
184
|
property({ type: Number, attribute: 'item-count' })
|
|
185
|
-
],
|
|
186
|
-
|
|
185
|
+
], ExmGridPagination.prototype, "itemCount", void 0);
|
|
186
|
+
ExmGridPagination = __decorate([
|
|
187
187
|
customElement('exm-grid-pagination')
|
|
188
|
-
],
|
|
189
|
-
export {
|
|
188
|
+
], ExmGridPagination);
|
|
189
|
+
export { ExmGridPagination };
|
|
190
190
|
//# sourceMappingURL=exm-grid-pagination.js.map
|
|
@@ -4,7 +4,7 @@ import '@material/web/menu/menu-item.js';
|
|
|
4
4
|
import '@material/web/icon/icon.js';
|
|
5
5
|
import '@material/web/iconbutton/icon-button.js';
|
|
6
6
|
import { SettingSelectionListItem } from './types/exm-grid-toolbar-types.js';
|
|
7
|
-
export declare class
|
|
7
|
+
export declare class ExmGridSettingSelectionList extends ExmgElement {
|
|
8
8
|
tooltip: string;
|
|
9
9
|
icon: string;
|
|
10
10
|
settingData: SettingSelectionListItem[];
|
|
@@ -19,6 +19,6 @@ export declare class ExmgGridSettingSelectionList extends ExmgElement {
|
|
|
19
19
|
}
|
|
20
20
|
declare global {
|
|
21
21
|
interface HTMLElementTagNameMap {
|
|
22
|
-
'exm-grid-setting-selection-list':
|
|
22
|
+
'exm-grid-setting-selection-list': ExmGridSettingSelectionList;
|
|
23
23
|
}
|
|
24
24
|
}
|
|
@@ -7,7 +7,7 @@ import '@material/web/menu/menu-item.js';
|
|
|
7
7
|
import '@material/web/icon/icon.js';
|
|
8
8
|
import '@material/web/iconbutton/icon-button.js';
|
|
9
9
|
import { style } from '../styles/exm-grid-setting-selection-list-styles-css.js';
|
|
10
|
-
let
|
|
10
|
+
let ExmGridSettingSelectionList = class ExmGridSettingSelectionList extends ExmgElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.tooltip = '';
|
|
@@ -104,21 +104,21 @@ let ExmgGridSettingSelectionList = class ExmgGridSettingSelectionList extends Ex
|
|
|
104
104
|
`;
|
|
105
105
|
}
|
|
106
106
|
};
|
|
107
|
-
|
|
107
|
+
ExmGridSettingSelectionList.styles = [style];
|
|
108
108
|
__decorate([
|
|
109
109
|
property({ type: String })
|
|
110
|
-
],
|
|
110
|
+
], ExmGridSettingSelectionList.prototype, "tooltip", void 0);
|
|
111
111
|
__decorate([
|
|
112
112
|
property({ type: String })
|
|
113
|
-
],
|
|
113
|
+
], ExmGridSettingSelectionList.prototype, "icon", void 0);
|
|
114
114
|
__decorate([
|
|
115
115
|
property({ type: Array })
|
|
116
|
-
],
|
|
116
|
+
], ExmGridSettingSelectionList.prototype, "settingData", void 0);
|
|
117
117
|
__decorate([
|
|
118
118
|
query('#menu')
|
|
119
|
-
],
|
|
120
|
-
|
|
119
|
+
], ExmGridSettingSelectionList.prototype, "menu", void 0);
|
|
120
|
+
ExmGridSettingSelectionList = __decorate([
|
|
121
121
|
customElement('exm-grid-setting-selection-list')
|
|
122
|
-
],
|
|
123
|
-
export {
|
|
122
|
+
], ExmGridSettingSelectionList);
|
|
123
|
+
export { ExmGridSettingSelectionList };
|
|
124
124
|
//# sourceMappingURL=exm-grid-setting-selection-list.js.map
|
|
@@ -2,7 +2,7 @@ import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
|
2
2
|
import './exm-grid-toolbar.js';
|
|
3
3
|
import { Filter, Setting, SettingSelectionListItem } from './types/exm-grid-toolbar-types.js';
|
|
4
4
|
import { ActionWithCondition } from './types/exm-grid-smart-toolbar-types.js';
|
|
5
|
-
export declare class
|
|
5
|
+
export declare class ExmGridSmartToolbar extends ExmgElement {
|
|
6
6
|
description: string;
|
|
7
7
|
actions: ActionWithCondition[];
|
|
8
8
|
filters: Filter[];
|
|
@@ -26,6 +26,6 @@ export declare class ExmgGridSmartToolbar extends ExmgElement {
|
|
|
26
26
|
}
|
|
27
27
|
declare global {
|
|
28
28
|
interface HTMLElementTagNameMap {
|
|
29
|
-
'exm-grid-smart-toolbar':
|
|
29
|
+
'exm-grid-smart-toolbar': ExmGridSmartToolbar;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -5,7 +5,7 @@ import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
|
5
5
|
import './exm-grid-toolbar.js';
|
|
6
6
|
import { SettingConfigId, SettingConfigType, } from './types/exm-grid-toolbar-types.js';
|
|
7
7
|
import { ActionConditionType, } from './types/exm-grid-smart-toolbar-types.js';
|
|
8
|
-
let
|
|
8
|
+
let ExmGridSmartToolbar = class ExmGridSmartToolbar extends ExmgElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
11
|
this.description = '';
|
|
@@ -88,7 +88,7 @@ let ExmgGridSmartToolbar = class ExmgGridSmartToolbar extends ExmgElement {
|
|
|
88
88
|
`;
|
|
89
89
|
}
|
|
90
90
|
};
|
|
91
|
-
|
|
91
|
+
ExmGridSmartToolbar.styles = [
|
|
92
92
|
css `
|
|
93
93
|
:host {
|
|
94
94
|
display: block;
|
|
@@ -97,42 +97,42 @@ ExmgGridSmartToolbar.styles = [
|
|
|
97
97
|
];
|
|
98
98
|
__decorate([
|
|
99
99
|
property({ type: String })
|
|
100
|
-
],
|
|
100
|
+
], ExmGridSmartToolbar.prototype, "description", void 0);
|
|
101
101
|
__decorate([
|
|
102
102
|
property({ type: Array })
|
|
103
|
-
],
|
|
103
|
+
], ExmGridSmartToolbar.prototype, "actions", void 0);
|
|
104
104
|
__decorate([
|
|
105
105
|
property({ type: Array })
|
|
106
|
-
],
|
|
106
|
+
], ExmGridSmartToolbar.prototype, "filters", void 0);
|
|
107
107
|
__decorate([
|
|
108
108
|
property({ type: Array })
|
|
109
|
-
],
|
|
109
|
+
], ExmGridSmartToolbar.prototype, "settings", void 0);
|
|
110
110
|
__decorate([
|
|
111
111
|
property({ type: Number, attribute: 'amount-of-selected-items' })
|
|
112
|
-
],
|
|
112
|
+
], ExmGridSmartToolbar.prototype, "amountOfSelectedItems", void 0);
|
|
113
113
|
__decorate([
|
|
114
114
|
property({ type: Boolean, attribute: 'show-column-filter' })
|
|
115
|
-
],
|
|
115
|
+
], ExmGridSmartToolbar.prototype, "showColumnFilter", void 0);
|
|
116
116
|
__decorate([
|
|
117
117
|
property({ type: String, attribute: 'column-filter-button-tooltip' })
|
|
118
|
-
],
|
|
118
|
+
], ExmGridSmartToolbar.prototype, "columnFilterButtonTooltip", void 0);
|
|
119
119
|
__decorate([
|
|
120
120
|
property({ type: String, attribute: 'column-filter-dialog-title' })
|
|
121
|
-
],
|
|
121
|
+
], ExmGridSmartToolbar.prototype, "columnFilterDialogTitle", void 0);
|
|
122
122
|
__decorate([
|
|
123
123
|
property({ type: Array, attribute: 'column-filter-columns' })
|
|
124
|
-
],
|
|
124
|
+
], ExmGridSmartToolbar.prototype, "columnFilterColumns", void 0);
|
|
125
125
|
__decorate([
|
|
126
126
|
property({ type: Boolean })
|
|
127
|
-
],
|
|
127
|
+
], ExmGridSmartToolbar.prototype, "searchEnabled", void 0);
|
|
128
128
|
__decorate([
|
|
129
129
|
property({ type: String })
|
|
130
|
-
],
|
|
130
|
+
], ExmGridSmartToolbar.prototype, "searchPlaceholder", void 0);
|
|
131
131
|
__decorate([
|
|
132
132
|
property({ type: Boolean })
|
|
133
|
-
],
|
|
134
|
-
|
|
133
|
+
], ExmGridSmartToolbar.prototype, "disableSeperator", void 0);
|
|
134
|
+
ExmGridSmartToolbar = __decorate([
|
|
135
135
|
customElement('exm-grid-smart-toolbar')
|
|
136
|
-
],
|
|
137
|
-
export {
|
|
136
|
+
], ExmGridSmartToolbar);
|
|
137
|
+
export { ExmGridSmartToolbar };
|
|
138
138
|
//# sourceMappingURL=exm-grid-smart-toolbar.js.map
|
|
@@ -16,7 +16,7 @@ export interface EventSelectPayload {
|
|
|
16
16
|
item: Element;
|
|
17
17
|
token: Token;
|
|
18
18
|
}
|
|
19
|
-
export declare class
|
|
19
|
+
export declare class ExmGridToolbarFilters extends ExmgElement {
|
|
20
20
|
/**
|
|
21
21
|
* Gets or sets the selected element. The default is to use the index of the item.
|
|
22
22
|
* @type {string}
|
|
@@ -5,7 +5,7 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
5
5
|
import '@material/web/menu/menu.js';
|
|
6
6
|
import '@material/web/menu/menu-item.js';
|
|
7
7
|
import '@material/web/button/text-button.js';
|
|
8
|
-
let
|
|
8
|
+
let ExmGridToolbarFilters = class ExmGridToolbarFilters extends ExmgElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
11
|
this.items = [];
|
|
@@ -51,7 +51,7 @@ let ExmgGridToolbarFilters = class ExmgGridToolbarFilters extends ExmgElement {
|
|
|
51
51
|
`;
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
|
-
|
|
54
|
+
ExmGridToolbarFilters.styles = [
|
|
55
55
|
css `
|
|
56
56
|
:host {
|
|
57
57
|
display: block;
|
|
@@ -60,18 +60,18 @@ ExmgGridToolbarFilters.styles = [
|
|
|
60
60
|
];
|
|
61
61
|
__decorate([
|
|
62
62
|
property({ type: String })
|
|
63
|
-
],
|
|
63
|
+
], ExmGridToolbarFilters.prototype, "selected", void 0);
|
|
64
64
|
__decorate([
|
|
65
65
|
property({ type: Array })
|
|
66
|
-
],
|
|
66
|
+
], ExmGridToolbarFilters.prototype, "items", void 0);
|
|
67
67
|
__decorate([
|
|
68
68
|
query('md-menu')
|
|
69
|
-
],
|
|
69
|
+
], ExmGridToolbarFilters.prototype, "menu", void 0);
|
|
70
70
|
__decorate([
|
|
71
71
|
property({ type: Boolean })
|
|
72
|
-
],
|
|
73
|
-
|
|
72
|
+
], ExmGridToolbarFilters.prototype, "disabled", void 0);
|
|
73
|
+
ExmGridToolbarFilters = __decorate([
|
|
74
74
|
customElement('exm-grid-toolbar-filters')
|
|
75
|
-
],
|
|
76
|
-
export {
|
|
75
|
+
], ExmGridToolbarFilters);
|
|
76
|
+
export { ExmGridToolbarFilters };
|
|
77
77
|
//# sourceMappingURL=exm-grid-toolbar-filters.js.map
|
|
@@ -7,7 +7,7 @@ import './exm-grid-base-toolbar.js';
|
|
|
7
7
|
import './exm-grid-setting-selection-list.js';
|
|
8
8
|
import '../search/exm-toolbar-search.js';
|
|
9
9
|
import { Action, Filter, Setting } from './types/exm-grid-toolbar-types.js';
|
|
10
|
-
export declare class
|
|
10
|
+
export declare class ExmGridToolbar extends ExmgElement {
|
|
11
11
|
static styles: import("lit").CSSResult[];
|
|
12
12
|
description: string;
|
|
13
13
|
actions: Action[];
|
|
@@ -37,6 +37,6 @@ export declare class ExmgGridToolbar extends ExmgElement {
|
|
|
37
37
|
}
|
|
38
38
|
declare global {
|
|
39
39
|
interface HTMLElementTagNameMap {
|
|
40
|
-
'exm-grid-toolbar':
|
|
40
|
+
'exm-grid-toolbar': ExmGridToolbar;
|
|
41
41
|
}
|
|
42
42
|
}
|
|
@@ -12,7 +12,7 @@ import './exm-grid-base-toolbar.js';
|
|
|
12
12
|
import './exm-grid-setting-selection-list.js';
|
|
13
13
|
import '../search/exm-toolbar-search.js';
|
|
14
14
|
import { FilterConfigType, SettingConfigType, } from './types/exm-grid-toolbar-types.js';
|
|
15
|
-
let
|
|
15
|
+
let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.description = '';
|
|
@@ -247,7 +247,7 @@ let ExmgGridToolbar = class ExmgGridToolbar extends ExmgElement {
|
|
|
247
247
|
`;
|
|
248
248
|
}
|
|
249
249
|
};
|
|
250
|
-
|
|
250
|
+
ExmGridToolbar.styles = [
|
|
251
251
|
css `
|
|
252
252
|
exm-grid-toolbar-filters {
|
|
253
253
|
padding-left: 10px;
|
|
@@ -257,27 +257,27 @@ ExmgGridToolbar.styles = [
|
|
|
257
257
|
];
|
|
258
258
|
__decorate([
|
|
259
259
|
property({ type: String })
|
|
260
|
-
],
|
|
260
|
+
], ExmGridToolbar.prototype, "description", void 0);
|
|
261
261
|
__decorate([
|
|
262
262
|
property({ type: Array })
|
|
263
|
-
],
|
|
263
|
+
], ExmGridToolbar.prototype, "actions", void 0);
|
|
264
264
|
__decorate([
|
|
265
265
|
property({ type: Array })
|
|
266
|
-
],
|
|
266
|
+
], ExmGridToolbar.prototype, "filters", void 0);
|
|
267
267
|
__decorate([
|
|
268
268
|
property({ type: Array })
|
|
269
|
-
],
|
|
269
|
+
], ExmGridToolbar.prototype, "settings", void 0);
|
|
270
270
|
__decorate([
|
|
271
271
|
property({ type: Boolean })
|
|
272
|
-
],
|
|
272
|
+
], ExmGridToolbar.prototype, "searchEnabled", void 0);
|
|
273
273
|
__decorate([
|
|
274
274
|
property({ type: String })
|
|
275
|
-
],
|
|
275
|
+
], ExmGridToolbar.prototype, "searchPlaceholder", void 0);
|
|
276
276
|
__decorate([
|
|
277
277
|
property({ type: Boolean })
|
|
278
|
-
],
|
|
279
|
-
|
|
278
|
+
], ExmGridToolbar.prototype, "disableSeperator", void 0);
|
|
279
|
+
ExmGridToolbar = __decorate([
|
|
280
280
|
customElement('exm-grid-toolbar')
|
|
281
|
-
],
|
|
282
|
-
export {
|
|
281
|
+
], ExmGridToolbar);
|
|
282
|
+
export { ExmGridToolbar };
|
|
283
283
|
//# sourceMappingURL=exm-grid-toolbar.js.map
|
package/src/table/exm-grid.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
|
2
2
|
import '@exmg/exm-sortable/exm-sortable.js';
|
|
3
3
|
import { SORT_DIRECTION } from './types/exm-grid-types.js';
|
|
4
4
|
type GenericPropertyValues<T, V = unknown> = Map<T, V>;
|
|
5
|
-
type Props = Exclude<keyof
|
|
5
|
+
type Props = Exclude<keyof ExmGrid, number | symbol>;
|
|
6
6
|
type SmartPropertyValue = GenericPropertyValues<Props>;
|
|
7
7
|
/**
|
|
8
8
|
* ### Styling
|
|
@@ -37,7 +37,7 @@ type SmartPropertyValue = GenericPropertyValues<Props>;
|
|
|
37
37
|
* `--exm-table-col-number-padding-right` | right padding of number column | `10px;`
|
|
38
38
|
* `--exm-table-checkbox-cell-width` | width of cell with checkbox | `24px;`
|
|
39
39
|
*/
|
|
40
|
-
export declare class
|
|
40
|
+
export declare class ExmGrid extends ExmgElement {
|
|
41
41
|
static styles: import("lit").CSSResult[];
|
|
42
42
|
/**
|
|
43
43
|
* Array of data which mapped to rows
|
|
@@ -124,7 +124,7 @@ export declare class ExmgGrid extends ExmgElement {
|
|
|
124
124
|
}
|
|
125
125
|
declare global {
|
|
126
126
|
interface HTMLElementTagNameMap {
|
|
127
|
-
'exm-grid':
|
|
127
|
+
'exm-grid': ExmGrid;
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
export {};
|
package/src/table/exm-grid.js
CHANGED
|
@@ -5,11 +5,11 @@ import { property, customElement, state } from 'lit/decorators.js';
|
|
|
5
5
|
import { cache } from 'lit/directives/cache.js';
|
|
6
6
|
import '@exmg/exm-sortable/exm-sortable.js';
|
|
7
7
|
import { style as exmgGridTableStyles } from '../styles/exm-grid-styles-css.js';
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
8
|
+
import { ExmRowSelectable } from './featrues/exm-row-selectable.js';
|
|
9
|
+
import { ExmQuerySelectors } from './utils/exm-query-selectors.js';
|
|
10
|
+
import { ExmRowExpandable } from './featrues/exm-row-expandable.js';
|
|
11
|
+
import { ExmColumnSortable } from './featrues/exm-column-sortable.js';
|
|
12
|
+
import { ExmRowSortable } from './featrues/exm-row-sortable.js';
|
|
13
13
|
/**
|
|
14
14
|
* ### Styling
|
|
15
15
|
* The following custom properties and mixins are available for styling:
|
|
@@ -43,7 +43,7 @@ import { ExmgRowSortable } from './featrues/exm-row-sortable.js';
|
|
|
43
43
|
* `--exm-table-col-number-padding-right` | right padding of number column | `10px;`
|
|
44
44
|
* `--exm-table-checkbox-cell-width` | width of cell with checkbox | `24px;`
|
|
45
45
|
*/
|
|
46
|
-
let
|
|
46
|
+
let ExmGrid = class ExmGrid extends ExmgElement {
|
|
47
47
|
constructor() {
|
|
48
48
|
super(...arguments);
|
|
49
49
|
/**
|
|
@@ -90,7 +90,7 @@ let ExmgGrid = class ExmgGrid extends ExmgElement {
|
|
|
90
90
|
}
|
|
91
91
|
getQuerySelectors() {
|
|
92
92
|
if (!this.querySelectors) {
|
|
93
|
-
throw new Error('
|
|
93
|
+
throw new Error('ExmQuerySelector not initialized yet');
|
|
94
94
|
}
|
|
95
95
|
return this.querySelectors;
|
|
96
96
|
}
|
|
@@ -202,23 +202,23 @@ let ExmgGrid = class ExmgGrid extends ExmgElement {
|
|
|
202
202
|
async firstUpdated() {
|
|
203
203
|
const table = this.shadowRoot.host.querySelector('table');
|
|
204
204
|
const tableBody = table.querySelector('tbody.grid-data');
|
|
205
|
-
this.querySelectors = new
|
|
205
|
+
this.querySelectors = new ExmQuerySelectors(table, tableBody);
|
|
206
206
|
this.initGridAttributes();
|
|
207
207
|
const bodyRows = this.querySelectors.getBodyRows();
|
|
208
208
|
if (this.sortable) {
|
|
209
|
-
this.columnSortableFeature = new
|
|
209
|
+
this.columnSortableFeature = new ExmColumnSortable(this.querySelectors, (event) => this.dispatchEvent(event), this.defaultSortColumn, this.defaultSortDirection);
|
|
210
210
|
this.columnSortableFeature.initFeature();
|
|
211
211
|
}
|
|
212
212
|
if (this.canSortRows()) {
|
|
213
|
-
this.rowSortableFeature = new
|
|
213
|
+
this.rowSortableFeature = new ExmRowSortable(this.querySelectors);
|
|
214
214
|
this.rowSortableFeature.initFeature();
|
|
215
215
|
}
|
|
216
216
|
if (this.rowsSelectable) {
|
|
217
|
-
this.rowSelectableFeature = new
|
|
217
|
+
this.rowSelectableFeature = new ExmRowSelectable(this.querySelectors, (event) => this.dispatchEvent(event), this.disableRowClickSelection, this.selectableCheckboxSelector);
|
|
218
218
|
this.rowSelectableFeature.initFeature(bodyRows);
|
|
219
219
|
}
|
|
220
220
|
if (this.expandableToggleSelector) {
|
|
221
|
-
this.rowExpandableFeature = new
|
|
221
|
+
this.rowExpandableFeature = new ExmRowExpandable(this.querySelectors, this.expandableToggleSelector);
|
|
222
222
|
this.rowExpandableFeature.initFeature();
|
|
223
223
|
}
|
|
224
224
|
this.updateColumnVisibility();
|
|
@@ -280,54 +280,54 @@ let ExmgGrid = class ExmgGrid extends ExmgElement {
|
|
|
280
280
|
`;
|
|
281
281
|
}
|
|
282
282
|
};
|
|
283
|
-
|
|
283
|
+
ExmGrid.styles = [exmgGridTableStyles];
|
|
284
284
|
__decorate([
|
|
285
285
|
property({ type: Array })
|
|
286
|
-
],
|
|
286
|
+
], ExmGrid.prototype, "items", void 0);
|
|
287
287
|
__decorate([
|
|
288
288
|
property({ type: Boolean, reflect: true })
|
|
289
|
-
],
|
|
289
|
+
], ExmGrid.prototype, "sortable", void 0);
|
|
290
290
|
__decorate([
|
|
291
291
|
property({ type: String, attribute: 'default-sort-column' })
|
|
292
|
-
],
|
|
292
|
+
], ExmGrid.prototype, "defaultSortColumn", void 0);
|
|
293
293
|
__decorate([
|
|
294
294
|
property({ type: String, attribute: 'default-sort-direction' })
|
|
295
|
-
],
|
|
295
|
+
], ExmGrid.prototype, "defaultSortDirection", void 0);
|
|
296
296
|
__decorate([
|
|
297
297
|
property({ type: Boolean, reflect: true, attribute: 'rows-sortable' })
|
|
298
|
-
],
|
|
298
|
+
], ExmGrid.prototype, "rowsSortable", void 0);
|
|
299
299
|
__decorate([
|
|
300
300
|
property({ type: Boolean, attribute: 'rows-selectable' })
|
|
301
|
-
],
|
|
301
|
+
], ExmGrid.prototype, "rowsSelectable", void 0);
|
|
302
302
|
__decorate([
|
|
303
303
|
property({ type: Boolean, attribute: 'disable-row-click-selection' })
|
|
304
|
-
],
|
|
304
|
+
], ExmGrid.prototype, "disableRowClickSelection", void 0);
|
|
305
305
|
__decorate([
|
|
306
306
|
property({ type: String, attribute: 'selectable-checkbox-selector' })
|
|
307
|
-
],
|
|
307
|
+
], ExmGrid.prototype, "selectableCheckboxSelector", void 0);
|
|
308
308
|
__decorate([
|
|
309
309
|
property({ type: Object })
|
|
310
|
-
],
|
|
310
|
+
], ExmGrid.prototype, "hiddenColumnNames", void 0);
|
|
311
311
|
__decorate([
|
|
312
312
|
property({ type: Object })
|
|
313
|
-
],
|
|
313
|
+
], ExmGrid.prototype, "selectedRowIds", void 0);
|
|
314
314
|
__decorate([
|
|
315
315
|
property({ type: Object })
|
|
316
|
-
],
|
|
316
|
+
], ExmGrid.prototype, "expandedRowIds", void 0);
|
|
317
317
|
__decorate([
|
|
318
318
|
property({ type: String, attribute: 'expandable-toggle-selector', reflect: true })
|
|
319
|
-
],
|
|
319
|
+
], ExmGrid.prototype, "expandableToggleSelector", void 0);
|
|
320
320
|
__decorate([
|
|
321
321
|
property({ type: String, attribute: 'table-layout', reflect: true })
|
|
322
|
-
],
|
|
322
|
+
], ExmGrid.prototype, "tableLayout", void 0);
|
|
323
323
|
__decorate([
|
|
324
324
|
state()
|
|
325
|
-
],
|
|
325
|
+
], ExmGrid.prototype, "querySelectors", void 0);
|
|
326
326
|
__decorate([
|
|
327
327
|
property({ type: Boolean, reflect: true, attribute: 'data-with-toolbar' })
|
|
328
|
-
],
|
|
329
|
-
|
|
328
|
+
], ExmGrid.prototype, "withToolbar", void 0);
|
|
329
|
+
ExmGrid = __decorate([
|
|
330
330
|
customElement('exm-grid')
|
|
331
|
-
],
|
|
332
|
-
export {
|
|
331
|
+
], ExmGrid);
|
|
332
|
+
export { ExmGrid };
|
|
333
333
|
//# sourceMappingURL=exm-grid.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ExmQuerySelectors } from '../utils/exm-query-selectors.js';
|
|
2
2
|
import { SORT_DIRECTION } from '../types/exm-grid-types.js';
|
|
3
|
-
export declare class
|
|
3
|
+
export declare class ExmColumnSortable {
|
|
4
4
|
private querySelectors;
|
|
5
5
|
private dispatchEvent;
|
|
6
6
|
private defaultSortColumn?;
|
|
7
7
|
private defaultSortDirection?;
|
|
8
|
-
constructor(qs:
|
|
8
|
+
constructor(qs: ExmQuerySelectors, de: (e: Event) => boolean, dsc?: string, dsd?: SORT_DIRECTION);
|
|
9
9
|
initFeature(): void;
|
|
10
10
|
private registerListeners;
|
|
11
11
|
private fireSortChanged;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare class
|
|
1
|
+
import { ExmQuerySelectors } from '../utils/exm-query-selectors.js';
|
|
2
|
+
export declare class ExmRowExpandable {
|
|
3
3
|
private querySelectors;
|
|
4
4
|
private expandableToggleSelector;
|
|
5
|
-
constructor(qs:
|
|
5
|
+
constructor(qs: ExmQuerySelectors, ets: string);
|
|
6
6
|
initFeature(): void;
|
|
7
7
|
updateFeature(): void;
|
|
8
8
|
private registerClickListener;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare class
|
|
1
|
+
import { ExmQuerySelectors } from '../utils/exm-query-selectors.js';
|
|
2
|
+
export declare class ExmRowSelectable {
|
|
3
3
|
allCheckbox?: HTMLInputElement;
|
|
4
4
|
selectedRows: HTMLTableRowElement[];
|
|
5
5
|
private querySelectors;
|
|
6
6
|
private dispatchEvent;
|
|
7
7
|
private selectableCheckboxSelector?;
|
|
8
8
|
private disableRowClickSelection;
|
|
9
|
-
constructor(qs:
|
|
9
|
+
constructor(qs: ExmQuerySelectors, de: (event: Event) => boolean, drcs: boolean, scs?: string);
|
|
10
10
|
initFeature(bodyRows: NodeListOf<HTMLTableRowElement>): void;
|
|
11
11
|
updateFeature(bodyRows: NodeListOf<HTMLTableRowElement>): void;
|
|
12
12
|
syncSelectedItems(): void;
|
|
@@ -21,7 +21,7 @@ const syncCheckboxAttrFromProp = (checkboxElement) => {
|
|
|
21
21
|
checkboxElement.removeAttribute('checked');
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
export class
|
|
24
|
+
export class ExmRowSelectable {
|
|
25
25
|
constructor(qs, de, drcs, scs) {
|
|
26
26
|
this.selectedRows = [];
|
|
27
27
|
this.querySelectors = qs;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare class
|
|
1
|
+
import { ExmQuerySelectors } from '../utils/exm-query-selectors.js';
|
|
2
|
+
export declare class ExmRowSortable {
|
|
3
3
|
private querySelectors;
|
|
4
|
-
constructor(qs:
|
|
4
|
+
constructor(qs: ExmQuerySelectors);
|
|
5
5
|
initFeature(): void;
|
|
6
6
|
updateFeature(): void;
|
|
7
7
|
private getRowDetailQuerySelectorFactory;
|