@syncfusion/ej2-navigations 20.1.51 → 20.1.57

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 (196) hide show
  1. package/CHANGELOG.md +22 -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 +38 -13
  5. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es5.js +38 -13
  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 +7 -4
  15. package/src/treeview/treeview.js +2 -2
  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 +271 -2022
  32. package/styles/bootstrap.css +271 -2022
  33. package/styles/bootstrap4.css +277 -2085
  34. package/styles/bootstrap5-dark.css +267 -2063
  35. package/styles/bootstrap5.css +267 -2063
  36. package/styles/breadcrumb/bootstrap-dark.css +8 -90
  37. package/styles/breadcrumb/bootstrap.css +8 -90
  38. package/styles/breadcrumb/bootstrap4.css +8 -90
  39. package/styles/breadcrumb/bootstrap5-dark.css +8 -94
  40. package/styles/breadcrumb/bootstrap5.css +8 -94
  41. package/styles/breadcrumb/fabric-dark.css +8 -89
  42. package/styles/breadcrumb/fabric.css +8 -89
  43. package/styles/breadcrumb/fluent-dark.css +8 -82
  44. package/styles/breadcrumb/fluent.css +8 -82
  45. package/styles/breadcrumb/highcontrast-light.css +8 -91
  46. package/styles/breadcrumb/highcontrast.css +8 -91
  47. package/styles/breadcrumb/material-dark.css +8 -85
  48. package/styles/breadcrumb/material.css +8 -85
  49. package/styles/breadcrumb/tailwind-dark.css +8 -92
  50. package/styles/breadcrumb/tailwind.css +8 -92
  51. package/styles/carousel/_layout.scss +19 -1
  52. package/styles/carousel/bootstrap-dark.css +24 -43
  53. package/styles/carousel/bootstrap.css +24 -43
  54. package/styles/carousel/bootstrap4.css +24 -43
  55. package/styles/carousel/bootstrap5-dark.css +24 -43
  56. package/styles/carousel/bootstrap5.css +24 -43
  57. package/styles/carousel/fabric-dark.css +24 -43
  58. package/styles/carousel/fabric.css +24 -43
  59. package/styles/carousel/fluent-dark.css +24 -43
  60. package/styles/carousel/fluent.css +24 -43
  61. package/styles/carousel/highcontrast-light.css +24 -43
  62. package/styles/carousel/highcontrast.css +24 -43
  63. package/styles/carousel/material-dark.css +24 -43
  64. package/styles/carousel/material.css +24 -43
  65. package/styles/carousel/tailwind-dark.css +24 -43
  66. package/styles/carousel/tailwind.css +24 -43
  67. package/styles/context-menu/bootstrap-dark.css +6 -60
  68. package/styles/context-menu/bootstrap.css +6 -60
  69. package/styles/context-menu/bootstrap4.css +6 -60
  70. package/styles/context-menu/bootstrap5-dark.css +6 -60
  71. package/styles/context-menu/bootstrap5.css +6 -60
  72. package/styles/context-menu/fabric-dark.css +6 -60
  73. package/styles/context-menu/fabric.css +6 -60
  74. package/styles/context-menu/fluent-dark.css +6 -60
  75. package/styles/context-menu/fluent.css +6 -60
  76. package/styles/context-menu/highcontrast-light.css +6 -60
  77. package/styles/context-menu/highcontrast.css +6 -60
  78. package/styles/context-menu/material-dark.css +6 -60
  79. package/styles/context-menu/material.css +6 -60
  80. package/styles/context-menu/tailwind-dark.css +6 -60
  81. package/styles/context-menu/tailwind.css +6 -60
  82. package/styles/fabric-dark.css +262 -2007
  83. package/styles/fabric.css +262 -2007
  84. package/styles/fluent-dark.css +262 -2018
  85. package/styles/fluent.css +262 -2018
  86. package/styles/h-scroll/bootstrap-dark.css +11 -67
  87. package/styles/h-scroll/bootstrap.css +11 -67
  88. package/styles/h-scroll/bootstrap4.css +11 -69
  89. package/styles/h-scroll/bootstrap5-dark.css +11 -68
  90. package/styles/h-scroll/bootstrap5.css +11 -68
  91. package/styles/h-scroll/fabric-dark.css +11 -67
  92. package/styles/h-scroll/fabric.css +11 -67
  93. package/styles/h-scroll/fluent-dark.css +11 -68
  94. package/styles/h-scroll/fluent.css +11 -68
  95. package/styles/h-scroll/highcontrast-light.css +11 -70
  96. package/styles/h-scroll/highcontrast.css +11 -70
  97. package/styles/h-scroll/material-dark.css +11 -68
  98. package/styles/h-scroll/material.css +11 -68
  99. package/styles/h-scroll/tailwind-dark.css +11 -68
  100. package/styles/h-scroll/tailwind.css +11 -68
  101. package/styles/highcontrast-light.css +267 -2079
  102. package/styles/highcontrast.css +267 -2082
  103. package/styles/material-dark.css +265 -1976
  104. package/styles/material.css +258 -1968
  105. package/styles/menu/bootstrap-dark.css +27 -201
  106. package/styles/menu/bootstrap.css +27 -201
  107. package/styles/menu/bootstrap4.css +28 -211
  108. package/styles/menu/bootstrap5-dark.css +27 -202
  109. package/styles/menu/bootstrap5.css +27 -202
  110. package/styles/menu/fabric-dark.css +27 -201
  111. package/styles/menu/fabric.css +27 -201
  112. package/styles/menu/fluent-dark.css +27 -204
  113. package/styles/menu/fluent.css +27 -204
  114. package/styles/menu/highcontrast-light.css +27 -201
  115. package/styles/menu/highcontrast.css +27 -201
  116. package/styles/menu/material-dark.css +27 -203
  117. package/styles/menu/material.css +27 -203
  118. package/styles/menu/tailwind-dark.css +27 -202
  119. package/styles/menu/tailwind.css +27 -202
  120. package/styles/sidebar/bootstrap-dark.css +12 -27
  121. package/styles/sidebar/bootstrap.css +12 -27
  122. package/styles/sidebar/bootstrap4.css +12 -27
  123. package/styles/sidebar/bootstrap5-dark.css +10 -25
  124. package/styles/sidebar/bootstrap5.css +10 -25
  125. package/styles/sidebar/fabric-dark.css +12 -27
  126. package/styles/sidebar/fabric.css +12 -27
  127. package/styles/sidebar/fluent-dark.css +10 -25
  128. package/styles/sidebar/fluent.css +10 -25
  129. package/styles/sidebar/highcontrast-light.css +12 -27
  130. package/styles/sidebar/highcontrast.css +12 -27
  131. package/styles/sidebar/material-dark.css +12 -27
  132. package/styles/sidebar/material.css +12 -27
  133. package/styles/sidebar/tailwind-dark.css +10 -25
  134. package/styles/sidebar/tailwind.css +10 -25
  135. package/styles/tab/bootstrap-dark.css +150 -963
  136. package/styles/tab/bootstrap.css +150 -963
  137. package/styles/tab/bootstrap4.css +150 -970
  138. package/styles/tab/bootstrap5-dark.css +150 -975
  139. package/styles/tab/bootstrap5.css +150 -975
  140. package/styles/tab/fabric-dark.css +141 -954
  141. package/styles/tab/fabric.css +141 -954
  142. package/styles/tab/fluent-dark.css +143 -949
  143. package/styles/tab/fluent.css +143 -949
  144. package/styles/tab/highcontrast-light.css +142 -980
  145. package/styles/tab/highcontrast.css +142 -980
  146. package/styles/tab/material-dark.css +144 -916
  147. package/styles/tab/material.css +137 -909
  148. package/styles/tab/tailwind-dark.css +137 -907
  149. package/styles/tab/tailwind.css +137 -907
  150. package/styles/tailwind-dark.css +256 -1988
  151. package/styles/tailwind.css +256 -1988
  152. package/styles/toolbar/bootstrap-dark.css +7 -246
  153. package/styles/toolbar/bootstrap.css +7 -246
  154. package/styles/toolbar/bootstrap4.css +8 -258
  155. package/styles/toolbar/bootstrap5-dark.css +7 -251
  156. package/styles/toolbar/bootstrap5.css +7 -251
  157. package/styles/toolbar/fabric-dark.css +7 -245
  158. package/styles/toolbar/fabric.css +7 -245
  159. package/styles/toolbar/fluent-dark.css +7 -244
  160. package/styles/toolbar/fluent.css +7 -244
  161. package/styles/toolbar/highcontrast-light.css +7 -257
  162. package/styles/toolbar/highcontrast.css +7 -257
  163. package/styles/toolbar/material-dark.css +7 -248
  164. package/styles/toolbar/material.css +7 -248
  165. package/styles/toolbar/tailwind-dark.css +7 -245
  166. package/styles/toolbar/tailwind.css +7 -245
  167. package/styles/treeview/bootstrap-dark.css +23 -191
  168. package/styles/treeview/bootstrap.css +23 -191
  169. package/styles/treeview/bootstrap4.css +24 -208
  170. package/styles/treeview/bootstrap5-dark.css +24 -217
  171. package/styles/treeview/bootstrap5.css +24 -217
  172. package/styles/treeview/fabric-dark.css +23 -191
  173. package/styles/treeview/fabric.css +23 -191
  174. package/styles/treeview/fluent-dark.css +23 -216
  175. package/styles/treeview/fluent.css +23 -216
  176. package/styles/treeview/highcontrast-light.css +23 -191
  177. package/styles/treeview/highcontrast.css +23 -194
  178. package/styles/treeview/material-dark.css +23 -192
  179. package/styles/treeview/material.css +23 -191
  180. package/styles/treeview/tailwind-dark.css +23 -213
  181. package/styles/treeview/tailwind.css +23 -213
  182. package/styles/v-scroll/bootstrap-dark.css +7 -50
  183. package/styles/v-scroll/bootstrap.css +7 -50
  184. package/styles/v-scroll/bootstrap4.css +7 -50
  185. package/styles/v-scroll/bootstrap5-dark.css +7 -50
  186. package/styles/v-scroll/bootstrap5.css +7 -50
  187. package/styles/v-scroll/fabric-dark.css +7 -50
  188. package/styles/v-scroll/fabric.css +7 -50
  189. package/styles/v-scroll/fluent-dark.css +7 -50
  190. package/styles/v-scroll/fluent.css +7 -50
  191. package/styles/v-scroll/highcontrast-light.css +7 -53
  192. package/styles/v-scroll/highcontrast.css +7 -53
  193. package/styles/v-scroll/material-dark.css +7 -51
  194. package/styles/v-scroll/material.css +7 -51
  195. package/styles/v-scroll/tailwind-dark.css +7 -50
  196. 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;
@@ -10143,7 +10156,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10143
10156
  }
10144
10157
  let subChildItems = getValue(this.fields.child.toString(), childItems[index]);
10145
10158
  if (subChildItems && subChildItems.length) {
10146
- this.parentCheckData.push(treeData);
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
  }