@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.
- package/CHANGELOG.md +22 -0
- package/dist/ej2-navigations.umd.min.js +2 -2
- package/dist/ej2-navigations.umd.min.js.map +1 -1
- package/dist/es6/ej2-navigations.es2015.js +38 -13
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +38 -13
- package/dist/es6/ej2-navigations.es5.js.map +1 -1
- package/dist/global/ej2-navigations.min.js +2 -2
- package/dist/global/ej2-navigations.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +11 -11
- package/src/carousel/carousel.js +18 -6
- package/src/common/menu-base.js +11 -1
- package/src/tab/tab.js +7 -4
- package/src/treeview/treeview.js +2 -2
- package/styles/accordion/bootstrap-dark.css +6 -94
- package/styles/accordion/bootstrap.css +6 -94
- package/styles/accordion/bootstrap4.css +9 -109
- package/styles/accordion/bootstrap5-dark.css +3 -88
- package/styles/accordion/bootstrap5.css +3 -88
- package/styles/accordion/fabric-dark.css +6 -90
- package/styles/accordion/fabric.css +6 -90
- package/styles/accordion/fluent-dark.css +6 -87
- package/styles/accordion/fluent.css +6 -87
- package/styles/accordion/highcontrast-light.css +10 -116
- package/styles/accordion/highcontrast.css +10 -116
- package/styles/accordion/material-dark.css +6 -93
- package/styles/accordion/material.css +6 -93
- package/styles/accordion/tailwind-dark.css +6 -93
- package/styles/accordion/tailwind.css +6 -93
- package/styles/bootstrap-dark.css +271 -2022
- package/styles/bootstrap.css +271 -2022
- package/styles/bootstrap4.css +277 -2085
- package/styles/bootstrap5-dark.css +267 -2063
- package/styles/bootstrap5.css +267 -2063
- package/styles/breadcrumb/bootstrap-dark.css +8 -90
- package/styles/breadcrumb/bootstrap.css +8 -90
- package/styles/breadcrumb/bootstrap4.css +8 -90
- package/styles/breadcrumb/bootstrap5-dark.css +8 -94
- package/styles/breadcrumb/bootstrap5.css +8 -94
- package/styles/breadcrumb/fabric-dark.css +8 -89
- package/styles/breadcrumb/fabric.css +8 -89
- package/styles/breadcrumb/fluent-dark.css +8 -82
- package/styles/breadcrumb/fluent.css +8 -82
- package/styles/breadcrumb/highcontrast-light.css +8 -91
- package/styles/breadcrumb/highcontrast.css +8 -91
- package/styles/breadcrumb/material-dark.css +8 -85
- package/styles/breadcrumb/material.css +8 -85
- package/styles/breadcrumb/tailwind-dark.css +8 -92
- package/styles/breadcrumb/tailwind.css +8 -92
- package/styles/carousel/_layout.scss +19 -1
- package/styles/carousel/bootstrap-dark.css +24 -43
- package/styles/carousel/bootstrap.css +24 -43
- package/styles/carousel/bootstrap4.css +24 -43
- package/styles/carousel/bootstrap5-dark.css +24 -43
- package/styles/carousel/bootstrap5.css +24 -43
- package/styles/carousel/fabric-dark.css +24 -43
- package/styles/carousel/fabric.css +24 -43
- package/styles/carousel/fluent-dark.css +24 -43
- package/styles/carousel/fluent.css +24 -43
- package/styles/carousel/highcontrast-light.css +24 -43
- package/styles/carousel/highcontrast.css +24 -43
- package/styles/carousel/material-dark.css +24 -43
- package/styles/carousel/material.css +24 -43
- package/styles/carousel/tailwind-dark.css +24 -43
- package/styles/carousel/tailwind.css +24 -43
- package/styles/context-menu/bootstrap-dark.css +6 -60
- package/styles/context-menu/bootstrap.css +6 -60
- package/styles/context-menu/bootstrap4.css +6 -60
- package/styles/context-menu/bootstrap5-dark.css +6 -60
- package/styles/context-menu/bootstrap5.css +6 -60
- package/styles/context-menu/fabric-dark.css +6 -60
- package/styles/context-menu/fabric.css +6 -60
- package/styles/context-menu/fluent-dark.css +6 -60
- package/styles/context-menu/fluent.css +6 -60
- package/styles/context-menu/highcontrast-light.css +6 -60
- package/styles/context-menu/highcontrast.css +6 -60
- package/styles/context-menu/material-dark.css +6 -60
- package/styles/context-menu/material.css +6 -60
- package/styles/context-menu/tailwind-dark.css +6 -60
- package/styles/context-menu/tailwind.css +6 -60
- package/styles/fabric-dark.css +262 -2007
- package/styles/fabric.css +262 -2007
- package/styles/fluent-dark.css +262 -2018
- package/styles/fluent.css +262 -2018
- package/styles/h-scroll/bootstrap-dark.css +11 -67
- package/styles/h-scroll/bootstrap.css +11 -67
- package/styles/h-scroll/bootstrap4.css +11 -69
- package/styles/h-scroll/bootstrap5-dark.css +11 -68
- package/styles/h-scroll/bootstrap5.css +11 -68
- package/styles/h-scroll/fabric-dark.css +11 -67
- package/styles/h-scroll/fabric.css +11 -67
- package/styles/h-scroll/fluent-dark.css +11 -68
- package/styles/h-scroll/fluent.css +11 -68
- package/styles/h-scroll/highcontrast-light.css +11 -70
- package/styles/h-scroll/highcontrast.css +11 -70
- package/styles/h-scroll/material-dark.css +11 -68
- package/styles/h-scroll/material.css +11 -68
- package/styles/h-scroll/tailwind-dark.css +11 -68
- package/styles/h-scroll/tailwind.css +11 -68
- package/styles/highcontrast-light.css +267 -2079
- package/styles/highcontrast.css +267 -2082
- package/styles/material-dark.css +265 -1976
- package/styles/material.css +258 -1968
- package/styles/menu/bootstrap-dark.css +27 -201
- package/styles/menu/bootstrap.css +27 -201
- package/styles/menu/bootstrap4.css +28 -211
- package/styles/menu/bootstrap5-dark.css +27 -202
- package/styles/menu/bootstrap5.css +27 -202
- package/styles/menu/fabric-dark.css +27 -201
- package/styles/menu/fabric.css +27 -201
- package/styles/menu/fluent-dark.css +27 -204
- package/styles/menu/fluent.css +27 -204
- package/styles/menu/highcontrast-light.css +27 -201
- package/styles/menu/highcontrast.css +27 -201
- package/styles/menu/material-dark.css +27 -203
- package/styles/menu/material.css +27 -203
- package/styles/menu/tailwind-dark.css +27 -202
- package/styles/menu/tailwind.css +27 -202
- package/styles/sidebar/bootstrap-dark.css +12 -27
- package/styles/sidebar/bootstrap.css +12 -27
- package/styles/sidebar/bootstrap4.css +12 -27
- package/styles/sidebar/bootstrap5-dark.css +10 -25
- package/styles/sidebar/bootstrap5.css +10 -25
- package/styles/sidebar/fabric-dark.css +12 -27
- package/styles/sidebar/fabric.css +12 -27
- package/styles/sidebar/fluent-dark.css +10 -25
- package/styles/sidebar/fluent.css +10 -25
- package/styles/sidebar/highcontrast-light.css +12 -27
- package/styles/sidebar/highcontrast.css +12 -27
- package/styles/sidebar/material-dark.css +12 -27
- package/styles/sidebar/material.css +12 -27
- package/styles/sidebar/tailwind-dark.css +10 -25
- package/styles/sidebar/tailwind.css +10 -25
- package/styles/tab/bootstrap-dark.css +150 -963
- package/styles/tab/bootstrap.css +150 -963
- package/styles/tab/bootstrap4.css +150 -970
- package/styles/tab/bootstrap5-dark.css +150 -975
- package/styles/tab/bootstrap5.css +150 -975
- package/styles/tab/fabric-dark.css +141 -954
- package/styles/tab/fabric.css +141 -954
- package/styles/tab/fluent-dark.css +143 -949
- package/styles/tab/fluent.css +143 -949
- package/styles/tab/highcontrast-light.css +142 -980
- package/styles/tab/highcontrast.css +142 -980
- package/styles/tab/material-dark.css +144 -916
- package/styles/tab/material.css +137 -909
- package/styles/tab/tailwind-dark.css +137 -907
- package/styles/tab/tailwind.css +137 -907
- package/styles/tailwind-dark.css +256 -1988
- package/styles/tailwind.css +256 -1988
- package/styles/toolbar/bootstrap-dark.css +7 -246
- package/styles/toolbar/bootstrap.css +7 -246
- package/styles/toolbar/bootstrap4.css +8 -258
- package/styles/toolbar/bootstrap5-dark.css +7 -251
- package/styles/toolbar/bootstrap5.css +7 -251
- package/styles/toolbar/fabric-dark.css +7 -245
- package/styles/toolbar/fabric.css +7 -245
- package/styles/toolbar/fluent-dark.css +7 -244
- package/styles/toolbar/fluent.css +7 -244
- package/styles/toolbar/highcontrast-light.css +7 -257
- package/styles/toolbar/highcontrast.css +7 -257
- package/styles/toolbar/material-dark.css +7 -248
- package/styles/toolbar/material.css +7 -248
- package/styles/toolbar/tailwind-dark.css +7 -245
- package/styles/toolbar/tailwind.css +7 -245
- package/styles/treeview/bootstrap-dark.css +23 -191
- package/styles/treeview/bootstrap.css +23 -191
- package/styles/treeview/bootstrap4.css +24 -208
- package/styles/treeview/bootstrap5-dark.css +24 -217
- package/styles/treeview/bootstrap5.css +24 -217
- package/styles/treeview/fabric-dark.css +23 -191
- package/styles/treeview/fabric.css +23 -191
- package/styles/treeview/fluent-dark.css +23 -216
- package/styles/treeview/fluent.css +23 -216
- package/styles/treeview/highcontrast-light.css +23 -191
- package/styles/treeview/highcontrast.css +23 -194
- package/styles/treeview/material-dark.css +23 -192
- package/styles/treeview/material.css +23 -191
- package/styles/treeview/tailwind-dark.css +23 -213
- package/styles/treeview/tailwind.css +23 -213
- package/styles/v-scroll/bootstrap-dark.css +7 -50
- package/styles/v-scroll/bootstrap.css +7 -50
- package/styles/v-scroll/bootstrap4.css +7 -50
- package/styles/v-scroll/bootstrap5-dark.css +7 -50
- package/styles/v-scroll/bootstrap5.css +7 -50
- package/styles/v-scroll/fabric-dark.css +7 -50
- package/styles/v-scroll/fabric.css +7 -50
- package/styles/v-scroll/fluent-dark.css +7 -50
- package/styles/v-scroll/fluent.css +7 -50
- package/styles/v-scroll/highcontrast-light.css +7 -53
- package/styles/v-scroll/highcontrast.css +7 -53
- package/styles/v-scroll/material-dark.css +7 -51
- package/styles/v-scroll/material.css +7 -51
- package/styles/v-scroll/tailwind-dark.css +7 -50
- 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
|
-
|
|
8308
|
-
|
|
8309
|
-
|
|
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.
|
|
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
|
-
|
|
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.
|
|
16378
|
-
|
|
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
|
}
|