@syncfusion/ej2-inputs 32.2.8 → 33.1.47

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)) {
@@ -2369,7 +2378,9 @@ let NumericTextBox = class NumericTextBox extends Component {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
-        setValue('ej2_instances', null, this.element);
+        if (this.element.tagName === 'EJS-NUMERICTEXTBOX') {
+            setValue('ej2_instances', null, this.element);
+        }
         super.destroy();
     }
     /**
@@ -2454,7 +2465,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':
@@ -4412,7 +4423,9 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         }, this.clearButton);
         this.changeEventArgs = null;
         this.inputObj = null;
-        setValue('ej2_instances', null, this.element);
+        if (this.element.tagName === 'EJS-MASKEDTEXTBOX') {
+            setValue('ej2_instances', null, this.element);
+        }
         super.destroy();
     }
 };
@@ -8714,6 +8727,7 @@ let Uploader = class Uploader extends Component {
                 }
             }
         }
+        element = null;
     }
     reRenderFileList() {
         if (this.listParent) {
@@ -8778,7 +8792,12 @@ let Uploader = class Uploader extends Component {
             }
         }
         if (isNullOrUndefined(this.element.getAttribute('name'))) {
-            this.element.setAttribute('name', this.element.getAttribute('id'));
+            if (!isNullOrUndefined(this.element.getAttribute('id')) && this.element.getAttribute('id') !== '') {
+                this.element.setAttribute('name', this.element.getAttribute('id'));
+            }
+            else {
+                this.element.setAttribute('name', 'UploadFiles');
+            }
         }
         if (!this.element.hasAttribute('type')) {
             this.element.setAttribute('type', 'file');
@@ -9030,6 +9049,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();
@@ -9338,7 +9358,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;
@@ -9348,15 +9368,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)) {
@@ -9391,6 +9412,8 @@ let Uploader = class Uploader extends Component {
                 this.clearButton.removeAttribute('disabled');
             }
         }
+        liElement = null;
+        selectedElement = null;
     }
     removeFilesData(file, customTemplate) {
         let index;
@@ -9406,6 +9429,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);
@@ -9457,7 +9484,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) ?
@@ -9473,6 +9500,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) {
@@ -9524,7 +9552,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);
@@ -9534,16 +9562,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) {
@@ -9811,6 +9841,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;
         }
@@ -9818,13 +9852,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) {
@@ -9832,8 +9867,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);
@@ -9851,6 +9887,8 @@ let Uploader = class Uploader extends Component {
                     this.internalCreateFileList([filesData[index]]);
                 }
             }
+            previousListClone.innerHTML = '';
+            oldList.length = 0;
         }
         else {
             this.internalCreateFileList(filesData);
@@ -9935,7 +9973,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) {
@@ -9959,6 +9997,7 @@ let Uploader = class Uploader extends Component {
             this.trigger('fileListRendering', eventsArgs);
             this.listParent.appendChild(listElement);
             this.fileList.push(listElement);
+            listElement = null;
         }
         this.renderReactTemplates();
     }
@@ -10196,7 +10235,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' }
                 });
@@ -10276,6 +10315,7 @@ let Uploader = class Uploader extends Component {
                     this.checkActionComplete(true);
                     this.flag = preventActionComplete;
                 }
+                liElement = null;
             }
         }
     }
@@ -10335,6 +10375,7 @@ let Uploader = class Uploader extends Component {
                 filterFiles.push(files[i]);
             }
         }
+        li = null;
         return filterFiles;
     }
     updateStatus(files, status, statusCode, updateLiStatus = true) {
@@ -10343,12 +10384,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;
     }
@@ -10394,7 +10436,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;
         }
@@ -10422,6 +10464,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) {
@@ -10471,7 +10514,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;
         }
@@ -10487,6 +10530,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);
@@ -10572,7 +10616,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)) {
@@ -10604,9 +10648,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 = {
@@ -10621,6 +10666,7 @@ let Uploader = class Uploader extends Component {
             this.uploadSequential();
             this.checkActionComplete(true);
         });
+        li = null;
     }
     uploadSequential() {
         if (this.sequentialUpload) {
@@ -10882,7 +10928,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');
@@ -10900,6 +10946,7 @@ let Uploader = class Uploader extends Component {
             }, false);
             this.checkActionButtonStatus();
         }
+        liElement = null;
     }
     checkChunkUpload() {
         return (this.asyncSettings.chunkSize <= 0 || isNullOrUndefined(this.asyncSettings.chunkSize)) ? false : true;
@@ -10992,6 +11039,7 @@ let Uploader = class Uploader extends Component {
         else {
             this.chunkUploadFailed(e, metaData);
         }
+        liElement = null;
     }
     sendNextRequest(metaData) {
         metaData.start = metaData.end;
@@ -11002,7 +11050,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');
@@ -11024,6 +11072,7 @@ let Uploader = class Uploader extends Component {
                 hideSpinner(spinnerTarget);
                 detach(liElement.querySelector('.e-spinner-pane'));
             }
+            liElement = null;
         }
     }
     pauseUpload(metaData, e, custom) {
@@ -11047,7 +11096,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);
@@ -11064,9 +11113,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);
@@ -11104,6 +11154,7 @@ let Uploader = class Uploader extends Component {
                 }
             }
         }
+        liElement = null;
     }
     updateMetaData(metaData) {
         if (this.uploadMetaData.indexOf(metaData) === -1) {
@@ -11115,7 +11166,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');
@@ -11126,6 +11177,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);
@@ -11194,6 +11246,7 @@ let Uploader = class Uploader extends Component {
                 }
             }
         });
+        liElement = null;
     }
     retryRequest(liElement, metaData, custom) {
         if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {
@@ -11251,7 +11304,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;
         }
@@ -11303,6 +11356,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
@@ -11379,16 +11433,25 @@ 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);
+        if (this.element.tagName === 'EJS-UPLOADER') {
+            setValue('ej2_instances', null, this.element);
+        }
         super.destroy();
     }
     /**
@@ -11562,7 +11625,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;
@@ -11573,6 +11636,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 */
     /**
@@ -14141,7 +14205,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':
@@ -14704,7 +14768,9 @@ let TextBox = class TextBox extends Component {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
-        setValue('ej2_instances', null, this.element);
+        if (this.element.tagName === 'EJS-TEXTBOX') {
+            setValue('ej2_instances', null, this.element);
+        }
         super.destroy();
     }
     /**
@@ -14996,7 +15062,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':
@@ -15406,7 +15472,9 @@ let TextArea = class TextArea extends Component {
             properties: this.properties
         }, this.clearButton);
         this.formElement = null;
-        setValue('ej2_instances', null, this.element);
+        if (this.element.tagName === 'EJS-TEXTAREA' || this.element.tagName === 'EJS-SMARTTEXTAREA') {
+            setValue('ej2_instances', null, this.element);
+        }
         super.destroy();
     }
     focusHandler(args) {