@odx/ui 5.3.4 → 5.3.6

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/CHANGELOG.md +12 -0
  2. package/ag-grid-theme.css +1 -1
  3. package/core-theme.css +1 -1
  4. package/package.json +1 -1
  5. package/scss/3rdparty/ag-grid/theme.scss +111 -33
  6. package/scss/ag-grid/theme.scss +111 -33
  7. package/scss/components/mainfilter-group.component.scss +1 -0
  8. package/scss/mainfilter-group.component.scss +1 -0
  9. package/scss/theme.scss +111 -33
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@odx/ui",
3
- "version": "5.3.4",
3
+ "version": "5.3.6",
4
4
  "author": "Drägerwerk AG & Co.KGaA",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "peerDependencies": {
package/scss/3rdparty/ag-grid/theme.scss CHANGED
@@ -113,6 +113,47 @@
113
113
  }
114
114
  }
115
115
 
116
+ .ag-cell {
117
+ &:has(.odx-datepicker, .odx-daterangepicker) {
118
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
119
+ }
120
+
121
+ .odx-calendar td {
122
+ line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
123
+ }
124
+
125
+ odx-checkbox-cell-renderer,
126
+ odx-checkbox-header-cell-renderer {
127
+ align-items: center;
128
+ display: inline-flex;
129
+ height: 100%;
130
+ justify-content: center;
131
+ line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
132
+ }
133
+
134
+ &.hide-ag-selection-checkbox {
135
+ .ag-cell-value {
136
+ overflow: visible;
137
+ }
138
+
139
+ .ag-selection-checkbox {
140
+ display: none;
141
+ }
142
+ }
143
+ }
144
+
145
+ .ag-header-cell {
146
+ &.hide-ag-header-select-all {
147
+ .ag-header-select-all {
148
+ display: none;
149
+ }
150
+ }
151
+ }
152
+
153
+ .ag-picker-field-icon {
154
+ color: var(--odx-c-text);
155
+ }
156
+
116
157
  .ag-standard-button {
117
158
  background-color: var(--odx-c-primary);
118
159
  border-radius: var(--odx-v-border-radius-controls);
@@ -125,6 +166,26 @@
125
166
  transition-property: background-color, color, outline;
126
167
  }
127
168
 
169
+ .ag-cell-inline-editing {
170
+ &:has(.ag-select) {
171
+ border: none;
172
+ }
173
+ }
174
+
175
+ .ag-select {
176
+ .ag-picker-field-wrapper {
177
+ height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
178
+ }
179
+
180
+ .ag-picker-field-display {
181
+ color: var(--odx-c-text);
182
+ }
183
+
184
+ .ag-picker-field-icon {
185
+ padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
186
+ }
187
+ }
188
+
128
189
  .ag-header {
129
190
  border-bottom: var(--ag-borders-critical) var(--gray-700);
130
191
 
@@ -171,7 +232,7 @@
171
232
 
172
233
  &.ag-popup {
173
234
  [type='text']:focus {
174
- border-color: var(--ag-input-border-color);
235
+ border: var(--ag-input-border);
175
236
  border-radius: var(--odx-v-border-radius);
176
237
  box-shadow: unset;
177
238
  }
@@ -224,18 +285,41 @@
224
285
  border: none;
225
286
  }
226
287
 
227
- .ag-select {
228
- .ag-picker-field-display {
229
- color: var(--odx-c-text);
230
- }
231
-
232
- .ag-picker-field-icon {
233
- padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
234
- }
288
+ &.no-filters .ag-header-row.ag-header-row-column-filter {
289
+ display: none;
235
290
  }
236
291
 
237
292
  .ag-select-list {
293
+ @include dimensions.padding-x(0.5);
294
+
295
+ background-color: var(--odx-c-background-content);
296
+ border-bottom: dimensions.get-size(0.5) solid transparent;
297
+ border-radius: var(--odx-v-border-radius);
298
+ border-top: dimensions.get-size(0.5) solid transparent;
299
+ box-shadow: var(--odx-v-box-shadow-layer-1);
238
300
  color: var(--odx-c-text);
301
+ overflow: auto;
302
+ overscroll-behavior: contain;
303
+
304
+ .ag-list-item {
305
+ @include dimensions.line-height(1.5, 1);
306
+ @include dimensions.margin(math.div(4, 24), bottom);
307
+ @include dimensions.padding-x(0.5);
308
+ @include motion.transition(background-color color outline-color);
309
+ @include typography.font-weight(normal);
310
+
311
+ border-radius: var(--odx-v-border-radius-controls);
312
+ cursor: pointer;
313
+ user-select: none;
314
+
315
+ &:last-child {
316
+ margin-bottom: 0;
317
+ }
318
+
319
+ &:hover {
320
+ background-color: var(--gray-50);
321
+ }
322
+ }
239
323
  }
240
324
 
241
325
  .ag-paging-panel {
@@ -266,38 +350,32 @@
266
350
  cursor: pointer;
267
351
  outline-color: var(--odx-control-outline-color-hover);
268
352
  }
353
+ }
269
354
 
270
- &-wrapper {
271
- &::after {
272
- $checkmark-size: math.div(18, 24);
273
-
274
- font-size: dimensions.get-size($checkmark-size);
275
- height: dimensions.get-size($checkmark-size);
276
- left: 50%;
277
- opacity: 0;
278
- top: 50%;
279
- transform: translate(-50%, -50%);
280
- width: dimensions.get-size($checkmark-size);
355
+ .ag-floating-top {
356
+ .ag-row {
357
+ color: var(--odx-c-text-disabled);
358
+ }
281
359
 
282
- @include motion.transition(opacity);
360
+ .ag-cell {
361
+ .ag-input-wrapper {
362
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
283
363
  }
284
364
 
285
- &:has(#{$input}:checked, #{$input}:indeterminate) {
286
- &::after {
287
- opacity: 1;
288
- }
365
+ .ag-select {
366
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
289
367
  }
290
- }
291
368
 
292
- &:checked,
293
- &:indeterminate {
294
- background-color: var(--odx-control-background-color-selected);
295
- color: var(--odx-control-color-selected);
296
- outline-color: var(--odx-control-outline-color-selected);
369
+ input {
370
+ color: var(--odx-c-text);
371
+ height: unset;
372
+ }
297
373
  }
298
374
 
299
- &:disabled {
300
- color: var(--odx-control-color-disabled);
375
+ .ag-cell-focus:not(.ag-cell-range-selected) {
376
+ &:focus-within {
377
+ border: none;
378
+ }
301
379
  }
302
380
  }
303
381
  }
package/scss/ag-grid/theme.scss CHANGED
@@ -113,6 +113,47 @@
113
113
  }
114
114
  }
115
115
 
116
+ .ag-cell {
117
+ &:has(.odx-datepicker, .odx-daterangepicker) {
118
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
119
+ }
120
+
121
+ .odx-calendar td {
122
+ line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
123
+ }
124
+
125
+ odx-checkbox-cell-renderer,
126
+ odx-checkbox-header-cell-renderer {
127
+ align-items: center;
128
+ display: inline-flex;
129
+ height: 100%;
130
+ justify-content: center;
131
+ line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
132
+ }
133
+
134
+ &.hide-ag-selection-checkbox {
135
+ .ag-cell-value {
136
+ overflow: visible;
137
+ }
138
+
139
+ .ag-selection-checkbox {
140
+ display: none;
141
+ }
142
+ }
143
+ }
144
+
145
+ .ag-header-cell {
146
+ &.hide-ag-header-select-all {
147
+ .ag-header-select-all {
148
+ display: none;
149
+ }
150
+ }
151
+ }
152
+
153
+ .ag-picker-field-icon {
154
+ color: var(--odx-c-text);
155
+ }
156
+
116
157
  .ag-standard-button {
117
158
  background-color: var(--odx-c-primary);
118
159
  border-radius: var(--odx-v-border-radius-controls);
@@ -125,6 +166,26 @@
125
166
  transition-property: background-color, color, outline;
126
167
  }
127
168
 
169
+ .ag-cell-inline-editing {
170
+ &:has(.ag-select) {
171
+ border: none;
172
+ }
173
+ }
174
+
175
+ .ag-select {
176
+ .ag-picker-field-wrapper {
177
+ height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
178
+ }
179
+
180
+ .ag-picker-field-display {
181
+ color: var(--odx-c-text);
182
+ }
183
+
184
+ .ag-picker-field-icon {
185
+ padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
186
+ }
187
+ }
188
+
128
189
  .ag-header {
129
190
  border-bottom: var(--ag-borders-critical) var(--gray-700);
130
191
 
@@ -171,7 +232,7 @@
171
232
 
172
233
  &.ag-popup {
173
234
  [type='text']:focus {
174
- border-color: var(--ag-input-border-color);
235
+ border: var(--ag-input-border);
175
236
  border-radius: var(--odx-v-border-radius);
176
237
  box-shadow: unset;
177
238
  }
@@ -224,18 +285,41 @@
224
285
  border: none;
225
286
  }
226
287
 
227
- .ag-select {
228
- .ag-picker-field-display {
229
- color: var(--odx-c-text);
230
- }
231
-
232
- .ag-picker-field-icon {
233
- padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
234
- }
288
+ &.no-filters .ag-header-row.ag-header-row-column-filter {
289
+ display: none;
235
290
  }
236
291
 
237
292
  .ag-select-list {
293
+ @include dimensions.padding-x(0.5);
294
+
295
+ background-color: var(--odx-c-background-content);
296
+ border-bottom: dimensions.get-size(0.5) solid transparent;
297
+ border-radius: var(--odx-v-border-radius);
298
+ border-top: dimensions.get-size(0.5) solid transparent;
299
+ box-shadow: var(--odx-v-box-shadow-layer-1);
238
300
  color: var(--odx-c-text);
301
+ overflow: auto;
302
+ overscroll-behavior: contain;
303
+
304
+ .ag-list-item {
305
+ @include dimensions.line-height(1.5, 1);
306
+ @include dimensions.margin(math.div(4, 24), bottom);
307
+ @include dimensions.padding-x(0.5);
308
+ @include motion.transition(background-color color outline-color);
309
+ @include typography.font-weight(normal);
310
+
311
+ border-radius: var(--odx-v-border-radius-controls);
312
+ cursor: pointer;
313
+ user-select: none;
314
+
315
+ &:last-child {
316
+ margin-bottom: 0;
317
+ }
318
+
319
+ &:hover {
320
+ background-color: var(--gray-50);
321
+ }
322
+ }
239
323
  }
240
324
 
241
325
  .ag-paging-panel {
@@ -266,38 +350,32 @@
266
350
  cursor: pointer;
267
351
  outline-color: var(--odx-control-outline-color-hover);
268
352
  }
353
+ }
269
354
 
270
- &-wrapper {
271
- &::after {
272
- $checkmark-size: math.div(18, 24);
273
-
274
- font-size: dimensions.get-size($checkmark-size);
275
- height: dimensions.get-size($checkmark-size);
276
- left: 50%;
277
- opacity: 0;
278
- top: 50%;
279
- transform: translate(-50%, -50%);
280
- width: dimensions.get-size($checkmark-size);
355
+ .ag-floating-top {
356
+ .ag-row {
357
+ color: var(--odx-c-text-disabled);
358
+ }
281
359
 
282
- @include motion.transition(opacity);
360
+ .ag-cell {
361
+ .ag-input-wrapper {
362
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
283
363
  }
284
364
 
285
- &:has(#{$input}:checked, #{$input}:indeterminate) {
286
- &::after {
287
- opacity: 1;
288
- }
365
+ .ag-select {
366
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
289
367
  }
290
- }
291
368
 
292
- &:checked,
293
- &:indeterminate {
294
- background-color: var(--odx-control-background-color-selected);
295
- color: var(--odx-control-color-selected);
296
- outline-color: var(--odx-control-outline-color-selected);
369
+ input {
370
+ color: var(--odx-c-text);
371
+ height: unset;
372
+ }
297
373
  }
298
374
 
299
- &:disabled {
300
- color: var(--odx-control-color-disabled);
375
+ .ag-cell-focus:not(.ag-cell-range-selected) {
376
+ &:focus-within {
377
+ border: none;
378
+ }
301
379
  }
302
380
  }
303
381
  }
package/scss/components/mainfilter-group.component.scss CHANGED
@@ -46,6 +46,7 @@
46
46
  @include dimensions.padding-x(math.div(3, 24));
47
47
 
48
48
  background-color: var(--odx-input-control-background-color);
49
+ line-height: dimensions.get-size(math.div(14, 24));
49
50
  margin-top: 0;
50
51
  position: absolute;
51
52
  right: 0;
package/scss/mainfilter-group.component.scss CHANGED
@@ -46,6 +46,7 @@
46
46
  @include dimensions.padding-x(math.div(3, 24));
47
47
 
48
48
  background-color: var(--odx-input-control-background-color);
49
+ line-height: dimensions.get-size(math.div(14, 24));
49
50
  margin-top: 0;
50
51
  position: absolute;
51
52
  right: 0;
package/scss/theme.scss CHANGED
@@ -113,6 +113,47 @@
113
113
  }
114
114
  }
115
115
 
116
+ .ag-cell {
117
+ &:has(.odx-datepicker, .odx-daterangepicker) {
118
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
119
+ }
120
+
121
+ .odx-calendar td {
122
+ line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
123
+ }
124
+
125
+ odx-checkbox-cell-renderer,
126
+ odx-checkbox-header-cell-renderer {
127
+ align-items: center;
128
+ display: inline-flex;
129
+ height: 100%;
130
+ justify-content: center;
131
+ line-height: calc(var(--odx-vertical-rythm-base-size) * 1);
132
+ }
133
+
134
+ &.hide-ag-selection-checkbox {
135
+ .ag-cell-value {
136
+ overflow: visible;
137
+ }
138
+
139
+ .ag-selection-checkbox {
140
+ display: none;
141
+ }
142
+ }
143
+ }
144
+
145
+ .ag-header-cell {
146
+ &.hide-ag-header-select-all {
147
+ .ag-header-select-all {
148
+ display: none;
149
+ }
150
+ }
151
+ }
152
+
153
+ .ag-picker-field-icon {
154
+ color: var(--odx-c-text);
155
+ }
156
+
116
157
  .ag-standard-button {
117
158
  background-color: var(--odx-c-primary);
118
159
  border-radius: var(--odx-v-border-radius-controls);
@@ -125,6 +166,26 @@
125
166
  transition-property: background-color, color, outline;
126
167
  }
127
168
 
169
+ .ag-cell-inline-editing {
170
+ &:has(.ag-select) {
171
+ border: none;
172
+ }
173
+ }
174
+
175
+ .ag-select {
176
+ .ag-picker-field-wrapper {
177
+ height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
178
+ }
179
+
180
+ .ag-picker-field-display {
181
+ color: var(--odx-c-text);
182
+ }
183
+
184
+ .ag-picker-field-icon {
185
+ padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
186
+ }
187
+ }
188
+
128
189
  .ag-header {
129
190
  border-bottom: var(--ag-borders-critical) var(--gray-700);
130
191
 
@@ -171,7 +232,7 @@
171
232
 
172
233
  &.ag-popup {
173
234
  [type='text']:focus {
174
- border-color: var(--ag-input-border-color);
235
+ border: var(--ag-input-border);
175
236
  border-radius: var(--odx-v-border-radius);
176
237
  box-shadow: unset;
177
238
  }
@@ -224,18 +285,41 @@
224
285
  border: none;
225
286
  }
226
287
 
227
- .ag-select {
228
- .ag-picker-field-display {
229
- color: var(--odx-c-text);
230
- }
231
-
232
- .ag-picker-field-icon {
233
- padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
234
- }
288
+ &.no-filters .ag-header-row.ag-header-row-column-filter {
289
+ display: none;
235
290
  }
236
291
 
237
292
  .ag-select-list {
293
+ @include dimensions.padding-x(0.5);
294
+
295
+ background-color: var(--odx-c-background-content);
296
+ border-bottom: dimensions.get-size(0.5) solid transparent;
297
+ border-radius: var(--odx-v-border-radius);
298
+ border-top: dimensions.get-size(0.5) solid transparent;
299
+ box-shadow: var(--odx-v-box-shadow-layer-1);
238
300
  color: var(--odx-c-text);
301
+ overflow: auto;
302
+ overscroll-behavior: contain;
303
+
304
+ .ag-list-item {
305
+ @include dimensions.line-height(1.5, 1);
306
+ @include dimensions.margin(math.div(4, 24), bottom);
307
+ @include dimensions.padding-x(0.5);
308
+ @include motion.transition(background-color color outline-color);
309
+ @include typography.font-weight(normal);
310
+
311
+ border-radius: var(--odx-v-border-radius-controls);
312
+ cursor: pointer;
313
+ user-select: none;
314
+
315
+ &:last-child {
316
+ margin-bottom: 0;
317
+ }
318
+
319
+ &:hover {
320
+ background-color: var(--gray-50);
321
+ }
322
+ }
239
323
  }
240
324
 
241
325
  .ag-paging-panel {
@@ -266,38 +350,32 @@
266
350
  cursor: pointer;
267
351
  outline-color: var(--odx-control-outline-color-hover);
268
352
  }
353
+ }
269
354
 
270
- &-wrapper {
271
- &::after {
272
- $checkmark-size: math.div(18, 24);
273
-
274
- font-size: dimensions.get-size($checkmark-size);
275
- height: dimensions.get-size($checkmark-size);
276
- left: 50%;
277
- opacity: 0;
278
- top: 50%;
279
- transform: translate(-50%, -50%);
280
- width: dimensions.get-size($checkmark-size);
355
+ .ag-floating-top {
356
+ .ag-row {
357
+ color: var(--odx-c-text-disabled);
358
+ }
281
359
 
282
- @include motion.transition(opacity);
360
+ .ag-cell {
361
+ .ag-input-wrapper {
362
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
283
363
  }
284
364
 
285
- &:has(#{$input}:checked, #{$input}:indeterminate) {
286
- &::after {
287
- opacity: 1;
288
- }
365
+ .ag-select {
366
+ padding: 0 calc(var(--ag-cell-horizontal-padding) - 1px);
289
367
  }
290
- }
291
368
 
292
- &:checked,
293
- &:indeterminate {
294
- background-color: var(--odx-control-background-color-selected);
295
- color: var(--odx-control-color-selected);
296
- outline-color: var(--odx-control-outline-color-selected);
369
+ input {
370
+ color: var(--odx-c-text);
371
+ height: unset;
372
+ }
297
373
  }
298
374
 
299
- &:disabled {
300
- color: var(--odx-control-color-disabled);
375
+ .ag-cell-focus:not(.ag-cell-range-selected) {
376
+ &:focus-within {
377
+ border: none;
378
+ }
301
379
  }
302
380
  }
303
381
  }