@syncfusion/ej2-dropdowns 24.1.45 → 24.1.46

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 (53) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/ej2-dropdowns.min.js +2 -2
  3. package/dist/ej2-dropdowns.umd.min.js +2 -2
  4. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-dropdowns.es2015.js +89 -17
  6. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  7. package/dist/es6/ej2-dropdowns.es5.js +94 -17
  8. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  9. package/dist/global/ej2-dropdowns.min.js +2 -2
  10. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +9 -9
  13. package/src/drop-down-list/drop-down-list.d.ts +1 -0
  14. package/src/drop-down-list/drop-down-list.js +9 -2
  15. package/src/drop-down-tree/drop-down-tree.d.ts +3 -1
  16. package/src/drop-down-tree/drop-down-tree.js +76 -13
  17. package/src/mention/mention.js +8 -1
  18. package/src/multi-select/multi-select.js +1 -1
  19. package/styles/bootstrap-dark.css +5 -0
  20. package/styles/bootstrap.css +5 -0
  21. package/styles/bootstrap4.css +5 -0
  22. package/styles/bootstrap5-dark.css +5 -0
  23. package/styles/bootstrap5.css +5 -0
  24. package/styles/drop-down-list/_layout.scss +5 -0
  25. package/styles/drop-down-list/bootstrap-dark.css +5 -0
  26. package/styles/drop-down-list/bootstrap.css +5 -0
  27. package/styles/drop-down-list/bootstrap4.css +5 -0
  28. package/styles/drop-down-list/bootstrap5-dark.css +5 -0
  29. package/styles/drop-down-list/bootstrap5.css +5 -0
  30. package/styles/drop-down-list/fabric-dark.css +5 -0
  31. package/styles/drop-down-list/fabric.css +5 -0
  32. package/styles/drop-down-list/fluent-dark.css +5 -0
  33. package/styles/drop-down-list/fluent.css +5 -0
  34. package/styles/drop-down-list/highcontrast-light.css +5 -0
  35. package/styles/drop-down-list/highcontrast.css +5 -0
  36. package/styles/drop-down-list/material-dark.css +5 -0
  37. package/styles/drop-down-list/material.css +5 -0
  38. package/styles/drop-down-list/material3-dark.css +5 -0
  39. package/styles/drop-down-list/material3.css +5 -0
  40. package/styles/drop-down-list/tailwind-dark.css +5 -0
  41. package/styles/drop-down-list/tailwind.css +5 -0
  42. package/styles/fabric-dark.css +5 -0
  43. package/styles/fabric.css +5 -0
  44. package/styles/fluent-dark.css +5 -0
  45. package/styles/fluent.css +5 -0
  46. package/styles/highcontrast-light.css +5 -0
  47. package/styles/highcontrast.css +5 -0
  48. package/styles/material-dark.css +5 -0
  49. package/styles/material.css +5 -0
  50. package/styles/material3-dark.css +5 -0
  51. package/styles/material3.css +5 -0
  52. package/styles/tailwind-dark.css +5 -0
  53. package/styles/tailwind.css +5 -0
@@ -4795,9 +4795,16 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
4795
4795
  DropDownList.prototype.scrollHandler = function () {
4796
4796
  if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&
4797
4797
  !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {
4798
- this.hidePopup();
4798
+ if (this.element && !(this.isElementInViewport(this.element))) {
4799
+ this.hidePopup();
4800
+ }
4799
4801
  }
4800
4802
  };
4803
+ DropDownList.prototype.isElementInViewport = function (element) {
4804
+ var elementRect = element.getBoundingClientRect();
4805
+ return (elementRect.top >= 0 && elementRect.left >= 0 && elementRect.bottom <= window.innerHeight && elementRect.right <= window.innerWidth);
4806
+ };
4807
+
4801
4808
  DropDownList.prototype.setSearchBoxPosition = function () {
4802
4809
  var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;
4803
4810
  this.popupObj.element.style.maxHeight = '100%';
@@ -5942,7 +5949,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
5942
5949
  if (!this.enabled) {
5943
5950
  return;
5944
5951
  }
5945
- if (!this.enableVirtualization && this.getModuleName() === 'combobox') {
5952
+ if (!this.enableVirtualization && (this.getModuleName() === 'combobox' || this.getModuleName() === 'autocomplete')) {
5946
5953
  this.isTyped = true;
5947
5954
  }
5948
5955
  this.hidePopup(e);
@@ -6393,7 +6400,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6393
6400
  var popupDiv = select('#' + this.element.id + '_options', document);
6394
6401
  detach(popupDiv ? popupDiv : isTree.parentElement);
6395
6402
  }
6396
- this.ensureAutoCheck();
6397
6403
  if (this.element.tagName === 'INPUT') {
6398
6404
  this.inputEle = this.element;
6399
6405
  if (isNullOrUndefined(this.inputEle.getAttribute('role'))) {
@@ -6480,11 +6486,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6480
6486
  || this.noRecordsTemplate || this.customTemplate;
6481
6487
  this.renderComplete();
6482
6488
  };
6483
- DropDownTree.prototype.ensureAutoCheck = function () {
6484
- if (this.allowFiltering && this.treeSettings.autoCheck) {
6485
- this.setProperties({ treeSettings: { autoCheck: false } }, true);
6486
- }
6487
- };
6488
6489
  DropDownTree.prototype.hideCheckAll = function (flag) {
6489
6490
  var checkAllEle = !isNullOrUndefined(this.popupEle) ? this.popupEle.querySelector('.' + CHECKALLPARENT) : null;
6490
6491
  if (!isNullOrUndefined(checkAllEle)) {
@@ -6522,10 +6523,21 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6522
6523
  this.filterTimer = window.setTimeout(function () { _this.filterHandler(args.value, args.event); }, this.filterDelayTime);
6523
6524
  }
6524
6525
  };
6526
+ DropDownTree.prototype.isChildObject = function () {
6527
+ if (typeof this.treeObj.fields.child === 'object') {
6528
+ return true;
6529
+ }
6530
+ else {
6531
+ return false;
6532
+ }
6533
+ };
6525
6534
  DropDownTree.prototype.filterHandler = function (value, event) {
6526
6535
  var _this = this;
6527
6536
  this.isFromFilterChange = true;
6528
6537
  if (!this.isFilteredData) {
6538
+ if (this.isRemoteData) {
6539
+ this.treeObj.expandedNodes = [];
6540
+ }
6529
6541
  this.treeData = this.treeObj.getTreeData();
6530
6542
  }
6531
6543
  var filterFields = this.cloneFields(this.fields);
@@ -6555,6 +6567,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6555
6567
  }
6556
6568
  else {
6557
6569
  if (_this.fields.dataSource instanceof DataManager) {
6570
+ fields = _this.remoteDataFilter(value, args.fields);
6571
+ fields.child = _this.fields.child;
6572
+ _this.treeObj.fields = _this.getTreeFields(args.fields);
6573
+ _this.treeObj.dataBind();
6558
6574
  flag = true;
6559
6575
  }
6560
6576
  else {
@@ -6566,6 +6582,14 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6566
6582
  if (flag) {
6567
6583
  return;
6568
6584
  }
6585
+ if (_this.isRemoteData) {
6586
+ if (_this.isChildObject()) {
6587
+ fields.child = _this.fields.child;
6588
+ }
6589
+ else {
6590
+ fields = args.fields;
6591
+ }
6592
+ }
6569
6593
  _this.treeObj.fields = _this.getTreeFields(fields);
6570
6594
  _this.treeObj.dataBind();
6571
6595
  if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
@@ -6581,6 +6605,38 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6581
6605
  }
6582
6606
  });
6583
6607
  };
6608
+ DropDownTree.prototype.remoteDataFilter = function (value, filteredFields) {
6609
+ var _this = this;
6610
+ filteredFields.dataSource = this.treeData.map(function (item) {
6611
+ return _this.remoteChildFilter(value, item);
6612
+ }).filter(function (filteredChild) {
6613
+ return !isNullOrUndefined(filteredChild);
6614
+ });
6615
+ return filteredFields;
6616
+ };
6617
+ DropDownTree.prototype.remoteChildFilter = function (value, node, isChild, isChildFiltering) {
6618
+ var children = this.isChildObject() ? node['child'] : node[this.fields.child];
6619
+ if (isNullOrUndefined(children)) {
6620
+ return (this.isMatchedNode(value, node, isChild, isChildFiltering)) ? node : null;
6621
+ }
6622
+ var matchedChildren = [];
6623
+ for (var i = 0; i < children.length; i++) {
6624
+ var filteredChild = this.remoteChildFilter(value, children[i], true, true);
6625
+ if (!isNullOrUndefined(filteredChild)) {
6626
+ matchedChildren.push(filteredChild);
6627
+ }
6628
+ }
6629
+ var filteredItems = Object.assign({}, node);
6630
+ isChildFiltering = false;
6631
+ if (matchedChildren.length !== 0) {
6632
+ filteredItems.child = matchedChildren;
6633
+ }
6634
+ else {
6635
+ filteredItems.child = null;
6636
+ filteredItems = (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;
6637
+ }
6638
+ return filteredItems;
6639
+ };
6584
6640
  DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
6585
6641
  // eslint-disable-next-line
6586
6642
  var matchedDataSource = [];
@@ -6662,8 +6718,17 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
6662
6718
  return filteredFields;
6663
6719
  };
6664
6720
  // eslint-disable-next-line
6665
- DropDownTree.prototype.isMatchedNode = function (value, node) {
6666
- var checkValue = node[this.fields.text];
6721
+ DropDownTree.prototype.isMatchedNode = function (value, node, isChild, isChildFiltering) {
6722
+ var checkValue;
6723
+ var isObjectValue = isChild && isChildFiltering && this.isChildObject();
6724
+ checkValue = isObjectValue ? node[this.fields.child.text] : node[this.fields.text];
6725
+ if (!checkValue) {
6726
+ var tempChild = this.fields.child;
6727
+ while (!node[tempChild.text]) {
6728
+ tempChild = tempChild.child;
6729
+ }
6730
+ checkValue = node[tempChild.text];
6731
+ }
6667
6732
  if (this.ignoreCase) {
6668
6733
  checkValue = checkValue.toLowerCase();
6669
6734
  value = value.toLowerCase();
@@ -7625,8 +7690,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
7625
7690
  if (this.isFilteredData) {
7626
7691
  this.filterObj.value = '';
7627
7692
  this.treeObj.fields = this.getTreeFields(this.fields);
7628
- if (this.isReact)
7629
- this.refresh();
7630
7693
  this.isFilterRestore = true;
7631
7694
  this.isFilteredData = false;
7632
7695
  this.hideCheckAll(false);
@@ -7647,12 +7710,18 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
7647
7710
  }
7648
7711
  else {
7649
7712
  _this.popupEle = _this.popupObj.element;
7713
+ if (_this.isReact && _this.isFilterRestore) {
7714
+ _this.treeObj.refresh();
7715
+ _this.isFilteredData = true;
7716
+ _this.popupEle.removeChild(_this.filterContainer);
7717
+ }
7650
7718
  }
7651
7719
  }
7652
7720
  else {
7653
7721
  isCancelled = true;
7654
7722
  }
7655
- if (_this.isFirstRender && !isCancelled) {
7723
+ if (_this.isFirstRender && !isCancelled || _this.isFilteredData) {
7724
+ _this.isFilteredData = false;
7656
7725
  prepend([_this.popupDiv], _this.popupEle);
7657
7726
  removeClass([_this.popupDiv], DDTHIDEICON);
7658
7727
  if (_this.allowFiltering) {
@@ -8019,6 +8088,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8019
8088
  if (this.value === null) {
8020
8089
  this.setProperties({ value: [] }, true);
8021
8090
  }
8091
+ if (args.node.classList.contains("e-active")) {
8092
+ this.hidePopup();
8093
+ }
8022
8094
  }
8023
8095
  };
8024
8096
  DropDownTree.prototype.updateHiddenValue = function () {
@@ -8677,7 +8749,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8677
8749
  DropDownTree.prototype.updateTreeSettings = function (prop) {
8678
8750
  var value = Object.keys(prop.treeSettings)[0];
8679
8751
  if (value === 'autoCheck') {
8680
- this.ensureAutoCheck();
8681
8752
  this.treeObj.autoCheck = this.treeSettings.autoCheck;
8682
8753
  }
8683
8754
  else if (value === 'loadOnDemand') {
@@ -8798,7 +8869,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
8798
8869
  this.destroyFilter();
8799
8870
  }
8800
8871
  }
8801
- this.ensureAutoCheck();
8802
8872
  };
8803
8873
  DropDownTree.prototype.updateFilterPlaceHolder = function () {
8804
8874
  if (this.filterObj) {
@@ -14786,10 +14856,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
14786
14856
  if (!args.cancel) {
14787
14857
  if (!_this.ulElement) {
14788
14858
  _this.beforePopupOpen = true;
14789
- _super.prototype.render.call(_this, e);
14790
14859
  if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
14791
14860
  _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
14792
14861
  }
14862
+ _super.prototype.render.call(_this, e);
14793
14863
  return;
14794
14864
  }
14795
14865
  if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
@@ -18625,7 +18695,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
18625
18695
  return;
18626
18696
  }
18627
18697
  this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
18628
- if (document.activeElement != this.inputElement) {
18698
+ var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
18699
+ if (document.activeElement != this.inputElement && !isRteImage) {
18629
18700
  this.inputElement.focus();
18630
18701
  }
18631
18702
  if (this.isContentEditable(this.inputElement)) {
@@ -19497,6 +19568,12 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
19497
19568
  if (this.isPopupOpen) {
19498
19569
  this.hidePopup();
19499
19570
  }
19571
+ //New event to update the RichTextEditor value, when a mention item is selected using mouse click action.
19572
+ if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {
19573
+ var event_1 = new CustomEvent('content-changed', { detail: { click: true } });
19574
+ this.inputElement.dispatchEvent(event_1);
19575
+ }
19576
+
19500
19577
  this.onChangeEvent(e);
19501
19578
  }
19502
19579
  else {