@syncfusion/ej2-inputs 32.2.8 → 33.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.8
+*  version : 33.1.47
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "32.2.8",
+  "version": "33.1.47",
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.6",
-    "@syncfusion/ej2-buttons": "~32.2.7",
-    "@syncfusion/ej2-popups": "~32.2.8",
-    "@syncfusion/ej2-splitbuttons": "~32.2.7"
+    "@syncfusion/ej2-base": "~33.1.45",
+    "@syncfusion/ej2-buttons": "~33.1.44",
+    "@syncfusion/ej2-popups": "~33.1.44",
+    "@syncfusion/ej2-splitbuttons": "~33.1.44"
   },
   "devDependencies": {},
   "keywords": [

package/src/input/input.d.ts

@@ -79,7 +79,7 @@ export declare namespace 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: string, element: HTMLInputElement | HTMLTextAreaElement): void;
+    function setPlaceholder(placeholder: string, element: HTMLInputElement | HTMLTextAreaElement, moduleName?: string): void;
     /**
      * Set the read only attribute to the input element
      * ```

package/src/input/input.js

@@ -119,27 +119,29 @@ export var Input;
         args.element.addEventListener('focus', focusHandler);
         args.element.addEventListener('blur', blurHandler);
         args.element.addEventListener('input', inputHandler);
-        args.element.__eventHandlers['inputFocusHandler'] = { focusHandler: focusHandler };
-        args.element.__eventHandlers['inputBlurHandler'] = { blurHandler: blurHandler };
-        args.element.__eventHandlers['inputHandler'] = { 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'])) {
-                    var focusHandler_1 = args.element.__eventHandlers['inputFocusHandler'].focusHandler;
-                    var blurHandler_1 = args.element.__eventHandlers['inputBlurHandler'].blurHandler;
-                    var inputHandler_1 = args.element.__eventHandlers['inputHandler'].inputHandler;
+                if (!isNullOrUndefined(args.element.__eventHandlers.inputFocusHandler)
+                    && !isNullOrUndefined(args.element.__eventHandlers.inputBlurHandler)
+                    && !isNullOrUndefined(args.element.__eventHandlers.inputHandler)) {
+                    var focusHandler_1 = args.element
+                        .__eventHandlers.inputFocusHandler;
+                    var blurHandler_1 = args.element
+                        .__eventHandlers.inputBlurHandler;
+                    var inputHandler_1 = args.element.__eventHandlers.inputHandler;
                     args.element.removeEventListener('focus', focusHandler_1);
                     args.element.removeEventListener('blur', blurHandler_1);
                     args.element.removeEventListener('input', inputHandler_1);
                     // 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;
                 }
             }
         }
@@ -264,8 +266,8 @@ export 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: inputFloatHandler };
-            args.element.__eventHandlers['floatBlurHandler'] = { blurFloatHandler: blurFloatHandler };
+            args.element.__eventHandlers.floatInputHandler = inputFloatHandler;
+            args.element.__eventHandlers.floatBlurHandler = blurFloatHandler;
         }
         else {
             unWireFloatLabelEvents(args);
@@ -277,16 +279,16 @@ export var Input;
     function unWireFloatLabelEvents(args) {
         if (!isNullOrUndefined(args.element) &&
             !isNullOrUndefined(args.element.__eventHandlers)
-            && !isNullOrUndefined(args.element.__eventHandlers['floatInputHandler'])
-            && !isNullOrUndefined(args.element.__eventHandlers['floatBlurHandler'])) {
-            var inputFloatHandler = args.element.__eventHandlers['floatInputHandler'].inputFloatHandler;
-            var blurFloatHandler = args.element.__eventHandlers['floatBlurHandler'].blurFloatHandler;
+            && !isNullOrUndefined(args.element.__eventHandlers.floatInputHandler)
+            && !isNullOrUndefined(args.element.__eventHandlers.floatBlurHandler)) {
+            var inputFloatHandler = args.element.__eventHandlers.floatInputHandler;
+            var 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) {
@@ -405,7 +407,7 @@ export var Input;
         if (isBindClearAction === undefined || isBindClearAction) {
             var clickHandlerEvent = function (e) { return clickHandler(e, element, button); };
             button.addEventListener('click', clickHandlerEvent);
-            element.__eventHandlers['clearClickHandler'] = { clickHandlerEvent: clickHandlerEvent };
+            element.__eventHandlers.clearClickHandler = clickHandlerEvent;
         }
         var inputHandlerEvent = function () { return inputHandler(element, button); };
         var focusHandlerEvent = function () { return focusHandler(element, button); };
@@ -414,36 +416,36 @@ export var Input;
         element.addEventListener('focus', focusHandlerEvent);
         element.addEventListener('blur', blurHandlerEvent);
         // Store the bound functions to remove them later
-        element.__eventHandlers['clearInputHandler'] = { inputHandlerEvent: inputHandlerEvent };
-        element.__eventHandlers['clearFocusHandler'] = { focusHandlerEvent: focusHandlerEvent };
-        element.__eventHandlers['clearBlurHandler'] = { blurHandlerEvent: 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'])) {
-                var clickHandlerEvent = element.__eventHandlers['clearClickHandler'].clickHandlerEvent;
+            if (!isNullOrUndefined(element.__eventHandlers.clearClickHandler)) {
+                var 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'])) {
-                var inputHandlerEvent = element.__eventHandlers['clearInputHandler'].inputHandlerEvent;
-                var focusHandlerEvent = element.__eventHandlers['clearFocusHandler'].focusHandlerEvent;
-                var blurHandlerEvent = element.__eventHandlers['clearBlurHandler'].blurHandlerEvent;
+            if (!isNullOrUndefined(element.__eventHandlers.clearInputHandler)
+                && !isNullOrUndefined(element.__eventHandlers.clearFocusHandler)
+                && !isNullOrUndefined(element.__eventHandlers.clearBlurHandler)) {
+                var inputHandlerEvent = element.__eventHandlers.clearInputHandler;
+                var focusHandlerEvent = element.__eventHandlers.clearFocusHandler;
+                var 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;
             }
         }
     }
@@ -622,7 +624,11 @@ export 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) {
+        var modules = [
+            'textbox', 'numerictextbox', 'textarea', 'combobox',
+            'datepicker', 'daterangepicker', 'datetimepicker'
+        ];
         placeholder = encodePlaceHolder(placeholder);
         var parentElement = getParentNode(element);
         if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
@@ -631,6 +637,9 @@ export var Input;
                 if (floatTextContent && floatTextContent.children[0]) {
                     floatTextContent.children[0].textContent = placeholder;
                 }
+                else if (modules.indexOf(moduleName) !== -1 && floatTextContent) {
+                    floatTextContent.textContent = placeholder;
+                }
                 else {
                     var floatText = parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0];
                     if (!isNullOrUndefined(floatText)) {

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -594,7 +594,9 @@ var MaskedTextBox = /** @class */ (function (_super) {
         }, 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.prototype.destroy.call(this);
     };
     __decorate([

package/src/numerictextbox/numerictextbox.js

@@ -1293,7 +1293,9 @@ var NumericTextBox = /** @class */ (function (_super) {
             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.prototype.destroy.call(this);
     };
     /**
@@ -1379,7 +1381,7 @@ var NumericTextBox = /** @class */ (function (_super) {
                     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':

package/src/textarea/textarea.js

@@ -125,7 +125,7 @@ var TextArea = /** @class */ (function (_super) {
                     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':
@@ -537,7 +537,9 @@ var TextArea = /** @class */ (function (_super) {
             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.prototype.destroy.call(this);
     };
     TextArea.prototype.focusHandler = function (args) {

package/src/textbox/textbox.js

@@ -130,7 +130,7 @@ var TextBox = /** @class */ (function (_super) {
                     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':
@@ -695,7 +695,9 @@ var TextBox = /** @class */ (function (_super) {
             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.prototype.destroy.call(this);
     };
     /**

package/src/uploader/uploader.js

@@ -305,6 +305,7 @@ var Uploader = /** @class */ (function (_super) {
                 }
             }
         }
+        element = null;
     };
     Uploader.prototype.reRenderFileList = function () {
         if (this.listParent) {
@@ -369,7 +370,12 @@ var Uploader = /** @class */ (function (_super) {
             }
         }
         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');
@@ -622,6 +628,7 @@ var Uploader = /** @class */ (function (_super) {
             if (!enableDropText && dropTextArea) {
                 remove(dropTextArea);
             }
+            element = null;
         }
         else if (!isNullOrUndefined(this.uploaderOptions) && this.uploaderOptions.dropArea === undefined) {
             this.createDropTextHint();
@@ -942,6 +949,7 @@ var Uploader = /** @class */ (function (_super) {
         for (var j = startIndex; j < (startIndex + nameElements); j++) {
             data.push(allFiles[j]);
         }
+        liElement = null;
         return data;
     };
     Uploader.prototype.removeFiles = function (args) {
@@ -985,6 +993,8 @@ var Uploader = /** @class */ (function (_super) {
                 this.clearButton.removeAttribute('disabled');
             }
         }
+        liElement = null;
+        selectedElement = null;
     };
     Uploader.prototype.removeFilesData = function (file, customTemplate) {
         var index;
@@ -1000,6 +1010,10 @@ var Uploader = /** @class */ (function (_super) {
             return;
         }
         this.element.value = '';
+        var 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);
@@ -1068,6 +1082,7 @@ var Uploader = /** @class */ (function (_super) {
             formData.append(name, selectedFiles.name);
         }
         this.updateFormData(formData, eventArgs.customFormData);
+        liElement = null;
     };
     /* istanbul ignore next */
     Uploader.prototype.updateFormData = function (formData, customData) {
@@ -1135,6 +1150,7 @@ var Uploader = /** @class */ (function (_super) {
                     statusElement.classList.add(UPLOAD_FAILED);
                 }
             }
+            rootElement = null;
             this.checkActionButtonStatus();
         }
         this.trigger('failure', args);
@@ -1145,6 +1161,7 @@ var Uploader = /** @class */ (function (_super) {
             hideSpinner(spinnerTarget);
             detach(liElement.querySelector('.e-spinner-pane'));
         }
+        liElement = null;
     };
     /* istanbul ignore next */
     Uploader.prototype.getFilesFromFolder = function (event) {
@@ -1423,6 +1440,10 @@ var Uploader = /** @class */ (function (_super) {
     };
     Uploader.prototype.clearData = function (singleUpload) {
         if (!isNullOrUndefined(this.listParent)) {
+            var fileItems = this.listParent.querySelectorAll('.e-icons');
+            for (var i = 0; i < fileItems.length; i++) {
+                EventHandler.remove(fileItems[i], 'click', this.removeFiles);
+            }
             detach(this.listParent);
             this.listParent = null;
         }
@@ -1434,9 +1455,10 @@ var Uploader = /** @class */ (function (_super) {
             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();
     };
     Uploader.prototype.updateSortedFileList = function (filesData) {
@@ -1446,6 +1468,7 @@ var Uploader = /** @class */ (function (_super) {
             for (var i = 0; i < this.listParent.querySelectorAll('li').length; i++) {
                 var liElement = this.listParent.querySelectorAll('li')[i];
                 previousListClone.appendChild(liElement.cloneNode(true));
+                liElement = null;
             }
             this.removeActionButtons();
             var oldList = [].slice.call(previousListClone.childNodes);
@@ -1463,6 +1486,8 @@ var Uploader = /** @class */ (function (_super) {
                     this.internalCreateFileList([filesData[index]]);
                 }
             }
+            previousListClone.innerHTML = '';
+            oldList.length = 0;
         }
         else {
             this.internalCreateFileList(filesData);
@@ -1575,6 +1600,7 @@ var Uploader = /** @class */ (function (_super) {
             this.trigger('fileListRendering', eventsArgs);
             this.listParent.appendChild(listElement);
             this.fileList.push(listElement);
+            listElement = null;
         }
         this.renderReactTemplates();
     };
@@ -1898,6 +1924,7 @@ var Uploader = /** @class */ (function (_super) {
                     this.checkActionComplete(true);
                     this.flag = preventActionComplete;
                 }
+                liElement = null;
             }
         }
     };
@@ -1958,6 +1985,7 @@ var Uploader = /** @class */ (function (_super) {
                 filterFiles.push(files[i]);
             }
         }
+        li = null;
         return filterFiles;
     };
     Uploader.prototype.updateStatus = function (files, status, statusCode, updateLiStatus) {
@@ -1973,6 +2001,7 @@ var Uploader = /** @class */ (function (_super) {
                     li.querySelector('.' + STATUS).textContent = status;
                 }
             }
+            li = null;
         }
         return files;
     };
@@ -2046,6 +2075,7 @@ var Uploader = /** @class */ (function (_super) {
         }
         var args = { e: e, operation: 'upload', file: this.updateStatus(files, this.localizedTexts('inProgress'), '3') };
         this.trigger('progress', args);
+        li = null;
     };
     /* istanbul ignore next */
     Uploader.prototype.cancelUploadingFile = function (files, e, request, li) {
@@ -2112,6 +2142,7 @@ var Uploader = /** @class */ (function (_super) {
         var requestResponse = e && e.currentTarget ? this.getResponse(e) : null;
         var args = { event: e, response: requestResponse, operation: 'cancel', file: file };
         this.trigger('success', args);
+        liElement = null;
     };
     Uploader.prototype.renderFailureState = function (e, file, liElement) {
         var _this = this;
@@ -2231,6 +2262,7 @@ var Uploader = /** @class */ (function (_super) {
                 _this.checkActionComplete(true);
             }
         });
+        liElement = null;
     };
     Uploader.prototype.uploadFailed = function (e, file) {
         var _this = this;
@@ -2249,6 +2281,7 @@ var Uploader = /** @class */ (function (_super) {
             _this.uploadSequential();
             _this.checkActionComplete(true);
         });
+        li = null;
     };
     Uploader.prototype.uploadSequential = function () {
         if (this.sequentialUpload) {
@@ -2532,6 +2565,7 @@ var Uploader = /** @class */ (function (_super) {
             }, false);
             this.checkActionButtonStatus();
         }
+        liElement = null;
     };
     Uploader.prototype.checkChunkUpload = function () {
         return (this.asyncSettings.chunkSize <= 0 || isNullOrUndefined(this.asyncSettings.chunkSize)) ? false : true;
@@ -2625,6 +2659,7 @@ var Uploader = /** @class */ (function (_super) {
         else {
             this.chunkUploadFailed(e, metaData);
         }
+        liElement = null;
     };
     Uploader.prototype.sendNextRequest = function (metaData) {
         metaData.start = metaData.end;
@@ -2657,6 +2692,7 @@ var Uploader = /** @class */ (function (_super) {
                 hideSpinner(spinnerTarget);
                 detach(liElement.querySelector('.e-spinner-pane'));
             }
+            liElement = null;
         }
     };
     Uploader.prototype.pauseUpload = function (metaData, e, custom) {
@@ -2697,6 +2733,7 @@ var Uploader = /** @class */ (function (_super) {
         }
         this.pausedData.push(metaData);
         this.trigger('pausing', eventArgs);
+        liElement = null;
     };
     Uploader.prototype.resumeUpload = function (metaData, e, custom) {
         var liElement = this.getLiElement(metaData.file);
@@ -2737,6 +2774,7 @@ var Uploader = /** @class */ (function (_super) {
                 }
             }
         }
+        liElement = null;
     };
     Uploader.prototype.updateMetaData = function (metaData) {
         if (this.uploadMetaData.indexOf(metaData) === -1) {
@@ -2759,6 +2797,7 @@ var Uploader = /** @class */ (function (_super) {
                 cancelButton.classList.remove(ABORT_ICON, UPLOAD_INPROGRESS);
             }
         }
+        liElement = null;
     };
     Uploader.prototype.chunkUploadFailed = function (e, metaData, custom) {
         var _this = this;
@@ -2828,6 +2867,7 @@ var Uploader = /** @class */ (function (_super) {
                 }
             }
         });
+        liElement = null;
     };
     Uploader.prototype.retryRequest = function (liElement, metaData, custom) {
         if (isNullOrUndefined(this.template) && (isNullOrUndefined(custom) || !custom) && liElement) {
@@ -2938,6 +2978,7 @@ var Uploader = /** @class */ (function (_super) {
                 _this.checkPausePlayAction(e);
             }, false);
         }
+        liElement = null;
     };
     /**
      * It is used to convert bytes value into kilobytes or megabytes depending on the size based
@@ -3016,16 +3057,25 @@ var Uploader = /** @class */ (function (_super) {
             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.prototype.destroy.call(this);
     };
     /**
@@ -3213,6 +3263,7 @@ var Uploader = /** @class */ (function (_super) {
         for (var j = endIndex; j >= startIndex; j--) {
             allFiles.splice(j, 1);
         }
+        liElement = null;
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**

package/styles/bootstrap5.3-lite.css

@@ -2850,8 +2850,8 @@ textarea.e-input::selection,
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error,
 .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
 .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-danger), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-danger), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-danger-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-danger-shadow), 0.25);
 }
 
 .e-input:focus:not(.e-error):not(.e-warning).e-success,
@@ -2861,8 +2861,8 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
 .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
 .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
 }
 
 .e-input:focus:not(.e-success):not(.e-error).e-warning,
@@ -2876,8 +2876,8 @@ textarea.e-input::selection,
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning,
 .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
 .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-warning), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-warning), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-warning-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-warning-shadow), 0.25);
 }
 
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
@@ -2902,8 +2902,8 @@ textarea.e-input::selection,
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success,
 .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
 .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
 }
 
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error),

package/styles/bootstrap5.3.css

@@ -2850,8 +2850,8 @@ textarea.e-input::selection,
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error,
 .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
 .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-danger), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-danger), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-danger-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-danger-shadow), 0.25);
 }
 
 .e-input:focus:not(.e-error):not(.e-warning).e-success,
@@ -2861,8 +2861,8 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
 .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
 .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
 }
 
 .e-input:focus:not(.e-success):not(.e-error).e-warning,
@@ -2876,8 +2876,8 @@ textarea.e-input::selection,
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning,
 .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
 .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-warning), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-warning), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-warning-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-warning-shadow), 0.25);
 }
 
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
@@ -2902,8 +2902,8 @@ textarea.e-input::selection,
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success,
 .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
 .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
-  box-shadow: 0 0 0 4px rgba(var(--color-sf-success), 0.25);
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
+  box-shadow: 0 0 0 4px rgba(var(--color-sf-success-shadow), 0.25);
 }
 
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error),