@syncfusion/ej2-gantt 20.1.58 → 20.2.36

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 (105) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/ej2-gantt.umd.min.js +2 -2
  3. package/dist/ej2-gantt.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-gantt.es2015.js +1100 -74
  5. package/dist/es6/ej2-gantt.es2015.js.map +1 -1
  6. package/dist/es6/ej2-gantt.es5.js +1099 -71
  7. package/dist/es6/ej2-gantt.es5.js.map +1 -1
  8. package/dist/global/ej2-gantt.min.js +2 -2
  9. package/dist/global/ej2-gantt.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +18 -18
  12. package/src/gantt/actions/actions.d.ts +1 -0
  13. package/src/gantt/actions/actions.js +1 -0
  14. package/src/gantt/actions/cell-edit.js +5 -3
  15. package/src/gantt/actions/connector-line-edit.js +20 -6
  16. package/src/gantt/actions/context-menu.js +3 -4
  17. package/src/gantt/actions/critical-path.d.ts +26 -0
  18. package/src/gantt/actions/critical-path.js +735 -0
  19. package/src/gantt/actions/dependency.js +3 -0
  20. package/src/gantt/actions/dialog-edit.js +1 -1
  21. package/src/gantt/actions/edit.js +29 -3
  22. package/src/gantt/actions/filter.js +1 -1
  23. package/src/gantt/actions/keyboard.js +2 -2
  24. package/src/gantt/actions/selection.js +3 -0
  25. package/src/gantt/actions/taskbar-edit.js +6 -4
  26. package/src/gantt/actions/toolbar.js +22 -4
  27. package/src/gantt/base/css-constants.d.ts +12 -0
  28. package/src/gantt/base/css-constants.js +12 -0
  29. package/src/gantt/base/date-processor.d.ts +1 -1
  30. package/src/gantt/base/date-processor.js +8 -2
  31. package/src/gantt/base/enum.d.ts +3 -1
  32. package/src/gantt/base/gantt-chart.js +6 -2
  33. package/src/gantt/base/gantt-model.d.ts +8 -1
  34. package/src/gantt/base/gantt.d.ts +32 -1
  35. package/src/gantt/base/gantt.js +133 -5
  36. package/src/gantt/base/interface.d.ts +16 -0
  37. package/src/gantt/base/splitter.js +4 -0
  38. package/src/gantt/base/task-processor.js +19 -6
  39. package/src/gantt/base/tree-grid.js +1 -1
  40. package/src/gantt/export/export-helper.js +19 -6
  41. package/src/gantt/export/pdf-base/pdf-style/gantt-theme.js +16 -0
  42. package/src/gantt/renderer/chart-rows.js +16 -5
  43. package/src/gantt/renderer/nonworking-day.js +5 -2
  44. package/src/gantt/renderer/timeline.js +35 -14
  45. package/src/global.js +1 -1
  46. package/styles/bootstrap-dark.css +272 -14
  47. package/styles/bootstrap.css +271 -14
  48. package/styles/bootstrap4.css +273 -12
  49. package/styles/bootstrap5-dark.css +272 -15
  50. package/styles/bootstrap5.css +272 -15
  51. package/styles/fabric-dark.css +270 -12
  52. package/styles/fabric.css +276 -18
  53. package/styles/fluent-dark.css +272 -14
  54. package/styles/fluent.css +272 -14
  55. package/styles/gantt/_bootstrap-dark-definition.scss +59 -16
  56. package/styles/gantt/_bootstrap-definition.scss +57 -14
  57. package/styles/gantt/_bootstrap4-definition.scss +65 -21
  58. package/styles/gantt/_bootstrap5-definition.scss +55 -12
  59. package/styles/gantt/_fabric-dark-definition.scss +58 -15
  60. package/styles/gantt/_fabric-definition.scss +58 -15
  61. package/styles/gantt/_fluent-definition.scss +53 -10
  62. package/styles/gantt/_fusionnew-definition.scss +212 -0
  63. package/styles/gantt/_highcontrast-definition.scss +57 -14
  64. package/styles/gantt/_highcontrast-light-definition.scss +55 -12
  65. package/styles/gantt/_layout.scss +293 -7
  66. package/styles/gantt/_material-dark-definition.scss +60 -16
  67. package/styles/gantt/_material-definition.scss +65 -21
  68. package/styles/gantt/_material3-definition.scss +213 -0
  69. package/styles/gantt/_tailwind-definition.scss +52 -8
  70. package/styles/gantt/_theme.scss +56 -1
  71. package/styles/gantt/bootstrap-dark.css +272 -14
  72. package/styles/gantt/bootstrap.css +271 -14
  73. package/styles/gantt/bootstrap4.css +273 -12
  74. package/styles/gantt/bootstrap5-dark.css +272 -15
  75. package/styles/gantt/bootstrap5.css +272 -15
  76. package/styles/gantt/fabric-dark.css +270 -12
  77. package/styles/gantt/fabric.css +276 -18
  78. package/styles/gantt/fluent-dark.css +272 -14
  79. package/styles/gantt/fluent.css +272 -14
  80. package/styles/gantt/highcontrast-light.css +260 -13
  81. package/styles/gantt/highcontrast.css +271 -13
  82. package/styles/gantt/icons/_bootstrap-dark.scss +12 -1
  83. package/styles/gantt/icons/_bootstrap.scss +12 -1
  84. package/styles/gantt/icons/_bootstrap4.scss +12 -1
  85. package/styles/gantt/icons/_bootstrap5.scss +12 -0
  86. package/styles/gantt/icons/_fabric-dark.scss +12 -0
  87. package/styles/gantt/icons/_fabric.scss +12 -0
  88. package/styles/gantt/icons/_fluent.scss +12 -0
  89. package/styles/gantt/icons/_fusionnew.scss +120 -0
  90. package/styles/gantt/icons/_highcontrast.scss +12 -0
  91. package/styles/gantt/icons/_material-dark.scss +12 -0
  92. package/styles/gantt/icons/_material.scss +12 -0
  93. package/styles/gantt/icons/_material3.scss +124 -0
  94. package/styles/gantt/icons/_tailwind-dark.scss +12 -0
  95. package/styles/gantt/icons/_tailwind.scss +12 -0
  96. package/styles/gantt/material-dark.css +277 -12
  97. package/styles/gantt/material.css +279 -14
  98. package/styles/gantt/tailwind-dark.css +279 -15
  99. package/styles/gantt/tailwind.css +276 -12
  100. package/styles/highcontrast-light.css +260 -13
  101. package/styles/highcontrast.css +271 -13
  102. package/styles/material-dark.css +277 -12
  103. package/styles/material.css +279 -14
  104. package/styles/tailwind-dark.css +279 -15
  105. package/styles/tailwind.css +276 -12
@@ -194,20 +194,205 @@
194
194
  .e-bigger .e-gantt .e-gantt-chart .e-timeline-top-header-cell {
195
195
  height: 32px;
196
196
  }
197
+ .e-bigger .e-gantt .e-gantt-chart .e-event-markers .e-span-label {
198
+ border-radius: 4px !important;
199
+ font-size: 12px !important;
200
+ height: 26px !important;
201
+ padding: 4px 11px 4px 8px !important;
202
+ top: 36px !important;
203
+ }
204
+ .e-bigger .e-gantt .e-gantt-chart .e-event-markers .e-gantt-right-arrow {
205
+ border-bottom: 6px solid transparent;
206
+ border-right: 6px solid transparent;
207
+ border-right-color: #fff;
208
+ border-top: 6px solid transparent;
209
+ top: 43px !important;
210
+ }
211
+ .e-bigger .e-gantt .e-gantt-chart .e-left-resize-gripper::before,
212
+ .e-bigger .e-gantt .e-gantt-chart .e-right-resize-gripper::before {
213
+ content: "\e92c";
214
+ }
215
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right,
216
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-left,
217
+ .e-bigger .e-gantt .e-gantt-chart .e-right-connectorpoint-outer-div,
218
+ .e-bigger .e-gantt .e-gantt-chart .e-left-connectorpoint-outer-div {
219
+ border-radius: 50%;
220
+ display: inline-block;
221
+ position: absolute;
222
+ }
223
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-left-hover,
224
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right-hover {
225
+ border-style: solid;
226
+ border-width: 1px;
227
+ box-sizing: content-box;
228
+ cursor: pointer;
229
+ display: inline-block;
230
+ }
231
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-left-hover,
232
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right-hover {
233
+ background-color: #ffd939;
234
+ border-color: #000;
235
+ }
236
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-left-hover:hover,
237
+ .e-bigger .e-gantt .e-gantt-chart .e-connectorpoint-right-hover:hover {
238
+ background-color: #ffd939;
239
+ border-color: #000;
240
+ outline: 2px solid #e7f1ff;
241
+ }
242
+ .e-bigger .e-gantt .e-tab .e-content {
243
+ height: 241px !important;
244
+ }
197
245
  .e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
198
246
  height: 63px !important;
199
247
  }
248
+ .e-bigger .e-gantt .e-dialog .e-dlg-header-content {
249
+ padding: 16px 4px 12px 18px !important;
250
+ }
251
+ .e-bigger .e-gantt .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
252
+ left: 2px !important;
253
+ }
254
+ .e-bigger .e-gantt .e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
255
+ font-size: 12px !important;
256
+ }
257
+ .e-bigger .e-gantt .e-dialog .e-footer-content {
258
+ height: 76px !important;
259
+ padding: 19px 18px 19px 16px !important;
260
+ }
261
+ .e-bigger .e-gantt .e-dialog .e-footer-content .e-btn {
262
+ margin-left: 12px;
263
+ }
264
+ .e-bigger .e-gantt .e-dialog .e-dlg-header {
265
+ line-height: 28px;
266
+ }
267
+ .e-bigger .e-gantt .e-filter-popup {
268
+ width: 307px !important;
269
+ }
270
+ .e-bigger .e-gantt .e-grid .e-flmenu-valuediv {
271
+ padding: 20px 0 0 !important;
272
+ }
273
+ .e-bigger .e-gantt .e-filter-popup .e-dlg-content {
274
+ border-radius: 0px !important;
275
+ padding: 20px 18px 0px 18px !important;
276
+ }
200
277
  .e-bigger .e-columnmenu {
201
278
  top: 45px;
202
279
  }
280
+ .e-bigger .e-gantt-dialog {
281
+ border-radius: 6px;
282
+ width: 554px !important;
283
+ }
284
+ .e-bigger .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
285
+ padding: 0 16px !important;
286
+ }
203
287
  .e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(odd) {
204
- padding: 16px 18px 0 18px;
288
+ padding: 16px 9px 0 18px;
205
289
  }
206
290
  .e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(even) {
207
- padding: 16px 18px 0 0;
291
+ padding: 16px 18px 0 9px;
208
292
  }
209
293
  .e-bigger .e-gantt-dialog .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
210
- padding: 16px 18px 0 0;
294
+ padding: 16px 18px 0 9px;
295
+ }
296
+ .e-bigger .e-gantt-dialog .e-edit-form-row {
297
+ height: 241px !important;
298
+ }
299
+ .e-bigger .e-gantt-dialog .e-edit-form-column {
300
+ height: 78px !important;
301
+ }
302
+ .e-bigger .e-gantt-dialog .e-dlg-header-content {
303
+ border-bottom: 0 !important;
304
+ }
305
+ .e-bigger .e-gantt-dialog > .e-dlg-content {
306
+ border-radius: 0 !important;
307
+ }
308
+ .e-bigger .e-gantt-dialog .e-dlg-header-content {
309
+ border-radius: 6px 6px 0px 0px;
310
+ padding-bottom: 4px;
311
+ }
312
+ .e-bigger .e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
313
+ border-radius: 50%;
314
+ height: auto !important;
315
+ width: auto;
316
+ }
317
+ .e-bigger .e-gantt-dialog .e-tab .e-tab-header .e-toolbar-item.e-active {
318
+ margin-left: 6px !important;
319
+ }
320
+ .e-bigger .e-gantt-dialog .e-control-wrapper .e-input-group-icon.e-date-icon {
321
+ font-size: 16px !important;
322
+ }
323
+ .e-bigger .e-gantt-dialog .e-control-wrapper .e-input-group-icon.e-date-icon {
324
+ min-height: 38px !important;
325
+ min-width: 35.82px !important;
326
+ }
327
+ .e-bigger .e-gantt-dialog .e-btn.e-flat {
328
+ line-height: 24px;
329
+ padding: 6px 16px 6px 15px !important;
330
+ }
331
+ .e-bigger .e-gantt-dialog .e-btn.e-primary {
332
+ padding: 6px 21px 6px 23px !important;
333
+ }
334
+ .e-bigger .e-gantt-dialog .e-datetime-wrapper .e-time-icon.e-icons::before {
335
+ font-size: 16px !important;
336
+ }
337
+ .e-bigger .e-gantt-dialog .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
338
+ font-size: 14px;
339
+ line-height: 22px;
340
+ }
341
+ .e-bigger .e-gantt-dialog .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text {
342
+ font-size: 14px;
343
+ line-height: 22px;
344
+ }
345
+ .e-bigger .e-gantt-dialog .e-float-input.e-control-wrapper input {
346
+ height: 38px !important;
347
+ }
348
+ .e-bigger .e-gantt-dialog .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
349
+ min-height: 38px !important;
350
+ min-width: 35.82px !important;
351
+ }
352
+ .e-bigger .e-gantt-dialog .e-control-wrapper .e-input-group-icon.e-time-icon {
353
+ min-height: 38px !important;
354
+ min-width: 35.82px !important;
355
+ }
356
+ .e-bigger .e-gantt-dialog .e-input-group.e-control-wrapper {
357
+ height: 40px;
358
+ }
359
+ .e-bigger .e-gantt-dialog .e-input-group-icon.e-date-icon {
360
+ min-width: 36px !important;
361
+ }
362
+ .e-bigger .e-predecessor-tooltip {
363
+ background-color: #000;
364
+ }
365
+ .e-bigger .e-predecessor-tooltip .e-left-btn:disabled {
366
+ color: #757575 !important;
367
+ }
368
+ .e-bigger .e-predecessor-tooltip .e-right-btn:disabled {
369
+ color: #757575 !important;
370
+ }
371
+ .e-bigger .e-predecessor-tooltip .e-tip-content {
372
+ padding: 3px !important;
373
+ }
374
+ .e-bigger .e-predecessor-tooltip .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
375
+ background-color: #000;
376
+ border-color: #000;
377
+ color: #F9FAFB;
378
+ font-size: 12px;
379
+ line-height: 18px;
380
+ padding: 0 8px 0 0;
381
+ }
382
+ .e-bigger .e-predecessor-tooltip .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
383
+ background-color: #000;
384
+ border-color: #000;
385
+ color: #F9FAFB;
386
+ font-size: 12px;
387
+ line-height: 18px;
388
+ padding: 0 0 0 8px;
389
+ }
390
+ .e-bigger .e-predecessor-dialog {
391
+ background-color: #1a1a1a;
392
+ }
393
+ .e-bigger .e-predecessor-dialog .e-dlg-content {
394
+ background-color: #1a1a1a;
395
+ padding: 10px 9px 9px 14px !important;
211
396
  }
212
397
 
213
398
  .e-gantt {
@@ -362,9 +547,11 @@
362
547
  position: absolute;
363
548
  }
364
549
  .e-gantt .e-gantt-chart .e-chart-root-container .e-holiday-container {
550
+ height: 100%;
365
551
  position: absolute;
366
552
  }
367
553
  .e-gantt .e-gantt-chart .e-chart-root-container .e-weekend-container {
554
+ height: 100%;
368
555
  position: absolute;
369
556
  }
370
557
  .e-gantt .e-gantt-chart .e-timeline-header-container {
@@ -613,37 +800,35 @@
613
800
  cursor: col-resize;
614
801
  }
615
802
  .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler {
616
- border-style: solid;
617
803
  border-width: 1px;
618
804
  box-sizing: content-box;
619
805
  cursor: col-resize;
620
806
  height: 2px;
621
807
  position: absolute;
622
808
  top: 7px;
623
- width: 12px;
624
809
  }
625
810
  .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-element {
626
811
  border-bottom-style: solid;
627
- border-bottom-width: 6px;
812
+ border-bottom-width: 8px;
628
813
  border-left: 7px solid transparent;
629
814
  border-right: 7px solid transparent;
630
815
  cursor: col-resize;
631
816
  height: 0;
632
- left: -1px;
817
+ left: 0;
633
818
  position: absolute;
634
819
  top: -7px;
635
820
  width: 0;
636
821
  }
637
822
  .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-after {
638
823
  border-bottom-style: solid;
639
- border-bottom-width: 6px;
824
+ border-bottom-width: 8px;
640
825
  border-left: 6px solid transparent;
641
826
  border-right: 6px solid transparent;
642
827
  cursor: col-resize;
643
828
  height: 0;
644
- left: -1px;
829
+ left: 1px;
645
830
  position: absolute;
646
- top: -6px;
831
+ top: -7px;
647
832
  width: 0;
648
833
  }
649
834
  .e-gantt .e-gantt-chart .e-baseline-bar {
@@ -778,6 +963,9 @@
778
963
  .e-gantt .e-gantt-chart .e-connector-line-hover {
779
964
  outline: 1px solid;
780
965
  }
966
+ .e-gantt .e-gantt-chart .e-critical-connector-line-hover {
967
+ outline: 1px solid;
968
+ }
781
969
  .e-gantt .e-gantt-chart .e-connector-line-hover-z-index {
782
970
  z-index: 100;
783
971
  }
@@ -1070,6 +1258,10 @@
1070
1258
  height: 100%;
1071
1259
  }
1072
1260
 
1261
+ .e-predecessor-tooltip {
1262
+ visibility: hidden;
1263
+ }
1264
+
1073
1265
  /*! Gantt theme */
1074
1266
  .e-gantt .e-gantt-splitter {
1075
1267
  border-color: #757575;
@@ -1153,7 +1345,7 @@
1153
1345
  border-top-color: #757575;
1154
1346
  }
1155
1347
  .e-gantt .e-gantt-chart .e-chart-row-cell {
1156
- color: rgb(0, 0, 0);
1348
+ color: #000;
1157
1349
  }
1158
1350
  .e-gantt .e-gantt-chart .e-chart-row-border.e-lastrow {
1159
1351
  border-bottom-color: #757575;
@@ -1212,6 +1404,10 @@
1212
1404
  background-color: #67c1b2;
1213
1405
  border: #4fb29f;
1214
1406
  }
1407
+ .e-gantt .e-gantt-chart .e-gantt-critical-child-manualprogressbar {
1408
+ background-color: #67c1b2;
1409
+ border: #4fb29f;
1410
+ }
1215
1411
  .e-gantt .e-gantt-chart .e-holiday {
1216
1412
  background: #ccc;
1217
1413
  }
@@ -1243,7 +1439,6 @@
1243
1439
  }
1244
1440
  .e-gantt .e-gantt-chart .e-gantt-unscheduled-taskbar {
1245
1441
  background: linear-gradient(to right, rgba(62, 4, 125, 0.2), #3e047d 30%, #3e047d 70%, #3e047d 70%, rgba(62, 4, 125, 0.2) 100%);
1246
- background-color: rgba(36, 0, 65, 0.2);
1247
1442
  border: 0px;
1248
1443
  border-radius: 0px;
1249
1444
  }
@@ -1287,7 +1482,7 @@
1287
1482
  }
1288
1483
  .e-gantt .e-gantt-chart .e-connectorpoint-left-hover,
1289
1484
  .e-gantt .e-gantt-chart .e-connectorpoint-right-hover {
1290
- background-color: #3d3d3d;
1485
+ background-color: #ffd939;
1291
1486
  border-color: #000;
1292
1487
  }
1293
1488
  .e-gantt .e-gantt-chart .e-connectorpoint-left-hover:hover,
@@ -1544,4 +1739,56 @@
1544
1739
  }
1545
1740
  .e-gantt.e-device .e-backarrowspan {
1546
1741
  color: #000;
1742
+ }
1743
+
1744
+ .e-gantt .e-gantt-chart .e-criticalconnector-line {
1745
+ border-color: #d13438;
1746
+ }
1747
+
1748
+ .e-gantt .e-gantt-chart .e-criticalconnector-line-right-arrow {
1749
+ border-left-color: #d13438;
1750
+ }
1751
+
1752
+ .e-gantt .e-gantt-chart .e-criticalconnector-line-left-arrow {
1753
+ border-right-color: #d13438;
1754
+ }
1755
+
1756
+ .e-gantt .e-gantt-chart .e-critical-connector-line-hover {
1757
+ border-color: #f3d8da;
1758
+ outline-color: #f3d8da;
1759
+ }
1760
+
1761
+ .e-gantt .e-gantt-chart .e-critical-connector-line-right-arrow-hover {
1762
+ border-left-color: #f3d8da;
1763
+ }
1764
+
1765
+ .e-gantt .e-gantt-chart .e-critical-connector-line-left-arrow-hover {
1766
+ border-right-color: #f3d8da;
1767
+ }
1768
+
1769
+ .e-gantt .e-gantt-chart .e-gantt-child-critical-taskbar-inner-div {
1770
+ background-color: #F3D8DA;
1771
+ border: 1px solid #F3D8DA;
1772
+ border-radius: 0px;
1773
+ }
1774
+
1775
+ .e-gantt .e-gantt-chart .e-gantt-child-critical-progressbar-inner-div {
1776
+ background-color: #D13438;
1777
+ border: 0px;
1778
+ border-radius: 4px;
1779
+ }
1780
+
1781
+ .e-gantt .e-gantt-chart .e-gantt-critical-unscheduled-taskbar {
1782
+ background: linear-gradient(to right, rgba(255, 85, 85, 0.2), #D13438 30%, #D13438 70%, #D13438 70%, rgba(255, 85, 85, 0.2) 100%);
1783
+ background-color: rgba(255, 85, 85, 0.2);
1784
+ border: 0px;
1785
+ border-radius: 0px;
1786
+ }
1787
+
1788
+ .e-gantt .e-gantt-chart .e-critical-milestone-top {
1789
+ border-bottom-color: #D13438;
1790
+ }
1791
+
1792
+ .e-gantt .e-gantt-chart .e-critical-milestone-bottom {
1793
+ border-top-color: #D13438;
1547
1794
  }