@syncfusion/ej2-dropdowns 32.2.6 → 32.2.8

package/dist/es6/ej2-dropdowns.es5.js

@@ -1,4 +1,4 @@
-import { EventHandler, Touch, isNullOrUndefined, getValue, select, Browser, debounce, Property, ChildProperty, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, Component, classList, closest, KeyboardEvents, attributes, isUndefined, formatUnit, Animation, getUniqueID, remove, SanitizeHtmlHelper, setValue, matches as matches$1, createElement, getComponent } from '@syncfusion/ej2-base';
+import { EventHandler, Touch, isNullOrUndefined, getValue, select, Browser, debounce, Property, ChildProperty, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, Component, classList, closest, KeyboardEvents, attributes, isUndefined, formatUnit, Animation, getUniqueID, remove, setValue, matches as matches$1, SanitizeHtmlHelper, createElement, getComponent } from '@syncfusion/ej2-base';
 import { DataManager, Query, DataUtil, Predicate, JsonAdaptor } from '@syncfusion/ej2-data';
 import { ListBase, Sortable, cssClass, moveTo } from '@syncfusion/ej2-lists';
 import { Skeleton } from '@syncfusion/ej2-notifications';
@@ -416,7 +416,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         if (this.component === 'combobox') {
             var totalData = 0;
             if (this.parent.dataSource instanceof DataManager) {
-                totalData = this.parent.remoteDataCount;
+                totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3743,7 +3743,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         EventHandler.add(this.inputWrapper.container, 'mousedown', this.dropDownClick, this);
         EventHandler.add(this.inputWrapper.container, 'focus', this.focusIn, this);
         EventHandler.add(this.inputWrapper.container, 'keypress', this.onSearch, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
         this.bindCommonEvent();
     };
     DropDownList.prototype.bindCommonEvent = function () {
@@ -4533,7 +4534,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             EventHandler.remove(this.inputWrapper.container, 'mousedown', this.dropDownClick);
             EventHandler.remove(this.inputWrapper.container, 'keypress', this.onSearch);
             EventHandler.remove(this.inputWrapper.container, 'focus', this.focusIn);
-            EventHandler.remove(window, 'resize', this.windowResize);
+            if (this.resizeHandler) {
+                window.removeEventListener('resize', this.resizeHandler);
+                this.resizeHandler = null;
+            }
         }
         this.unBindCommonEvent();
     };
@@ -5800,7 +5804,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     _this.setFooterTemplate(popupEle_1);
                     _this.isUpdateFooterHeight = _this.footer.offsetHeight !== 0;
                 }
-                document.body.appendChild(popupEle_1);
+                var appendToElement = _this.getAppendToElement();
+                appendToElement.appendChild(popupEle_1);
                 popupEle_1.style.top = '0px';
                 initialPopupHeight = popupEle_1.clientHeight;
                 if (_this.enableVirtualization && (_this.itemTemplate || _this.isAngular)) {
@@ -6062,6 +6067,16 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    DropDownList.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DropDownList.prototype.checkCollision = function (popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {
             var collision = isCollide(popupEle);
@@ -6834,7 +6849,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var listParentHeight = formatUnit(this.popupHeight);
         listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
         listParent.appendChild(item);
-        document.body.appendChild(listParent);
+        var appendToElement = this.getAppendToElement();
+        appendToElement.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
         var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
@@ -8922,12 +8938,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                         temp = this.getOverflowVal(index);
                         data += temp;
                         temp = this.overFlowWrapper.innerHTML;
-                        if (this.enableHtmlSanitizer) {
-                            this.overFlowWrapper.innerText = SanitizeHtmlHelper.sanitize(data);
-                        }
-                        else {
-                            this.overFlowWrapper.innerHTML = data;
-                        }
+                        this.overFlowWrapper[this.getDomSetter()] = this.getSanitizedText(data);
                         wrapperleng = this.overFlowWrapper.offsetWidth;
                         overAllContainer = this.inputWrapper.offsetWidth;
                         if ((wrapperleng + downIconWidth + this.clearIconWidth) > overAllContainer) {
@@ -9507,6 +9518,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
             enableHtmlSanitizer: this.enableHtmlSanitizer,
+            disableHtmlEncode: this.disableHtmlEncode,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -10493,12 +10505,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         });
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
         var chipClose = this.createElement('span', { className: CHIP_CLOSE + ' ' + ICONS });
-        if (this.enableHtmlSanitizer) {
-            chipContent.innerText = SanitizeHtmlHelper.sanitize(text);
-        }
-        else {
-            chipContent.innerHTML = text;
-        }
+        chipContent[this.getDomSetter()] = this.getSanitizedText(text);
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
         if (this.showClearButton) {
@@ -10937,6 +10944,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.hiddenElement.removeAttribute('multiple');
         }
     };
+    DropDownTree.prototype.getDomSetter = function () {
+        return this.disableHtmlEncode ? 'textContent' : 'innerHTML';
+    };
+    DropDownTree.prototype.getSanitizedText = function (text) {
+        return this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(text) : text;
+    };
     /**
      * Dynamically change the value of properties.
      *
@@ -11406,6 +11419,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     __decorate$2([
         Property(true)
     ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
+    __decorate$2([
+        Property(true)
+    ], DropDownTree.prototype, "disableHtmlEncode", void 0);
     __decorate$2([
         Property(true)
     ], DropDownTree.prototype, "showClearButton", void 0);
@@ -16868,7 +16884,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.wireEvent = function () {
         EventHandler.add(this.componentWrapper, 'mousedown', this.wrapperClick, this);
-        EventHandler.add(window, 'resize', this.windowResize, this);
+        this.resizeHandler = this.windowResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
         EventHandler.add(this.inputElement, 'focus', this.focusInHandler, this);
         EventHandler.add(this.inputElement, 'keydown', this.onKeyDown, this);
         EventHandler.add(this.inputElement, 'keyup', this.keyUp, this);
@@ -18179,7 +18196,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.componentWrapper)) {
             EventHandler.remove(this.componentWrapper, 'mousedown', this.wrapperClick);
         }
-        EventHandler.remove(window, 'resize', this.windowResize);
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
         if (!isNullOrUndefined(this.inputElement)) {
             EventHandler.remove(this.inputElement, 'focus', this.focusInHandler);
             EventHandler.remove(this.inputElement, 'keydown', this.onKeyDown);
@@ -21936,7 +21956,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         if (form) {
             EventHandler.add(form, 'reset', this.formResetHandler, this);
         }
-        window.addEventListener('resize', this.resizeHandler.bind(this));
+        this.boundResizeHandler = this.resizeHandler.bind(this);
+        window.addEventListener('resize', this.boundResizeHandler);
     };
     ListBox.prototype.wireToolbarEvent = function () {
         if (this.toolbarSettings.items.length) {
@@ -21958,7 +21979,10 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         if (form) {
             EventHandler.remove(form, 'reset', this.formResetHandler);
         }
-        window.removeEventListener('resize', this.resizeHandler.bind(this));
+        if (this.boundResizeHandler) {
+            window.removeEventListener('resize', this.boundResizeHandler);
+            this.boundResizeHandler = null;
+        }
     };
     ListBox.prototype.clickHandler = function (e) {
         var li = closest(e.target, '.' + 'e-list-item');
@@ -23578,16 +23602,21 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.wireEvent();
     };
     Mention.prototype.wireEvent = function () {
-        EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
+        this.keyupHandler = this.onKeyUp.bind(this);
+        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         this.bindCommonEvent();
     };
     Mention.prototype.unWireEvent = function () {
-        EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
+        if (this.keyupHandler) {
+            EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
+            this.keyupHandler = null;
+        }
         this.unBindCommonEvent();
     };
     Mention.prototype.bindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
+            this.keydownHandler = this.keyDownHandler.bind(this);
+            this.inputElement.addEventListener('keydown', this.keydownHandler, !this.isRTE);
         }
     };
     /**
@@ -23776,8 +23805,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         return !isNullOrUndefined(element);
     };
     Mention.prototype.unBindCommonEvent = function () {
-        if (!Browser.isDevice) {
-            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
+        if (!Browser.isDevice && this.keydownHandler) {
+            this.inputElement.removeEventListener('keydown', this.keydownHandler, !this.isRTE);
+            this.keydownHandler = null;
         }
     };
     Mention.prototype.onKeyUp = function (e) {
@@ -24260,9 +24290,11 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                         addClass([popupEle_1], 'e-rte-elements');
                     }
                 }
+                var appendToElement = _this.getAppendToElement();
+                _this.popupAppendTo = appendToElement;
                 if ((!_this.popupObj || !document.body.contains(_this.popupObj.element)) ||
                     !document.contains(popupEle_1) && isNullOrUndefined(_this.target)) {
-                    document.body.appendChild(popupEle_1);
+                    appendToElement.appendChild(popupEle_1);
                 }
                 var coordinates_1;
                 popupEle_1.style.visibility = 'hidden';
@@ -24335,6 +24367,19 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.getAppendToElement = function () {
+        if (this.popupAppendTo) {
+            return this.popupAppendTo;
+        }
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     Mention.prototype.setHeight = function (popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
             this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property