@neovici/cosmoz-omnitable 14.4.0 → 14.6.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.
@@ -165,10 +165,9 @@ export default css`
165
165
  --cosmoz-omnitable-header-font-size,
166
166
  16px
167
167
  );
168
- --cosmoz-input-padding: 0;
168
+ --cosmoz-input-padding: var(--cosmoz-omnitable-header-input-padding, 0);
169
169
  --cosmoz-input-label-text-transform: var(--cosmoz-omnitable-header-text-transform, none);
170
170
  --cosmoz-input-label-font-weight: var(--cosmoz-omnitable-header-font-weight, normal);
171
- --cosmoz-input-padding: 0;
172
171
  }
173
172
 
174
173
  cosmoz-omnitable-header-row {
@@ -46,69 +46,103 @@ class AmountRangeInput extends rangeInputMixin(
46
46
  this._onDropdownOpenedChanged(event);
47
47
  };
48
48
 
49
- return html`
50
- <style>
51
- paper-dropdown-menu {
52
- --iron-icon-width: 0;
53
- display: block;
54
- }
55
- </style>
56
- <cosmoz-clear-button
57
- @click=${() => this.resetFilter()}
58
- ?visible=${this.hasFilter()}
59
- ></cosmoz-clear-button>
60
- <paper-dropdown-menu
61
- label=${this.title}
62
- placeholder=${ifDefined(this._filterText)}
63
- class="external-values-${this.externalValues}"
64
- title=${this._tooltip}
65
- horizontal-align="right"
66
- ?opened=${this.headerFocused}
67
- @opened-changed=${onOpenedChanged}
68
- >
69
- <div
70
- class="dropdown-content"
71
- slot="dropdown-content"
72
- style="padding: 15px; min-width: 150px;"
73
- >
74
- <h3 style="margin: 0;">${this.title}</h3>
75
- <cosmoz-input
76
- class=${this._fromClasses}
77
- type="number"
78
- title=${_('Minimum amount')}
79
- label=${_('Min amount')}
80
- .value=${this._filterInput?.min}
81
- @value-changed=${(event) => {
82
- this.set('_filterInput.min', event.detail.value);
83
- }}
84
- @blur=${(event) => this._onBlur(event)}
85
- @keydown=${(event) => this._onKeyDown(event)}
86
- min=${this._toInputStringAmount(this._limit.fromMin)}
87
- max=${this._toInputStringAmount(this._limit.fromMax)}
88
- ><div slot="suffix" suffix>
89
- ${this.filter?.min?.currency}
90
- </div></cosmoz-input
91
- >
92
- <cosmoz-input
93
- class=${this._toClasses}
94
- type="number"
95
- title=${_('Maximum amount')}
96
- label=${_('Max amount')}
97
- .value=${this._filterInput?.max}
98
- @value-changed=${(event) => {
99
- this.set('_filterInput.max', event.detail.value);
100
- }}
101
- @blur=${(event) => this._onBlur(event)}
102
- @keydown=${(event) => this._onKeyDown(event)}
103
- min=${this._toInputStringAmount(this._limit.toMin)}
104
- max=${this._toInputStringAmount(this._limit.toMax)}
105
- ><div slot="suffix" suffix>
106
- ${this.filter?.max?.currency}
107
- </div></cosmoz-input
108
- >
109
- </div>
110
- </paper-dropdown-menu>
111
- `;
49
+ return html`
50
+ <style>
51
+ paper-dropdown-menu {
52
+ --iron-icon-width: 0;
53
+ display: block;
54
+ text-align: right;
55
+ }
56
+
57
+ .dropdown-content h3 {
58
+ font-weight: 500;
59
+ font-size: 13px;
60
+ margin: 0;
61
+ font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
62
+ }
63
+
64
+ .dropdown-content {
65
+ padding: 10px 10px 10px 10px;
66
+ min-width: 150px;
67
+ text-align: left;
68
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
69
+ border-radius: 6px;
70
+ backdrop-filter: blur(16px) saturate(180%);
71
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
72
+ box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
73
+ }
74
+
75
+ cosmoz-input[type="number"] {
76
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
77
+ border-radius: 6px;
78
+ border: 1px solid #d1d1d6;
79
+ box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
80
+ padding: 2px 8px;
81
+ margin-bottom: 6px;
82
+ min-height: 28px;
83
+ transition: border-color 0.2s, box-shadow 0.2s;
84
+ }
85
+
86
+ cosmoz-input[type="number"]:focus-within {
87
+ border-color: var(--cz-accent-color, #007aff);
88
+ box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
89
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
90
+ }
91
+ </style>
92
+ <cosmoz-clear-button
93
+ @click=${() => this.resetFilter()}
94
+ ?visible=${this.hasFilter()}
95
+ ></cosmoz-clear-button>
96
+ <paper-dropdown-menu
97
+ label=${this.title}
98
+ placeholder=${ifDefined(this._filterText)}
99
+ class="external-values-${this.externalValues}"
100
+ title=${this._tooltip}
101
+ horizontal-align="right"
102
+ ?opened=${this.headerFocused}
103
+ @opened-changed=${onOpenedChanged}
104
+ >
105
+ <div class="dropdown-content" slot="dropdown-content">
106
+ <h3 style="margin: 0;">${this.title}</h3>
107
+ <cosmoz-input
108
+ class=${this._fromClasses}
109
+ type="number"
110
+ title=${_('Minimum amount')}
111
+ label=${_('Min amount')}
112
+ .value=${this._filterInput?.min}
113
+ @value-changed=${(event) => {
114
+ this.set('_filterInput.min', event.detail.value);
115
+ }}
116
+ @blur=${(event) => this._onBlur(event)}
117
+ @keydown=${(event) => this._onKeyDown(event)}
118
+ min=${this._toInputStringAmount(this._limit.fromMin)}
119
+ max=${this._toInputStringAmount(this._limit.fromMax)}
120
+ >
121
+ <div slot="suffix" suffix>
122
+ ${this.filter?.min?.currency}
123
+ </div>
124
+ </cosmoz-input>
125
+ <cosmoz-input
126
+ class=${this._toClasses}
127
+ type="number"
128
+ title=${_('Maximum amount')}
129
+ label=${_('Max amount')}
130
+ .value=${this._filterInput?.max}
131
+ @value-changed=${(event) => {
132
+ this.set('_filterInput.max', event.detail.value);
133
+ }}
134
+ @blur=${(event) => this._onBlur(event)}
135
+ @keydown=${(event) => this._onKeyDown(event)}
136
+ min=${this._toInputStringAmount(this._limit.toMin)}
137
+ max=${this._toInputStringAmount(this._limit.toMax)}
138
+ >
139
+ <div slot="suffix" suffix>
140
+ ${this.filter?.max?.currency}
141
+ </div>
142
+ </cosmoz-input>
143
+ </div>
144
+ </paper-dropdown-menu>
145
+ `;
112
146
  }
113
147
 
114
148
  /**
@@ -11,60 +11,88 @@ class DateRangeInput extends dateInputMixin(
11
11
  ) {
12
12
  // eslint-disable-next-line max-lines-per-function
13
13
  render() {
14
- return html`
15
- <style>
16
- paper-dropdown-menu {
17
- --iron-icon-width: 0;
18
- display: block;
19
- }
20
- cosmoz-input {
21
- --paper-font-subhead_-_font-size: 16px;
22
- margin-bottom: 6px;
23
- }
24
- </style>
25
- <cosmoz-clear-button
26
- @click=${() => this.resetFilter()}
27
- ?visible=${this.hasFilter()}
28
- ></cosmoz-clear-button>
29
- <paper-dropdown-menu
30
- label=${this.title}
31
- placeholder=${ifDefined(this._filterText)}
32
- class="external-values-${this.externalValues}"
33
- title=${this._tooltip}
34
- horizontal-align="right"
35
- ?opened=${this.headerFocused}
36
- @opened-changed=${(event) => {
37
- // TODO: check ots integration
38
- this.headerFocused = event.detail.value;
39
- }}
40
- >
41
- <div
42
- class="dropdown-content"
43
- slot="dropdown-content"
44
- style="padding: 15px; min-width: 100px;"
45
- >
46
- <h3 style="margin: 0;">${this.title}</h3>
47
- <cosmoz-input
48
- type="date"
49
- label=${_('From date')}
50
- min=${this._toInputString(this._limit.fromMin)}
51
- max=${this._toInputString(this._limit.fromMax)}
52
- .value=${this._filterInput?.min}
53
- @value-changed=${(event) =>
54
- this.set('_filterInput.min', event.detail.value)}
55
- ></cosmoz-input>
56
- <cosmoz-input
57
- type="date"
58
- label=${_('Until date')}
59
- min=${this._toInputString(this._limit.toMin)}
60
- max=${this._toInputString(this._limit.toMax)}
61
- .value=${this._filterInput?.max}
62
- @value-changed=${(event) =>
63
- this.set('_filterInput.max', event.detail.value)}
64
- ></cosmoz-input>
65
- </div>
66
- </paper-dropdown-menu>
67
- `;
14
+ return html`
15
+ <style>
16
+ paper-dropdown-menu {
17
+ --iron-icon-width: 0;
18
+ display: block;
19
+ text-align: right;
20
+ }
21
+
22
+ .dropdown-content h3 {
23
+ font-weight: 500;
24
+ font-size: 13px;
25
+ margin: 0;
26
+ font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
27
+ }
28
+
29
+ .dropdown-content {
30
+ padding: 10px 10px 10px 10px;
31
+ min-width: 120px;
32
+ text-align: left;
33
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
34
+ border-radius: 6px;
35
+ backdrop-filter: blur(16px) saturate(180%);
36
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
37
+ box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
38
+ }
39
+
40
+ cosmoz-input[type="date"] {
41
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
42
+ border-radius: 6px;
43
+ border: 1px solid #d1d1d6;
44
+ box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
45
+ padding: 2px 8px;
46
+ margin-bottom: 6px;
47
+ min-height: 28px;
48
+ transition: border-color 0.2s, box-shadow 0.2s;
49
+ }
50
+
51
+ cosmoz-input[type="date"]:focus-within {
52
+ border-color: var(--cz-accent-color, #007aff);
53
+ box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
54
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
55
+ }
56
+ </style>
57
+ <cosmoz-clear-button
58
+ @click=${() => this.resetFilter()}
59
+ ?visible=${this.hasFilter()}
60
+ ></cosmoz-clear-button>
61
+ <paper-dropdown-menu
62
+ label=${this.title}
63
+ placeholder=${ifDefined(this._filterText)}
64
+ class="external-values-${this.externalValues}"
65
+ title=${this._tooltip}
66
+ horizontal-align="right"
67
+ ?opened=${this.headerFocused}
68
+ @opened-changed=${(event) => {
69
+ // TODO: check ots integration
70
+ this.headerFocused = event.detail.value;
71
+ }}
72
+ >
73
+ <div class="dropdown-content" slot="dropdown-content">
74
+ <h3 style="margin: 0;">${this.title}</h3>
75
+ <cosmoz-input
76
+ type="date"
77
+ label=${_('From date')}
78
+ min=${this._toInputString(this._limit.fromMin)}
79
+ max=${this._toInputString(this._limit.fromMax)}
80
+ .value=${this._filterInput?.min}
81
+ @value-changed=${(event) =>
82
+ this.set('_filterInput.min', event.detail.value)}
83
+ ></cosmoz-input>
84
+ <cosmoz-input
85
+ type="date"
86
+ label=${_('Until date')}
87
+ min=${this._toInputString(this._limit.toMin)}
88
+ max=${this._toInputString(this._limit.toMax)}
89
+ .value=${this._filterInput?.max}
90
+ @value-changed=${(event) =>
91
+ this.set('_filterInput.max', event.detail.value)}
92
+ ></cosmoz-input>
93
+ </div>
94
+ </paper-dropdown-menu>
95
+ `;
68
96
  }
69
97
 
70
98
  _fromInputString(value, property) {
@@ -10,61 +10,89 @@ class DatetimeRangeInput extends dateInputMixin(
10
10
  ) {
11
11
  // eslint-disable-next-line max-lines-per-function
12
12
  render() {
13
- return html`
14
- <style>
15
- paper-dropdown-menu {
16
- --iron-icon-width: 0;
17
- display: block;
18
- }
19
- cosmoz-input {
20
- --paper-font-subhead_-_font-size: 16px;
21
- margin-bottom: 6px;
22
- }
23
- </style>
13
+ return html`
14
+ <style>
15
+ paper-dropdown-menu {
16
+ --iron-icon-width: 0;
17
+ display: block;
18
+ text-align: right;
19
+ }
24
20
 
25
- <cosmoz-clear-button
26
- @click=${() => this.resetFilter()}
27
- ?visible=${this.hasFilter()}
28
- ></cosmoz-clear-button>
29
- <paper-dropdown-menu
30
- label=${this.title}
31
- placeholder=${ifDefined(this._filterText)}
32
- class="external-values-${this.externalValues}"
33
- title=${this._tooltip}
34
- horizontal-align="right"
35
- ?opened=${this.headerFocused}
36
- @opened-changed=${(event) =>
37
- this.set('headerFocused', event.detail.value)}
38
- >
39
- <div
40
- class="dropdown-content"
41
- slot="dropdown-content"
42
- style="padding: 15px; min-width: 100px;"
43
- >
44
- <h3 style="margin: 0;">${this.title}</h3>
45
- <cosmoz-datetime-input
46
- date-label=${_('From date')}
47
- time-label=${_('From time')}
48
- min=${this._toInputString(this._limit.fromMin)}
49
- max=${this._toInputString(this._limit.fromMax)}
50
- step=${this.filterStep}
51
- .value=${this._filterInput?.min}
52
- @value-changed=${(event) =>
53
- this.set('_filterInput.min', event.detail.value)}
54
- ></cosmoz-datetime-input>
55
- <cosmoz-datetime-input
56
- date-label=${_('To date')}
57
- time-label=${_('To time')}
58
- min=${this._toInputString(this._limit.toMin)}
59
- max=${this._toInputString(this._limit.toMax)}
60
- step=${this.filterStep}
61
- .value=${this._filterInput?.max}
62
- @value-changed=${(event) =>
63
- this.set('_filterInput.max', event.detail.value)}
64
- ></cosmoz-datetime-input>
65
- </div>
66
- </paper-dropdown-menu>
67
- `;
21
+ .dropdown-content h3 {
22
+ font-weight: 500;
23
+ font-size: 13px;
24
+ margin: 0;
25
+ font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
26
+ }
27
+
28
+ .dropdown-content {
29
+ padding: 10px 10px 10px 10px;
30
+ min-width: 120px;
31
+ text-align: left;
32
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
33
+ border-radius: 6px;
34
+ backdrop-filter: blur(16px) saturate(180%);
35
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
36
+ box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
37
+ }
38
+
39
+ cosmoz-datetime-input {
40
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
41
+ border-radius: 6px;
42
+ border: 1px solid #d1d1d6;
43
+ box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
44
+ padding: 2px 8px;
45
+ margin-bottom: 6px;
46
+ min-height: 28px;
47
+ transition: border-color 0.2s, box-shadow 0.2s;
48
+ }
49
+
50
+ cosmoz-datetime-input:focus-within {
51
+ border-color: var(--cz-accent-color, #007aff);
52
+ box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
53
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
54
+ }
55
+ </style>
56
+
57
+ <cosmoz-clear-button
58
+ @click=${() => this.resetFilter()}
59
+ ?visible=${this.hasFilter()}
60
+ ></cosmoz-clear-button>
61
+ <paper-dropdown-menu
62
+ label=${this.title}
63
+ placeholder=${ifDefined(this._filterText)}
64
+ class="external-values-${this.externalValues}"
65
+ title=${this._tooltip}
66
+ horizontal-align="right"
67
+ ?opened=${this.headerFocused}
68
+ @opened-changed=${(event) =>
69
+ this.set('headerFocused', event.detail.value)}
70
+ >
71
+ <div class="dropdown-content" slot="dropdown-content">
72
+ <h3 style="margin: 0;">${this.title}</h3>
73
+ <cosmoz-datetime-input
74
+ date-label=${_('From date')}
75
+ time-label=${_('From time')}
76
+ min=${this._toInputString(this._limit.fromMin)}
77
+ max=${this._toInputString(this._limit.fromMax)}
78
+ step=${this.filterStep}
79
+ .value=${this._filterInput?.min}
80
+ @value-changed=${(event) =>
81
+ this.set('_filterInput.min', event.detail.value)}
82
+ ></cosmoz-datetime-input>
83
+ <cosmoz-datetime-input
84
+ date-label=${_('To date')}
85
+ time-label=${_('To time')}
86
+ min=${this._toInputString(this._limit.toMin)}
87
+ max=${this._toInputString(this._limit.toMax)}
88
+ step=${this.filterStep}
89
+ .value=${this._filterInput?.max}
90
+ @value-changed=${(event) =>
91
+ this.set('_filterInput.max', event.detail.value)}
92
+ ></cosmoz-datetime-input>
93
+ </div>
94
+ </paper-dropdown-menu>
95
+ `;
68
96
  }
69
97
 
70
98
  _toInputString(value) {
@@ -44,11 +44,41 @@ class NumberRangeInput extends rangeInputMixin(
44
44
  display: block;
45
45
  text-align: right;
46
46
  }
47
- .dropdown-content {
48
- padding: 15px;
49
- min-width: 100px;
50
- text-align: left;
47
+
48
+ .dropdown-content h3 {
49
+ font-weight: 500;
50
+ font-size: 13px;
51
+ margin: 0;
52
+ font-family: var(--cosmoz-input-font-family, var(--paper-font-subhead_-_font-family, 'Inter', sans-serif));
51
53
  }
54
+
55
+ .dropdown-content {
56
+ padding: 10px 10px 10px 10px;
57
+ min-width: 120px;
58
+ text-align: left;
59
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
60
+ border-radius: 6px;
61
+ backdrop-filter: blur(16px) saturate(180%);
62
+ -webkit-backdrop-filter: blur(16px) saturate(180%);
63
+ box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18), 0 1.5px 6px 0 rgba(0,0,0,0.1);
64
+ }
65
+
66
+ cosmoz-input[type="number"] {
67
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
68
+ border-radius: 6px;
69
+ border: 1px solid #d1d1d6;
70
+ box-shadow: 0 1px 2px 0 rgba(60,60,60,0.04);
71
+ padding: 2px 8px;
72
+ margin-bottom: 6px;
73
+ min-height: 28px;
74
+ transition: border-color 0.2s, box-shadow 0.2s;
75
+ }
76
+
77
+ cosmoz-input[type="number"]:focus-within {
78
+ border-color: var(--cz-accent-color, #007aff);
79
+ box-shadow: 0 0 0 1px rgba(0,122,255,0.15);
80
+ background: var(--cosmoz-omnitable-amount-input-background, #ffffff);
81
+ }
52
82
  </style>
53
83
 
54
84
  <cosmoz-clear-button
@@ -12,11 +12,10 @@ export default css`
12
12
  }
13
13
 
14
14
  .headline {
15
- box-shadow:
16
- inset 0px -1px 0px rgba(0, 0, 0, 0.15),
17
- inset 0px 1px 0px rgba(0, 0, 0, 0.15);
18
15
  font-weight: 500;
19
- font-size: 16px;
16
+ font-size: 13px;
17
+ color: var(--cosmoz-omnitable-settings-color, #101010);
18
+ text-transform: uppercase;
20
19
  line-height: 0.95;
21
20
  padding: 10px 14px;
22
21
  display: flex;
@@ -34,6 +33,9 @@ export default css`
34
33
  overflow-y: auto;
35
34
  scrollbar-width: 2px;
36
35
  scrollbar-gutter: stable;
36
+ text-transform: uppercase;
37
+ font-size: 12px;
38
+ color: var(--cosmoz-omnitable-settings-color, #101010);
37
39
  }
38
40
  .contents::-webkit-scrollbar {
39
41
  width: 2px;
@@ -48,8 +50,9 @@ export default css`
48
50
 
49
51
  .heading {
50
52
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
51
- font-weight: 500;
52
- font-size: 14px;
53
+ font-weight: 400;
54
+ font-size: 13px;
55
+ color: var(--cosmoz-omnitable-settings-color, #101010);
53
56
  line-height: 0.95;
54
57
  padding: 14px;
55
58
  display: flex;
@@ -77,7 +80,7 @@ export default css`
77
80
  .item {
78
81
  display: flex;
79
82
  align-items: center;
80
- background: white;
83
+ background: var(--cosmoz-omnitable-settings-item-bg-color, #fff);
81
84
  }
82
85
  .item.drag {
83
86
  opacity: 0.6;
@@ -139,7 +142,6 @@ export default css`
139
142
  .reset {
140
143
  background: transparent;
141
144
  color: inherit;
142
- text-decoration: underline;
143
145
  }
144
146
  /* sortgroups */
145
147
  .sgs {
@@ -153,16 +155,17 @@ export default css`
153
155
  .sg {
154
156
  color: inherit;
155
157
  border: 1px solid rgba(0, 0, 0, 0.2);
156
- border-radius: 2px;
157
- font-size: 13px;
158
+ border-radius: 6px;
159
+ font-size: 12px;
160
+ text-transform: uppercase;
158
161
  line-height: 1;
159
- text-align: center;
162
+ text-align: left;
160
163
  padding: 6px 12px;
161
164
  background: transparent;
162
165
  cursor: pointer;
163
166
  display: flex;
164
- align-items: center;
165
- justify-content: center;
167
+ align-items: left;
168
+ justify-content: auto;
166
169
  }
167
170
  .sg span {
168
171
  overflow: hidden;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-omnitable",
3
- "version": "14.4.0",
3
+ "version": "14.6.0",
4
4
  "description": "[![Build Status](https://travis-ci.org/Neovici/cosmoz-omnitable.svg?branch=master)](https://travis-ci.org/Neovici/cosmoz-omnitable)",
5
5
  "keywords": [
6
6
  "web-components"