@linzjs/step-ag-grid 7.5.1 → 7.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.
Files changed (43) hide show
  1. package/dist/GridTheme.scss +3 -2
  2. package/dist/index.css +238 -135
  3. package/dist/index.js +97 -97
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/components/Grid.d.ts +2 -1
  6. package/dist/src/components/GridIcon.d.ts +4 -1
  7. package/dist/src/components/GridLoadableCell.d.ts +0 -2
  8. package/dist/src/components/gridForm/GridFormDropDown.d.ts +0 -1
  9. package/dist/src/components/gridForm/GridFormEditBearing.d.ts +0 -1
  10. package/dist/src/components/gridForm/GridFormMultiSelect.d.ts +0 -1
  11. package/dist/src/components/gridPopoverEdit/GridPopoverMenu.d.ts +0 -1
  12. package/dist/src/components/gridRender/GridRenderGenericCell.d.ts +2 -2
  13. package/dist/src/index.d.ts +1 -0
  14. package/dist/src/lui/ActionButton.d.ts +3 -3
  15. package/dist/src/utils/deferredPromise.d.ts +5 -0
  16. package/dist/src/utils/util.d.ts +1 -0
  17. package/dist/step-ag-grid.esm.js +96 -97
  18. package/dist/step-ag-grid.esm.js.map +1 -1
  19. package/package.json +2 -2
  20. package/src/components/Grid.tsx +42 -24
  21. package/src/components/GridCell.tsx +13 -9
  22. package/src/components/GridIcon.tsx +15 -4
  23. package/src/components/GridLoadableCell.tsx +10 -23
  24. package/src/components/gridForm/GridFormDropDown.tsx +0 -2
  25. package/src/components/gridForm/GridFormEditBearing.tsx +0 -2
  26. package/src/components/gridForm/GridFormMultiSelect.tsx +0 -2
  27. package/src/components/gridPopoverEdit/GridPopoverMenu.tsx +0 -2
  28. package/src/components/gridRender/GridRenderGenericCell.tsx +3 -32
  29. package/src/components/gridRender/GridRenderPopoutMenuCell.tsx +8 -24
  30. package/src/index.ts +1 -0
  31. package/src/lui/ActionButton.scss +20 -8
  32. package/src/lui/ActionButton.tsx +6 -10
  33. package/src/stories/components/ActionButton.stories.tsx +9 -1
  34. package/src/stories/grid/GridPopoutBearing.stories.tsx +1 -0
  35. package/src/stories/grid/GridReadOnly.stories.tsx +16 -3
  36. package/src/styles/Grid.scss +20 -3
  37. package/src/styles/{GridRenderGenericCell.scss → GridIcon.scss} +19 -15
  38. package/src/{components → styles}/GridLoadableCell.scss +5 -4
  39. package/src/{components/gridPopoverEdit → styles}/GridPopoverMenu.scss +1 -1
  40. package/src/styles/GridTheme.scss +3 -2
  41. package/src/styles/index.scss +8 -0
  42. package/src/utils/deferredPromise.ts +34 -0
  43. package/src/utils/util.ts +2 -0
@@ -23,13 +23,14 @@
23
23
  header-background-color: lui.$white,
24
24
  border-color: lui.$lily,
25
25
  secondary-border-color: lui.$lily,
26
+ cell-horizontal-border: solid ag-derived(secondary-border-color),
26
27
  row-hover-color: lui.$lily,
27
28
  font-family: (
28
29
  "Open Sans",
29
30
  system-ui,
30
31
  sans-serif,
31
32
  ),
32
- font-size: 0.875rem !important,
33
+ font-size: 1rem !important,
33
34
  borders: false,
34
35
  borders-critical: true,
35
36
  borders-secondary: false,
@@ -47,7 +48,7 @@
47
48
  }
48
49
 
49
50
  .ag-row:last-of-type {
50
- border-bottom: none;
51
+ border-bottom: 1px solid lui.$lily;
51
52
  }
52
53
 
53
54
  // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
package/dist/index.css CHANGED
@@ -40,138 +40,6 @@
40
40
  border: 0.06rem solid #beb9b4;
41
41
  }
42
42
 
43
- .szh-menu {
44
- margin: 0;
45
- padding: 0;
46
- list-style: none;
47
- box-sizing: border-box;
48
- width: max-content;
49
- z-index: 100;
50
- border: 1px solid rgba(0, 0, 0, 0.1);
51
- background-color: #fff;
52
- }
53
- .szh-menu:focus {
54
- outline: none;
55
- }
56
- .szh-menu__arrow {
57
- box-sizing: border-box;
58
- width: 0.75rem;
59
- height: 0.75rem;
60
- background-color: #fff;
61
- border: 1px solid transparent;
62
- border-left-color: rgba(0, 0, 0, 0.1);
63
- border-top-color: rgba(0, 0, 0, 0.1);
64
- z-index: -1;
65
- }
66
- .szh-menu__arrow--dir-left {
67
- right: 0.375rem;
68
- transform: translateY(-50%) rotate(135deg);
69
- }
70
- .szh-menu__arrow--dir-right {
71
- left: 0.375rem;
72
- transform: translateY(-50%) rotate(-45deg);
73
- }
74
- .szh-menu__arrow--dir-top {
75
- bottom: 0.375rem;
76
- transform: translateX(-50%) rotate(-135deg);
77
- }
78
- .szh-menu__arrow--dir-bottom {
79
- top: 0.375rem;
80
- transform: translateX(-50%) rotate(45deg);
81
- }
82
- .szh-menu__item {
83
- cursor: pointer;
84
- }
85
- .szh-menu__item:focus {
86
- outline: none;
87
- }
88
- .szh-menu__item--hover {
89
- background-color: #ebebeb;
90
- }
91
- .szh-menu__item--focusable {
92
- cursor: default;
93
- background-color: inherit;
94
- }
95
- .szh-menu__item--disabled {
96
- cursor: default;
97
- color: #aaa;
98
- }
99
- .szh-menu__group {
100
- box-sizing: border-box;
101
- }
102
- .szh-menu__radio-group {
103
- margin: 0;
104
- padding: 0;
105
- list-style: none;
106
- }
107
- .szh-menu__divider {
108
- height: 1px;
109
- margin: 0.5rem 0;
110
- background-color: rgba(0, 0, 0, 0.12);
111
- }
112
-
113
- .szh-menu-button {
114
- box-sizing: border-box;
115
- }
116
-
117
- .szh-menu {
118
- user-select: none;
119
- color: #212529;
120
- border: none;
121
- border-radius: 0.25rem;
122
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
123
- min-width: 10rem;
124
- padding: 0.5rem 0;
125
- }
126
- .szh-menu__item {
127
- display: flex;
128
- align-items: center;
129
- position: relative;
130
- padding: 0.375rem 1.5rem;
131
- }
132
- .szh-menu-container--itemTransition .szh-menu__item {
133
- transition-property: background-color, color;
134
- transition-duration: 0.15s;
135
- transition-timing-function: ease-in-out;
136
- }
137
- .szh-menu__item--type-radio {
138
- padding-left: 2.2rem;
139
- }
140
- .szh-menu__item--type-radio::before {
141
- content: "○";
142
- position: absolute;
143
- left: 0.8rem;
144
- top: 0.55rem;
145
- font-size: 0.8rem;
146
- }
147
- .szh-menu__item--type-radio.szh-menu__item--checked::before {
148
- content: "●";
149
- }
150
- .szh-menu__item--type-checkbox {
151
- padding-left: 2.2rem;
152
- }
153
- .szh-menu__item--type-checkbox::before {
154
- position: absolute;
155
- left: 0.8rem;
156
- }
157
- .szh-menu__item--type-checkbox.szh-menu__item--checked::before {
158
- content: "✔";
159
- }
160
- .szh-menu__submenu > .szh-menu__item {
161
- padding-right: 2.5rem;
162
- }
163
- .szh-menu__submenu > .szh-menu__item::after {
164
- content: "❯";
165
- position: absolute;
166
- right: 1rem;
167
- }
168
- .szh-menu__header {
169
- color: #888;
170
- font-size: 0.8rem;
171
- padding: 0.2rem 1.5rem;
172
- text-transform: uppercase;
173
- }
174
-
175
43
  /**
176
44
  @deprecated
177
45
  */
@@ -313,6 +181,138 @@
313
181
  fill: #6b6966;
314
182
  }
315
183
 
184
+ .szh-menu {
185
+ margin: 0;
186
+ padding: 0;
187
+ list-style: none;
188
+ box-sizing: border-box;
189
+ width: max-content;
190
+ z-index: 100;
191
+ border: 1px solid rgba(0, 0, 0, 0.1);
192
+ background-color: #fff;
193
+ }
194
+ .szh-menu:focus {
195
+ outline: none;
196
+ }
197
+ .szh-menu__arrow {
198
+ box-sizing: border-box;
199
+ width: 0.75rem;
200
+ height: 0.75rem;
201
+ background-color: #fff;
202
+ border: 1px solid transparent;
203
+ border-left-color: rgba(0, 0, 0, 0.1);
204
+ border-top-color: rgba(0, 0, 0, 0.1);
205
+ z-index: -1;
206
+ }
207
+ .szh-menu__arrow--dir-left {
208
+ right: 0.375rem;
209
+ transform: translateY(-50%) rotate(135deg);
210
+ }
211
+ .szh-menu__arrow--dir-right {
212
+ left: 0.375rem;
213
+ transform: translateY(-50%) rotate(-45deg);
214
+ }
215
+ .szh-menu__arrow--dir-top {
216
+ bottom: 0.375rem;
217
+ transform: translateX(-50%) rotate(-135deg);
218
+ }
219
+ .szh-menu__arrow--dir-bottom {
220
+ top: 0.375rem;
221
+ transform: translateX(-50%) rotate(45deg);
222
+ }
223
+ .szh-menu__item {
224
+ cursor: pointer;
225
+ }
226
+ .szh-menu__item:focus {
227
+ outline: none;
228
+ }
229
+ .szh-menu__item--hover {
230
+ background-color: #ebebeb;
231
+ }
232
+ .szh-menu__item--focusable {
233
+ cursor: default;
234
+ background-color: inherit;
235
+ }
236
+ .szh-menu__item--disabled {
237
+ cursor: default;
238
+ color: #aaa;
239
+ }
240
+ .szh-menu__group {
241
+ box-sizing: border-box;
242
+ }
243
+ .szh-menu__radio-group {
244
+ margin: 0;
245
+ padding: 0;
246
+ list-style: none;
247
+ }
248
+ .szh-menu__divider {
249
+ height: 1px;
250
+ margin: 0.5rem 0;
251
+ background-color: rgba(0, 0, 0, 0.12);
252
+ }
253
+
254
+ .szh-menu-button {
255
+ box-sizing: border-box;
256
+ }
257
+
258
+ .szh-menu {
259
+ user-select: none;
260
+ color: #212529;
261
+ border: none;
262
+ border-radius: 0.25rem;
263
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
264
+ min-width: 10rem;
265
+ padding: 0.5rem 0;
266
+ }
267
+ .szh-menu__item {
268
+ display: flex;
269
+ align-items: center;
270
+ position: relative;
271
+ padding: 0.375rem 1.5rem;
272
+ }
273
+ .szh-menu-container--itemTransition .szh-menu__item {
274
+ transition-property: background-color, color;
275
+ transition-duration: 0.15s;
276
+ transition-timing-function: ease-in-out;
277
+ }
278
+ .szh-menu__item--type-radio {
279
+ padding-left: 2.2rem;
280
+ }
281
+ .szh-menu__item--type-radio::before {
282
+ content: "○";
283
+ position: absolute;
284
+ left: 0.8rem;
285
+ top: 0.55rem;
286
+ font-size: 0.8rem;
287
+ }
288
+ .szh-menu__item--type-radio.szh-menu__item--checked::before {
289
+ content: "●";
290
+ }
291
+ .szh-menu__item--type-checkbox {
292
+ padding-left: 2.2rem;
293
+ }
294
+ .szh-menu__item--type-checkbox::before {
295
+ position: absolute;
296
+ left: 0.8rem;
297
+ }
298
+ .szh-menu__item--type-checkbox.szh-menu__item--checked::before {
299
+ content: "✔";
300
+ }
301
+ .szh-menu__submenu > .szh-menu__item {
302
+ padding-right: 2.5rem;
303
+ }
304
+ .szh-menu__submenu > .szh-menu__item::after {
305
+ content: "❯";
306
+ position: absolute;
307
+ right: 1rem;
308
+ }
309
+ .szh-menu__header {
310
+ color: #888;
311
+ font-size: 0.8rem;
312
+ padding: 0.2rem 1.5rem;
313
+ text-transform: uppercase;
314
+ }
315
+
316
316
  .Grid-container {
317
317
  flex: 1;
318
318
  width: 100%;
@@ -343,19 +343,122 @@
343
343
  padding: 4px 8px;
344
344
  }
345
345
 
346
+ .GridCell-editableIcon {
347
+ fill: #beb9b4;
348
+ }
349
+
346
350
  .GridFormMessage-container {
347
351
  padding: 4px 8px;
348
352
  max-width: 400px;
349
353
  }
350
354
 
351
- .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
355
+ .GridCell-readonly {
356
+ color: #989189;
357
+ }
358
+
359
+ .Grid-container.ag-theme-alpine .ag-cell {
360
+ font-weight: 400;
361
+ }
362
+
363
+ .Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
352
364
  visibility: hidden;
353
365
  }
354
366
 
355
- .ag-cell:hover .Grid-displayWhenCellFocused {
367
+ .Grid-container.ag-theme-alpine .ag-cell:hover .Grid-displayWhenCellFocused {
356
368
  visibility: inherit;
357
369
  }
358
370
 
359
- .ag-cell-wrapper {
371
+ .Grid-container.ag-theme-alpine .ag-cell-wrapper {
360
372
  width: 100%;
361
373
  }
374
+
375
+ .Grid-container.ag-theme-alpine .ag-cell-inline-editing {
376
+ padding-left: 5px;
377
+ padding-right: 2px;
378
+ }
379
+
380
+ .GridPopoverEditDropDown-containerSmall .GridFormDropDown-options {
381
+ max-height: 120px;
382
+ overflow-y: auto;
383
+ }
384
+
385
+ .GridPopoverEditDropDown-containerMedium .GridFormDropDown-options {
386
+ max-height: 220px;
387
+ overflow-y: auto;
388
+ }
389
+
390
+ .GridPopoverEditDropDown-containerLarge .GridFormDropDown-options {
391
+ max-height: 400px;
392
+ overflow-y: auto;
393
+ }
394
+
395
+ .GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options {
396
+ overflow-y: auto;
397
+ }
398
+
399
+ .GridPopoverEditDropDown-noOptions {
400
+ justify-content: center;
401
+ }
402
+
403
+ .GridFormEditBearing-input {
404
+ width: 320px;
405
+ }
406
+
407
+ .GridMultiSelect-containerSmall .GridFormMultiSelect-options {
408
+ max-height: 130px;
409
+ overflow-y: auto;
410
+ }
411
+
412
+ .GridMultiSelect-containerMedium .GridFormMultiSelect-options {
413
+ max-height: 190px;
414
+ overflow-y: auto;
415
+ }
416
+
417
+ .GridMultiSelect-containerLarge .GridFormMultiSelect-options {
418
+ max-height: 320px;
419
+ overflow-y: auto;
420
+ }
421
+
422
+ .GridMultiSelect-containerUnlimited .GridFormMultiSelect-options {
423
+ overflow-y: auto;
424
+ }
425
+
426
+ .GridFormSubComponentTextInput-full-width-input {
427
+ width: 100%;
428
+ padding: 0;
429
+ }
430
+
431
+ .AgGridGenericCellRenderer-icon {
432
+ margin-right: 4px;
433
+ }
434
+
435
+ .AgGridGenericCellRenderer-ic_infoIcon {
436
+ margin-right: 4px;
437
+ fill: #3a7cdf;
438
+ }
439
+
440
+ .AgGridGenericCellRenderer-ic_warningIcon {
441
+ margin-right: 4px;
442
+ fill: #ea6a2e;
443
+ }
444
+
445
+ .GridIcon-disabled {
446
+ fill: #beb9b4 !important;
447
+ }
448
+
449
+ .GridLoadableCell-container {
450
+ width: 100%;
451
+ display: flex;
452
+ align-items: center;
453
+ }
454
+
455
+ .GridPopoutMenu-burger {
456
+ cursor: pointer;
457
+ }
458
+ .GridPopoutMenu-burger svg {
459
+ fill: #007198;
460
+ }
461
+
462
+ .GridPopoutMenu-burgerDisabled svg {
463
+ fill: #989189;
464
+ }