@syncfusion/ej2-navigations 21.1.39 → 21.2.3
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 +14 -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 +46 -46
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +46 -46
- 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 +12 -15
- package/src/common/h-scroll.js +1 -0
- package/src/common/menu-base.js +5 -13
- package/src/common/v-scroll.js +1 -1
- package/src/tab/tab.d.ts +1 -0
- package/src/tab/tab.js +34 -27
- package/src/treeview/treeview.js +5 -5
- package/styles/bootstrap-dark.css +35 -16
- package/styles/bootstrap.css +35 -16
- package/styles/bootstrap4.css +35 -16
- package/styles/bootstrap5-dark.css +35 -16
- package/styles/bootstrap5.css +35 -16
- package/styles/fabric-dark.css +35 -16
- package/styles/fabric.css +35 -16
- package/styles/fluent-dark.css +35 -16
- package/styles/fluent.css +35 -16
- package/styles/highcontrast-light.css +35 -16
- package/styles/highcontrast.css +37 -17
- package/styles/material-dark.css +35 -16
- package/styles/material.css +35 -16
- package/styles/tailwind-dark.css +35 -16
- package/styles/tailwind.css +35 -16
- package/styles/treeview/_theme.scss +20 -10
- package/styles/treeview/bootstrap-dark.css +35 -16
- package/styles/treeview/bootstrap.css +35 -16
- package/styles/treeview/bootstrap4.css +35 -16
- package/styles/treeview/bootstrap5-dark.css +35 -16
- package/styles/treeview/bootstrap5.css +35 -16
- package/styles/treeview/fabric-dark.css +35 -16
- package/styles/treeview/fabric.css +35 -16
- package/styles/treeview/fluent-dark.css +35 -16
- package/styles/treeview/fluent.css +35 -16
- package/styles/treeview/highcontrast-light.css +35 -16
- package/styles/treeview/highcontrast.css +37 -17
- package/styles/treeview/material-dark.css +35 -16
- package/styles/treeview/material.css +35 -16
- package/styles/treeview/tailwind-dark.css +35 -16
- package/styles/treeview/tailwind.css +35 -16
|
@@ -137,6 +137,7 @@ let HScroll = class HScroll extends Component {
|
|
|
137
137
|
ele.style.display = '';
|
|
138
138
|
ele.classList.remove(CLS_ROOT);
|
|
139
139
|
ele.classList.remove(CLS_DEVICE);
|
|
140
|
+
ele.classList.remove(CLS_RTL);
|
|
140
141
|
const nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);
|
|
141
142
|
const overlay = selectAll('.' + CLS_OVERLAY, ele);
|
|
142
143
|
[].slice.call(overlay).forEach((ele) => {
|
|
@@ -609,7 +610,7 @@ let VScroll = class VScroll extends Component {
|
|
|
609
610
|
destroy() {
|
|
610
611
|
const el = this.element;
|
|
611
612
|
el.style.display = '';
|
|
612
|
-
removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1]);
|
|
613
|
+
removeClass([this.element], [CLS_ROOT$1, CLS_DEVICE$1, CLS_RTL$1]);
|
|
613
614
|
const navs = selectAll('.e-' + el.id + '_nav.' + CLS_VSCROLLNAV, el);
|
|
614
615
|
const overlays = selectAll('.' + CLS_OVERLAY$1, el);
|
|
615
616
|
[].slice.call(overlays).forEach((ele) => {
|
|
@@ -1586,7 +1587,9 @@ let MenuBase = class MenuBase extends Component {
|
|
|
1586
1587
|
this.navIdx.pop();
|
|
1587
1588
|
if (!this.isMenu) {
|
|
1588
1589
|
EventHandler.remove(ul, 'keydown', this.keyHandler);
|
|
1589
|
-
this.keyType
|
|
1590
|
+
if (this.keyType === 'right') {
|
|
1591
|
+
this.keyType = '';
|
|
1592
|
+
}
|
|
1590
1593
|
}
|
|
1591
1594
|
}
|
|
1592
1595
|
this.updateReactTemplate();
|
|
@@ -3012,20 +3015,10 @@ let MenuBase = class MenuBase extends Component {
|
|
|
3012
3015
|
ul = this.getUlByNavIdx(navIdx.length);
|
|
3013
3016
|
if (ul) {
|
|
3014
3017
|
if (ishide) {
|
|
3015
|
-
|
|
3016
|
-
ul.children[index + 1].classList.add(HIDE);
|
|
3017
|
-
}
|
|
3018
|
-
else {
|
|
3019
|
-
ul.children[index].classList.add(HIDE);
|
|
3020
|
-
}
|
|
3018
|
+
ul.children[index].classList.add(HIDE);
|
|
3021
3019
|
}
|
|
3022
3020
|
else {
|
|
3023
|
-
|
|
3024
|
-
ul.children[index + 1].classList.remove(HIDE);
|
|
3025
|
-
}
|
|
3026
|
-
else {
|
|
3027
|
-
ul.children[index].classList.remove(HIDE);
|
|
3028
|
-
}
|
|
3021
|
+
ul.children[index].classList.remove(HIDE);
|
|
3029
3022
|
}
|
|
3030
3023
|
}
|
|
3031
3024
|
}
|
|
@@ -8559,6 +8552,9 @@ let Tab = class Tab extends Component {
|
|
|
8559
8552
|
const icon = (isNullOrUndefined(this.items[index].header) ||
|
|
8560
8553
|
isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
|
|
8561
8554
|
const textVal = this.items[index].headerTemplate || this.items[index].header.text;
|
|
8555
|
+
if (properties[j] === 'headerTemplate') {
|
|
8556
|
+
this.clearTabTemplate(hdrItem, properties[j], CLS_TB_ITEM);
|
|
8557
|
+
}
|
|
8562
8558
|
if ((textVal === '') && (icon === '')) {
|
|
8563
8559
|
this.removeTab(index);
|
|
8564
8560
|
}
|
|
@@ -8590,7 +8586,8 @@ let Tab = class Tab extends Component {
|
|
|
8590
8586
|
document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
|
|
8591
8587
|
cntItem.innerHTML = newVal;
|
|
8592
8588
|
}
|
|
8593
|
-
else if (this.isReact) {
|
|
8589
|
+
else if (this.isAngular || this.isReact) {
|
|
8590
|
+
this.clearTabTemplate(cntItem, properties[j], CLS_ITEM$2);
|
|
8594
8591
|
cntItem.innerHTML = '';
|
|
8595
8592
|
this.templateCompile(cntItem, newVal, index);
|
|
8596
8593
|
}
|
|
@@ -8641,6 +8638,30 @@ let Tab = class Tab extends Component {
|
|
|
8641
8638
|
}
|
|
8642
8639
|
}
|
|
8643
8640
|
}
|
|
8641
|
+
clearTabTemplate(templateEle, templateName, className) {
|
|
8642
|
+
if (this.registeredTemplate && this.registeredTemplate[templateName]) {
|
|
8643
|
+
const registeredTemplates = this.registeredTemplate;
|
|
8644
|
+
for (let index = 0; index < registeredTemplates[templateName].length; index++) {
|
|
8645
|
+
const registeredItem = registeredTemplates[templateName][index].rootNodes[0];
|
|
8646
|
+
const closestItem = closest(registeredItem, '.' + className);
|
|
8647
|
+
if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
|
|
8648
|
+
this.clearTemplate([templateName], [registeredTemplates[templateName][index]]);
|
|
8649
|
+
break;
|
|
8650
|
+
}
|
|
8651
|
+
}
|
|
8652
|
+
}
|
|
8653
|
+
else if (this.portals && this.portals.length > 0) {
|
|
8654
|
+
const portals = this.portals;
|
|
8655
|
+
for (let index = 0; index < portals.length; index++) {
|
|
8656
|
+
const portalItem = portals[index];
|
|
8657
|
+
const closestItem = closest(portalItem.containerInfo, '.' + className);
|
|
8658
|
+
if (!isNullOrUndefined(closestItem) && closestItem === templateEle) {
|
|
8659
|
+
this.clearTemplate([templateName], index);
|
|
8660
|
+
break;
|
|
8661
|
+
}
|
|
8662
|
+
}
|
|
8663
|
+
}
|
|
8664
|
+
}
|
|
8644
8665
|
initializeDrag(target) {
|
|
8645
8666
|
let dragObj = new Draggable(target, {
|
|
8646
8667
|
dragArea: this.dragArea,
|
|
@@ -8984,6 +9005,10 @@ let Tab = class Tab extends Component {
|
|
|
8984
9005
|
const removeArgs = { removedItem: trg, removedIndex: index, cancel: false };
|
|
8985
9006
|
this.trigger('removing', removeArgs, (tabRemovingArgs) => {
|
|
8986
9007
|
if (!tabRemovingArgs.cancel) {
|
|
9008
|
+
const header = select('#' + CLS_ITEM$2 + this.tabId + '_' + this.extIndex(trg.id), select('.' + CLS_TB_ITEMS, this.element));
|
|
9009
|
+
if (!isNullOrUndefined(header)) {
|
|
9010
|
+
this.clearTabTemplate(header, 'headerTemplate', CLS_TB_ITEM);
|
|
9011
|
+
}
|
|
8987
9012
|
this.tbObj.removeItems(index);
|
|
8988
9013
|
if (this.allowDragAndDrop && (index !== Array.prototype.indexOf.call(this.itemIndexArray, trg.id))) {
|
|
8989
9014
|
index = Array.prototype.indexOf.call(this.itemIndexArray, trg.id);
|
|
@@ -8994,32 +9019,7 @@ let Tab = class Tab extends Component {
|
|
|
8994
9019
|
this.refreshActiveBorder();
|
|
8995
9020
|
const cntTrg = select('#' + CLS_CONTENT$1 + this.tabId + '_' + this.extIndex(trg.id), select('.' + CLS_CONTENT$1, this.element));
|
|
8996
9021
|
if (!isNullOrUndefined(cntTrg)) {
|
|
8997
|
-
|
|
8998
|
-
const portal = this.portals;
|
|
8999
|
-
if (registeredTemplate && registeredTemplate.content) {
|
|
9000
|
-
var templateToClear = [];
|
|
9001
|
-
for (let i = 0; i < registeredTemplate.content.length; i++) {
|
|
9002
|
-
let registeredItem = registeredTemplate.content[i].rootNodes[0];
|
|
9003
|
-
let closestItem = closest(registeredItem, '.' + CLS_ITEM$2);
|
|
9004
|
-
if (!isNullOrUndefined(registeredItem) && closestItem === cntTrg) {
|
|
9005
|
-
templateToClear.push(registeredTemplate.content[i]);
|
|
9006
|
-
break;
|
|
9007
|
-
}
|
|
9008
|
-
}
|
|
9009
|
-
if (templateToClear.length > 0) {
|
|
9010
|
-
this.clearTemplate(['content'], templateToClear);
|
|
9011
|
-
}
|
|
9012
|
-
}
|
|
9013
|
-
/* else if (portal) {
|
|
9014
|
-
for (var i = 0; i < portal.length; i++) {
|
|
9015
|
-
var portalItem = portal[i];
|
|
9016
|
-
var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
|
|
9017
|
-
if (!isNullOrUndefined(portalItem) && closestItem === cntTrg) {
|
|
9018
|
-
this.clearTemplate(['content'], i);
|
|
9019
|
-
break;
|
|
9020
|
-
}
|
|
9021
|
-
}
|
|
9022
|
-
} */
|
|
9022
|
+
this.clearTabTemplate(cntTrg, 'content', CLS_ITEM$2);
|
|
9023
9023
|
detach(cntTrg);
|
|
9024
9024
|
}
|
|
9025
9025
|
this.trigger('removed', tabRemovingArgs);
|
|
@@ -12130,10 +12130,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12130
12130
|
return endNode;
|
|
12131
12131
|
}
|
|
12132
12132
|
setFocus(preNode, nextNode) {
|
|
12133
|
-
removeClass([preNode],
|
|
12133
|
+
removeClass([preNode], FOCUS);
|
|
12134
12134
|
preNode.setAttribute("tabindex", "-1");
|
|
12135
12135
|
if (!nextNode.classList.contains('e-disable') && !nextNode.classList.contains(PREVENTSELECT)) {
|
|
12136
|
-
addClass([nextNode],
|
|
12136
|
+
addClass([nextNode], FOCUS);
|
|
12137
12137
|
nextNode.setAttribute('tabindex', '0');
|
|
12138
12138
|
nextNode.focus();
|
|
12139
12139
|
EventHandler.add(nextNode, 'blur', this.focusOut, this);
|
|
@@ -12152,7 +12152,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12152
12152
|
if (!this.mouseDownStatus) {
|
|
12153
12153
|
let focusedElement = this.getFocusedNode();
|
|
12154
12154
|
focusedElement.setAttribute("tabindex", "0");
|
|
12155
|
-
addClass([focusedElement],
|
|
12155
|
+
addClass([focusedElement], FOCUS);
|
|
12156
12156
|
EventHandler.add(focusedElement, 'blur', this.focusOut, this);
|
|
12157
12157
|
}
|
|
12158
12158
|
this.mouseDownStatus = false;
|
|
@@ -12160,7 +12160,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12160
12160
|
focusOut(event) {
|
|
12161
12161
|
let focusedElement = this.getFocusedNode();
|
|
12162
12162
|
if (event.target == focusedElement) {
|
|
12163
|
-
removeClass([focusedElement],
|
|
12163
|
+
removeClass([focusedElement], FOCUS);
|
|
12164
12164
|
EventHandler.remove(focusedElement, 'blur', this.focusOut);
|
|
12165
12165
|
}
|
|
12166
12166
|
}
|
|
@@ -12370,7 +12370,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
12370
12370
|
removeClass([liEle], EDITING);
|
|
12371
12371
|
liEle.focus();
|
|
12372
12372
|
EventHandler.add(liEle, 'blur', this.focusOut, this);
|
|
12373
|
-
addClass([liEle],
|
|
12373
|
+
addClass([liEle], FOCUS);
|
|
12374
12374
|
}
|
|
12375
12375
|
if (this.allowTextWrap) {
|
|
12376
12376
|
this.calculateWrap(liEle);
|