@syncfusion/ej2-layouts 20.1.47 → 20.1.61

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 (88) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/ej2-layouts.umd.min.js +2 -2
  3. package/dist/ej2-layouts.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-layouts.es2015.js +24 -17
  5. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  6. package/dist/es6/ej2-layouts.es5.js +24 -17
  7. package/dist/es6/ej2-layouts.es5.js.map +1 -1
  8. package/dist/global/ej2-layouts.min.js +2 -2
  9. package/dist/global/ej2-layouts.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +6 -6
  12. package/src/dashboard-layout/dashboard-layout.js +8 -2
  13. package/src/splitter/splitter.js +16 -15
  14. package/styles/avatar/bootstrap-dark.css +1 -7
  15. package/styles/avatar/bootstrap.css +1 -7
  16. package/styles/avatar/bootstrap4.css +1 -7
  17. package/styles/avatar/bootstrap5-dark.css +1 -7
  18. package/styles/avatar/bootstrap5.css +1 -7
  19. package/styles/avatar/fabric-dark.css +1 -7
  20. package/styles/avatar/fabric.css +1 -7
  21. package/styles/avatar/fluent-dark.css +1 -7
  22. package/styles/avatar/fluent.css +1 -7
  23. package/styles/avatar/highcontrast-light.css +1 -7
  24. package/styles/avatar/highcontrast.css +1 -7
  25. package/styles/avatar/material-dark.css +1 -7
  26. package/styles/avatar/material.css +1 -7
  27. package/styles/avatar/tailwind-dark.css +1 -7
  28. package/styles/avatar/tailwind.css +1 -7
  29. package/styles/bootstrap-dark.css +43 -312
  30. package/styles/bootstrap.css +43 -312
  31. package/styles/bootstrap4.css +43 -314
  32. package/styles/bootstrap5-dark.css +41 -309
  33. package/styles/bootstrap5.css +41 -309
  34. package/styles/card/bootstrap-dark.css +1 -85
  35. package/styles/card/bootstrap.css +1 -85
  36. package/styles/card/bootstrap4.css +1 -87
  37. package/styles/card/bootstrap5-dark.css +1 -85
  38. package/styles/card/bootstrap5.css +1 -85
  39. package/styles/card/fabric-dark.css +1 -85
  40. package/styles/card/fabric.css +1 -87
  41. package/styles/card/fluent-dark.css +1 -85
  42. package/styles/card/fluent.css +1 -85
  43. package/styles/card/highcontrast-light.css +1 -85
  44. package/styles/card/highcontrast.css +1 -87
  45. package/styles/card/material-dark.css +1 -85
  46. package/styles/card/material.css +1 -85
  47. package/styles/card/tailwind-dark.css +1 -87
  48. package/styles/card/tailwind.css +1 -87
  49. package/styles/dashboard-layout/bootstrap-dark.css +28 -116
  50. package/styles/dashboard-layout/bootstrap.css +28 -116
  51. package/styles/dashboard-layout/bootstrap4.css +28 -116
  52. package/styles/dashboard-layout/bootstrap5-dark.css +28 -117
  53. package/styles/dashboard-layout/bootstrap5.css +28 -117
  54. package/styles/dashboard-layout/fabric-dark.css +28 -116
  55. package/styles/dashboard-layout/fabric.css +28 -116
  56. package/styles/dashboard-layout/fluent-dark.css +28 -117
  57. package/styles/dashboard-layout/fluent.css +28 -117
  58. package/styles/dashboard-layout/highcontrast-light.css +16 -85
  59. package/styles/dashboard-layout/highcontrast.css +28 -115
  60. package/styles/dashboard-layout/material-dark.css +28 -116
  61. package/styles/dashboard-layout/material.css +28 -116
  62. package/styles/dashboard-layout/tailwind-dark.css +28 -119
  63. package/styles/dashboard-layout/tailwind.css +28 -119
  64. package/styles/fabric-dark.css +43 -312
  65. package/styles/fabric.css +43 -314
  66. package/styles/fluent-dark.css +41 -309
  67. package/styles/fluent.css +41 -309
  68. package/styles/highcontrast-light.css +31 -281
  69. package/styles/highcontrast.css +43 -313
  70. package/styles/material-dark.css +53 -322
  71. package/styles/material.css +43 -312
  72. package/styles/splitter/bootstrap-dark.css +16 -107
  73. package/styles/splitter/bootstrap.css +16 -107
  74. package/styles/splitter/bootstrap4.css +16 -107
  75. package/styles/splitter/bootstrap5-dark.css +14 -103
  76. package/styles/splitter/bootstrap5.css +14 -103
  77. package/styles/splitter/fabric-dark.css +16 -107
  78. package/styles/splitter/fabric.css +16 -107
  79. package/styles/splitter/fluent-dark.css +14 -103
  80. package/styles/splitter/fluent.css +14 -103
  81. package/styles/splitter/highcontrast-light.css +16 -107
  82. package/styles/splitter/highcontrast.css +16 -107
  83. package/styles/splitter/material-dark.css +26 -117
  84. package/styles/splitter/material.css +16 -107
  85. package/styles/splitter/tailwind-dark.css +14 -103
  86. package/styles/splitter/tailwind.css +14 -103
  87. package/styles/tailwind-dark.css +41 -313
  88. package/styles/tailwind.css +41 -313
@@ -1059,7 +1059,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
1059
1059
  paneMinRange = this.convertPercentageToPixel(this.paneSettings[i].min);
1060
1060
  }
1061
1061
  minValue = this.convertPixelToNumber((paneMinRange).toString());
1062
- if (this.allPanes[i].offsetWidth < minValue) {
1062
+ if ((this.orientation === 'Horizontal' ? this.allPanes[i].offsetWidth : this.allPanes[i].offsetHeight) < minValue) {
1063
1063
  if (i === paneIndex) {
1064
1064
  updatePane = this.allPanes[i];
1065
1065
  flexPane = this.allPanes[i + 1];
@@ -1068,12 +1068,15 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
1068
1068
  updatePane = this.allPanes[i];
1069
1069
  flexPane = this.allPanes[i - 1];
1070
1070
  }
1071
- var sizeDiff = minValue - this.allPanes[i].offsetWidth;
1071
+ var sizeDiff = minValue - (this.orientation === 'Horizontal' ?
1072
+ this.allPanes[i].offsetWidth : this.allPanes[i].offsetHeight);
1072
1073
  var isPercent = updatePane.style.flexBasis.indexOf('%') > -1;
1073
- updatePane.style.flexBasis = isPercent ? this.convertPixelToPercentage(updatePane.offsetWidth + sizeDiff) + '%'
1074
- : (updatePane.offsetWidth + sizeDiff) + 'px';
1074
+ var updatePaneOffset = this.orientation === 'Horizontal' ? updatePane.offsetWidth : updatePane.offsetHeight;
1075
+ updatePane.style.flexBasis = isPercent ? this.convertPixelToPercentage(updatePaneOffset + sizeDiff) + '%'
1076
+ : (updatePaneOffset + sizeDiff) + 'px';
1077
+ var flexPaneOffset = this.orientation === 'Horizontal' ? flexPane.offsetWidth : flexPane.offsetHeight;
1075
1078
  flexPane.style.flexBasis = flexPane.style.flexBasis.indexOf('%') > -1 ?
1076
- this.convertPixelToPercentage(flexPane.offsetWidth - sizeDiff) + '%' : (flexPane.offsetWidth - sizeDiff) + 'px';
1079
+ this.convertPixelToPercentage(flexPaneOffset - sizeDiff) + '%' : (flexPaneOffset - sizeDiff) + 'px';
1077
1080
  }
1078
1081
  }
1079
1082
  }
@@ -1198,22 +1201,20 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
1198
1201
  var visiblePane = collapseCount === this.allPanes.length - 2;
1199
1202
  var panes = this.allPanes;
1200
1203
  for (var i = 0; i < panes.length; i++) {
1201
- if (panes[i].classList.contains(EXPAND_PANE)) {
1202
- panes[i].style.flexGrow = '1';
1203
- }
1204
- else if (panes[i].classList.contains(COLLAPSE_PANE)) {
1205
- panes[i].style.flexGrow = '0';
1206
- }
1207
- else {
1208
- panes[i].style.flexGrow = '';
1209
- }
1204
+ panes[i].style.flexGrow = '';
1210
1205
  if (status && !this.nextPane.classList.contains(COLLAPSE_PANE)) {
1211
1206
  this.nextPane.style.flexGrow = '1';
1212
1207
  }
1213
- if (visiblePane && !this.allPanes[i].classList.contains(COLLAPSE_PANE) && this.paneSettings[i].size &&
1208
+ if (visiblePane && this.allPanes[i].classList.contains(COLLAPSE_PANE) && this.paneSettings[i].size &&
1214
1209
  i !== this.allPanes.length - 1) {
1215
1210
  panes[i].style.flexGrow = '';
1216
1211
  }
1212
+ if (panes[i].classList.contains(EXPAND_PANE)) {
1213
+ panes[i].style.flexGrow = '1';
1214
+ }
1215
+ else if (panes[i].classList.contains(COLLAPSE_PANE)) {
1216
+ panes[i].style.flexGrow = '0';
1217
+ }
1217
1218
  }
1218
1219
  };
1219
1220
  Splitter.prototype.hideTargetBarIcon = function (targetBar, targetArrow) {
@@ -3252,9 +3253,15 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
3252
3253
  var heightValue;
3253
3254
  var widthValue;
3254
3255
  if (this.checkMediaQuery()) {
3255
- heightValue = ((this.maxRow()) *
3256
+ var entirePanelsY = 0;
3257
+ for (var i = 0; i < this.panels.length; i++) {
3258
+ if (this.panels[i].sizeY) {
3259
+ entirePanelsY += this.panels[i].sizeY;
3260
+ }
3261
+ }
3262
+ heightValue = ((entirePanelsY) *
3256
3263
  (this.element.parentElement && ((this.element.parentElement.offsetWidth)) / this.cellAspectRatio) +
3257
- (this.maxRow() - 1) * this.cellSpacing[1]) + 'px';
3264
+ (entirePanelsY - 1) * this.cellSpacing[1]) + 'px';
3258
3265
  }
3259
3266
  else {
3260
3267
  heightValue = ((this.maxRow()) *