@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.
Files changed (44) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +100 -75
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +100 -75
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +11 -11
  13. package/src/breadcrumb/breadcrumb.js +10 -2
  14. package/src/common/menu-base.js +2 -2
  15. package/src/tab/tab.js +68 -66
  16. package/src/treeview/treeview.js +20 -5
  17. package/styles/bootstrap-dark.css +12 -0
  18. package/styles/bootstrap.css +12 -0
  19. package/styles/bootstrap4.css +12 -0
  20. package/styles/bootstrap5-dark.css +12 -0
  21. package/styles/bootstrap5.css +12 -0
  22. package/styles/breadcrumb/_layout.scss +11 -0
  23. package/styles/breadcrumb/_theme.scss +1 -1
  24. package/styles/breadcrumb/bootstrap-dark.css +12 -0
  25. package/styles/breadcrumb/bootstrap.css +12 -0
  26. package/styles/breadcrumb/bootstrap4.css +12 -0
  27. package/styles/breadcrumb/bootstrap5-dark.css +12 -0
  28. package/styles/breadcrumb/bootstrap5.css +12 -0
  29. package/styles/breadcrumb/fabric-dark.css +12 -0
  30. package/styles/breadcrumb/fabric.css +12 -0
  31. package/styles/breadcrumb/highcontrast-light.css +13 -1
  32. package/styles/breadcrumb/highcontrast.css +13 -1
  33. package/styles/breadcrumb/material-dark.css +12 -0
  34. package/styles/breadcrumb/material.css +12 -0
  35. package/styles/breadcrumb/tailwind-dark.css +12 -0
  36. package/styles/breadcrumb/tailwind.css +12 -0
  37. package/styles/fabric-dark.css +12 -0
  38. package/styles/fabric.css +12 -0
  39. package/styles/highcontrast-light.css +13 -1
  40. package/styles/highcontrast.css +13 -1
  41. package/styles/material-dark.css +12 -0
  42. package/styles/material.css +12 -0
  43. package/styles/tailwind-dark.css +12 -0
  44. 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 + pageXOffset + 'px';
1930
- this.popupWrapper.style.top = this.top + pageYOffset + 'px';
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 property = Object.keys(newProp.items[index])[0];
8353
- const oldVal = Object(oldProp.items[index])[property];
8354
- const newVal = Object(newProp.items[index])[property];
8355
- const hdr = this.element.querySelectorAll('.' + CLS_TB_ITEM)[index];
8356
- let itemIndex;
8357
- if (hdr && !isNullOrUndefined(hdr.id) && hdr.id !== '') {
8358
- const num = (hdr.id.indexOf('_'));
8359
- itemIndex = parseInt(hdr.id.substring(num + 1), 10);
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
- this.tbId = hdr.id;
8375
- const arr = [];
8376
- arr.push(this.items[index]);
8377
- this.items.splice(index, 1);
8378
- this.itemIndexArray.splice(index, 1);
8379
- this.tbObj.items.splice(index, 1);
8380
- const isHiddenEle = hdrItem.classList.contains(CLS_HIDDEN$1);
8381
- detach(hdrItem);
8382
- this.isReplace = true;
8383
- this.addTab(arr, index);
8384
- if (isHiddenEle) {
8385
- this.hideTab(index);
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
- if (property === 'content' && !isNullOrUndefined(cntItem)) {
8391
- const strVal = typeof newVal === 'string' || isNullOrUndefined(newVal.innerHTML);
8392
- if (strVal && (newVal[0] === '.' || newVal[0] === '#') && newVal.length) {
8393
- const eleVal = document.querySelector(newVal);
8394
- cntItem.appendChild(eleVal);
8395
- eleVal.style.display = '';
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
- else if (newVal === '' && oldVal[0] === '#') {
8398
- document.body.appendChild(this.element.querySelector(oldVal)).style.display = 'none';
8399
- cntItem.innerHTML = newVal;
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
- else if (this.isReact && typeof newVal === 'object') {
8402
- cntItem.innerHTML = '';
8403
- this.templateCompile(cntItem, newVal, index);
8420
+ if (properties[j] === 'disabled') {
8421
+ this.enableTab(index, ((newVal === true) ? false : true));
8404
8422
  }
8405
- else if (typeof newVal !== 'function') {
8406
- cntItem.innerHTML = newVal;
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
- let child = this.getChildNodes(this.treeData, li.getAttribute('data-uid'));
11463
- (child !== null) ? this.allCheckNode(child, this.checkedElement, null, null, false) : child = null;
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 = this.getChildNodes(this.treeData, id.toString());
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
- items.push({ text: uri[i], url: baseUri + uri[i] });
14981
- baseUri += uri[i] + '/';
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
  }