@syncfusion/ej2-navigations 20.1.48 → 20.1.56

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 (197) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/ej2-navigations.umd.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-navigations.es2015.js +41 -16
  5. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es5.js +41 -16
  7. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  8. package/dist/global/ej2-navigations.min.js +2 -2
  9. package/dist/global/ej2-navigations.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +11 -11
  12. package/src/carousel/carousel.js +18 -6
  13. package/src/common/menu-base.js +11 -1
  14. package/src/tab/tab.js +9 -6
  15. package/src/treeview/treeview.js +3 -3
  16. package/styles/accordion/bootstrap-dark.css +6 -94
  17. package/styles/accordion/bootstrap.css +6 -94
  18. package/styles/accordion/bootstrap4.css +9 -109
  19. package/styles/accordion/bootstrap5-dark.css +3 -88
  20. package/styles/accordion/bootstrap5.css +3 -88
  21. package/styles/accordion/fabric-dark.css +6 -90
  22. package/styles/accordion/fabric.css +6 -90
  23. package/styles/accordion/fluent-dark.css +6 -87
  24. package/styles/accordion/fluent.css +6 -87
  25. package/styles/accordion/highcontrast-light.css +10 -116
  26. package/styles/accordion/highcontrast.css +10 -116
  27. package/styles/accordion/material-dark.css +6 -93
  28. package/styles/accordion/material.css +6 -93
  29. package/styles/accordion/tailwind-dark.css +6 -93
  30. package/styles/accordion/tailwind.css +6 -93
  31. package/styles/bootstrap-dark.css +272 -2023
  32. package/styles/bootstrap.css +272 -2023
  33. package/styles/bootstrap4.css +278 -2086
  34. package/styles/bootstrap5-dark.css +268 -2064
  35. package/styles/bootstrap5.css +268 -2064
  36. package/styles/breadcrumb/_layout.scss +1 -1
  37. package/styles/breadcrumb/bootstrap-dark.css +9 -91
  38. package/styles/breadcrumb/bootstrap.css +9 -91
  39. package/styles/breadcrumb/bootstrap4.css +9 -91
  40. package/styles/breadcrumb/bootstrap5-dark.css +9 -95
  41. package/styles/breadcrumb/bootstrap5.css +9 -95
  42. package/styles/breadcrumb/fabric-dark.css +9 -90
  43. package/styles/breadcrumb/fabric.css +9 -90
  44. package/styles/breadcrumb/fluent-dark.css +9 -83
  45. package/styles/breadcrumb/fluent.css +9 -83
  46. package/styles/breadcrumb/highcontrast-light.css +9 -92
  47. package/styles/breadcrumb/highcontrast.css +9 -92
  48. package/styles/breadcrumb/material-dark.css +9 -86
  49. package/styles/breadcrumb/material.css +9 -86
  50. package/styles/breadcrumb/tailwind-dark.css +9 -93
  51. package/styles/breadcrumb/tailwind.css +9 -93
  52. package/styles/carousel/_layout.scss +19 -1
  53. package/styles/carousel/bootstrap-dark.css +24 -43
  54. package/styles/carousel/bootstrap.css +24 -43
  55. package/styles/carousel/bootstrap4.css +24 -43
  56. package/styles/carousel/bootstrap5-dark.css +24 -43
  57. package/styles/carousel/bootstrap5.css +24 -43
  58. package/styles/carousel/fabric-dark.css +24 -43
  59. package/styles/carousel/fabric.css +24 -43
  60. package/styles/carousel/fluent-dark.css +24 -43
  61. package/styles/carousel/fluent.css +24 -43
  62. package/styles/carousel/highcontrast-light.css +24 -43
  63. package/styles/carousel/highcontrast.css +24 -43
  64. package/styles/carousel/material-dark.css +24 -43
  65. package/styles/carousel/material.css +24 -43
  66. package/styles/carousel/tailwind-dark.css +24 -43
  67. package/styles/carousel/tailwind.css +24 -43
  68. package/styles/context-menu/bootstrap-dark.css +6 -60
  69. package/styles/context-menu/bootstrap.css +6 -60
  70. package/styles/context-menu/bootstrap4.css +6 -60
  71. package/styles/context-menu/bootstrap5-dark.css +6 -60
  72. package/styles/context-menu/bootstrap5.css +6 -60
  73. package/styles/context-menu/fabric-dark.css +6 -60
  74. package/styles/context-menu/fabric.css +6 -60
  75. package/styles/context-menu/fluent-dark.css +6 -60
  76. package/styles/context-menu/fluent.css +6 -60
  77. package/styles/context-menu/highcontrast-light.css +6 -60
  78. package/styles/context-menu/highcontrast.css +6 -60
  79. package/styles/context-menu/material-dark.css +6 -60
  80. package/styles/context-menu/material.css +6 -60
  81. package/styles/context-menu/tailwind-dark.css +6 -60
  82. package/styles/context-menu/tailwind.css +6 -60
  83. package/styles/fabric-dark.css +263 -2008
  84. package/styles/fabric.css +263 -2008
  85. package/styles/fluent-dark.css +263 -2019
  86. package/styles/fluent.css +263 -2019
  87. package/styles/h-scroll/bootstrap-dark.css +11 -67
  88. package/styles/h-scroll/bootstrap.css +11 -67
  89. package/styles/h-scroll/bootstrap4.css +11 -69
  90. package/styles/h-scroll/bootstrap5-dark.css +11 -68
  91. package/styles/h-scroll/bootstrap5.css +11 -68
  92. package/styles/h-scroll/fabric-dark.css +11 -67
  93. package/styles/h-scroll/fabric.css +11 -67
  94. package/styles/h-scroll/fluent-dark.css +11 -68
  95. package/styles/h-scroll/fluent.css +11 -68
  96. package/styles/h-scroll/highcontrast-light.css +11 -70
  97. package/styles/h-scroll/highcontrast.css +11 -70
  98. package/styles/h-scroll/material-dark.css +11 -68
  99. package/styles/h-scroll/material.css +11 -68
  100. package/styles/h-scroll/tailwind-dark.css +11 -68
  101. package/styles/h-scroll/tailwind.css +11 -68
  102. package/styles/highcontrast-light.css +268 -2080
  103. package/styles/highcontrast.css +268 -2083
  104. package/styles/material-dark.css +266 -1977
  105. package/styles/material.css +259 -1969
  106. package/styles/menu/bootstrap-dark.css +27 -201
  107. package/styles/menu/bootstrap.css +27 -201
  108. package/styles/menu/bootstrap4.css +28 -211
  109. package/styles/menu/bootstrap5-dark.css +27 -202
  110. package/styles/menu/bootstrap5.css +27 -202
  111. package/styles/menu/fabric-dark.css +27 -201
  112. package/styles/menu/fabric.css +27 -201
  113. package/styles/menu/fluent-dark.css +27 -204
  114. package/styles/menu/fluent.css +27 -204
  115. package/styles/menu/highcontrast-light.css +27 -201
  116. package/styles/menu/highcontrast.css +27 -201
  117. package/styles/menu/material-dark.css +27 -203
  118. package/styles/menu/material.css +27 -203
  119. package/styles/menu/tailwind-dark.css +27 -202
  120. package/styles/menu/tailwind.css +27 -202
  121. package/styles/sidebar/bootstrap-dark.css +12 -27
  122. package/styles/sidebar/bootstrap.css +12 -27
  123. package/styles/sidebar/bootstrap4.css +12 -27
  124. package/styles/sidebar/bootstrap5-dark.css +10 -25
  125. package/styles/sidebar/bootstrap5.css +10 -25
  126. package/styles/sidebar/fabric-dark.css +12 -27
  127. package/styles/sidebar/fabric.css +12 -27
  128. package/styles/sidebar/fluent-dark.css +10 -25
  129. package/styles/sidebar/fluent.css +10 -25
  130. package/styles/sidebar/highcontrast-light.css +12 -27
  131. package/styles/sidebar/highcontrast.css +12 -27
  132. package/styles/sidebar/material-dark.css +12 -27
  133. package/styles/sidebar/material.css +12 -27
  134. package/styles/sidebar/tailwind-dark.css +10 -25
  135. package/styles/sidebar/tailwind.css +10 -25
  136. package/styles/tab/bootstrap-dark.css +150 -963
  137. package/styles/tab/bootstrap.css +150 -963
  138. package/styles/tab/bootstrap4.css +150 -970
  139. package/styles/tab/bootstrap5-dark.css +150 -975
  140. package/styles/tab/bootstrap5.css +150 -975
  141. package/styles/tab/fabric-dark.css +141 -954
  142. package/styles/tab/fabric.css +141 -954
  143. package/styles/tab/fluent-dark.css +143 -949
  144. package/styles/tab/fluent.css +143 -949
  145. package/styles/tab/highcontrast-light.css +142 -980
  146. package/styles/tab/highcontrast.css +142 -980
  147. package/styles/tab/material-dark.css +144 -916
  148. package/styles/tab/material.css +137 -909
  149. package/styles/tab/tailwind-dark.css +137 -907
  150. package/styles/tab/tailwind.css +137 -907
  151. package/styles/tailwind-dark.css +257 -1989
  152. package/styles/tailwind.css +257 -1989
  153. package/styles/toolbar/bootstrap-dark.css +7 -246
  154. package/styles/toolbar/bootstrap.css +7 -246
  155. package/styles/toolbar/bootstrap4.css +8 -258
  156. package/styles/toolbar/bootstrap5-dark.css +7 -251
  157. package/styles/toolbar/bootstrap5.css +7 -251
  158. package/styles/toolbar/fabric-dark.css +7 -245
  159. package/styles/toolbar/fabric.css +7 -245
  160. package/styles/toolbar/fluent-dark.css +7 -244
  161. package/styles/toolbar/fluent.css +7 -244
  162. package/styles/toolbar/highcontrast-light.css +7 -257
  163. package/styles/toolbar/highcontrast.css +7 -257
  164. package/styles/toolbar/material-dark.css +7 -248
  165. package/styles/toolbar/material.css +7 -248
  166. package/styles/toolbar/tailwind-dark.css +7 -245
  167. package/styles/toolbar/tailwind.css +7 -245
  168. package/styles/treeview/bootstrap-dark.css +23 -191
  169. package/styles/treeview/bootstrap.css +23 -191
  170. package/styles/treeview/bootstrap4.css +24 -208
  171. package/styles/treeview/bootstrap5-dark.css +24 -217
  172. package/styles/treeview/bootstrap5.css +24 -217
  173. package/styles/treeview/fabric-dark.css +23 -191
  174. package/styles/treeview/fabric.css +23 -191
  175. package/styles/treeview/fluent-dark.css +23 -216
  176. package/styles/treeview/fluent.css +23 -216
  177. package/styles/treeview/highcontrast-light.css +23 -191
  178. package/styles/treeview/highcontrast.css +23 -194
  179. package/styles/treeview/material-dark.css +23 -192
  180. package/styles/treeview/material.css +23 -191
  181. package/styles/treeview/tailwind-dark.css +23 -213
  182. package/styles/treeview/tailwind.css +23 -213
  183. package/styles/v-scroll/bootstrap-dark.css +7 -50
  184. package/styles/v-scroll/bootstrap.css +7 -50
  185. package/styles/v-scroll/bootstrap4.css +7 -50
  186. package/styles/v-scroll/bootstrap5-dark.css +7 -50
  187. package/styles/v-scroll/bootstrap5.css +7 -50
  188. package/styles/v-scroll/fabric-dark.css +7 -50
  189. package/styles/v-scroll/fabric.css +7 -50
  190. package/styles/v-scroll/fluent-dark.css +7 -50
  191. package/styles/v-scroll/fluent.css +7 -50
  192. package/styles/v-scroll/highcontrast-light.css +7 -53
  193. package/styles/v-scroll/highcontrast.css +7 -53
  194. package/styles/v-scroll/material-dark.css +7 -51
  195. package/styles/v-scroll/material.css +7 -51
  196. package/styles/v-scroll/tailwind-dark.css +7 -50
  197. package/styles/v-scroll/tailwind.css +7 -50
@@ -1040,6 +1040,7 @@ const LEFTARROW = 'leftarrow';
1040
1040
  const RIGHTARROW = 'rightarrow';
1041
1041
  const HOME = 'home';
1042
1042
  const END = 'end';
1043
+ const TAB = 'tab';
1043
1044
  const CARET = 'e-caret';
1044
1045
  const ITEM = 'e-menu-item';
1045
1046
  const DISABLED = 'e-disabled';
@@ -1307,6 +1308,7 @@ let MenuBase = class MenuBase extends Component {
1307
1308
  if (this.isMenu) {
1308
1309
  keyConfigs.home = HOME;
1309
1310
  keyConfigs.end = END;
1311
+ keyConfigs.tab = TAB;
1310
1312
  }
1311
1313
  new KeyboardEvents(element, {
1312
1314
  keyAction: this.keyBoardHandler.bind(this),
@@ -1367,6 +1369,7 @@ let MenuBase = class MenuBase extends Component {
1367
1369
  case UPARROW:
1368
1370
  case END:
1369
1371
  case HOME:
1372
+ case TAB:
1370
1373
  this.upDownKeyHandler(e);
1371
1374
  break;
1372
1375
  case RIGHTARROW:
@@ -1393,7 +1396,7 @@ let MenuBase = class MenuBase extends Component {
1393
1396
  }
1394
1397
  upDownKeyHandler(e) {
1395
1398
  const cul = this.getUlByNavIdx();
1396
- const defaultIdx = (e.action === DOWNARROW || e.action === HOME) ? 0 : cul.childElementCount - 1;
1399
+ const defaultIdx = (e.action === DOWNARROW || e.action === HOME || e.action === TAB) ? 0 : cul.childElementCount - 1;
1397
1400
  let fliIdx = defaultIdx;
1398
1401
  const fli = this.getLIByClass(cul, FOCUSED);
1399
1402
  if (fli) {
@@ -1526,6 +1529,12 @@ let MenuBase = class MenuBase extends Component {
1526
1529
  }
1527
1530
  if (!isClose) {
1528
1531
  const liElem = e && e.target && this.getLI(e.target);
1532
+ if (liElem) {
1533
+ this.cli = liElem;
1534
+ }
1535
+ else {
1536
+ this.cli = ul.children[0];
1537
+ }
1529
1538
  item = this.navIdx.length ? this.getItem(this.navIdx) : null;
1530
1539
  items = item ? item.items : this.items;
1531
1540
  beforeCloseArgs = { element: ul, parentItem: item, items: items, event: e, cancel: false, isFocused: true };
@@ -3095,6 +3104,7 @@ let MenuBase = class MenuBase extends Component {
3095
3104
  this.clearTemplate(['template']);
3096
3105
  }
3097
3106
  }
3107
+ this.rippleFn = null;
3098
3108
  }
3099
3109
  };
3100
3110
  __decorate$2([
@@ -8304,10 +8314,12 @@ let Tab = class Tab extends Component {
8304
8314
  bindDraggable() {
8305
8315
  if (this.allowDragAndDrop) {
8306
8316
  const tabHeader = this.element.querySelector('.' + CLS_HEADER$1);
8307
- const items = tabHeader.querySelectorAll('.' + CLS_TB_ITEM);
8308
- items.forEach((element) => {
8309
- this.initializeDrag(element);
8310
- });
8317
+ if (tabHeader) {
8318
+ const items = tabHeader.querySelectorAll('.' + CLS_TB_ITEM);
8319
+ items.forEach((element) => {
8320
+ this.initializeDrag(element);
8321
+ });
8322
+ }
8311
8323
  }
8312
8324
  }
8313
8325
  wireEvents() {
@@ -8875,6 +8887,7 @@ let Tab = class Tab extends Component {
8875
8887
  if (isNullOrUndefined(this.hdrEle)) {
8876
8888
  this.items = items;
8877
8889
  this.reRenderItems();
8890
+ this.bindDraggable();
8878
8891
  }
8879
8892
  else {
8880
8893
  const itemsCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;
@@ -8901,8 +8914,8 @@ let Tab = class Tab extends Component {
8901
8914
  let textValue;
8902
8915
  items.forEach((item, place) => {
8903
8916
  textValue = item.headerTemplate || item.header.text;
8904
- if (!(isNullOrUndefined(item.headerTemplate || item.header) ||
8905
- isNullOrUndefined(textValue) || (textValue.length === 0) && isNullOrUndefined(item.header.iconCss))) {
8917
+ if (!(isNullOrUndefined(item.headerTemplate || item.header) || isNullOrUndefined(textValue) ||
8918
+ (textValue.length === 0) && !isNullOrUndefined(item.header) && isNullOrUndefined(item.header.iconCss))) {
8906
8919
  this.items.splice((index + i), 0, item);
8907
8920
  i++;
8908
8921
  }
@@ -10142,8 +10155,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10142
10155
  this.validNodes.push(checkedChild);
10143
10156
  }
10144
10157
  let subChildItems = getValue(this.fields.child.toString(), childItems[index]);
10145
- if (subChildItems) {
10146
- this.parentCheckData.push(treeData);
10158
+ if (subChildItems && subChildItems.length) {
10159
+ if (this.parentCheckData.indexOf(treeData) === -1)
10160
+ this.parentCheckData.push(treeData);
10147
10161
  this.updateChildCheckState(subChildItems, childItems[index]);
10148
10162
  }
10149
10163
  if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {
@@ -10158,7 +10172,6 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10158
10172
  }
10159
10173
  }
10160
10174
  }
10161
- this.parentCheckData = [];
10162
10175
  }
10163
10176
  beforeNodeCreate(e) {
10164
10177
  if (this.showCheckBox) {
@@ -15901,6 +15914,7 @@ const CLS_HOVER = 'e-carousel-hover';
15901
15914
  const CLS_TEMPLATE$2 = 'e-template';
15902
15915
  const CLS_SLIDE_ANIMATION = 'e-carousel-slide-animation';
15903
15916
  const CLS_FADE_ANIMATION = 'e-carousel-fade-animation';
15917
+ const CLS_CUSTOM_ANIMATION = 'e-carousel-custom-animation';
15904
15918
  const CLS_PREV_SLIDE = 'e-prev';
15905
15919
  const CLS_NEXT_SLIDE = 'e-next';
15906
15920
  const CLS_TRANSITION_START = 'e-transition-start';
@@ -16264,13 +16278,12 @@ let Carousel = class Carousel extends Component {
16264
16278
  }
16265
16279
  applyAnimation() {
16266
16280
  const animationTarget = this.element.querySelector(`.${CLS_ITEMS$2}`);
16267
- removeClass([animationTarget], [CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
16281
+ removeClass([animationTarget], [CLS_CUSTOM_ANIMATION, CLS_FADE_ANIMATION, CLS_SLIDE_ANIMATION]);
16268
16282
  if (this.animation.customEffect) {
16269
- addClass([animationTarget], this.animation.customEffect);
16283
+ addClass([animationTarget], [CLS_CUSTOM_ANIMATION, this.animation.customEffect]);
16270
16284
  }
16271
16285
  else if (this.animation.effect !== 'None') {
16272
- const animationClass = this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION;
16273
- addClass([animationTarget], animationClass);
16286
+ addClass([animationTarget], this.animation.effect === 'Fade' ? CLS_FADE_ANIMATION : CLS_SLIDE_ANIMATION);
16274
16287
  }
16275
16288
  }
16276
16289
  autoSlide() {
@@ -16374,8 +16387,15 @@ let Carousel = class Carousel extends Component {
16374
16387
  isSwiped: isSwiped
16375
16388
  };
16376
16389
  let slideHeight;
16377
- if (this.animation.effect === 'None' || this.animation.customEffect) {
16378
- this.onTransitionEnd();
16390
+ if (this.animation.customEffect) {
16391
+ if (direction === 'Previous') {
16392
+ addClass([args.nextSlide], CLS_NEXT_SLIDE);
16393
+ addClass([args.currentSlide], CLS_PREV_SLIDE);
16394
+ }
16395
+ else {
16396
+ addClass([args.currentSlide], CLS_PREV_SLIDE);
16397
+ addClass([args.nextSlide], CLS_NEXT_SLIDE);
16398
+ }
16379
16399
  }
16380
16400
  else if (this.animation.effect === 'Slide') {
16381
16401
  if (direction === 'Previous') {
@@ -16394,6 +16414,9 @@ let Carousel = class Carousel extends Component {
16394
16414
  removeClass([args.currentSlide], CLS_ACTIVE$2);
16395
16415
  addClass([args.nextSlide], CLS_ACTIVE$2);
16396
16416
  }
16417
+ else {
16418
+ this.onTransitionEnd();
16419
+ }
16397
16420
  this.handleNavigatorsActions(currentIndex);
16398
16421
  });
16399
16422
  }
@@ -16616,6 +16639,7 @@ let Carousel = class Carousel extends Component {
16616
16639
  wireEvents() {
16617
16640
  EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
16618
16641
  EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
16642
+ EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
16619
16643
  EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
16620
16644
  }
16621
16645
  unWireEvents() {
@@ -16631,6 +16655,7 @@ let Carousel = class Carousel extends Component {
16631
16655
  if (playIcon) {
16632
16656
  EventHandler.remove(playIcon, 'click', this.playButtonClickHandler);
16633
16657
  }
16658
+ EventHandler.remove(this.element.firstElementChild, 'animationend', this.onTransitionEnd);
16634
16659
  EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
16635
16660
  EventHandler.clearEvents(this.element);
16636
16661
  }