@syncfusion/ej2-navigations 19.3.45 → 19.3.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.
- package/CHANGELOG.md +25 -0
- package/README.md +1 -1
- 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 +100 -75
- package/dist/es6/ej2-navigations.es2015.js.map +1 -1
- package/dist/es6/ej2-navigations.es5.js +100 -75
- 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/breadcrumb/breadcrumb.js +10 -2
- package/src/common/menu-base.js +2 -2
- package/src/tab/tab.js +68 -66
- package/src/treeview/treeview.js +20 -5
- package/styles/bootstrap-dark.css +12 -0
- package/styles/bootstrap.css +12 -0
- package/styles/bootstrap4.css +12 -0
- package/styles/bootstrap5-dark.css +12 -0
- package/styles/bootstrap5.css +12 -0
- package/styles/breadcrumb/_layout.scss +11 -0
- package/styles/breadcrumb/_theme.scss +1 -1
- package/styles/breadcrumb/bootstrap-dark.css +12 -0
- package/styles/breadcrumb/bootstrap.css +12 -0
- package/styles/breadcrumb/bootstrap4.css +12 -0
- package/styles/breadcrumb/bootstrap5-dark.css +12 -0
- package/styles/breadcrumb/bootstrap5.css +12 -0
- package/styles/breadcrumb/fabric-dark.css +12 -0
- package/styles/breadcrumb/fabric.css +12 -0
- package/styles/breadcrumb/highcontrast-light.css +13 -1
- package/styles/breadcrumb/highcontrast.css +13 -1
- package/styles/breadcrumb/material-dark.css +12 -0
- package/styles/breadcrumb/material.css +12 -0
- package/styles/breadcrumb/tailwind-dark.css +12 -0
- package/styles/breadcrumb/tailwind.css +12 -0
- package/styles/fabric-dark.css +12 -0
- package/styles/fabric.css +12 -0
- package/styles/highcontrast-light.css +13 -1
- package/styles/highcontrast.css +13 -1
- package/styles/material-dark.css +12 -0
- package/styles/material.css +12 -0
- package/styles/tailwind-dark.css +12 -0
- package/styles/tailwind.css +12 -0
|
@@ -1926,8 +1926,8 @@ let MenuBase = class MenuBase extends Component {
|
|
|
1926
1926
|
this.setBlankIconStyle(this.popupWrapper);
|
|
1927
1927
|
this.wireKeyboardEvent(this.popupWrapper);
|
|
1928
1928
|
rippleEffect(this.popupWrapper, { selector: '.' + ITEM });
|
|
1929
|
-
this.popupWrapper.style.left = this.left +
|
|
1930
|
-
this.popupWrapper.style.top = this.top +
|
|
1929
|
+
this.popupWrapper.style.left = this.left + 'px';
|
|
1930
|
+
this.popupWrapper.style.top = this.top + 'px';
|
|
1931
1931
|
const animationOptions = this.animationSettings.effect !== 'None' ? {
|
|
1932
1932
|
name: this.animationSettings.effect, duration: this.animationSettings.duration,
|
|
1933
1933
|
timingFunction: this.animationSettings.easing
|
|
@@ -7453,7 +7453,7 @@ let Tab = class Tab extends Component {
|
|
|
7453
7453
|
}
|
|
7454
7454
|
}
|
|
7455
7455
|
parseObject(items, index) {
|
|
7456
|
-
const tbCount = selectAll('.' + CLS_TB_ITEM, this.element).length;
|
|
7456
|
+
const tbCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;
|
|
7457
7457
|
const tItems = [];
|
|
7458
7458
|
let txtWrapEle;
|
|
7459
7459
|
const spliceArray = [];
|
|
@@ -8349,79 +8349,81 @@ let Tab = class Tab extends Component {
|
|
|
8349
8349
|
const changedProp = Object.keys(newProp.items);
|
|
8350
8350
|
for (let i = 0; i < changedProp.length; i++) {
|
|
8351
8351
|
const index = parseInt(Object.keys(newProp.items)[i], 10);
|
|
8352
|
-
const
|
|
8353
|
-
|
|
8354
|
-
|
|
8355
|
-
|
|
8356
|
-
|
|
8357
|
-
|
|
8358
|
-
|
|
8359
|
-
|
|
8360
|
-
|
|
8361
|
-
else {
|
|
8362
|
-
itemIndex = index;
|
|
8363
|
-
}
|
|
8364
|
-
const hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
|
|
8365
|
-
const cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
|
|
8366
|
-
if (property === 'header' || property === 'headerTemplate') {
|
|
8367
|
-
const icon = (isNullOrUndefined(this.items[index].header) ||
|
|
8368
|
-
isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
|
|
8369
|
-
const textVal = this.items[index].headerTemplate || this.items[index].header.text;
|
|
8370
|
-
if ((textVal === '') && (icon === '')) {
|
|
8371
|
-
this.removeTab(index);
|
|
8352
|
+
const properties = Object.keys(newProp.items[index]);
|
|
8353
|
+
for (let j = 0; j < properties.length; j++) {
|
|
8354
|
+
const oldVal = Object(oldProp.items[index])[properties[j]];
|
|
8355
|
+
const newVal = Object(newProp.items[index])[properties[j]];
|
|
8356
|
+
const hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
|
|
8357
|
+
let itemIndex;
|
|
8358
|
+
if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
|
|
8359
|
+
const num = (hdr.id.lastIndexOf('_'));
|
|
8360
|
+
itemIndex = parseInt(hdr.id.substring(num + 1), 10);
|
|
8372
8361
|
}
|
|
8373
8362
|
else {
|
|
8374
|
-
|
|
8375
|
-
|
|
8376
|
-
|
|
8377
|
-
|
|
8378
|
-
|
|
8379
|
-
this.
|
|
8380
|
-
|
|
8381
|
-
|
|
8382
|
-
|
|
8383
|
-
|
|
8384
|
-
|
|
8385
|
-
|
|
8363
|
+
itemIndex = index;
|
|
8364
|
+
}
|
|
8365
|
+
const hdrItem = select('.' + CLS_TB_ITEMS + ' #' + CLS_ITEM$2 + this.tabId + '_' + itemIndex, this.element);
|
|
8366
|
+
const cntItem = select('.' + CLS_CONTENT$1 + ' #' + CLS_CONTENT$1 + this.tabId + '_' + itemIndex, this.element);
|
|
8367
|
+
if (properties[j] === 'header' || properties[j] === 'headerTemplate') {
|
|
8368
|
+
const icon = (isNullOrUndefined(this.items[index].header) ||
|
|
8369
|
+
isNullOrUndefined(this.items[index].header.iconCss)) ? '' : this.items[index].header.iconCss;
|
|
8370
|
+
const textVal = this.items[index].headerTemplate || this.items[index].header.text;
|
|
8371
|
+
if ((textVal === '') && (icon === '')) {
|
|
8372
|
+
this.removeTab(index);
|
|
8373
|
+
}
|
|
8374
|
+
else {
|
|
8375
|
+
this.tbId = hdr.id;
|
|
8376
|
+
const arr = [];
|
|
8377
|
+
arr.push(this.items[index]);
|
|
8378
|
+
this.items.splice(index, 1);
|
|
8379
|
+
this.itemIndexArray.splice(index, 1);
|
|
8380
|
+
this.tbObj.items.splice(index, 1);
|
|
8381
|
+
const isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);
|
|
8382
|
+
detach(hdrItem);
|
|
8383
|
+
this.isReplace = true;
|
|
8384
|
+
this.addTab(arr, index);
|
|
8385
|
+
if (isHiddenEle) {
|
|
8386
|
+
this.hideTab(index);
|
|
8387
|
+
}
|
|
8388
|
+
this.isReplace = false;
|
|
8386
8389
|
}
|
|
8387
|
-
this.isReplace = false;
|
|
8388
8390
|
}
|
|
8389
|
-
|
|
8390
|
-
|
|
8391
|
-
|
|
8392
|
-
|
|
8393
|
-
|
|
8394
|
-
|
|
8395
|
-
|
|
8391
|
+
if (properties[j] === 'content' && !isNullOrUndefined(cntItem)) {
|
|
8392
|
+
const strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);
|
|
8393
|
+
if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
|
|
8394
|
+
const eleVal = document.querySelector(newVal);
|
|
8395
|
+
cntItem.appendChild(eleVal);
|
|
8396
|
+
eleVal.style.display = '';
|
|
8397
|
+
}
|
|
8398
|
+
else if (newVal === '' && oldVal[0] === '#') {
|
|
8399
|
+
document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
|
|
8400
|
+
cntItem.innerHTML = newVal;
|
|
8401
|
+
}
|
|
8402
|
+
else if (this.isReact) {
|
|
8403
|
+
cntItem.innerHTML = '';
|
|
8404
|
+
this.templateCompile(cntItem, newVal, index);
|
|
8405
|
+
}
|
|
8406
|
+
else if (typeof newVal !== 'function') {
|
|
8407
|
+
cntItem.innerHTML = newVal;
|
|
8408
|
+
}
|
|
8396
8409
|
}
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
|
|
8410
|
+
if (properties[j] === 'cssClass') {
|
|
8411
|
+
if (!isNullOrUndefined(hdrItem)) {
|
|
8412
|
+
hdrItem.classList.remove(oldVal);
|
|
8413
|
+
hdrItem.classList.add(newVal);
|
|
8414
|
+
}
|
|
8415
|
+
if (!isNullOrUndefined(cntItem)) {
|
|
8416
|
+
cntItem.classList.remove(oldVal);
|
|
8417
|
+
cntItem.classList.add(newVal);
|
|
8418
|
+
}
|
|
8400
8419
|
}
|
|
8401
|
-
|
|
8402
|
-
|
|
8403
|
-
this.templateCompile(cntItem, newVal, index);
|
|
8420
|
+
if (properties[j] === 'disabled') {
|
|
8421
|
+
this.enableTab(index, ((newVal === true) ? false : true));
|
|
8404
8422
|
}
|
|
8405
|
-
|
|
8406
|
-
|
|
8423
|
+
if (properties[j] === 'visible') {
|
|
8424
|
+
this.hideTab(index, ((newVal === true) ? false : true));
|
|
8407
8425
|
}
|
|
8408
8426
|
}
|
|
8409
|
-
if (property === 'cssClass') {
|
|
8410
|
-
if (!isNullOrUndefined(hdrItem)) {
|
|
8411
|
-
hdrItem.classList.remove(oldVal);
|
|
8412
|
-
hdrItem.classList.add(newVal);
|
|
8413
|
-
}
|
|
8414
|
-
if (!isNullOrUndefined(cntItem)) {
|
|
8415
|
-
cntItem.classList.remove(oldVal);
|
|
8416
|
-
cntItem.classList.add(newVal);
|
|
8417
|
-
}
|
|
8418
|
-
}
|
|
8419
|
-
if (property === 'disabled') {
|
|
8420
|
-
this.enableTab(index, ((newVal === true) ? false : true));
|
|
8421
|
-
}
|
|
8422
|
-
if (property === 'visible') {
|
|
8423
|
-
this.hideTab(index, ((newVal === true) ? false : true));
|
|
8424
|
-
}
|
|
8425
8427
|
}
|
|
8426
8428
|
}
|
|
8427
8429
|
else {
|
|
@@ -8713,7 +8715,7 @@ let Tab = class Tab extends Component {
|
|
|
8713
8715
|
this.reRenderItems();
|
|
8714
8716
|
}
|
|
8715
8717
|
else {
|
|
8716
|
-
const itemsCount = selectAll('.' + CLS_TB_ITEM, this.element).length;
|
|
8718
|
+
const itemsCount = selectAll('.e-tab-header .' + CLS_TB_ITEM, this.element).length;
|
|
8717
8719
|
if (itemsCount !== 0) {
|
|
8718
8720
|
lastEleIndex = this.lastIndex + 1;
|
|
8719
8721
|
}
|
|
@@ -10236,6 +10238,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
10236
10238
|
let id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;
|
|
10237
10239
|
if (this.checkedNodes.indexOf(id) !== -1) {
|
|
10238
10240
|
this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);
|
|
10241
|
+
let ele = this.element.querySelector('[data-uid="' + id + '"]');
|
|
10242
|
+
if (ele) {
|
|
10243
|
+
this.changeState(ele, 'uncheck', null);
|
|
10244
|
+
}
|
|
10239
10245
|
}
|
|
10240
10246
|
}
|
|
10241
10247
|
if (this.parentNodeCheck.indexOf(node) !== -1) {
|
|
@@ -10466,6 +10472,9 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
10466
10472
|
changeState(wrapper, state, e, isPrevent, isAdd, doCheck) {
|
|
10467
10473
|
let eventArgs;
|
|
10468
10474
|
let currLi = closest(wrapper, '.' + LISTITEM);
|
|
10475
|
+
if (wrapper === currLi) {
|
|
10476
|
+
wrapper = select('.' + CHECKBOXWRAP, currLi);
|
|
10477
|
+
}
|
|
10469
10478
|
if (!isPrevent) {
|
|
10470
10479
|
this.checkActionNodes = [];
|
|
10471
10480
|
eventArgs = this.getCheckEvent(currLi, state, e);
|
|
@@ -11459,8 +11468,10 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
11459
11468
|
nodeCheckingAction(checkWrap, isCheck, li, eventArgs, e) {
|
|
11460
11469
|
if (this.checkedElement.indexOf(li.getAttribute('data-uid')) === -1) {
|
|
11461
11470
|
this.checkedElement.push(li.getAttribute('data-uid'));
|
|
11462
|
-
|
|
11463
|
-
|
|
11471
|
+
if (this.autoCheck) {
|
|
11472
|
+
let child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));
|
|
11473
|
+
(child !== null) ? this.allCheckNode(child, this.checkedElement, null, null, false) : child = null;
|
|
11474
|
+
}
|
|
11464
11475
|
}
|
|
11465
11476
|
this.changeState(checkWrap, isCheck ? 'uncheck' : 'check', e, true);
|
|
11466
11477
|
if (this.autoCheck) {
|
|
@@ -11626,11 +11637,17 @@ let TreeView = TreeView_1 = class TreeView extends Component {
|
|
|
11626
11637
|
if (newCheck.indexOf(childId.toString()) === -1 && isNullOrUndefined(checked)) {
|
|
11627
11638
|
newCheck.push(childId.toString());
|
|
11628
11639
|
}
|
|
11640
|
+
let hierChildId = getValue(this.fields.child.toString(), child[length]);
|
|
11629
11641
|
//Gets if any next level children are available for child nodes
|
|
11630
|
-
if (getValue(this.fields.hasChildren, child[length]) === true ||
|
|
11631
|
-
getValue(this.fields.child.toString(), child[length])) {
|
|
11642
|
+
if (getValue(this.fields.hasChildren, child[length]) === true || hierChildId) {
|
|
11632
11643
|
let id = getValue(this.fields.id, child[length]);
|
|
11633
|
-
let childId
|
|
11644
|
+
let childId;
|
|
11645
|
+
if (this.dataType === 1) {
|
|
11646
|
+
childId = this.getChildNodes(this.treeData, id.toString());
|
|
11647
|
+
}
|
|
11648
|
+
else {
|
|
11649
|
+
childId = hierChildId;
|
|
11650
|
+
}
|
|
11634
11651
|
if (childId) {
|
|
11635
11652
|
(isNullOrUndefined(validateCheck)) ? this.allCheckNode(childId, newCheck, checked, childCheck) :
|
|
11636
11653
|
this.allCheckNode(childId, newCheck, checked, childCheck, validateCheck);
|
|
@@ -14946,6 +14963,9 @@ let Breadcrumb = class Breadcrumb extends Component {
|
|
|
14946
14963
|
if (this.cssClass) {
|
|
14947
14964
|
addClass([this.element], this.cssClass.split(' '));
|
|
14948
14965
|
}
|
|
14966
|
+
if (this.enableRtl) {
|
|
14967
|
+
this.element.classList.add('e-rtl');
|
|
14968
|
+
}
|
|
14949
14969
|
this.setWidth();
|
|
14950
14970
|
this.initItems();
|
|
14951
14971
|
this.initPvtProps();
|
|
@@ -14977,8 +14997,10 @@ let Breadcrumb = class Breadcrumb extends Component {
|
|
|
14977
14997
|
}
|
|
14978
14998
|
items.push({ iconCss: 'e-icons e-home', url: baseUri });
|
|
14979
14999
|
for (let i = 0; i < uri.length; i++) {
|
|
14980
|
-
|
|
14981
|
-
|
|
15000
|
+
if (uri[i]) {
|
|
15001
|
+
items.push({ text: uri[i], url: baseUri + uri[i] });
|
|
15002
|
+
baseUri += uri[i] + '/';
|
|
15003
|
+
}
|
|
14982
15004
|
}
|
|
14983
15005
|
this.setProperties({ items: items }, true);
|
|
14984
15006
|
}
|
|
@@ -15261,6 +15283,9 @@ let Breadcrumb = class Breadcrumb extends Component {
|
|
|
15261
15283
|
this.reRenderItems();
|
|
15262
15284
|
}
|
|
15263
15285
|
break;
|
|
15286
|
+
case 'enableRtl':
|
|
15287
|
+
this.element.classList.toggle('e-rtl');
|
|
15288
|
+
break;
|
|
15264
15289
|
}
|
|
15265
15290
|
}
|
|
15266
15291
|
}
|