@exmg/exm-grid 1.0.0
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 +501 -0
- package/assets/arrow-upward.svg +7 -0
- package/index.d.ts +14 -0
- package/index.js +15 -0
- package/package.json +58 -0
- package/src/search/exm-toolbar-search.d.ts +25 -0
- package/src/search/exm-toolbar-search.js +197 -0
- package/src/styles/exm-grid-base-toolbar-styles-css.d.ts +2 -0
- package/src/styles/exm-grid-base-toolbar-styles-css.js +4 -0
- package/src/styles/exm-grid-base-toolbar-styles.scss +89 -0
- package/src/styles/exm-grid-common-styles-css.d.ts +2 -0
- package/src/styles/exm-grid-common-styles-css.js +4 -0
- package/src/styles/exm-grid-common-styles.scss +1 -0
- package/src/styles/exm-grid-pagination-styles-css.d.ts +2 -0
- package/src/styles/exm-grid-pagination-styles-css.js +4 -0
- package/src/styles/exm-grid-pagination-styles.scss +69 -0
- package/src/styles/exm-grid-setting-selection-list-styles-css.d.ts +2 -0
- package/src/styles/exm-grid-setting-selection-list-styles-css.js +4 -0
- package/src/styles/exm-grid-setting-selection-list-styles.scss +8 -0
- package/src/styles/exm-grid-styles-css.d.ts +2 -0
- package/src/styles/exm-grid-styles-css.js +4 -0
- package/src/styles/exm-grid-styles.scss +387 -0
- package/src/table/exm-grid-base-toolbar.d.ts +23 -0
- package/src/table/exm-grid-base-toolbar.js +91 -0
- package/src/table/exm-grid-pagination.d.ts +37 -0
- package/src/table/exm-grid-pagination.js +190 -0
- package/src/table/exm-grid-setting-selection-list.d.ts +24 -0
- package/src/table/exm-grid-setting-selection-list.js +124 -0
- package/src/table/exm-grid-smart-toolbar.d.ts +31 -0
- package/src/table/exm-grid-smart-toolbar.js +138 -0
- package/src/table/exm-grid-toolbar-filters.d.ts +36 -0
- package/src/table/exm-grid-toolbar-filters.js +77 -0
- package/src/table/exm-grid-toolbar.d.ts +42 -0
- package/src/table/exm-grid-toolbar.js +283 -0
- package/src/table/exm-grid.d.ts +130 -0
- package/src/table/exm-grid.js +333 -0
- package/src/table/featrues/exm-column-sortable.d.ts +12 -0
- package/src/table/featrues/exm-column-sortable.js +50 -0
- package/src/table/featrues/exm-row-expandable.d.ts +9 -0
- package/src/table/featrues/exm-row-expandable.js +42 -0
- package/src/table/featrues/exm-row-selectable.d.ts +20 -0
- package/src/table/featrues/exm-row-selectable.js +204 -0
- package/src/table/featrues/exm-row-sortable.d.ts +9 -0
- package/src/table/featrues/exm-row-sortable.js +50 -0
- package/src/table/types/exm-grid-smart-toolbar-types.d.ts +17 -0
- package/src/table/types/exm-grid-smart-toolbar-types.js +6 -0
- package/src/table/types/exm-grid-toolbar-types.d.ts +55 -0
- package/src/table/types/exm-grid-toolbar-types.js +16 -0
- package/src/table/types/exm-grid-types.d.ts +15 -0
- package/src/table/types/exm-grid-types.js +2 -0
- package/src/table/utils/exm-query-selectors.d.ts +12 -0
- package/src/table/utils/exm-query-selectors.js +37 -0
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, css } from 'lit';
|
|
3
|
+
import { property, customElement, query, state } from 'lit/decorators.js';
|
|
4
|
+
import { ExmgElement } from '@exmg/lit-base/index.js';
|
|
5
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
6
|
+
import { async, debounce } from '@exmg/lit-base/index.js';
|
|
7
|
+
import '@material/web/icon/icon.js';
|
|
8
|
+
import '@material/web/iconbutton/icon-button.js';
|
|
9
|
+
import '@material/web/focus/md-focus-ring.js';
|
|
10
|
+
let ToolbarSearch = class ToolbarSearch extends ExmgElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this._isSearch = false;
|
|
14
|
+
this.placeHolder = 'Search';
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
const classMapValues = {
|
|
18
|
+
search: this._isSearch,
|
|
19
|
+
};
|
|
20
|
+
return html `
|
|
21
|
+
<div class=${classMap(classMapValues)} @click=${this._showSearch}>
|
|
22
|
+
${this._isSearch
|
|
23
|
+
? html `
|
|
24
|
+
<div style="position: relative">
|
|
25
|
+
<md-focus-ring style="--md-focus-ring-shape: 8px" for="searchInput"></md-focus-ring>
|
|
26
|
+
<md-icon>search</md-icon>
|
|
27
|
+
<input
|
|
28
|
+
id="searchInput"
|
|
29
|
+
placeholder=${this.placeHolder}
|
|
30
|
+
value=${this.filterValue ? this.filterValue : ''}
|
|
31
|
+
onfocus="let value = this.value; this.value = null; this.value = value"
|
|
32
|
+
@keyup=${this._handleKeyUp}
|
|
33
|
+
@blur=${this._handleInputBlur}
|
|
34
|
+
/>
|
|
35
|
+
${this.filterValue
|
|
36
|
+
? html `
|
|
37
|
+
<md-icon-button class="clear-button" @click=${this._handleClear}
|
|
38
|
+
><md-icon>close</md-icon></md-icon-button
|
|
39
|
+
>
|
|
40
|
+
`
|
|
41
|
+
: html ``}
|
|
42
|
+
</div>
|
|
43
|
+
`
|
|
44
|
+
: html `
|
|
45
|
+
<md-icon>search</md-icon>
|
|
46
|
+
<span class="interactive-content">${this._getValue()}</span>
|
|
47
|
+
<slot></slot>
|
|
48
|
+
`}
|
|
49
|
+
</div>
|
|
50
|
+
`;
|
|
51
|
+
}
|
|
52
|
+
_getValue() {
|
|
53
|
+
return this.filterValue || this.placeHolder;
|
|
54
|
+
}
|
|
55
|
+
_handleClear(e) {
|
|
56
|
+
e.preventDefault();
|
|
57
|
+
this.filterValue = null;
|
|
58
|
+
this.search.value = '';
|
|
59
|
+
this._notifyChange();
|
|
60
|
+
}
|
|
61
|
+
_handleKeyUp(e) {
|
|
62
|
+
const input = e.target;
|
|
63
|
+
if (this.filterValue !== input.value) {
|
|
64
|
+
this.filterValue = input.value;
|
|
65
|
+
this._notifyChange();
|
|
66
|
+
}
|
|
67
|
+
if (e.keyCode === 27) {
|
|
68
|
+
this._hideSearch();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
_notifyChange() {
|
|
72
|
+
this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
|
|
73
|
+
this.dispatchEvent(new CustomEvent('exm-grid-toolbar-search-changed', {
|
|
74
|
+
bubbles: false,
|
|
75
|
+
composed: true,
|
|
76
|
+
detail: { value: this.filterValue },
|
|
77
|
+
}));
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
_handleInputBlur() {
|
|
81
|
+
this._hideSearch();
|
|
82
|
+
}
|
|
83
|
+
_hideSearch() {
|
|
84
|
+
this._isSearch = false;
|
|
85
|
+
}
|
|
86
|
+
_showSearch() {
|
|
87
|
+
if (this._isSearch)
|
|
88
|
+
return;
|
|
89
|
+
this._isSearch = true;
|
|
90
|
+
setTimeout(() => this.shadowRoot.querySelector('#searchInput').focus(), 200);
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
ToolbarSearch.styles = [
|
|
94
|
+
css `
|
|
95
|
+
:host {
|
|
96
|
+
display: block;
|
|
97
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
98
|
+
background-color: var(--md-sys-color-surface-container-low);
|
|
99
|
+
border-radius: var(--exm-toolbar-search-border-radius, var(--exm-surface-border-radius, 16px));
|
|
100
|
+
}
|
|
101
|
+
:host > div {
|
|
102
|
+
display: flex;
|
|
103
|
+
flex-direction: row;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
align-items: center;
|
|
106
|
+
height: 48px;
|
|
107
|
+
}
|
|
108
|
+
h2 {
|
|
109
|
+
max-width: 936px;
|
|
110
|
+
width: 100%;
|
|
111
|
+
margin: 20px auto;
|
|
112
|
+
}
|
|
113
|
+
input {
|
|
114
|
+
width: 100%;
|
|
115
|
+
caret-color: var(--md-sys-color-on-surface);
|
|
116
|
+
color: var(--md-sys-color-on-surface);
|
|
117
|
+
}
|
|
118
|
+
md-icon {
|
|
119
|
+
margin: 0 8px 0 16px;
|
|
120
|
+
fill: var(--md-sys-color-on-surface);
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
}
|
|
123
|
+
:host > div > svg {
|
|
124
|
+
margin-right: 10px;
|
|
125
|
+
}
|
|
126
|
+
::slotted(*) {
|
|
127
|
+
margin: 14px 12px;
|
|
128
|
+
}
|
|
129
|
+
span.interactive-content {
|
|
130
|
+
white-space: nowrap;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
font-size: 14px;
|
|
133
|
+
opacity: 0.6;
|
|
134
|
+
text-overflow: ellipsis;
|
|
135
|
+
letter-spacing: 0.005em;
|
|
136
|
+
box-sizing: border-box;
|
|
137
|
+
|
|
138
|
+
font-weight: 400;
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
flex: 1;
|
|
141
|
+
}
|
|
142
|
+
.search {
|
|
143
|
+
display: absolute;
|
|
144
|
+
background: none;
|
|
145
|
+
/* outline-color: rgb(77, 144, 254);
|
|
146
|
+
outline-offset: 1px;
|
|
147
|
+
outline-style: auto;
|
|
148
|
+
outline-width: 1px; */
|
|
149
|
+
}
|
|
150
|
+
.search > div {
|
|
151
|
+
width: 100%;
|
|
152
|
+
position: relative;
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: center;
|
|
155
|
+
}
|
|
156
|
+
.search input {
|
|
157
|
+
font-size: 14px;
|
|
158
|
+
margin: 15px 0px;
|
|
159
|
+
padding: 2px;
|
|
160
|
+
border: 0px;
|
|
161
|
+
width: 100%;
|
|
162
|
+
outline: none;
|
|
163
|
+
background: none;
|
|
164
|
+
box-sizing: border-box;
|
|
165
|
+
}
|
|
166
|
+
.clear-button {
|
|
167
|
+
position: absolute;
|
|
168
|
+
right: 0;
|
|
169
|
+
background: transparent;
|
|
170
|
+
border: none !important;
|
|
171
|
+
font-size: 0;
|
|
172
|
+
margin-right: 1rem;
|
|
173
|
+
color: var(--exm-table-color, black);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
md-focus-ring {
|
|
177
|
+
--md-focus-ring-shape: 16px;
|
|
178
|
+
}
|
|
179
|
+
`,
|
|
180
|
+
];
|
|
181
|
+
__decorate([
|
|
182
|
+
state()
|
|
183
|
+
], ToolbarSearch.prototype, "_isSearch", void 0);
|
|
184
|
+
__decorate([
|
|
185
|
+
property({ type: String })
|
|
186
|
+
], ToolbarSearch.prototype, "filterValue", void 0);
|
|
187
|
+
__decorate([
|
|
188
|
+
property({ type: String })
|
|
189
|
+
], ToolbarSearch.prototype, "placeHolder", void 0);
|
|
190
|
+
__decorate([
|
|
191
|
+
query('#searchInput')
|
|
192
|
+
], ToolbarSearch.prototype, "search", void 0);
|
|
193
|
+
ToolbarSearch = __decorate([
|
|
194
|
+
customElement('exm-toolbar-search')
|
|
195
|
+
], ToolbarSearch);
|
|
196
|
+
export { ToolbarSearch };
|
|
197
|
+
//# sourceMappingURL=exm-toolbar-search.js.map
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `:host{display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);border-top-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-top-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));--toolbar-bg-color: var(--exm-theme-table-toolbar-background-color, var(--md-sys-color-surface-container));--toolbar-color: var(--exm-theme-table-toolbar-color, var(--md-sys-color-on-surface-container));background-color:var(--toolbar-bg-color);color:var(--toolbar-color)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;padding:10px 16px 10px 16px;overflow-x:var(--exm-theme-table-toolbar-overflow-x, initial);white-space:nowrap}.wrapper.active{--active-toolbar-bg-color: var(--exm-theme-table-toolbar-active-bg-color, var(--md-sys-color-secondary-container));--active-toolbar-color: var(--exm-theme-table-toolbar-active-color, var(--md-sys-color-on-secondary-container));background-color:var(--active-toolbar-bg-color);color:var(--active-toolbar-color);border-top-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-top-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px))}.wrapper.active .seperator.with-action-separator{border-left:1px solid var(--active-toolbar-color)}.wrapper.active .description{color:var(--active-toolbar-color);flex:1;margin-left:8px}.wrapper .seperator{min-height:32px}.wrapper .seperator.with-action-separator{border-left:1px solid var(--active-toolbar-color)}.wrapper .description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size, 1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height, 2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight, 400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing, normal);text-decoration:inherit;text-decoration:var(--mdc-typography-headline5-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform, inherit);color:var(--toolbar-color);font-size:1.25rem;padding:0;height:48px;flex:1;display:flex;align-items:center}.actions{padding:0 8px 0 0;color:var(--mdc-theme-primary)}.filters{display:flex;flex-direction:row;justify-content:flex-end}.settings{display:flex;flex-direction:row;justify-content:flex-end}@media(max-width: 500px){.wrapper .description{display:none}}`;
|
|
3
|
+
export default style;
|
|
4
|
+
//# sourceMappingURL=exm-grid-base-toolbar-styles-css.js.map
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@use '@material/typography/mixins' as typography;
|
|
2
|
+
|
|
3
|
+
$exm-grid-toolbar-bg-color: #ffffff;
|
|
4
|
+
$exm-grid-toolbar-active-bg-color: #e1f0fe;
|
|
5
|
+
$exm-grid-toolbar-color: #02182b;
|
|
6
|
+
$exm-grid-toolbar-active-color: #000000;
|
|
7
|
+
|
|
8
|
+
:host {
|
|
9
|
+
display: block;
|
|
10
|
+
@include typography.base;
|
|
11
|
+
|
|
12
|
+
border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
|
|
13
|
+
border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
|
|
14
|
+
|
|
15
|
+
--toolbar-bg-color: var(--exm-theme-table-toolbar-background-color, var(--md-sys-color-surface-container));
|
|
16
|
+
--toolbar-color: var(--exm-theme-table-toolbar-color, var(--md-sys-color-on-surface-container));
|
|
17
|
+
background-color: var(--toolbar-bg-color);
|
|
18
|
+
color: var(--toolbar-color);
|
|
19
|
+
}
|
|
20
|
+
.wrapper {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex: 1;
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
align-items: center;
|
|
25
|
+
padding: 10px 16px 10px 16px;
|
|
26
|
+
|
|
27
|
+
overflow-x: var(--exm-theme-table-toolbar-overflow-x, initial);
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
|
|
30
|
+
&.active {
|
|
31
|
+
--active-toolbar-bg-color: var(--exm-theme-table-toolbar-active-bg-color, var(--md-sys-color-secondary-container));
|
|
32
|
+
--active-toolbar-color: var(--exm-theme-table-toolbar-active-color, var(--md-sys-color-on-secondary-container));
|
|
33
|
+
|
|
34
|
+
background-color: var(--active-toolbar-bg-color);
|
|
35
|
+
color: var(--active-toolbar-color);
|
|
36
|
+
border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
|
|
37
|
+
border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
|
|
38
|
+
|
|
39
|
+
.seperator {
|
|
40
|
+
&.with-action-separator {
|
|
41
|
+
border-left: 1px solid var(--active-toolbar-color);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
.description {
|
|
45
|
+
color: var(--active-toolbar-color);
|
|
46
|
+
flex: 1;
|
|
47
|
+
margin-left: 8px;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
.seperator {
|
|
51
|
+
min-height: 32px;
|
|
52
|
+
&.with-action-separator {
|
|
53
|
+
border-left: 1px solid var(--active-toolbar-color);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
.description {
|
|
57
|
+
@include typography.typography('headline5');
|
|
58
|
+
color: var(--toolbar-color);
|
|
59
|
+
font-size: 1.25rem;
|
|
60
|
+
padding: 0;
|
|
61
|
+
height: 48px;
|
|
62
|
+
flex: 1;
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.actions {
|
|
69
|
+
padding: 0 8px 0 0;
|
|
70
|
+
color: var(--mdc-theme-primary);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.filters {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: row;
|
|
76
|
+
justify-content: flex-end;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.settings {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: row;
|
|
82
|
+
justify-content: flex-end;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (max-width: 500px) {
|
|
86
|
+
.wrapper .description {
|
|
87
|
+
display: none;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `:host{display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);color:var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));border-bottom-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-bottom-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px))}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:flex-end;padding:8px 10px;white-space:nowrap}.wrapper .page-size{display:flex;flex-direction:row;margin-right:26px;align-items:center}.wrapper .page-size .page-size-label{margin-right:10px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.wrapper .page-range{display:flex;flex-direction:row;align-items:center}.wrapper .page-range .page-range-label{margin-right:44px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.wrapper .page-range .page-range-actions{user-select:none}@media(max-width: 600px){.page-size-label{display:none}}@media(max-width: 500px){.wrapper .page-size{display:none}}@media(max-width: 450px){.wrapper{overflow-x:auto;white-space:nowrap}.wrapper .page-range{min-width:1px}}`;
|
|
3
|
+
export default style;
|
|
4
|
+
//# sourceMappingURL=exm-grid-common-styles-css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "exm-grid-pagination-styles";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `:host{display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);color:var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));border-bottom-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-bottom-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px))}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:flex-end;padding:8px 10px;white-space:nowrap}.wrapper .page-size{display:flex;flex-direction:row;margin-right:26px;align-items:center}.wrapper .page-size .page-size-label{margin-right:10px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.wrapper .page-range{display:flex;flex-direction:row;align-items:center}.wrapper .page-range .page-range-label{margin-right:44px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}.wrapper .page-range .page-range-actions{user-select:none}@media(max-width: 600px){.page-size-label{display:none}}@media(max-width: 500px){.wrapper .page-size{display:none}}@media(max-width: 450px){.wrapper{overflow-x:auto;white-space:nowrap}.wrapper .page-range{min-width:1px}}`;
|
|
3
|
+
export default style;
|
|
4
|
+
//# sourceMappingURL=exm-grid-pagination-styles-css.js.map
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@use '@material/typography/mixins' as typography;
|
|
2
|
+
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
@include typography.base;
|
|
6
|
+
// background-color: var(--exm-theme-table-pagination-bg-color, var(--md-sys-color-surface-container));
|
|
7
|
+
color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));
|
|
8
|
+
border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
|
|
9
|
+
border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
|
|
10
|
+
}
|
|
11
|
+
.wrapper {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex: 1;
|
|
14
|
+
flex-direction: row;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: flex-end;
|
|
17
|
+
padding: 8px 10px;
|
|
18
|
+
|
|
19
|
+
// overflow-x: auto;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
.page-size {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
margin-right: 26px;
|
|
25
|
+
align-items: center;
|
|
26
|
+
|
|
27
|
+
.page-size-label {
|
|
28
|
+
margin-right: 10px;
|
|
29
|
+
@include typography.typography(body2);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.page-range {
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: row;
|
|
36
|
+
align-items: center;
|
|
37
|
+
|
|
38
|
+
.page-range-label {
|
|
39
|
+
margin-right: 44px;
|
|
40
|
+
@include typography.typography(body2);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.page-range-actions {
|
|
44
|
+
user-select: none;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (max-width: 600px) {
|
|
50
|
+
.page-size-label {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@media (max-width: 500px) {
|
|
56
|
+
.wrapper .page-size {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@media (max-width: 450px) {
|
|
62
|
+
.wrapper {
|
|
63
|
+
overflow-x: auto;
|
|
64
|
+
white-space: nowrap;
|
|
65
|
+
.page-range {
|
|
66
|
+
min-width: 1px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const style = css `:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);display:block;--exm-arrow-upward-url: url("/node_modules/@exmg/exm-grid/assets/arrow-upward.svg");--exm-table-card-width: var(--exm-theme-table-card-width, 100%);--exm-table-card-margin-bottom: var(--exm-theme-table-card-margin-bottom, 5px);--exm-table-color: var(--exm-theme-table-on-surface, var(--md-sys-color-on-surface-container));--exm-table-card-background-color: var(--exm-theme-table-surface, var(--md-sys-color-surface-container));--exm-table-row-divider-color: var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));--exm-table-row-selected-color: var(--exm-theme-table-row-selected-color, var(--md-sys-color-on-secondary-container));--exm-table-row-selected-background-color: var( --exm-theme-table-row-selected-background-color, var(--md-sys-color-secondary-container) );--exm-table-row-hover-color: var(--exm-theme-table-row-hover-color, var(--md-sys-color-on-surface));--exm-table-row-hover-background-color: var( --exm-theme-table-row-hover-background-color, var(--md-sys-color-surface-container-highest) );--exm-table-row-dragged-background-color: var( --exm-theme-table-row-dragged-background-color, var(--md-sys-color-surface-container-low) );--exm-table-rows-expanded-divider-border: var(--exm-theme-table-rows-expanded-divider-border, none);--exm-table-rows-expanded-border: var(--exm-theme-table-rows-expanded-border, none);--exm-table-rows-expanded-background-color: var( --exm-theme-table-rows-expanded-background-color, var(--md-sys-color-surface-container-low) );--exm-table-rows-expanded-color: var(--exm-theme-table-rows-expanded-color, var(--md-sys-color-on-surface));--exm-table-th-color: var(--exm-theme-table-th-on-surface, var(--md-sys-color-on-surface-container));--exm-table-th-background-color: var(--exm-theme-table-th-surface, var(--md-sys-color-surface-container));--exm-table-th-sortable-hover-color: var(--exm-theme-table-th-sortable-hover-color, var(--md-sys-color-on-surface));--exm-table-columns-background-color: var(--exm-theme-table-columns-background-color, var(--md-sys-color-surface));--exm-table-th-height: var(--exm-theme-table-th-height, 48px);--exm-table-th-sort-margin-left: var(--exm-theme-table-th-sort-margin-left, 0px);--exm-table-td-height: var(--exm-theme-table-td-height, 48px);--exm-table-th-sort-icon-height: var(--exm-theme-table-th-sort-icon-height, 1em);--exm-table-th-sort-icon-width: var(--exm-theme-table-th-sort-icon-width, 1em);--exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);--exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);--exm-paper-combobox-selected-item-color: var(var(--md-sys-color-primary), #000000);--exm-paper-combobox-color: var(--md-sys-color-on-surface);--exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute)}::slotted([slot=pagination]){display:flex;align-items:center;justify-content:flex-end;border-top:1px solid var(--exm-table-row-divider-color)}::slotted([slot=toolbar]){display:block}.table-card-container{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);border:none;width:var(--exm-table-card-width);margin:0;padding:0;box-shadow:var(--exm-theme-table-box-shadow, none)}:host([with-toolbar]) .table-card{border-top:1px solid var(--exm-table-row-divider-color)}.table-card{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-font-family, Roboto, sans-serif);border:none;border-bottom-left-radius:4px;border-bottom-right-radius:4px;width:var(--exm-table-card-width);background-color:var(--exm-table-card-background-color);margin-bottom:var(--exm-table-card-margin-bottom);border-top-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-top-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-bottom-left-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));border-bottom-right-radius:var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px))}table{width:100%;color:var(--exm-table-color);border-spacing:0;border:none}table[data-table-layout=fixed]{table-layout:fixed}table[data-table-layout=fixed] td:not(.grid-checkbox-cell):not(.menu-cell){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}table[data-table-layout=fixed] th.grid-checkbox-cell,table[data-table-layout=fixed] td.grid-checkbox-cell{width:var(--exm-table-checkbox-cell-width)}table[data-table-layout=fixed] th.no-ellipsis,table[data-table-layout=fixed] td.no-ellipsis{text-overflow:initial}table thead tr,table thead th{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}table tbody tr,table tbody td,table tfoot tr,table tfoot td{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit)}td{height:var(--exm-table-td-height)}.grid-toolbar th{padding:0;text-align:left}.grid-toolbar th>*{overflow-x:auto}.grid-columns th{height:var(--exm-table-th-height);font-weight:500;font-style:normal;font-stretch:normal;text-transform:uppercase;line-height:1.33;letter-spacing:2px;color:var(--exm-table-th-color);background-color:var(--exm-table-th-background-color);vertical-align:middle;text-align:left;user-select:none;white-space:nowrap}.grid-columns th>span{vertical-align:middle;max-width:100%;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.grid-columns th svg{fill:var(--exm-table-th-color)}.grid-columns th,tbody td{padding-left:16px}.grid-columns th:last-child,tbody td:last-child{padding-right:10px}th,td{border-top:1px solid var(--exm-table-row-divider-color)}tbody td{height:var(--exm-table-td-height);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:0.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);font-weight:normal;font-style:normal;font-stretch:normal;line-height:1.43px;letter-spacing:.3px;color:var(--exm-table-color)}tbody td svg{fill:var(--exm-table-color)}th[data-sort]{cursor:pointer}th[data-sort]:hover{color:var(--exm-table-th-sortable-hover-color)}th[data-sort]::after{display:inline-block;content:"";-webkit-mask-image:var(--exm-arrow-upward-url);mask-image:var(--exm-arrow-upward-url);background-color:currentColor;background-size:contain;height:var(--exm-table-th-sort-icon-height);width:var(--exm-table-th-sort-icon-width);margin-left:var(--exm-table-th-sort-margin-left);vertical-align:middle;opacity:0}th[data-sort-direction]::after{opacity:1;transition:transform .1s linear}th[data-sort-direction=ASC]::after{transform:rotate(0deg)}th[data-sort-direction=DESC]::after{transform:rotate(180deg)}tbody>tr:not(.grid-row-detail):hover{color:var(--exm-table-row-hover-color);background-color:var(--exm-table-row-hover-background-color)}tbody>tr:not(.grid-row-detail):hover td{color:var(--exm-table-row-hover-color)}tbody>tr:not(.grid-row-detail):hover svg{fill:var(--exm-table-row-hover-color)}tr[data-selected]{color:var(--exm-table-row-selected-color);background-color:var(--exm-table-row-selected-background-color)}tr[data-selected] td{color:var(--exm-table-row-selected-color)}tr[data-selected] svg{fill:var(--exm-table-row-selected-color)}tbody tr[data-has-expanded-detail],tbody tr[data-has-expanded-detail]:hover,tbody tr[data-is-row-expanded]{background-color:var(--exm-table-rows-expanded-background-color);border:var(--exm-table-rows-expanded-border)}tbody tr[data-has-expanded-detail] td,tbody tr[data-has-expanded-detail]:hover td,tbody tr[data-is-row-expanded] td{color:var(--exm-table-rows-expanded-color)}tbody tr[data-has-expanded-detail] td svg,tbody tr[data-has-expanded-detail]:hover td svg,tbody tr[data-is-row-expanded] td svg{fill:var(--exm-table-rows-expanded-color)}tbody tr[data-is-row-expanded] td{border-bottom:none}tbody tr[data-has-expanded-detail] td,tbody tr[data-has-expanded-detail]:hover td{border-bottom:var(--exm-table-rows-expanded-divider-border)}tr.grid-row-detail{display:none}tr.grid-row-detail[data-is-row-expanded]{display:table-row}tr.grid-row-detail td{padding:20px}tr .grid-icon-rotate[data-is-expanded]>*{transition:transform .1s linear;transform:rotate(180deg)}tr .grid-icon-rotate[data-is-expandable]:not([data-is-expanded])>*{transition:transform .1s linear;transform:rotate(0deg)}.grid-row-drag-handler{cursor:move;vertical-align:middle}.grid-row-drag-handler>*{vertical-align:middle}tr.dragged{background-color:var(--exm-table-row-dragged-background-color);opacity:.25;box-shadow:2px 2px 5px rgba(0,0,0,.5) inset}tr.cloned{background-color:var(--exm-table-row-dragged-background-color);width:100%;box-sizing:border-box;box-shadow:2px 2px 5px rgba(0,0,0,.5);opacity:.9}tr td.grid-cell-visible-on-hover{text-align:center}tr td.grid-cell-visible-on-hover>*{visibility:hidden}tr:hover td.grid-cell-visible-on-hover>*,tr[data-has-expanded-detail] td.grid-cell-visible-on-hover>*{visibility:visible}tr td.grid-col-number,tr th.grid-col-number{padding-right:var(--exm-table-col-number-padding-right);text-align:right}tr th.grid-col-number>span{width:100%}`;
|
|
3
|
+
export default style;
|
|
4
|
+
//# sourceMappingURL=exm-grid-styles-css.js.map
|