@exmg/exm-grid 1.1.10 → 1.1.11

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 (10) hide show
  1. package/dist/search/exm-toolbar-search.d.ts +7 -7
  2. package/dist/search/exm-toolbar-search.js +27 -132
  3. package/dist/styles/exm-grid-base-toolbar-styles-css.js +7 -12
  4. package/dist/styles/exm-grid-styles-css.js +0 -2
  5. package/dist/table/exm-grid-base-toolbar.js +7 -4
  6. package/dist/table/exm-grid-pagination.js +0 -36
  7. package/dist/table/exm-grid-toolbar-css.d.ts +1 -0
  8. package/dist/table/exm-grid-toolbar-css.js +10 -0
  9. package/dist/table/exm-grid-toolbar.js +10 -94
  10. package/package.json +4 -3
package/dist/search/exm-toolbar-search.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { ExmgElement } from '@exmg/lit-base/index.js';
2
+ import '@exmg/exm-search/exm-search.js';
2
3
  import '@material/web/icon/icon.js';
3
4
  import '@material/web/iconbutton/icon-button.js';
4
5
  import '@material/web/focus/md-focus-ring.js';
5
6
  export declare class ToolbarSearch extends ExmgElement {
6
- _isSearch: boolean;
7
+ private isSearch;
7
8
  filterValue?: string | null;
8
9
  placeHolder: string;
9
10
  search?: HTMLInputElement;
@@ -11,12 +12,11 @@ export declare class ToolbarSearch extends ExmgElement {
11
12
  private _debouncer;
12
13
  render(): import("lit-html").TemplateResult<1>;
13
14
  _getValue(): string;
14
- _handleClear(e: CustomEvent): void;
15
- _handleKeyUp(e: KeyboardEvent): void;
16
- _notifyChange(): void;
17
- _handleInputBlur(): void;
18
- _hideSearch(): void;
19
- _showSearch(): void;
15
+ private handleKeyUp;
16
+ private notifyChange;
17
+ private handleInputBlur;
18
+ private hideSearch;
19
+ private showSearch;
20
20
  }
21
21
  declare global {
22
22
  interface HTMLElementTagNameMap {
package/dist/search/exm-toolbar-search.js CHANGED
@@ -1,74 +1,45 @@
1
1
  import { __decorate } from "tslib";
2
- import { html, css } from 'lit';
2
+ import { css, html } from 'lit';
3
3
  import { property, customElement, query, state } from 'lit/decorators.js';
4
4
  import { ExmgElement } from '@exmg/lit-base/index.js';
5
5
  import { classMap } from 'lit/directives/class-map.js';
6
6
  import { async, debounce } from '@exmg/lit-base/index.js';
7
+ import '@exmg/exm-search/exm-search.js';
7
8
  import '@material/web/icon/icon.js';
8
9
  import '@material/web/iconbutton/icon-button.js';
9
10
  import '@material/web/focus/md-focus-ring.js';
10
11
  let ToolbarSearch = class ToolbarSearch extends ExmgElement {
11
12
  constructor() {
12
13
  super(...arguments);
13
- this._isSearch = false;
14
+ this.isSearch = false;
14
15
  this.placeHolder = 'Search';
15
16
  }
16
17
  render() {
17
18
  const classMapValues = {
18
- search: this._isSearch,
19
+ search: this.isSearch,
19
20
  };
20
21
  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>
22
+ <exm-search
23
+ class=${classMap(classMapValues)}
24
+ @click=${this.showSearch}
25
+ placeholder=${this.placeHolder}
26
+ value=${this.filterValue ? this.filterValue : ''}
27
+ onfocus="let value = this.value; this.value = null; this.value = value"
28
+ @search-value-change=${this.handleKeyUp}
29
+ @search-blur=${this.handleInputBlur}
30
+ ></exm-search>
50
31
  `;
51
32
  }
52
33
  _getValue() {
53
34
  return this.filterValue || this.placeHolder;
54
35
  }
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();
36
+ handleKeyUp({ detail }) {
37
+ if (this.filterValue !== detail.value) {
38
+ this.filterValue = detail.value;
39
+ this.notifyChange();
69
40
  }
70
41
  }
71
- _notifyChange() {
42
+ notifyChange() {
72
43
  this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
73
44
  this.dispatchEvent(new CustomEvent('exm-grid-toolbar-search-changed', {
74
45
  bubbles: false,
@@ -77,106 +48,30 @@ let ToolbarSearch = class ToolbarSearch extends ExmgElement {
77
48
  }));
78
49
  });
79
50
  }
80
- _handleInputBlur() {
81
- this._hideSearch();
51
+ handleInputBlur() {
52
+ this.hideSearch();
82
53
  }
83
- _hideSearch() {
84
- this._isSearch = false;
54
+ hideSearch() {
55
+ this.isSearch = false;
85
56
  }
86
- _showSearch() {
87
- if (this._isSearch)
57
+ showSearch() {
58
+ if (this.isSearch) {
88
59
  return;
89
- this._isSearch = true;
60
+ }
61
+ this.isSearch = true;
90
62
  setTimeout(() => this.shadowRoot.querySelector('#searchInput').focus(), 200);
91
63
  }
92
64
  };
93
65
  ToolbarSearch.styles = [
94
66
  css `
95
67
  :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
- }
146
- .search > div {
147
68
  width: 100%;
148
- position: relative;
149
- display: flex;
150
- align-items: center;
151
- }
152
- .search input {
153
- font-size: 14px;
154
- margin: 15px 0px;
155
- padding: 2px;
156
- border: 0px;
157
- width: 100%;
158
- outline: none;
159
- background: none;
160
- box-sizing: border-box;
161
- }
162
- .clear-button {
163
- position: absolute;
164
- right: 0;
165
- background: transparent;
166
- border: none !important;
167
- font-size: 0;
168
- margin-right: 1rem;
169
- color: var(--exm-table-color, black);
170
- }
171
-
172
- md-focus-ring {
173
- --md-focus-ring-shape: 16px;
174
69
  }
175
70
  `,
176
71
  ];
177
72
  __decorate([
178
73
  state()
179
- ], ToolbarSearch.prototype, "_isSearch", void 0);
74
+ ], ToolbarSearch.prototype, "isSearch", void 0);
180
75
  __decorate([
181
76
  property({ type: String })
182
77
  ], ToolbarSearch.prototype, "filterValue", void 0);
package/dist/styles/exm-grid-base-toolbar-styles-css.js CHANGED
@@ -15,15 +15,18 @@ export const style = css `
15
15
  }
16
16
 
17
17
  .wrapper {
18
- display: flex;
19
- flex: 1;
20
- flex-direction: row;
18
+ display: grid;
19
+ grid-template-columns: 1fr auto auto auto;
21
20
  align-items: center;
22
21
  padding: 10px 16px 10px 16px;
23
22
  overflow-x: var(--exm-theme-table-toolbar-overflow-x, initial);
24
23
  white-space: nowrap;
25
24
  }
26
25
 
26
+ .wrapper.has-action {
27
+ grid-template-columns: auto 1fr auto auto auto;
28
+ }
29
+
27
30
  .wrapper.active {
28
31
  --active-toolbar-bg-color: var(--exm-theme-table-toolbar-active-bg-color, var(--md-sys-color-secondary-container));
29
32
  --active-toolbar-color: var(--exm-theme-table-toolbar-active-color, var(--md-sys-color-on-secondary-container));
@@ -39,10 +42,8 @@ export const style = css `
39
42
 
40
43
  .wrapper.active .description {
41
44
  color: var(--active-toolbar-color);
42
- flex: 1;
43
45
  margin-left: 8px;
44
46
  }
45
-
46
47
  .wrapper .seperator {
47
48
  min-height: 32px;
48
49
  }
@@ -54,19 +55,12 @@ export const style = css `
54
55
  .wrapper .description {
55
56
  -moz-osx-font-smoothing: grayscale;
56
57
  -webkit-font-smoothing: antialiased;
57
- font-family: Roboto, sans-serif;
58
58
  font-family: var(--mdc-typography-headline5-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
59
- font-size: 1.5rem;
60
59
  font-size: var(--mdc-typography-headline5-font-size, 1.5rem);
61
- line-height: 2rem;
62
60
  line-height: var(--mdc-typography-headline5-line-height, 2rem);
63
- font-weight: 400;
64
61
  font-weight: var(--mdc-typography-headline5-font-weight, 400);
65
- letter-spacing: normal;
66
62
  letter-spacing: var(--mdc-typography-headline5-letter-spacing, normal);
67
- text-decoration: inherit;
68
63
  text-decoration: var(--mdc-typography-headline5-text-decoration, inherit);
69
- text-transform: inherit;
70
64
  text-transform: var(--mdc-typography-headline5-text-transform, inherit);
71
65
  color: var(--toolbar-color);
72
66
  font-size: 1.25rem;
@@ -75,6 +69,7 @@ export const style = css `
75
69
  flex: 1;
76
70
  display: flex;
77
71
  align-items: center;
72
+ width: 100%;
78
73
  }
79
74
 
80
75
  .actions {
package/dist/styles/exm-grid-styles-css.js CHANGED
@@ -47,8 +47,6 @@ export const style = css `
47
47
  --exm-table-th-sort-icon-width: var(--exm-theme-table-th-sort-icon-width, 1em);
48
48
  --exm-table-col-number-padding-right: var(--exm-theme-table-col-number-padding-right, 10px);
49
49
  --exm-table-checkbox-cell-width: var(--exm-theme-table-checkbox-cell-width, 24px);
50
- --exm-paper-combobox-selected-item-color: var(var(--md-sys-color-primary), #000000);
51
- --exm-paper-combobox-color: var(--md-sys-color-on-surface);
52
50
  --exm-table-toolbar-setting-position: var(--exm-theme-table-toolbar-setting-position, absolute);
53
51
  }
54
52
 
package/dist/table/exm-grid-base-toolbar.js CHANGED
@@ -3,6 +3,7 @@ import { html } from 'lit';
3
3
  import { customElement, property, state } from 'lit/decorators.js';
4
4
  import { ExmgElement } from '@exmg/lit-base/index.js';
5
5
  import { style } from '../styles/exm-grid-base-toolbar-styles-css.js';
6
+ import { classMap } from 'lit/directives/class-map.js';
6
7
  /**
7
8
  * ### Styling
8
9
  * The following custom properties are available for styling:
@@ -43,18 +44,20 @@ let ExmGridBaseToolbar = class ExmGridBaseToolbar extends ExmgElement {
43
44
  super.disconnectedCallback();
44
45
  }
45
46
  render() {
47
+ const classNames = { active: this.active, 'has-action': this.actionsCount > 0 };
46
48
  return html `
47
- <div class="wrapper ${this.active ? 'active' : ''}">
49
+ <div class="wrapper ${classMap(classNames)}">
48
50
  ${this.actionsCount > 0
49
51
  ? html `
50
52
  <div class="actions">
51
53
  <slot name="actions"></slot>
52
54
  </div>
55
+ <div class="seperator ${this.actionsCount > 0 && !this.disableSeperator ? 'with-action-separator' : ''}">
56
+ &nbsp;
57
+ </div>
53
58
  `
54
59
  : ''}
55
- <div class="seperator ${this.actionsCount > 0 && !this.disableSeperator ? 'with-action-separator' : ''}">
56
- &nbsp;
57
- </div>
60
+
58
61
  <div class="description">
59
62
  <slot name="description"></slot>
60
63
  </div>
package/dist/table/exm-grid-pagination.js CHANGED
@@ -111,42 +111,6 @@ let ExmGridPagination = class ExmGridPagination extends ExmgElement {
111
111
  return html `
112
112
  <style>
113
113
  :host {
114
- --paper-item-focused: {
115
- background-color: var(
116
- --exm-theme-table-toolbar-filter-item-active-bg-color,
117
- var(--exm-theme-table-on-surface-low, var(--md-sys-color-surface))
118
- );
119
- }
120
- --paper-item-selected: {
121
- background-color: var(
122
- --exm-theme-table-toolbar-filter-item-active-bg-color,
123
- var(--exm-theme-table-on-surface-low, var(--md-sys-color-surface))
124
- );
125
- }
126
- --paper-button-ink-color: var(
127
- --exm-theme-table-toolbar-filter-item-active-bg-color,
128
- var(--md-sys-color-surface)
129
- );
130
-
131
- --exm-paper-combobox-selected-item-color: var(
132
- --exm-theme-table-pagination-color,
133
- var(--md-sys-color-on-surface)
134
- );
135
- --exm-paper-combobox-selected-item-bg-color: var(--exm-theme-table-pagination-bg-color, transparent);
136
- --exm-paper-combobox-dropdown-button-color: var(
137
- --exm-theme-table-pagination-color,
138
- var(--md-sys-color-on-surface)
139
- );
140
- --exm-paper-combobox-dropdown-button-bg-color: var(--exm-theme-table-pagination-bg-color, transparent);
141
- --exm-paper-combobox-dropdown-list-color: var(
142
- --exm-theme-table-pagination-color,
143
- var(--md-sys-color-on-surface)
144
- );
145
- --exm-paper-combobox-dropdown-list-bg-color: var(
146
- --exm-theme-table-pagination-bg-color,
147
- var(--md-sys-color-surface)
148
- );
149
-
150
114
  md-icon-button {
151
115
  fill: var(--md-sys-color-on-surface);
152
116
  }
package/dist/table/exm-grid-toolbar-css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const style: import("lit").CSSResult;
package/dist/table/exm-grid-toolbar-css.js ADDED
@@ -0,0 +1,10 @@
1
+ import { css } from 'lit';
2
+ export const style = css `
3
+ .title {
4
+ display: flex;
5
+ align-items: center;
6
+ height: 48px;
7
+ flex: 1;
8
+ }
9
+ `;
10
+ //# sourceMappingURL=exm-grid-toolbar-css.js.map
package/dist/table/exm-grid-toolbar.js CHANGED
@@ -82,7 +82,7 @@ let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
82
82
  `);
83
83
  }
84
84
  renderSearch() {
85
- return html `<exm-toolbar-search placeHolder=${this.searchPlaceholder}></exm-toolbar-search> `;
85
+ return html `<exm-toolbar-search slot="description" placeHolder=${this.searchPlaceholder}></exm-toolbar-search> `;
86
86
  }
87
87
  renderDescription() {
88
88
  return html ` ${this.description} `;
@@ -141,102 +141,10 @@ let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
141
141
  }
142
142
  render() {
143
143
  return html `
144
- <style>
145
- :host {
146
- --paper-item-focused: {
147
- background-color: var(
148
- --exm-theme-table-toolbar-filter-item-active-bg-color,
149
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
150
- );
151
- }
152
- --paper-item-selected: {
153
- background-color: var(
154
- --exm-theme-table-toolbar-filter-item-active-bg-color,
155
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
156
- );
157
- }
158
- --paper-button-ink-color: var(
159
- --exm-theme-table-toolbar-filter-item-active-bg-color,
160
- var(--mdc-theme-surface)
161
- );
162
- --paper-input-container-color: var(--exm-grid-toolbar-on-surface-color, var(--mdc-theme-on-surface));
163
- --paper-input-container-focus-color: var(--exm-grid-toolbar-on-surface-color, var(--mdc-theme-primary));
164
-
165
- --exm-paper-combobox-selected-item-color: var(
166
- --exm-grid-toolbar-on-surface-color,
167
- var(--mdc-theme-on-surface)
168
- );
169
- --exm-paper-combobox-selected-item-bg-color: var(--exm-grid-toolbar-surface-color, transparent);
170
- --exm-paper-combobox-dropdown-button-color: var(
171
- --exm-grid-toolbar-on-surface-color,
172
- var(--mdc-theme-on-surface)
173
- );
174
- --exm-paper-combobox-dropdown-button-bg-color: var(--exm-grid-toolbar-surface-color, transparent);
175
- --exm-paper-combobox-dropdown-list-color: var(
176
- --exm-grid-toolbar-on-surface-color,
177
- var(--mdc-theme-on-surface)
178
- );
179
- --exm-paper-combobox-dropdown-list-bg-color: var(
180
- --exm-grid-toolbar-surface-color,
181
- var(--mdc-theme-surface)
182
- );
183
- }
184
- :host exm-grid-base-toolbar[active] {
185
- --paper-item-focused: {
186
- background-color: var(
187
- --exm-theme-table-toolbar-filter-item-active-bg-color,
188
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
189
- );
190
- }
191
- --paper-item-selected: {
192
- background-color: var(
193
- --exm-theme-table-toolbar-filter-item-active-bg-color,
194
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
195
- );
196
- }
197
- --paper-button-ink-color: var(
198
- --exm-theme-table-toolbar-filter-item-active-bg-color,
199
- var(--mdc-theme-secondary)
200
- );
201
- --paper-input-container-color: var(--exm-grid-toolbar-active-on-surface-color, var(--mdc-theme-on-surface));
202
- --paper-input-container-focus-color: var(
203
- --exm-grid-toolbar-active-on-surface-color,
204
- var(--mdc-theme-primary)
205
- );
206
-
207
- --exm-paper-combobox-selected-item-color: var(
208
- --exm-grid-toolbar-active-on-surface-color,
209
- var(--mdc-theme-on-surface)
210
- );
211
- --exm-paper-combobox-selected-item-bg-color: var(--exm-grid-toolbar-bg-active-surface-color, transparent);
212
- --exm-paper-combobox-dropdown-button-color: var(
213
- --exm-grid-toolbar-active-on-surface-color,
214
- var(--mdc-theme-on-surface)
215
- );
216
- --exm-paper-combobox-dropdown-button-bg-color: var(--exm-grid-toolbar-bg-active-surface-color, transparent);
217
- --exm-paper-combobox-dropdown-list-color: var(
218
- --exm-grid-toolbar-active-on-surface-color,
219
- var(--mdc-theme-on-surface)
220
- );
221
- --exm-paper-combobox-dropdown-list-bg-color: var(
222
- --exm-grid-toolbar-bg-active-surface-color,
223
- var(--mdc-theme-surface)
224
- );
225
- }
226
- .title {
227
- display: flex;
228
- align-items: center;
229
- height: 48px;
230
- flex: 1;
231
- }
232
- .title > exm-toolbar-search {
233
- flex: 1;
234
- }
235
- </style>
236
144
  <exm-grid-base-toolbar ?disableSeperator=${this.disableSeperator}>
237
145
  <div slot="actions">${this.renderActions()}</div>
238
146
  ${this.searchEnabled
239
- ? html `<div class="title" slot="description">${this.renderSearch()}</div>`
147
+ ? html `${this.renderSearch()}`
240
148
  : html `<div class="title" slot="description">${this.renderDescription()}</div>`}
241
149
 
242
150
  <div slot="filters">${this.renderFilters()}</div>
@@ -252,6 +160,14 @@ ExmGridToolbar.styles = [
252
160
  padding-left: 10px;
253
161
  border-radius: 4px;
254
162
  }
163
+
164
+ :host {
165
+ --exm-search-container-shape: 3rem;
166
+ }
167
+
168
+ exm-search {
169
+ width: 100%;
170
+ }
255
171
  `,
256
172
  ];
257
173
  __decorate([
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@exmg/exm-grid",
3
- "version": "1.1.10",
3
+ "version": "1.1.11",
4
4
  "type": "module",
5
5
  "description": "exmg grid element",
6
6
  "contributors": [
@@ -37,7 +37,8 @@
37
37
  "directory": "packages/exm-grid"
38
38
  },
39
39
  "dependencies": {
40
- "@exmg/exm-sortable": "^1.1.10"
40
+ "@exmg/exm-search": "^1.1.11",
41
+ "@exmg/exm-sortable": "^1.1.11"
41
42
  },
42
43
  "peerDependencies": {
43
44
  "@exmg/lit-base": "^3.0.0",
@@ -51,5 +52,5 @@
51
52
  "publishConfig": {
52
53
  "access": "public"
53
54
  },
54
- "gitHead": "36f7f6dd58a96ea7edda7af31b25e679555d79c4"
55
+ "gitHead": "5a615cfa5fb07dd11e3dff848b429b9c3a0a4313"
55
56
  }