@exmg/exm-grid 1.1.9 → 1.1.10-alpha.19

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 (13) hide show
  1. package/dist/search/exm-toolbar-search.d.ts +8 -8
  2. package/dist/search/exm-toolbar-search.js +28 -137
  3. package/dist/styles/exm-grid-base-toolbar-styles-css.js +8 -13
  4. package/dist/styles/exm-grid-common-styles-css.js +1 -1
  5. package/dist/styles/exm-grid-pagination-styles-css.js +1 -1
  6. package/dist/styles/exm-grid-styles-css.js +2 -4
  7. package/dist/table/exm-grid-base-toolbar.js +7 -4
  8. package/dist/table/exm-grid-pagination.js +0 -36
  9. package/dist/table/exm-grid-toolbar-css.d.ts +1 -0
  10. package/dist/table/exm-grid-toolbar-css.js +10 -0
  11. package/dist/table/exm-grid-toolbar.d.ts +0 -1
  12. package/dist/table/exm-grid-toolbar.js +10 -95
  13. package/package.json +7 -16
package/dist/search/exm-toolbar-search.d.ts CHANGED
@@ -1,22 +1,22 @@
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
11
  static styles: import("lit").CSSResult[];
11
- private _debouncer;
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,75 +1,46 @@
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() {
72
- this._debouncer = debounce.Debouncer.debounce(this._debouncer, async.timeOut.after(200), () => {
42
+ notifyChange() {
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,
75
46
  composed: true,
@@ -77,110 +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
- /* outline-color: rgb(77, 144, 254);
146
- outline-offset: 1px;
147
- outline-style: auto;
148
- outline-width: 1px; */
149
- }
150
- .search > div {
151
68
  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
69
  }
179
70
  `,
180
71
  ];
181
72
  __decorate([
182
73
  state()
183
- ], ToolbarSearch.prototype, "_isSearch", void 0);
74
+ ], ToolbarSearch.prototype, "isSearch", void 0);
184
75
  __decorate([
185
76
  property({ type: String })
186
77
  ], ToolbarSearch.prototype, "filterValue", void 0);
package/dist/styles/exm-grid-base-toolbar-styles-css.js CHANGED
@@ -9,21 +9,24 @@ export const style = css `
9
9
  border-top-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
10
10
  border-top-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
11
11
  --toolbar-bg-color: var(--exm-theme-table-toolbar-background-color, var(--md-sys-color-surface-container));
12
- --toolbar-color: var(--exm-theme-table-toolbar-color, var(--md-sys-color-on-surface-container));
12
+ --toolbar-color: var(--exm-theme-table-toolbar-color, var(--md-sys-color-on-surface));
13
13
  background-color: var(--toolbar-bg-color);
14
14
  color: var(--toolbar-color);
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-common-styles-css.js CHANGED
@@ -6,7 +6,7 @@ export const style = css `
6
6
  -webkit-font-smoothing: antialiased;
7
7
  font-family: Roboto, sans-serif;
8
8
  font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
9
- color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));
9
+ color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface));
10
10
  border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
11
11
  border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
12
12
  }
package/dist/styles/exm-grid-pagination-styles-css.js CHANGED
@@ -6,7 +6,7 @@ export const style = css `
6
6
  -webkit-font-smoothing: antialiased;
7
7
  font-family: Roboto, sans-serif;
8
8
  font-family: var(--mdc-typography-font-family, Roboto, sans-serif);
9
- color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface-container));
9
+ color: var(--exm-theme-table-pagination-color, var(--md-sys-color-on-surface));
10
10
  border-bottom-left-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
11
11
  border-bottom-right-radius: var(--exm-theme-table-radius, var(--exm-surface-border-radius, 16px));
12
12
  }
package/dist/styles/exm-grid-styles-css.js CHANGED
@@ -9,7 +9,7 @@ export const style = css `
9
9
  --exm-arrow-upward-url: url('/node_modules/@exmg/exm-grid/assets/arrow-upward.svg');
10
10
  --exm-table-card-width: var(--exm-theme-table-card-width, 100%);
11
11
  --exm-table-card-margin-bottom: var(--exm-theme-table-card-margin-bottom, 5px);
12
- --exm-table-color: var(--exm-theme-table-on-surface, var(--md-sys-color-on-surface-container));
12
+ --exm-table-color: var(--exm-theme-table-on-surface, var(--md-sys-color-on-surface));
13
13
  --exm-table-card-background-color: var(--exm-theme-table-surface, var(--md-sys-color-surface-container));
14
14
  --exm-table-row-divider-color: var(--exm-theme-table-row-divider-color, var(--md-sys-color-surface-variant));
15
15
  --exm-table-row-selected-color: var(
@@ -36,7 +36,7 @@ export const style = css `
36
36
  var(--md-sys-color-surface-container-low)
37
37
  );
38
38
  --exm-table-rows-expanded-color: var(--exm-theme-table-rows-expanded-color, var(--md-sys-color-on-surface));
39
- --exm-table-th-color: var(--exm-theme-table-th-on-surface, var(--md-sys-color-on-surface-container));
39
+ --exm-table-th-color: var(--exm-theme-table-th-on-surface, var(--md-sys-color-on-surface));
40
40
  --exm-table-th-background-color: var(--exm-theme-table-th-surface, var(--md-sys-color-surface-container));
41
41
  --exm-table-th-sortable-hover-color: var(--exm-theme-table-th-sortable-hover-color, var(--md-sys-color-on-surface));
42
42
  --exm-table-columns-background-color: var(--exm-theme-table-columns-background-color, var(--md-sys-color-surface));
@@ -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.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';
@@ -83,7 +82,7 @@ let ExmGridToolbar = class ExmGridToolbar extends ExmgElement {
83
82
  `);
84
83
  }
85
84
  renderSearch() {
86
- 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> `;
87
86
  }
88
87
  renderDescription() {
89
88
  return html ` ${this.description} `;
@@ -142,102 +141,10 @@ 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
240
- ? html `<div class="title" slot="description">${this.renderSearch()}</div>`
147
+ ? html `${this.renderSearch()}`
241
148
  : html `<div class="title" slot="description">${this.renderDescription()}</div>`}
242
149
 
243
150
  <div slot="filters">${this.renderFilters()}</div>
@@ -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.9",
3
+ "version": "1.1.10-alpha.19+20be399",
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.9",
40
+ "@exmg/exm-search": "^1.1.10-alpha.19+20be399",
41
+ "@exmg/exm-sortable": "^1.1.10-alpha.19+20be399"
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": "ac876ab3f3d6d83a43a3944c052c8e71de300832"
55
+ "gitHead": "20be399892ecc54f71f080f17a677a370d9f2b9c"
65
56
  }