@syncfusion/ej2-dropdowns 32.2.6 → 32.2.8

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

@@ -1,4 +1,4 @@
-import { EventHandler, Touch, isNullOrUndefined, getValue, select, Browser, debounce, ChildProperty, Property, Component, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, 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, ChildProperty, Property, Component, selectAll, compile, L10n, addClass, removeClass, extend, append, setStyleAttribute, prepend, rippleEffect, detach, Complex, Event, NotifyPropertyChanges, 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';
@@ -368,7 +368,7 @@ class VirtualScroll {
         if (this.component === 'combobox') {
             let 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
@@ -3634,7 +3634,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         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();
     }
     bindCommonEvent() {
@@ -4424,7 +4425,10 @@ let DropDownList = class DropDownList extends DropDownBase {
             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();
     }
@@ -5675,7 +5679,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.setFooterTemplate(popupEle);
                     this.isUpdateFooterHeight = this.footer.offsetHeight !== 0;
                 }
-                document.body.appendChild(popupEle);
+                const appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(popupEle);
                 popupEle.style.top = '0px';
                 initialPopupHeight = popupEle.clientHeight;
                 if (this.enableVirtualization && (this.itemTemplate || this.isAngular)) {
@@ -5936,6 +5941,16 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         });
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            const popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     checkCollision(popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {
             const collision = isCollide(popupEle);
@@ -6701,7 +6716,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         const listParentHeight = formatUnit(this.popupHeight);
         listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
         listParent.appendChild(item);
-        document.body.appendChild(listParent);
+        const appendToElement = this.getAppendToElement();
+        appendToElement.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
         const listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
@@ -8743,12 +8759,7 @@ let DropDownTree = class DropDownTree extends Component {
                         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) {
@@ -9321,6 +9332,7 @@ let DropDownTree = class DropDownTree extends Component {
             dataBound: this.OnDataBound.bind(this),
             allowMultiSelection: this.allowMultiSelection,
             enableHtmlSanitizer: this.enableHtmlSanitizer,
+            disableHtmlEncode: this.disableHtmlEncode,
             showCheckBox: this.showCheckBox,
             autoCheck: this.treeSettings.autoCheck,
             sortOrder: this.sortOrder,
@@ -10298,12 +10310,7 @@ let DropDownTree = class DropDownTree extends Component {
         });
         const chipContent = this.createElement('span', { className: CHIP_CONTENT });
         const 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) {
@@ -10742,6 +10749,12 @@ let DropDownTree = class DropDownTree extends Component {
             this.hiddenElement.removeAttribute('multiple');
         }
     }
+    getDomSetter() {
+        return this.disableHtmlEncode ? 'textContent' : 'innerHTML';
+    }
+    getSanitizedText(text) {
+        return this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(text) : text;
+    }
     /**
      * Dynamically change the value of properties.
      *
@@ -11209,6 +11222,9 @@ __decorate$2([
 __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);
@@ -16594,7 +16610,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     wireEvent() {
         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);
@@ -17892,7 +17909,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         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);
@@ -21586,7 +21606,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         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);
     }
     wireToolbarEvent() {
         if (this.toolbarSettings.items.length) {
@@ -21608,7 +21629,10 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         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;
+        }
     }
     clickHandler(e) {
         const li = closest(e.target, '.' + 'e-list-item');
@@ -23191,16 +23215,21 @@ let Mention = class Mention extends DropDownBase {
         this.wireEvent();
     }
     wireEvent() {
-        EventHandler.add(this.inputElement, 'keyup', this.onKeyUp, this);
+        this.keyupHandler = this.onKeyUp.bind(this);
+        EventHandler.add(this.inputElement, 'keyup', this.keyupHandler, this);
         this.bindCommonEvent();
     }
     unWireEvent() {
-        EventHandler.remove(this.inputElement, 'keyup', this.onKeyUp);
+        if (this.keyupHandler) {
+            EventHandler.remove(this.inputElement, 'keyup', this.keyupHandler);
+            this.keyupHandler = null;
+        }
         this.unBindCommonEvent();
     }
     bindCommonEvent() {
         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);
         }
     }
     /**
@@ -23389,8 +23418,9 @@ let Mention = class Mention extends DropDownBase {
         return !isNullOrUndefined(element);
     }
     unBindCommonEvent() {
-        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;
         }
     }
     onKeyUp(e) {
@@ -23867,9 +23897,11 @@ let Mention = class Mention extends DropDownBase {
                         addClass([popupEle], 'e-rte-elements');
                     }
                 }
+                const appendToElement = this.getAppendToElement();
+                this.popupAppendTo = appendToElement;
                 if ((!this.popupObj || !document.body.contains(this.popupObj.element)) ||
                     !document.contains(popupEle) && isNullOrUndefined(this.target)) {
-                    document.body.appendChild(popupEle);
+                    appendToElement.appendChild(popupEle);
                 }
                 let coordinates;
                 popupEle.style.visibility = 'hidden';
@@ -23942,6 +23974,19 @@ let Mention = class Mention extends DropDownBase {
             }
         });
     }
+    getAppendToElement() {
+        if (this.popupAppendTo) {
+            return this.popupAppendTo;
+        }
+        if (this.isAngular) {
+            const cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            const popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     setHeight(popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
             this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property