@syncfusion/ej2-inputs 32.2.7 → 33.1.44

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

@@ -116,27 +116,29 @@ var Input;
         args.element.addEventListener('focus', focusHandler);
         args.element.addEventListener('blur', blurHandler);
         args.element.addEventListener('input', inputHandler);
-        args.element.__eventHandlers['inputFocusHandler'] = { focusHandler };
-        args.element.__eventHandlers['inputBlurHandler'] = { blurHandler };
-        args.element.__eventHandlers['inputHandler'] = { inputHandler };
+        args.element.__eventHandlers.inputFocusHandler = focusHandler;
+        args.element.__eventHandlers.inputBlurHandler = blurHandler;
+        args.element.__eventHandlers.inputHandler = inputHandler;
     }
     Input.bindInitialEvent = bindInitialEvent;
     function unbindInitialEvent(args) {
         if (!isNullOrUndefined(args.element)) {
             if (!isNullOrUndefined(args.element.__eventHandlers)) {
-                if (!isNullOrUndefined(args.element.__eventHandlers['inputFocusHandler'])
-                    && !isNullOrUndefined(args.element.__eventHandlers['inputBlurHandler'])
-                    && !isNullOrUndefined(args.element.__eventHandlers['inputHandler'])) {
-                    const focusHandler = args.element.__eventHandlers['inputFocusHandler'].focusHandler;
-                    const blurHandler = args.element.__eventHandlers['inputBlurHandler'].blurHandler;
-                    const inputHandler = args.element.__eventHandlers['inputHandler'].inputHandler;
+                if (!isNullOrUndefined(args.element.__eventHandlers.inputFocusHandler)
+                    && !isNullOrUndefined(args.element.__eventHandlers.inputBlurHandler)
+                    && !isNullOrUndefined(args.element.__eventHandlers.inputHandler)) {
+                    const focusHandler = args.element
+                        .__eventHandlers.inputFocusHandler;
+                    const blurHandler = args.element
+                        .__eventHandlers.inputBlurHandler;
+                    const inputHandler = args.element.__eventHandlers.inputHandler;
                     args.element.removeEventListener('focus', focusHandler);
                     args.element.removeEventListener('blur', blurHandler);
                     args.element.removeEventListener('input', inputHandler);
                     // Clean up stored bound functions
-                    delete args.element.__eventHandlers['inputFocusHandler'];
-                    delete args.element.__eventHandlers['inputBlurHandler'];
-                    delete args.element.__eventHandlers['inputHandler'];
+                    args.element.__eventHandlers.inputFocusHandler = null;
+                    args.element.__eventHandlers.inputBlurHandler = null;
+                    args.element.__eventHandlers.inputHandler = null;
                 }
             }
         }
@@ -261,8 +263,8 @@ var Input;
             args.element.addEventListener('input', inputFloatHandler);
             args.element.addEventListener('blur', blurFloatHandler);
             // Store the event handler functions to remove them later
-            args.element.__eventHandlers['floatInputHandler'] = { inputFloatHandler };
-            args.element.__eventHandlers['floatBlurHandler'] = { blurFloatHandler };
+            args.element.__eventHandlers.floatInputHandler = inputFloatHandler;
+            args.element.__eventHandlers.floatBlurHandler = blurFloatHandler;
         }
         else {
             unWireFloatLabelEvents(args);
@@ -274,16 +276,16 @@ var Input;
     function unWireFloatLabelEvents(args) {
         if (!isNullOrUndefined(args.element) &&
             !isNullOrUndefined(args.element.__eventHandlers)
-            && !isNullOrUndefined(args.element.__eventHandlers['floatInputHandler'])
-            && !isNullOrUndefined(args.element.__eventHandlers['floatBlurHandler'])) {
-            const inputFloatHandler = args.element.__eventHandlers['floatInputHandler'].inputFloatHandler;
-            const blurFloatHandler = args.element.__eventHandlers['floatBlurHandler'].blurFloatHandler;
+            && !isNullOrUndefined(args.element.__eventHandlers.floatInputHandler)
+            && !isNullOrUndefined(args.element.__eventHandlers.floatBlurHandler)) {
+            const inputFloatHandler = args.element.__eventHandlers.floatInputHandler;
+            const blurFloatHandler = args.element.__eventHandlers.floatBlurHandler;
             // Remove the event listeners using the defined functions
             args.element.removeEventListener('input', inputFloatHandler);
             args.element.removeEventListener('blur', blurFloatHandler);
             // Clean up stored event handler functions
-            delete args.element.__eventHandlers['floatInputHandler'];
-            delete args.element.__eventHandlers['floatBlurHandler'];
+            args.element.__eventHandlers.floatInputHandler = null;
+            args.element.__eventHandlers.floatBlurHandler = null;
         }
     }
     function checkFloatLabelType(type, container) {
@@ -400,7 +402,7 @@ var Input;
         if (isBindClearAction === undefined || isBindClearAction) {
             const clickHandlerEvent = (e) => clickHandler(e, element, button);
             button.addEventListener('click', clickHandlerEvent);
-            element.__eventHandlers['clearClickHandler'] = { clickHandlerEvent };
+            element.__eventHandlers.clearClickHandler = clickHandlerEvent;
         }
         const inputHandlerEvent = () => inputHandler(element, button);
         const focusHandlerEvent = () => focusHandler(element, button);
@@ -409,36 +411,36 @@ var Input;
         element.addEventListener('focus', focusHandlerEvent);
         element.addEventListener('blur', blurHandlerEvent);
         // Store the bound functions to remove them later
-        element.__eventHandlers['clearInputHandler'] = { inputHandlerEvent };
-        element.__eventHandlers['clearFocusHandler'] = { focusHandlerEvent };
-        element.__eventHandlers['clearBlurHandler'] = { blurHandlerEvent };
+        element.__eventHandlers.clearInputHandler = inputHandlerEvent;
+        element.__eventHandlers.clearFocusHandler = focusHandlerEvent;
+        element.__eventHandlers.clearBlurHandler = blurHandlerEvent;
     }
     Input.wireClearBtnEvents = wireClearBtnEvents;
     function unWireClearBtnEvents(element, button) {
         if (!isNullOrUndefined(element) &&
             !isNullOrUndefined(element.__eventHandlers)) {
-            if (!isNullOrUndefined(element.__eventHandlers['clearClickHandler'])) {
-                const clickHandlerEvent = element.__eventHandlers['clearClickHandler'].clickHandlerEvent;
+            if (!isNullOrUndefined(element.__eventHandlers.clearClickHandler)) {
+                const clickHandlerEvent = element.__eventHandlers.clearClickHandler;
                 if (isBindClearAction === undefined || isBindClearAction) {
                     if (!isNullOrUndefined(button)) {
                         button.removeEventListener('click', clickHandlerEvent);
                     }
                 }
-                delete element.__eventHandlers['clearClickHandler'];
+                element.__eventHandlers.clearClickHandler = null;
             }
-            if (!isNullOrUndefined(element.__eventHandlers['clearInputHandler'])
-                && !isNullOrUndefined(element.__eventHandlers['clearFocusHandler'])
-                && !isNullOrUndefined(element.__eventHandlers['clearBlurHandler'])) {
-                const inputHandlerEvent = element.__eventHandlers['clearInputHandler'].inputHandlerEvent;
-                const focusHandlerEvent = element.__eventHandlers['clearFocusHandler'].focusHandlerEvent;
-                const blurHandlerEvent = element.__eventHandlers['clearBlurHandler'].blurHandlerEvent;
+            if (!isNullOrUndefined(element.__eventHandlers.clearInputHandler)
+                && !isNullOrUndefined(element.__eventHandlers.clearFocusHandler)
+                && !isNullOrUndefined(element.__eventHandlers.clearBlurHandler)) {
+                const inputHandlerEvent = element.__eventHandlers.clearInputHandler;
+                const focusHandlerEvent = element.__eventHandlers.clearFocusHandler;
+                const blurHandlerEvent = element.__eventHandlers.clearBlurHandler;
                 element.removeEventListener('input', inputHandlerEvent);
                 element.removeEventListener('focus', focusHandlerEvent);
                 element.removeEventListener('blur', blurHandlerEvent);
                 // Clean up stored Event functions
-                delete element.__eventHandlers['clearInputHandler'];
-                delete element.__eventHandlers['clearFocusHandler'];
-                delete element.__eventHandlers['clearBlurHandler'];
+                element.__eventHandlers.clearInputHandler = null;
+                element.__eventHandlers.clearFocusHandler = null;
+                element.__eventHandlers.clearBlurHandler = null;
             }
         }
     }
@@ -615,7 +617,11 @@ var Input;
      * @param {string} placeholder - Placeholder value which is need to add.
      * @param {HTMLInputElement | HTMLTextAreaElement} element - The element on which the placeholder is need to add.
      */
-    function setPlaceholder(placeholder, element) {
+    function setPlaceholder(placeholder, element, moduleName) {
+        const modules = [
+            'textbox', 'numerictextbox', 'textarea', 'combobox',
+            'datepicker', 'daterangepicker', 'datetimepicker'
+        ];
         placeholder = encodePlaceHolder(placeholder);
         const parentElement = getParentNode(element);
         if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
@@ -624,6 +630,9 @@ var Input;
                 if (floatTextContent && floatTextContent.children[0]) {
                     floatTextContent.children[0].textContent = placeholder;
                 }
+                else if (modules.indexOf(moduleName) !== -1 && floatTextContent) {
+                    floatTextContent.textContent = placeholder;
+                }
                 else {
                     const floatText = parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0];
                     if (!isNullOrUndefined(floatText)) {
@@ -1183,9 +1192,8 @@ 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 = {
@@ -2370,6 +2378,7 @@ let NumericTextBox = class NumericTextBox extends Component {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
+        setValue('ej2_instances', null, this.element);
         super.destroy();
     }
     /**
@@ -2454,7 +2463,7 @@ let NumericTextBox = class NumericTextBox extends Component {
                     Input.validateInputType(this.container, this.element);
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(newProp.placeholder, this.element);
+                    Input.setPlaceholder(newProp.placeholder, this.element, this.getModuleName());
                     Input.calculateWidth(this.element, this.container);
                     break;
                 case 'step':
@@ -3931,9 +3940,8 @@ 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);
@@ -4413,6 +4421,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         }, this.clearButton);
         this.changeEventArgs = null;
         this.inputObj = null;
+        setValue('ej2_instances', null, this.element);
         super.destroy();
     }
 };
@@ -8714,6 +8723,7 @@ let Uploader = class Uploader extends Component {
                 }
             }
         }
+        element = null;
     }
     reRenderFileList() {
         if (this.listParent) {
@@ -8762,10 +8772,8 @@ 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) {
@@ -9032,6 +9040,7 @@ let Uploader = class Uploader extends Component {
             if (!enableDropText && dropTextArea) {
                 remove(dropTextArea);
             }
+            element = null;
         }
         else if (!isNullOrUndefined(this.uploaderOptions) && this.uploaderOptions.dropArea === undefined) {
             this.createDropTextHint();
@@ -9340,7 +9349,7 @@ let Uploader = class Uploader extends Component {
     }
     getSelectedFiles(index) {
         const data = [];
-        const liElement = this.fileList[index];
+        let liElement = this.fileList[index];
         const allFiles = this.getFilesData();
         const nameElements = +liElement.getAttribute('data-files-count');
         let startIndex = 0;
@@ -9350,15 +9359,16 @@ let Uploader = class Uploader extends Component {
         for (let j = startIndex; j < (startIndex + nameElements); j++) {
             data.push(allFiles[j]);
         }
+        liElement = null;
         return data;
     }
     removeFiles(args) {
         if (!this.enabled) {
             return;
         }
-        const selectedElement = args.target.parentElement;
+        let selectedElement = args.target.parentElement;
         const index = this.fileList.indexOf(selectedElement);
-        const liElement = this.fileList[index];
+        let liElement = this.fileList[index];
         const formUpload = this.isFormUpload();
         const fileData = formUpload ? this.getSelectedFiles(index) : this.getFilesInArray(this.filesData[index]);
         if (isNullOrUndefined(fileData)) {
@@ -9393,6 +9403,8 @@ let Uploader = class Uploader extends Component {
                 this.clearButton.removeAttribute('disabled');
             }
         }
+        liElement = null;
+        selectedElement = null;
     }
     removeFilesData(file, customTemplate) {
         let index;
@@ -9408,6 +9420,10 @@ let Uploader = class Uploader extends Component {
             return;
         }
         this.element.value = '';
+        const iconElement = selectedElement.querySelector('.e-icons');
+        if (iconElement) {
+            EventHandler.remove(iconElement, 'click', this.removeFiles);
+        }
         detach(selectedElement);
         index = this.fileList.indexOf(selectedElement);
         this.fileList.splice(index, 1);
@@ -9459,7 +9475,7 @@ let Uploader = class Uploader extends Component {
     removingEventCallback(eventArgs, formData, selectedFiles, file) {
         /* istanbul ignore next */
         const name = this.element.getAttribute('name');
-        const liElement = this.getLiElement(file);
+        let liElement = this.getLiElement(file);
         if (!isNullOrUndefined(liElement) && (!isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON)) ||
             !isNullOrUndefined(liElement.querySelector('.' + REMOVE_ICON)))) {
             const spinnerTarget = liElement.querySelector('.' + DELETE_ICON) ?
@@ -9475,6 +9491,7 @@ let Uploader = class Uploader extends Component {
             formData.append(name, selectedFiles.name);
         }
         this.updateFormData(formData, eventArgs.customFormData);
+        liElement = null;
     }
     /* istanbul ignore next */
     updateFormData(formData, customData) {
@@ -9526,7 +9543,7 @@ let Uploader = class Uploader extends Component {
         };
         if (!customTemplate) {
             const index = this.filesData.indexOf(files);
-            const rootElement = this.fileList[index];
+            let rootElement = this.fileList[index];
             if (rootElement) {
                 rootElement.classList.remove(UPLOAD_SUCCESS);
                 rootElement.classList.add(UPLOAD_FAILED);
@@ -9536,16 +9553,18 @@ let Uploader = class Uploader extends Component {
                     statusElement.classList.add(UPLOAD_FAILED);
                 }
             }
+            rootElement = null;
             this.checkActionButtonStatus();
         }
         this.trigger('failure', args);
-        const liElement = this.getLiElement(files);
+        let liElement = this.getLiElement(files);
         /* istanbul ignore next */
         if (!isNullOrUndefined(liElement) && !isNullOrUndefined(liElement.querySelector('.' + DELETE_ICON))) {
             const spinnerTarget = liElement.querySelector('.' + DELETE_ICON);
             hideSpinner(spinnerTarget);
             detach(liElement.querySelector('.e-spinner-pane'));
         }
+        liElement = null;
     }
     /* istanbul ignore next */
     getFilesFromFolder(event) {
@@ -9813,6 +9832,10 @@ let Uploader = class Uploader extends Component {
     }
     clearData(singleUpload) {
         if (!isNullOrUndefined(this.listParent)) {
+            const fileItems = this.listParent.querySelectorAll('.e-icons');
+            for (let i = 0; i < fileItems.length; i++) {
+                EventHandler.remove(fileItems[i], 'click', this.removeFiles);
+            }
             detach(this.listParent);
             this.listParent = null;
         }
@@ -9820,13 +9843,14 @@ let Uploader = class Uploader extends Component {
             this.element.value = '';
         }
         if (this.isFormUpload() && this.uploadWrapper.querySelector('.' + INPUT_WRAPPER)) {
-            const hiddenElement = this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).querySelector('.' + HIDDEN_INPUT);
+            let hiddenElement = this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).querySelector('.' + HIDDEN_INPUT);
             if (hiddenElement) {
                 this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).removeChild(hiddenElement);
             }
+            hiddenElement = null;
         }
-        this.fileList = [];
-        this.filesData = [];
+        this.fileList.length = 0;
+        this.filesData.length = 0;
         this.removeActionButtons();
     }
     updateSortedFileList(filesData) {
@@ -9834,8 +9858,9 @@ let Uploader = class Uploader extends Component {
         let added = -1;
         if (this.listParent) {
             for (let i = 0; i < this.listParent.querySelectorAll('li').length; i++) {
-                const liElement = this.listParent.querySelectorAll('li')[i];
+                let liElement = this.listParent.querySelectorAll('li')[i];
                 previousListClone.appendChild(liElement.cloneNode(true));
+                liElement = null;
             }
             this.removeActionButtons();
             const oldList = [].slice.call(previousListClone.childNodes);
@@ -9853,6 +9878,8 @@ let Uploader = class Uploader extends Component {
                     this.internalCreateFileList([filesData[index]]);
                 }
             }
+            previousListClone.innerHTML = '';
+            oldList.length = 0;
         }
         else {
             this.internalCreateFileList(filesData);
@@ -9937,7 +9964,7 @@ let Uploader = class Uploader extends Component {
     createCustomfileList(fileData) {
         this.createParentUL();
         for (const listItem of fileData) {
-            const listElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });
+            let listElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });
             this.uploadTemplateFn = this.templateComplier(this.template);
             const liTempCompiler = this.uploadTemplateFn(listItem, this, 'template', this.element.id + 'Template', this.isStringTemplate, null, listElement);
             if (liTempCompiler) {
@@ -9961,6 +9988,7 @@ let Uploader = class Uploader extends Component {
             this.trigger('fileListRendering', eventsArgs);
             this.listParent.appendChild(listElement);
             this.fileList.push(listElement);
+            listElement = null;
         }
         this.renderReactTemplates();
     }
@@ -10198,7 +10226,7 @@ let Uploader = class Uploader extends Component {
         }
         else {
             for (const listItem of fileData) {
-                const liElement = this.createElement('li', {
+                let liElement = this.createElement('li', {
                     className: FILE,
                     attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }
                 });
@@ -10278,6 +10306,7 @@ let Uploader = class Uploader extends Component {
                     this.checkActionComplete(true);
                     this.flag = preventActionComplete;
                 }
+                liElement = null;
             }
         }
     }
@@ -10337,6 +10366,7 @@ let Uploader = class Uploader extends Component {
                 filterFiles.push(files[i]);
             }
         }
+        li = null;
         return filterFiles;
     }
     updateStatus(files, status, statusCode, updateLiStatus = true) {
@@ -10345,12 +10375,13 @@ let Uploader = class Uploader extends Component {
             files.statusCode = statusCode;
         }
         if (updateLiStatus) {
-            const li = this.getLiElement(files);
+            let li = this.getLiElement(files);
             if (!isNullOrUndefined(li)) {
                 if (!isNullOrUndefined(li.querySelector('.' + STATUS)) && !((status === '' || isNullOrUndefined(status)))) {
                     li.querySelector('.' + STATUS).textContent = status;
                 }
             }
+            li = null;
         }
         return files;
     }
@@ -10396,7 +10427,7 @@ let Uploader = class Uploader extends Component {
         li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;
     }
     uploadInProgress(e, files, customUI, request) {
-        const li = this.getLiElement(files);
+        let li = this.getLiElement(files);
         if (isNullOrUndefined(li) && (!customUI)) {
             return;
         }
@@ -10424,6 +10455,7 @@ let Uploader = class Uploader extends Component {
         }
         const args = { e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('inProgress'), '3') };
         this.trigger('progress', args);
+        li = null;
     }
     /* istanbul ignore next */
     cancelUploadingFile(files, e, request, li) {
@@ -10473,7 +10505,7 @@ let Uploader = class Uploader extends Component {
         }
     }
     removecanceledFile(e, file) {
-        const liElement = this.getLiElement(file);
+        let liElement = this.getLiElement(file);
         if (isNullOrUndefined(liElement) || liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
             return;
         }
@@ -10489,6 +10521,7 @@ let Uploader = class Uploader extends Component {
         const requestResponse = e && e.currentTarget ? this.getResponse(e) : null;
         const args = { event: e, response: requestResponse, operation: 'cancel', file: file };
         this.trigger('success', args);
+        liElement = null;
     }
     renderFailureState(e, file, liElement) {
         this.updateProgressBarClasses(liElement, UPLOAD_FAILED);
@@ -10574,7 +10607,7 @@ let Uploader = class Uploader extends Component {
         const args = {
             e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '2', false), statusText: statusMessage
         };
-        const liElement = this.getLiElement(file);
+        let liElement = this.getLiElement(file);
         if (!isNullOrUndefined(liElement)) {
             const spinnerEle = liElement.querySelector('.' + SPINNER_PANE);
             if (!isNullOrUndefined(spinnerEle)) {
@@ -10606,9 +10639,10 @@ let Uploader = class Uploader extends Component {
                 this.checkActionComplete(true);
             }
         });
+        liElement = null;
     }
     uploadFailed(e, file) {
-        const li = this.getLiElement(file);
+        let li = this.getLiElement(file);
         const response = e && e.currentTarget ? this.getResponse(e) : null;
         const statusMessage = this.localizedTexts('uploadFailedMessage');
         const args = {
@@ -10623,6 +10657,7 @@ let Uploader = class Uploader extends Component {
             this.uploadSequential();
             this.checkActionComplete(true);
         });
+        li = null;
     }
     uploadSequential() {
         if (this.sequentialUpload) {
@@ -10884,7 +10919,7 @@ let Uploader = class Uploader extends Component {
         }
         eventArgs.fileData.statusCode = '5';
         eventArgs.fileData.status = this.localizedTexts('fileUploadCancel');
-        const liElement = this.getLiElement(eventArgs.fileData);
+        let liElement = this.getLiElement(eventArgs.fileData);
         if (liElement) {
             if (!isNullOrUndefined(liElement.querySelector('.' + STATUS))) {
                 liElement.querySelector('.' + STATUS).innerHTML = this.localizedTexts('fileUploadCancel');
@@ -10902,6 +10937,7 @@ let Uploader = class Uploader extends Component {
             }, false);
             this.checkActionButtonStatus();
         }
+        liElement = null;
     }
     checkChunkUpload() {
         return (this.asyncSettings.chunkSize <= 0 || isNullOrUndefined(this.asyncSettings.chunkSize)) ? false : true;
@@ -10994,6 +11030,7 @@ let Uploader = class Uploader extends Component {
         else {
             this.chunkUploadFailed(e, metaData);
         }
+        liElement = null;
     }
     sendNextRequest(metaData) {
         metaData.start = metaData.end;
@@ -11004,7 +11041,7 @@ let Uploader = class Uploader extends Component {
     }
     removeChunkFile(e, metaData, custom) {
         if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) && !custom)) {
-            const liElement = this.getLiElement(metaData.file);
+            let liElement = this.getLiElement(metaData.file);
             const deleteIcon = liElement.querySelector('.' + ABORT_ICON);
             const spinnerTarget = deleteIcon;
             this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');
@@ -11026,6 +11063,7 @@ let Uploader = class Uploader extends Component {
                 hideSpinner(spinnerTarget);
                 detach(liElement.querySelector('.e-spinner-pane'));
             }
+            liElement = null;
         }
     }
     pauseUpload(metaData, e, custom) {
@@ -11049,7 +11087,7 @@ let Uploader = class Uploader extends Component {
             metaData.request.emitError = false;
             metaData.request.httpRequest.abort();
         }
-        const liElement = this.getLiElement(metaData.file);
+        let liElement = this.getLiElement(metaData.file);
         if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {
             const targetElement = liElement.querySelector('.' + PAUSE_UPLOAD);
             targetElement.classList.remove(PAUSE_UPLOAD);
@@ -11066,9 +11104,10 @@ let Uploader = class Uploader extends Component {
         }
         this.pausedData.push(metaData);
         this.trigger('pausing', eventArgs);
+        liElement = null;
     }
     resumeUpload(metaData, e, custom) {
-        const liElement = this.getLiElement(metaData.file);
+        let liElement = this.getLiElement(metaData.file);
         let targetElement;
         if (!isNullOrUndefined(liElement)) {
             targetElement = liElement.querySelector('.' + RESUME_UPLOAD);
@@ -11106,6 +11145,7 @@ let Uploader = class Uploader extends Component {
                 }
             }
         }
+        liElement = null;
     }
     updateMetaData(metaData) {
         if (this.uploadMetaData.indexOf(metaData) === -1) {
@@ -11117,7 +11157,7 @@ let Uploader = class Uploader extends Component {
         }
     }
     removeChunkProgressBar(metaData) {
-        const liElement = this.getLiElement(metaData.file);
+        let liElement = this.getLiElement(metaData.file);
         if (!isNullOrUndefined(liElement)) {
             this.updateProgressBarClasses(liElement, UPLOAD_SUCCESS);
             this.removeProgressbar(liElement, 'success');
@@ -11128,6 +11168,7 @@ let Uploader = class Uploader extends Component {
                 cancelButton.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);
             }
         }
+        liElement = null;
     }
     chunkUploadFailed(e, metaData, custom) {
         const chunkCount = Math.max(Math.ceil(metaData.file.size / this.asyncSettings.chunkSize), 1);
@@ -11196,6 +11237,7 @@ let Uploader = class Uploader extends Component {
                 }
             }
         });
+        liElement = null;
     }
     retryRequest(liElement, metaData, custom) {
         if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {
@@ -11253,7 +11295,7 @@ let Uploader = class Uploader extends Component {
             metaData.file.status = this.localizedTexts('inProgress');
         }
         this.updateMetaData(metaData);
-        const liElement = this.getLiElement(metaData.file);
+        let liElement = this.getLiElement(metaData.file);
         if (isNullOrUndefined(liElement)) {
             return;
         }
@@ -11305,6 +11347,7 @@ let Uploader = class Uploader extends Component {
                 this.checkPausePlayAction(e);
             }, false);
         }
+        liElement = null;
     }
     /**
      * It is used to convert bytes value into kilobytes or megabytes depending on the size based
@@ -11381,15 +11424,23 @@ let Uploader = class Uploader extends Component {
             this.uploadWrapper.parentElement.appendChild(this.element);
             detach(this.uploadWrapper);
         }
-        this.uploadWrapper = null;
+        this.fileList = [];
+        this.filesData = [];
+        this.fileList.length = 0;
+        this.filesData.length = 0;
         this.uploadWrapper = null;
         this.browseButton = null;
+        this.listParent = null;
         this.dropAreaWrapper = null;
         this.dropZoneElement = null;
+        this.actionButtons = null;
+        this.pauseButton = null;
+        this.formElement = null;
         this.dropArea = null;
         this.keyboardModule = null;
         this.clearButton = null;
         this.uploadButton = null;
+        setValue('ej2_instances', null, this.element);
         super.destroy();
     }
     /**
@@ -11563,7 +11614,7 @@ let Uploader = class Uploader extends Component {
         }
     }
     spliceFiles(liIndex) {
-        const liElement = this.fileList[liIndex];
+        let liElement = this.fileList[liIndex];
         const allFiles = this.getFilesData();
         const nameElements = +liElement.getAttribute('data-files-count');
         let startIndex = 0;
@@ -11574,6 +11625,7 @@ let Uploader = class Uploader extends Component {
         for (let j = endIndex; j >= startIndex; j--) {
             allFiles.splice(j, 1);
         }
+        liElement = null;
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -14142,7 +14194,7 @@ let TextBox = class TextBox extends Component {
                     this.handleFloatLabel();
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(this.placeholder, this.respectiveElement);
+                    Input.setPlaceholder(this.placeholder, this.respectiveElement, this.getModuleName());
                     Input.calculateWidth(this.respectiveElement, this.textboxWrapper.container);
                     break;
                 case 'autocomplete':
@@ -14207,9 +14259,8 @@ 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);
@@ -14706,6 +14757,7 @@ let TextBox = class TextBox extends Component {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
+        setValue('ej2_instances', null, this.element);
         super.destroy();
     }
     /**
@@ -14997,7 +15049,7 @@ let TextArea = class TextArea extends Component {
                     this.handleAdornmentFloatLabel();
                     break;
                 case 'placeholder':
-                    Input.setPlaceholder(this.placeholder, this.element);
+                    Input.setPlaceholder(this.placeholder, this.element, this.getModuleName());
                     Input.calculateWidth(this.element, this.textareaWrapper.container);
                     break;
                 case 'cssClass':
@@ -15091,9 +15143,8 @@ 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);
@@ -15408,6 +15459,7 @@ let TextArea = class TextArea extends Component {
             properties: this.properties
         }, this.clearButton);
         this.formElement = null;
+        setValue('ej2_instances', null, this.element);
         super.destroy();
     }
     focusHandler(args) {