@exmg/exm-grid 1.1.4 → 1.1.5-alpha.5

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 (9) hide show
  1. package/dist/search/exm-toolbar-search.d.ts +7 -8
  2. package/dist/search/exm-toolbar-search.js +27 -143
  3. package/dist/styles/exm-grid-styles-css.js +0 -2
  4. package/dist/table/exm-grid-pagination.js +0 -36
  5. package/dist/table/exm-grid-toolbar-css.d.ts +1 -0
  6. package/dist/table/exm-grid-toolbar-css.js +14 -0
  7. package/dist/table/exm-grid-toolbar.d.ts +0 -1
  8. package/dist/table/exm-grid-toolbar.js +8 -93
  9. package/package.json +7 -16
package/dist/search/exm-toolbar-search.d.ts CHANGED
@@ -1,22 +1,21 @@
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;
10
- static styles: import("lit").CSSResult[];
11
11
  private _debouncer;
12
12
  render(): import("lit-html").TemplateResult<1>;
13
13
  _getValue(): string;
14
- _handleClear(e: CustomEvent): void;
15
- _handleKeyUp(e: KeyboardEvent): void;
16
- _notifyChange(): void;
17
- _handleInputBlur(): void;
18
- _hideSearch(): void;
19
- _showSearch(): void;
14
+ private handleKeyUp;
15
+ private notifyChange;
16
+ private handleInputBlur;
17
+ private hideSearch;
18
+ private showSearch;
20
19
  }
21
20
  declare global {
22
21
  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 { 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,110 +48,23 @@ 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
- 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
65
  __decorate([
182
66
  state()
183
- ], ToolbarSearch.prototype, "_isSearch", void 0);
67
+ ], ToolbarSearch.prototype, "isSearch", void 0);
184
68
  __decorate([
185
69
  property({ type: String })
186
70
  ], ToolbarSearch.prototype, "filterValue", void 0);
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-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,14 @@
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
+ .title > exm-toolbar-search {
11
+ flex: 1;
12
+ }
13
+ `;
14
+ //# sourceMappingURL=exm-grid-toolbar-css.js.map
package/dist/table/exm-grid-toolbar.d.ts CHANGED
@@ -2,7 +2,6 @@ import { ExmgElement } from '@exmg/lit-base/index.js';
2
2
  import '@material/web/icon/icon.js';
3
3
  import '@material/web/iconbutton/icon-button.js';
4
4
  import './exm-grid-toolbar-filters.js';
5
- import '@polymer/paper-item/paper-item.js';
6
5
  import './exm-grid-base-toolbar.js';
7
6
  import './exm-grid-setting-selection-list.js';
8
7
  import '../search/exm-toolbar-search.js';
package/dist/table/exm-grid-toolbar.js CHANGED
@@ -7,7 +7,6 @@ import { repeat } from 'lit/directives/repeat.js';
7
7
  import '@material/web/icon/icon.js';
8
8
  import '@material/web/iconbutton/icon-button.js';
9
9
  import './exm-grid-toolbar-filters.js';
10
- import '@polymer/paper-item/paper-item.js';
11
10
  import './exm-grid-base-toolbar.js';
12
11
  import './exm-grid-setting-selection-list.js';
13
12
  import '../search/exm-toolbar-search.js';
@@ -142,98 +141,6 @@ let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
142
141
  }
143
142
  render() {
144
143
  return html `
145
- <style>
146
- :host {
147
- --paper-item-focused: {
148
- background-color: var(
149
- --exm-theme-table-toolbar-filter-item-active-bg-color,
150
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
151
- );
152
- }
153
- --paper-item-selected: {
154
- background-color: var(
155
- --exm-theme-table-toolbar-filter-item-active-bg-color,
156
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
157
- );
158
- }
159
- --paper-button-ink-color: var(
160
- --exm-theme-table-toolbar-filter-item-active-bg-color,
161
- var(--mdc-theme-surface)
162
- );
163
- --paper-input-container-color: var(--exm-grid-toolbar-on-surface-color, var(--mdc-theme-on-surface));
164
- --paper-input-container-focus-color: var(--exm-grid-toolbar-on-surface-color, var(--mdc-theme-primary));
165
-
166
- --exm-paper-combobox-selected-item-color: var(
167
- --exm-grid-toolbar-on-surface-color,
168
- var(--mdc-theme-on-surface)
169
- );
170
- --exm-paper-combobox-selected-item-bg-color: var(--exm-grid-toolbar-surface-color, transparent);
171
- --exm-paper-combobox-dropdown-button-color: var(
172
- --exm-grid-toolbar-on-surface-color,
173
- var(--mdc-theme-on-surface)
174
- );
175
- --exm-paper-combobox-dropdown-button-bg-color: var(--exm-grid-toolbar-surface-color, transparent);
176
- --exm-paper-combobox-dropdown-list-color: var(
177
- --exm-grid-toolbar-on-surface-color,
178
- var(--mdc-theme-on-surface)
179
- );
180
- --exm-paper-combobox-dropdown-list-bg-color: var(
181
- --exm-grid-toolbar-surface-color,
182
- var(--mdc-theme-surface)
183
- );
184
- }
185
- :host exm-grid-base-toolbar[active] {
186
- --paper-item-focused: {
187
- background-color: var(
188
- --exm-theme-table-toolbar-filter-item-active-bg-color,
189
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
190
- );
191
- }
192
- --paper-item-selected: {
193
- background-color: var(
194
- --exm-theme-table-toolbar-filter-item-active-bg-color,
195
- var(--exm-theme-table-on-surface-low, var(--mdc-theme-surface))
196
- );
197
- }
198
- --paper-button-ink-color: var(
199
- --exm-theme-table-toolbar-filter-item-active-bg-color,
200
- var(--mdc-theme-secondary)
201
- );
202
- --paper-input-container-color: var(--exm-grid-toolbar-active-on-surface-color, var(--mdc-theme-on-surface));
203
- --paper-input-container-focus-color: var(
204
- --exm-grid-toolbar-active-on-surface-color,
205
- var(--mdc-theme-primary)
206
- );
207
-
208
- --exm-paper-combobox-selected-item-color: var(
209
- --exm-grid-toolbar-active-on-surface-color,
210
- var(--mdc-theme-on-surface)
211
- );
212
- --exm-paper-combobox-selected-item-bg-color: var(--exm-grid-toolbar-bg-active-surface-color, transparent);
213
- --exm-paper-combobox-dropdown-button-color: var(
214
- --exm-grid-toolbar-active-on-surface-color,
215
- var(--mdc-theme-on-surface)
216
- );
217
- --exm-paper-combobox-dropdown-button-bg-color: var(--exm-grid-toolbar-bg-active-surface-color, transparent);
218
- --exm-paper-combobox-dropdown-list-color: var(
219
- --exm-grid-toolbar-active-on-surface-color,
220
- var(--mdc-theme-on-surface)
221
- );
222
- --exm-paper-combobox-dropdown-list-bg-color: var(
223
- --exm-grid-toolbar-bg-active-surface-color,
224
- var(--mdc-theme-surface)
225
- );
226
- }
227
- .title {
228
- display: flex;
229
- align-items: center;
230
- height: 48px;
231
- flex: 1;
232
- }
233
- .title > exm-toolbar-search {
234
- flex: 1;
235
- }
236
- </style>
237
144
  <exm-grid-base-toolbar ?disableSeperator=${this.disableSeperator}>
238
145
  <div slot="actions">${this.renderActions()}</div>
239
146
  ${this.searchEnabled
@@ -253,6 +160,14 @@ ExmGridToolbar.styles = [
253
160
  padding-left: 10px;
254
161
  border-radius: 4px;
255
162
  }
163
+
164
+ :host {
165
+ --exm-search-container-shape: 3rem;
166
+ }
167
+
168
+ exm-search {
169
+ width: 100%;
170
+ }
256
171
  `,
257
172
  ];
258
173
  __decorate([
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@exmg/exm-grid",
3
- "version": "1.1.4",
3
+ "version": "1.1.5-alpha.5+569284b",
4
4
  "type": "module",
5
5
  "description": "exmg grid element",
6
6
  "contributors": [
@@ -37,29 +37,20 @@
37
37
  "directory": "packages/exm-grid"
38
38
  },
39
39
  "dependencies": {
40
- "@exmg/exm-sortable": "^1.1.4",
40
+ "@exmg/exm-search": "^1.1.5-alpha.5+569284b",
41
+ "@exmg/exm-sortable": "^1.1.5-alpha.5+569284b"
42
+ },
43
+ "peerDependencies": {
41
44
  "@exmg/lit-base": "^3.0.0",
42
- "@material/typography": "^14.0.0",
43
45
  "@material/web": "^2.2.0",
44
- "@polymer/iron-dropdown": "^3.0.1",
45
- "@polymer/iron-flex-layout": "^3.0.1",
46
- "@polymer/iron-input": "^3.0.1",
47
- "@polymer/paper-input": "^3.2.1",
48
- "@polymer/paper-item": "^3.0.1",
49
- "@polymer/paper-listbox": "^3.0.1",
50
- "@polymer/paper-menu-button": "^3.0.1",
51
- "@polymer/paper-styles": "^3.0.1",
52
46
  "@polymer/polymer": "^3.4.1",
53
- "lit": "^3.0.0",
47
+ "lit": "^3.2.1",
54
48
  "tslib": "^2.6.2"
55
49
  },
56
- "devDependencies": {
57
- "@exmg/lit-cli": "1.1.13"
58
- },
59
50
  "license": "MIT",
60
51
  "scripts": {},
61
52
  "publishConfig": {
62
53
  "access": "public"
63
54
  },
64
- "gitHead": "0fcf5110c9538fe06c9400afb133a5618f0b1a14"
55
+ "gitHead": "569284b73ae26df21846b0673aae5a14af49d594"
65
56
  }