@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.
Files changed (52) hide show
  1. package/README.md +501 -0
  2. package/assets/arrow-upward.svg +7 -0
  3. package/index.d.ts +14 -0
  4. package/index.js +15 -0
  5. package/package.json +58 -0
  6. package/src/search/exm-toolbar-search.d.ts +25 -0
  7. package/src/search/exm-toolbar-search.js +197 -0
  8. package/src/styles/exm-grid-base-toolbar-styles-css.d.ts +2 -0
  9. package/src/styles/exm-grid-base-toolbar-styles-css.js +4 -0
  10. package/src/styles/exm-grid-base-toolbar-styles.scss +89 -0
  11. package/src/styles/exm-grid-common-styles-css.d.ts +2 -0
  12. package/src/styles/exm-grid-common-styles-css.js +4 -0
  13. package/src/styles/exm-grid-common-styles.scss +1 -0
  14. package/src/styles/exm-grid-pagination-styles-css.d.ts +2 -0
  15. package/src/styles/exm-grid-pagination-styles-css.js +4 -0
  16. package/src/styles/exm-grid-pagination-styles.scss +69 -0
  17. package/src/styles/exm-grid-setting-selection-list-styles-css.d.ts +2 -0
  18. package/src/styles/exm-grid-setting-selection-list-styles-css.js +4 -0
  19. package/src/styles/exm-grid-setting-selection-list-styles.scss +8 -0
  20. package/src/styles/exm-grid-styles-css.d.ts +2 -0
  21. package/src/styles/exm-grid-styles-css.js +4 -0
  22. package/src/styles/exm-grid-styles.scss +387 -0
  23. package/src/table/exm-grid-base-toolbar.d.ts +23 -0
  24. package/src/table/exm-grid-base-toolbar.js +91 -0
  25. package/src/table/exm-grid-pagination.d.ts +37 -0
  26. package/src/table/exm-grid-pagination.js +190 -0
  27. package/src/table/exm-grid-setting-selection-list.d.ts +24 -0
  28. package/src/table/exm-grid-setting-selection-list.js +124 -0
  29. package/src/table/exm-grid-smart-toolbar.d.ts +31 -0
  30. package/src/table/exm-grid-smart-toolbar.js +138 -0
  31. package/src/table/exm-grid-toolbar-filters.d.ts +36 -0
  32. package/src/table/exm-grid-toolbar-filters.js +77 -0
  33. package/src/table/exm-grid-toolbar.d.ts +42 -0
  34. package/src/table/exm-grid-toolbar.js +283 -0
  35. package/src/table/exm-grid.d.ts +130 -0
  36. package/src/table/exm-grid.js +333 -0
  37. package/src/table/featrues/exm-column-sortable.d.ts +12 -0
  38. package/src/table/featrues/exm-column-sortable.js +50 -0
  39. package/src/table/featrues/exm-row-expandable.d.ts +9 -0
  40. package/src/table/featrues/exm-row-expandable.js +42 -0
  41. package/src/table/featrues/exm-row-selectable.d.ts +20 -0
  42. package/src/table/featrues/exm-row-selectable.js +204 -0
  43. package/src/table/featrues/exm-row-sortable.d.ts +9 -0
  44. package/src/table/featrues/exm-row-sortable.js +50 -0
  45. package/src/table/types/exm-grid-smart-toolbar-types.d.ts +17 -0
  46. package/src/table/types/exm-grid-smart-toolbar-types.js +6 -0
  47. package/src/table/types/exm-grid-toolbar-types.d.ts +55 -0
  48. package/src/table/types/exm-grid-toolbar-types.js +16 -0
  49. package/src/table/types/exm-grid-types.d.ts +15 -0
  50. package/src/table/types/exm-grid-types.js +2 -0
  51. package/src/table/utils/exm-query-selectors.d.ts +12 -0
  52. 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,2 @@
1
+ export declare const style: import("lit").CSSResult;
2
+ export default style;
@@ -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,2 @@
1
+ export declare const style: import("lit").CSSResult;
2
+ export default style;
@@ -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,2 @@
1
+ export declare const style: import("lit").CSSResult;
2
+ export default style;
@@ -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,2 @@
1
+ export declare const style: import("lit").CSSResult;
2
+ export default style;
@@ -0,0 +1,4 @@
1
+ import { css } from 'lit';
2
+ export const style = css `:host{display:block;position:relative}.action{color:var(--mdc-theme-primary)}`;
3
+ export default style;
4
+ //# sourceMappingURL=exm-grid-setting-selection-list-styles-css.js.map
@@ -0,0 +1,8 @@
1
+ :host {
2
+ display: block;
3
+ position: relative;
4
+ }
5
+
6
+ .action {
7
+ color: var(--mdc-theme-primary);
8
+ }
@@ -0,0 +1,2 @@
1
+ export declare const style: import("lit").CSSResult;
2
+ export default style;
@@ -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