@syncfusion/ej2-navigations 20.4.44 → 20.4.48
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 +27 -0
- package/dist/ej2-navigations.min.js +2 -2
- 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 +66 -21
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +75 -30
- 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/common/index.d.ts +1 -1
- package/src/common/index.js +1 -1
- package/src/common/menu-base.js +5 -0
- package/src/menu/menu.js +1 -0
- package/src/sidebar/sidebar.js +1 -1
- package/src/tab/tab.js +8 -4
- package/src/toolbar/toolbar.js +15 -3
- package/src/treeview/treeview.d.ts +13 -0
- package/src/treeview/treeview.js +44 -21
- package/styles/bootstrap4.css +1 -1
- package/styles/bootstrap5-dark.css +1 -41
- package/styles/bootstrap5.css +1 -41
- package/styles/context-menu/_theme-mixin.scss +16 -12
- package/styles/context-menu/bootstrap5-dark.css +0 -24
- package/styles/context-menu/bootstrap5.css +0 -24
- package/styles/menu/bootstrap5-dark.css +0 -16
- package/styles/menu/bootstrap5.css +0 -16
- package/styles/treeview/_bootstrap4-definition.scss +1 -1
- package/styles/treeview/_bootstrap5-definition.scss +1 -1
- package/styles/treeview/bootstrap4.css +1 -1
- package/styles/treeview/bootstrap5-dark.css +1 -1
- package/styles/treeview/bootstrap5.css +1 -1
|
@@ -2639,6 +2639,11 @@ let MenuBase = class MenuBase extends Component {
|
|
|
2639
2639
|
navIdx.length = 0;
|
|
2640
2640
|
}
|
|
2641
2641
|
}
|
|
2642
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2643
|
+
if (this.isReact && this.template) {
|
|
2644
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2645
|
+
this.portals = [];
|
|
2646
|
+
}
|
|
2642
2647
|
break;
|
|
2643
2648
|
}
|
|
2644
2649
|
}
|
|
@@ -3620,8 +3625,11 @@ let Toolbar = class Toolbar extends Component {
|
|
|
3620
3625
|
if (popObj && closest(trgt, '.e-popup')) {
|
|
3621
3626
|
const popEle = popObj.element;
|
|
3622
3627
|
const popFrstEle = popEle.firstElementChild;
|
|
3623
|
-
if ((value === 'previous' && popFrstEle === clst)
|
|
3624
|
-
|
|
3628
|
+
if ((value === 'previous' && popFrstEle === clst)) {
|
|
3629
|
+
popEle.lastElementChild.firstChild.focus();
|
|
3630
|
+
}
|
|
3631
|
+
else if (value === 'next' && popEle.lastElementChild === clst) {
|
|
3632
|
+
popFrstEle.firstChild.focus();
|
|
3625
3633
|
}
|
|
3626
3634
|
else {
|
|
3627
3635
|
this.eleFocus(clst, value);
|
|
@@ -3715,7 +3723,7 @@ let Toolbar = class Toolbar extends Component {
|
|
|
3715
3723
|
}
|
|
3716
3724
|
}
|
|
3717
3725
|
eleContains(el) {
|
|
3718
|
-
return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el);
|
|
3726
|
+
return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE$2) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
|
|
3719
3727
|
}
|
|
3720
3728
|
eleFocus(closest$$1, pos) {
|
|
3721
3729
|
const sib = Object(closest$$1)[pos + 'ElementSibling'];
|
|
@@ -3754,6 +3762,15 @@ let Toolbar = class Toolbar extends Component {
|
|
|
3754
3762
|
}
|
|
3755
3763
|
}
|
|
3756
3764
|
}
|
|
3765
|
+
else if (!isNullOrUndefined(closest$$1)) {
|
|
3766
|
+
const tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE$2 + ')' + ':not(.' + CLS_HIDDEN + ')');
|
|
3767
|
+
if (pos === 'next' && tbrItems) {
|
|
3768
|
+
this.elementFocus(tbrItems[0]);
|
|
3769
|
+
}
|
|
3770
|
+
else if (pos === 'previous' && tbrItems) {
|
|
3771
|
+
this.elementFocus(tbrItems[tbrItems.length - 1]);
|
|
3772
|
+
}
|
|
3773
|
+
}
|
|
3757
3774
|
}
|
|
3758
3775
|
clickHandler(e) {
|
|
3759
3776
|
const trgt = e.target;
|
|
@@ -6955,6 +6972,7 @@ let Menu = class Menu extends MenuBase {
|
|
|
6955
6972
|
catch (e) {
|
|
6956
6973
|
/* action on catch */
|
|
6957
6974
|
}
|
|
6975
|
+
this.updateMenuItems(this.items);
|
|
6958
6976
|
}
|
|
6959
6977
|
else {
|
|
6960
6978
|
this.updateMenuItems(this.items);
|
|
@@ -7540,6 +7558,14 @@ let Tab = class Tab extends Component {
|
|
|
7540
7558
|
this.tbObj.createElement = this.createElement;
|
|
7541
7559
|
this.tbObj.appendTo(this.hdrEle);
|
|
7542
7560
|
attributes(this.hdrEle, { role: 'tablist' });
|
|
7561
|
+
if (!isNullOrUndefined(this.element.getAttribute('aria-label'))) {
|
|
7562
|
+
this.hdrEle.setAttribute('aria-label', this.element.getAttribute('aria-label'));
|
|
7563
|
+
this.element.removeAttribute('aria-label');
|
|
7564
|
+
}
|
|
7565
|
+
else if (!isNullOrUndefined(this.element.getAttribute('aria-labelledby'))) {
|
|
7566
|
+
this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
|
|
7567
|
+
this.element.removeAttribute('aria-labelledby');
|
|
7568
|
+
}
|
|
7543
7569
|
this.setCloseButton(this.showCloseButton);
|
|
7544
7570
|
const toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
|
|
7545
7571
|
if (!isNullOrUndefined(toolbarHeader)) {
|
|
@@ -8206,10 +8232,6 @@ let Tab = class Tab extends Component {
|
|
|
8206
8232
|
return;
|
|
8207
8233
|
}
|
|
8208
8234
|
if (!this.isTemplate) {
|
|
8209
|
-
const prev = this.tbItem[this.prevIndex];
|
|
8210
|
-
if (!isNullOrUndefined(prev)) {
|
|
8211
|
-
prev.firstElementChild.removeAttribute('aria-controls');
|
|
8212
|
-
}
|
|
8213
8235
|
attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT$1 + this.tabId + '_' + value });
|
|
8214
8236
|
}
|
|
8215
8237
|
const id = trg.id;
|
|
@@ -9668,6 +9690,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
9668
9690
|
// Specifies whether the node is dropped or not
|
|
9669
9691
|
this.isNodeDropped = false;
|
|
9670
9692
|
this.isInteracted = false;
|
|
9693
|
+
this.isRightClick = false;
|
|
9671
9694
|
this.mouseDownStatus = false;
|
|
9672
9695
|
}
|
|
9673
9696
|
/**
|
|
@@ -10969,6 +10992,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
10969
10992
|
}
|
|
10970
10993
|
}
|
|
10971
10994
|
}
|
|
10995
|
+
if (event.originalEvent.which === 3) {
|
|
10996
|
+
this.isRightClick = true;
|
|
10997
|
+
}
|
|
10972
10998
|
this.triggerClickEvent(event.originalEvent, li);
|
|
10973
10999
|
}
|
|
10974
11000
|
}
|
|
@@ -11399,7 +11425,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
11399
11425
|
if (this.isLoaded) {
|
|
11400
11426
|
eventArgs = this.getSelectEvent(li, 'select', e);
|
|
11401
11427
|
this.trigger('nodeSelecting', eventArgs, (observedArgs) => {
|
|
11402
|
-
if (!observedArgs.cancel && !observedArgs.node.classList.contains(PREVENTSELECT)) {
|
|
11428
|
+
if ((!observedArgs.cancel) && !observedArgs.node.classList.contains(PREVENTSELECT)) {
|
|
11403
11429
|
this.nodeSelectAction(li, e, observedArgs, multiSelect);
|
|
11404
11430
|
}
|
|
11405
11431
|
});
|
|
@@ -11439,6 +11465,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
11439
11465
|
eventArgs.nodeData = this.getNodeData(li);
|
|
11440
11466
|
this.trigger('nodeSelected', eventArgs);
|
|
11441
11467
|
}
|
|
11468
|
+
this.isRightClick = false;
|
|
11442
11469
|
}
|
|
11443
11470
|
unselectNode(li, e) {
|
|
11444
11471
|
let eventArgs;
|
|
@@ -12259,7 +12286,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12259
12286
|
newText = observedArgs.cancel ? observedArgs.oldText : observedArgs.newText;
|
|
12260
12287
|
this.updateText(liEle, txtEle, newText, isInput);
|
|
12261
12288
|
if (observedArgs.oldText !== newText) {
|
|
12262
|
-
this.triggerEvent();
|
|
12289
|
+
this.triggerEvent('nodeEdited', [this.getNode(liEle)]);
|
|
12263
12290
|
}
|
|
12264
12291
|
});
|
|
12265
12292
|
}
|
|
@@ -12572,6 +12599,8 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12572
12599
|
let level;
|
|
12573
12600
|
let drop = false;
|
|
12574
12601
|
let dragInstance;
|
|
12602
|
+
let nodeData = [];
|
|
12603
|
+
let liArray = [];
|
|
12575
12604
|
dragInstance = e.dragData.draggable;
|
|
12576
12605
|
for (let i = 0; i < dragInstance.ej2_instances.length; i++) {
|
|
12577
12606
|
if (dragInstance.ej2_instances[i] instanceof TreeView_1) {
|
|
@@ -12583,6 +12612,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12583
12612
|
let dragTarget = dragObj.dragTarget;
|
|
12584
12613
|
let dragLi = (closest(dragTarget, '.' + LISTITEM));
|
|
12585
12614
|
let dropLi = (closest(dropTarget, '.' + LISTITEM));
|
|
12615
|
+
liArray.push(dragLi);
|
|
12586
12616
|
if (dropLi == null && dropTarget.classList.contains(ROOT)) {
|
|
12587
12617
|
dropLi = dropTarget.firstElementChild;
|
|
12588
12618
|
}
|
|
@@ -12596,6 +12626,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12596
12626
|
}
|
|
12597
12627
|
if (dragObj.allowMultiSelection && dragLi.classList.contains(ACTIVE)) {
|
|
12598
12628
|
let sNodes = selectAll('.' + ACTIVE, dragObj.element);
|
|
12629
|
+
liArray = sNodes;
|
|
12599
12630
|
if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
|
|
12600
12631
|
for (let i = sNodes.length - 1; i >= 0; i--) {
|
|
12601
12632
|
if (dropLi.isSameNode(sNodes[i]) || this.isDescendant(sNodes[i], dropLi)) {
|
|
@@ -12622,13 +12653,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12622
12653
|
if (this.fields.dataSource instanceof DataManager === false) {
|
|
12623
12654
|
this.preventExpand = false;
|
|
12624
12655
|
}
|
|
12656
|
+
for (var i = 0; i < liArray.length; i++) {
|
|
12657
|
+
nodeData.push(this.getNode(liArray[i]));
|
|
12658
|
+
}
|
|
12625
12659
|
this.trigger('nodeDropped', this.getDragEvent(e.event, dragObj, dropTarget, e.target, e.dragData.draggedElement, null, level, drop));
|
|
12626
12660
|
if (dragObj.element.id !== this.element.id) {
|
|
12627
|
-
dragObj.triggerEvent();
|
|
12661
|
+
dragObj.triggerEvent('nodeDropped', nodeData);
|
|
12628
12662
|
this.isNodeDropped = true;
|
|
12629
12663
|
this.fields.dataSource = this.treeData;
|
|
12630
12664
|
}
|
|
12631
|
-
this.triggerEvent();
|
|
12665
|
+
this.triggerEvent('nodeDropped', nodeData);
|
|
12632
12666
|
}
|
|
12633
12667
|
appendNode(dropTarget, dragLi, dropLi, e, dragObj, offsetY) {
|
|
12634
12668
|
let checkWrapper = closest(dropTarget, '.' + CHECKBOXWRAP);
|
|
@@ -13447,9 +13481,16 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
13447
13481
|
}
|
|
13448
13482
|
return removedData;
|
|
13449
13483
|
}
|
|
13450
|
-
triggerEvent() {
|
|
13484
|
+
triggerEvent(action, node) {
|
|
13451
13485
|
this.renderReactTemplates();
|
|
13452
|
-
|
|
13486
|
+
if (action === 'addNodes') {
|
|
13487
|
+
let nodeData = [];
|
|
13488
|
+
for (let i = 0; i < node.length; i++) {
|
|
13489
|
+
nodeData.push(this.getNode(this.getElement(isNullOrUndefined(node[i][this.fields.id]) ? getValue(this.fields.id, node[i]).toString() : null)));
|
|
13490
|
+
}
|
|
13491
|
+
node = nodeData;
|
|
13492
|
+
}
|
|
13493
|
+
let eventArgs = { data: this.treeData, action: action, nodeData: node };
|
|
13453
13494
|
this.trigger('dataSourceChanged', eventArgs);
|
|
13454
13495
|
}
|
|
13455
13496
|
wireInputEvents(inpEle) {
|
|
@@ -13824,8 +13865,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
13824
13865
|
}
|
|
13825
13866
|
}
|
|
13826
13867
|
deleteSuccess(nodes) {
|
|
13868
|
+
let nodeData = [];
|
|
13827
13869
|
for (let i = 0, len = nodes.length; i < len; i++) {
|
|
13828
13870
|
let liEle = this.getElement(nodes[i]);
|
|
13871
|
+
nodeData.push(this.getNode(liEle));
|
|
13829
13872
|
if (isNullOrUndefined(liEle)) {
|
|
13830
13873
|
continue;
|
|
13831
13874
|
}
|
|
@@ -13835,7 +13878,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
13835
13878
|
if (this.dataType === 1) {
|
|
13836
13879
|
this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
|
|
13837
13880
|
}
|
|
13838
|
-
this.triggerEvent();
|
|
13881
|
+
this.triggerEvent('removeNode', nodeData);
|
|
13839
13882
|
}
|
|
13840
13883
|
editSucess(target, newText, prevent) {
|
|
13841
13884
|
let liEle = this.getElement(target);
|
|
@@ -13851,12 +13894,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
13851
13894
|
proxy.renderChildNodes(dropLi, null, () => {
|
|
13852
13895
|
dropUl = dropLi.querySelector('.' + PARENTITEM);
|
|
13853
13896
|
proxy.addGivenNodes(nodes, dropLi, index, true, dropUl);
|
|
13854
|
-
proxy.triggerEvent();
|
|
13897
|
+
proxy.triggerEvent('addNodes', nodes);
|
|
13855
13898
|
});
|
|
13856
13899
|
}
|
|
13857
13900
|
else {
|
|
13858
13901
|
this.addGivenNodes(nodes, dropLi, index, true);
|
|
13859
|
-
this.triggerEvent();
|
|
13902
|
+
this.triggerEvent('addNodes', nodes);
|
|
13860
13903
|
}
|
|
13861
13904
|
}
|
|
13862
13905
|
dmFailure(e, target, prevent) {
|
|
@@ -14066,7 +14109,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
14066
14109
|
}
|
|
14067
14110
|
if ((this.fields.dataSource instanceof DataManager === false)) {
|
|
14068
14111
|
this.preventExpand = false;
|
|
14069
|
-
this.triggerEvent();
|
|
14112
|
+
this.triggerEvent('addNodes', nodes);
|
|
14070
14113
|
}
|
|
14071
14114
|
}
|
|
14072
14115
|
/**
|
|
@@ -14218,11 +14261,13 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
14218
14261
|
*/
|
|
14219
14262
|
moveNodes(sourceNodes, target, index, preventTargetExpand) {
|
|
14220
14263
|
let dropLi = this.getElement(target);
|
|
14264
|
+
let nodeData = [];
|
|
14221
14265
|
if (isNullOrUndefined(dropLi)) {
|
|
14222
14266
|
return;
|
|
14223
14267
|
}
|
|
14224
14268
|
for (let i = 0; i < sourceNodes.length; i++) {
|
|
14225
14269
|
let dragLi = this.getElement(sourceNodes[i]);
|
|
14270
|
+
nodeData.push(this.getNode(dragLi));
|
|
14226
14271
|
if (isNullOrUndefined(dragLi) || dropLi.isSameNode(dragLi) || this.isDescendant(dragLi, dropLi)) {
|
|
14227
14272
|
continue;
|
|
14228
14273
|
}
|
|
@@ -14232,7 +14277,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
14232
14277
|
if (this.fields.dataSource instanceof DataManager === false) {
|
|
14233
14278
|
this.preventExpand = false;
|
|
14234
14279
|
}
|
|
14235
|
-
this.triggerEvent();
|
|
14280
|
+
this.triggerEvent('moveNodes', nodeData);
|
|
14236
14281
|
}
|
|
14237
14282
|
/**
|
|
14238
14283
|
* Refreshes a particular node of the TreeView.
|
|
@@ -14336,7 +14381,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
14336
14381
|
addClass([liEle], ACTIVE);
|
|
14337
14382
|
}
|
|
14338
14383
|
this.isRefreshed = false;
|
|
14339
|
-
this.triggerEvent();
|
|
14384
|
+
this.triggerEvent('refreshNode', [this.getNode(liEle)]);
|
|
14340
14385
|
}
|
|
14341
14386
|
/**
|
|
14342
14387
|
* Removes the collection of TreeView nodes by passing the array of node details as argument to this method.
|
|
@@ -14715,7 +14760,7 @@ let Sidebar = class Sidebar extends Component {
|
|
|
14715
14760
|
}
|
|
14716
14761
|
destroyBackDrop() {
|
|
14717
14762
|
const sibling = document.querySelector('.e-main-content') || this.targetEle;
|
|
14718
|
-
if (this.target && this.showBackdrop && sibling) {
|
|
14763
|
+
if (this.target && this.showBackdrop && sibling && !isNullOrUndefined(this.defaultBackdropDiv)) {
|
|
14719
14764
|
removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
|
|
14720
14765
|
}
|
|
14721
14766
|
else if (this.showBackdrop && this.modal) {
|
|
@@ -17225,5 +17270,5 @@ AppBar = __decorate$12([
|
|
|
17225
17270
|
* Navigation all modules
|
|
17226
17271
|
*/
|
|
17227
17272
|
|
|
17228
|
-
export { MenuAnimationSettings, MenuItem, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
|
|
17273
|
+
export { MenuAnimationSettings, MenuItem, FieldSettings, HScroll, VScroll, addScrolling, destroyScroll, Item, Toolbar, AccordionActionSettings, AccordionAnimationSettings, AccordionItem, Accordion, ContextMenu, Menu, TabActionSettings, TabAnimationSettings, Header, TabItem, Tab, FieldsSettings, ActionSettings, NodeAnimationSettings, TreeView, Sidebar, BreadcrumbItem, Breadcrumb, CarouselItem, Carousel, AppBar };
|
|
17229
17274
|
//# sourceMappingURL=ej2-navigations.es2015.js.map
|