@syncfusion/ej2-inputs 32.2.5 → 32.2.7

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

@@ -1183,8 +1183,9 @@ let NumericTextBox = class NumericTextBox extends Component {
             }
             this.element.classList.remove('e-control', 'e-numerictextbox');
             this.element.appendChild(input);
+            setValue('ej2_instances', ejInstance, input);
+            setValue('ej2_instances', null, this.element);
             this.element = input;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off' });
         const localeText = {
@@ -3930,8 +3931,9 @@ let MaskedTextBox = class MaskedTextBox extends Component {
             this.element.classList.remove('e-control', 'e-maskedtextbox');
             this.element.classList.add('e-mask-container');
             this.element.appendChild(input);
+            setValue('ej2_instances', ejInstance, input);
+            setValue('ej2_instances', null, this.element);
             this.element = input;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         this.updateHTMLAttrToElement();
         this.checkHtmlAttributes(false);
@@ -8760,8 +8762,10 @@ let Uploader = class Uploader extends Component {
                 inputElement.setAttribute('name', 'UploadFiles');
             }
             this.element.appendChild(inputElement);
+            setValue('ej2_instances', ejInstance, inputElement);
+            // Clear reference from this.element to avoid retaining component instance
+            setValue('ej2_instances', null, this.element);
             this.element = inputElement;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         /* istanbul ignore next */
         if (ejInstance[0].isPureReactComponent) {
@@ -9149,7 +9153,8 @@ let Uploader = class Uploader extends Component {
     wireEvents() {
         EventHandler.add(this.browseButton, 'click', this.browseButtonClick, this);
         EventHandler.add(this.element, 'change', this.onSelectFiles, this);
-        EventHandler.add(document, 'click', this.removeFocus, this);
+        this.documentClickHandler = this.removeFocus.bind(this);
+        EventHandler.add(document, 'click', this.documentClickHandler);
         this.keyboardModule = new KeyboardEvents(this.uploadWrapper, {
             keyAction: this.keyActionHandler.bind(this),
             keyConfigs: this.keyConfigs,
@@ -9162,7 +9167,10 @@ let Uploader = class Uploader extends Component {
     unWireEvents() {
         EventHandler.remove(this.browseButton, 'click', this.browseButtonClick);
         EventHandler.remove(this.element, 'change', this.onSelectFiles);
-        EventHandler.remove(document, 'click', this.removeFocus);
+        if (this.documentClickHandler) {
+            EventHandler.remove(document, 'click', this.documentClickHandler);
+            this.documentClickHandler = null;
+        }
         if (this.isForm) {
             EventHandler.remove(this.formElement, 'reset', this.resetForm);
         }
@@ -12135,6 +12143,9 @@ let ColorPicker = class ColorPicker extends Component {
             }
         });
         this.splitBtn.createElement = this.createElement;
+        if (this.isAngular) {
+            this.splitBtn.isAngular = this.isAngular;
+        }
         this.splitBtn.appendTo(splitButton);
         this.splitBtn.element.setAttribute('aria-label', 'colorpicker');
         const preview = this.createElement('span', { className: SPLITPREVIEW });
@@ -12207,8 +12218,9 @@ let ColorPicker = class ColorPicker extends Component {
                         this.modal = this.createElement('div');
                         this.modal.className = 'e-' + this.getModuleName() + ' e-modal';
                         this.modal.style.display = 'none';
-                        document.body.insertBefore(this.modal, popupEle);
-                        document.body.className += ' e-colorpicker-overflow';
+                        const appendToElement = this.getAppendToElement();
+                        appendToElement.insertBefore(this.modal, popupEle);
+                        appendToElement.className += ' e-colorpicker-overflow';
                         this.modal.style.display = 'block';
                         this.modal.style.zIndex = (Number(popupEle.style.zIndex) - 1).toString();
                     }
@@ -12242,6 +12254,16 @@ let ColorPicker = class ColorPicker extends Component {
             return callBackPromise;
         };
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     onPopupClose() {
         this.unWireEvents();
         this.destroyOtherComp();
@@ -12251,7 +12273,8 @@ let ColorPicker = class ColorPicker extends Component {
         this.container.innerHTML = '';
         removeClass([this.container], [PICKERCONTENT, PALETTECONTENT]);
         if (Browser.isDevice && this.modal) {
-            removeClass([document.body], 'e-colorpicker-overflow');
+            const appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], 'e-colorpicker-overflow');
             this.modal.style.display = 'none';
             this.modal.outerHTML = '';
             this.modal = null;
@@ -13446,6 +13469,10 @@ let ColorPicker = class ColorPicker extends Component {
                 this.unWireEvents();
                 this.destroyOtherComp();
             }
+            this.splitBtn.beforeClose = null;
+            this.splitBtn.beforeOpen = null;
+            this.splitBtn.click = null;
+            this.splitBtn.open = null;
             this.splitBtn.destroy();
             this.splitBtn = null;
         }
@@ -14180,8 +14207,9 @@ let TextBox = class TextBox extends Component {
                 }
             }
             this.element.appendChild(inputElement);
+            setValue('ej2_instances', ejInstance, inputElement);
+            setValue('ej2_instances', null, this.element);
             this.element = inputElement;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         this.updateHTMLAttributesToElement();
         this.checkAttributes(false);
@@ -15063,8 +15091,9 @@ let TextArea = class TextArea extends Component {
                 }
             }
             this.element.appendChild(inputElement);
+            setValue('ej2_instances', ejInstance, inputElement);
+            setValue('ej2_instances', null, this.element);
             this.element = inputElement;
-            setValue('ej2_instances', ejInstance, this.element);
         }
         this.updateHTMLAttributesToElement();
         this.checkAttributes(false);
@@ -16373,7 +16402,8 @@ class SignatureBase extends Component {
         if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
             EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
             EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);
-            window.addEventListener('resize', this.resizeHandler.bind(this));
+            this.boundResizeHandler = this.resizeHandler.bind(this);
+            window.addEventListener('resize', this.boundResizeHandler);
         }
         else if (this.pointColl) {
             EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);
@@ -16394,7 +16424,10 @@ class SignatureBase extends Component {
                 EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
                 EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
             }
-            window.removeEventListener('resize', this.resizeHandler);
+            if (this.boundResizeHandler) {
+                window.removeEventListener('resize', this.boundResizeHandler);
+                this.boundResizeHandler = null;
+            }
         }
     }
     setHTMLProperties() {