@syncfusion/ej2-inputs 19.2.60 → 19.3.48

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

@@ -1,4 +1,4 @@
-import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, isBlazor, isNullOrUndefined, merge, onIntlChange, remove, removeClass, resetBlazorTemplate, rippleEffect, select, selectAll, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, isNullOrUndefined, merge, onIntlChange, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { Deferred, SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
 
@@ -895,15 +895,13 @@ let NumericTextBox = class NumericTextBox extends Component {
             this.element = input;
             setValue('ej2_instances', ejInstance, this.element);
         }
-        if (!(isBlazor() && this.isServerRendered)) {
-            attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });
-            const localeText = {
-                incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
-            };
-            this.l10n = new L10n('numerictextbox', localeText, this.locale);
-            if (this.l10n.getConstant('placeholder') !== '') {
-                this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
-            }
+        attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });
+        const localeText = {
+            incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
+        };
+        this.l10n = new L10n('numerictextbox', localeText, this.locale);
+        if (this.l10n.getConstant('placeholder') !== '') {
+            this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
         }
         this.isValidState = true;
         this.inputStyle = null;
@@ -912,16 +910,14 @@ let NumericTextBox = class NumericTextBox extends Component {
         this.initCultureInfo();
         this.initCultureFunc();
         this.prevValue = this.value;
-        if (!(isBlazor() && this.isServerRendered)) {
-            this.updateHTMLAttrToElement();
-            this.checkAttributes(false);
-            if (this.formEle) {
-                this.inputEleValue = this.value;
-            }
+        this.updateHTMLAttrToElement();
+        this.checkAttributes(false);
+        if (this.formEle) {
+            this.inputEleValue = this.value;
         }
         this.validateMinMax();
         this.validateStep();
-        if (this.placeholder === null && !(isBlazor() && this.isServerRendered)) {
+        if (this.placeholder === null) {
             this.updatePlaceholder();
         }
     }
@@ -933,47 +929,26 @@ let NumericTextBox = class NumericTextBox extends Component {
      */
     render() {
         if (this.element.tagName.toLowerCase() === 'input') {
-            if (!(isBlazor() && this.isServerRendered)) {
-                this.createWrapper();
-                if (this.showSpinButton) {
-                    this.spinBtnCreation();
-                }
-                this.setElementWidth(this.width);
-                if (!this.container.classList.contains('e-input-group')) {
-                    this.container.classList.add('e-input-group');
-                }
-                this.changeValue(this.value === null || isNaN(this.value) ?
-                    null : this.strictMode ? this.trimValue(this.value) : this.value);
+            this.createWrapper();
+            if (this.showSpinButton) {
+                this.spinBtnCreation();
             }
-            else {
-                this.container = this.element.parentElement;
-                this.inputWrapper = { container: this.container };
-                this.hiddenInput = this.container.querySelector('input[type="hidden"]');
-                if (this.showClearButton) {
-                    this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');
-                    Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);
-                }
-                if (this.showSpinButton) {
-                    this.spinDown = this.container.querySelector('.' + SPINDOWN);
-                    this.spinUp = this.container.querySelector('.' + SPINUP);
-                    this.wireSpinBtnEvents();
-                }
-                Input.bindInitialEvent({
-                    element: this.element, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties
-                });
+            this.setElementWidth(this.width);
+            if (!this.container.classList.contains('e-input-group')) {
+                this.container.classList.add('e-input-group');
             }
+            this.changeValue(this.value === null || isNaN(this.value) ?
+                null : this.strictMode ? this.trimValue(this.value) : this.value);
             this.wireEvents();
-            if (!(isBlazor() && this.isServerRendered)) {
-                if (this.value !== null && !isNaN(this.value)) {
-                    if (this.decimals) {
-                        this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);
-                    }
-                }
-                if (this.element.getAttribute('value') || this.value) {
-                    this.element.setAttribute('value', this.element.value);
-                    this.hiddenInput.setAttribute('value', this.hiddenInput.value);
+            if (this.value !== null && !isNaN(this.value)) {
+                if (this.decimals) {
+                    this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);
                 }
             }
+            if (this.element.getAttribute('value') || this.value) {
+                this.element.setAttribute('value', this.element.value);
+                this.hiddenInput.setAttribute('value', this.hiddenInput.value);
+            }
             this.elementPrevValue = this.element.value;
             if (this.element.hasAttribute('data-val')) {
                 this.element.setAttribute('data-val', 'false');
@@ -1236,7 +1211,7 @@ let NumericTextBox = class NumericTextBox extends Component {
     }
     resetHandler(e) {
         e.preventDefault();
-        if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {
+        if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {
             this.clear(e);
         }
         this.isInteract = true;
@@ -1877,25 +1852,23 @@ let NumericTextBox = class NumericTextBox extends Component {
      */
     destroy() {
         this.unwireEvents();
-        if (!(isBlazor() && this.isServerRendered)) {
-            detach(this.hiddenInput);
-            if (this.showSpinButton) {
-                this.unwireSpinBtnEvents();
-                detach(this.spinUp);
-                detach(this.spinDown);
-            }
-            const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
-                'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
-                'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',
-                'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
-            for (let i = 0; i < attrArray.length; i++) {
-                this.element.removeAttribute(attrArray[i]);
-            }
-            this.element.classList.remove('e-input');
-            this.container.insertAdjacentElement('afterend', this.element);
-            detach(this.container);
-            super.destroy();
+        detach(this.hiddenInput);
+        if (this.showSpinButton) {
+            this.unwireSpinBtnEvents();
+            detach(this.spinUp);
+            detach(this.spinDown);
+        }
+        const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
+            'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
+            'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',
+            'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
+        for (let i = 0; i < attrArray.length; i++) {
+            this.element.removeAttribute(attrArray[i]);
         }
+        this.element.classList.remove('e-input');
+        this.container.insertAdjacentElement('afterend', this.element);
+        detach(this.container);
+        super.destroy();
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-returns */
     /**
@@ -2048,33 +2021,16 @@ let NumericTextBox = class NumericTextBox extends Component {
         }
     }
     updateClearButton(newProp) {
-        if (isBlazor()) {
-            if (this.showClearButton) {
-                this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');
-                Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);
-            }
-        }
-        else {
-            Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);
-            this.bindClearEvent();
-        }
+        Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);
+        this.bindClearEvent();
     }
     updateSpinButton(newProp) {
-        if (isBlazor()) {
-            if (this.showSpinButton) {
-                this.spinDown = this.container.querySelector('.' + SPINDOWN);
-                this.spinUp = this.container.querySelector('.' + SPINUP);
-                this.wireSpinBtnEvents();
-            }
+        if (newProp.showSpinButton) {
+            this.spinBtnCreation();
         }
         else {
-            if (newProp.showSpinButton) {
-                this.spinBtnCreation();
-            }
-            else {
-                detach(this.spinUp);
-                detach(this.spinDown);
-            }
+            detach(this.spinUp);
+            detach(this.spinDown);
         }
     }
     /**
@@ -2350,7 +2306,7 @@ function bindClearEvent() {
 }
 function resetHandler(e) {
     e.preventDefault();
-    if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) {
+    if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide') || (this.inputObj.container.classList.contains('e-static-clear'))) {
         clear.call(this, e);
         this.value = '';
     }
@@ -3430,7 +3386,6 @@ let MaskedTextBox = class MaskedTextBox extends Component {
      */
     render() {
         if (this.element.tagName.toLowerCase() === 'input') {
-            const checkBlazor = isBlazor() && this.isServerRendered;
             if (this.floatLabelType === 'Never') {
                 addClass([this.element], INPUT);
             }
@@ -3440,14 +3395,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                 this.element.setAttribute('name', this.element.id);
             }
             this.isInitial = true;
-            if (checkBlazor && Browser.isIE === true) {
-                setTimeout(() => {
-                    this.resetMaskedTextBox();
-                });
-            }
-            else {
-                this.resetMaskedTextBox();
-            }
+            this.resetMaskedTextBox();
             this.isInitial = false;
             this.setMaskPlaceholder(true, false);
             this.setWidth(this.width);
@@ -4086,6 +4034,13 @@ let Slider = class Slider extends Component {
         this.wireEvents();
         this.setZindex();
         this.renderComplete();
+        if (this.element.tagName === 'EJS-SLIDER') {
+            if (this.getTheme(this.sliderContainer) == "none") {
+                setTimeout(() => {
+                    this.refresh();
+                }, 0);
+            }
+        }
     }
     initialize() {
         addClass([this.element], classNames.root);
@@ -4204,6 +4159,7 @@ let Slider = class Slider extends Component {
             || this.getTheme(this.sliderContainer) === 'bootstrap-dark';
         this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
         this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
+        this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
         this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;
     }
     createRangeBar() {
@@ -4690,7 +4646,7 @@ let Slider = class Slider extends Component {
     }
     renderTooltip() {
         this.tooltipObj = new Tooltip({
-            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind,
+            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5,
             cssClass: classNames.sliderTooltip,
             height: this.isMaterial ? 30 : 'auto',
             animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
@@ -7688,9 +7644,7 @@ let Uploader = class Uploader extends Component {
                     this.updateDirectoryAttributes();
                     break;
                 case 'template':
-                    if (!this.isServerBlazor) {
-                        this.clearAll();
-                    }
+                    this.clearAll();
                     break;
                 case 'minFileSize':
                 case 'maxFileSize':
@@ -7790,55 +7744,44 @@ let Uploader = class Uploader extends Component {
         };
         this.l10n = new L10n('uploader', this.localeText, this.locale);
         this.preLocaleObj = getValue('currentLocale', this.l10n);
-        this.isServerBlazor = (isBlazor() && this.isServerRendered) ? true : false;
-        this.isBlazorTemplate = this.isServerBlazor && this.template !== '' && !isNullOrUndefined(this.template) ? true : false;
-        this.isBlazorSaveUrl = (this.isServerRendered &&
-            (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl))) ? true : false;
-        if (this.isBlazorSaveUrl && this.sequentialUpload) {
-            this.sequentialUpload = false;
-        }
-        if (!this.isBlazorSaveUrl) {
-            this.formRendered();
-        }
-        if (!this.isServerBlazor) {
-            this.updateHTMLAttrToElement();
-            this.checkHTMLAttributes(false);
-            const ejInstance = getValue('ej2_instances', this.element);
-            /* istanbul ignore next */
-            if (this.element.tagName === 'EJS-UPLOADER') {
-                const inputElement = this.createElement('input', { attrs: { type: 'file' } });
-                let index = 0;
-                for (index; index < this.element.attributes.length; index++) {
-                    inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
-                    inputElement.innerHTML = this.element.innerHTML;
-                }
-                if (!inputElement.hasAttribute('name')) {
-                    inputElement.setAttribute('name', 'UploadFiles');
-                }
-                this.element.appendChild(inputElement);
-                this.element = inputElement;
-                setValue('ej2_instances', ejInstance, this.element);
+        this.formRendered();
+        this.updateHTMLAttrToElement();
+        this.checkHTMLAttributes(false);
+        const ejInstance = getValue('ej2_instances', this.element);
+        /* istanbul ignore next */
+        if (this.element.tagName === 'EJS-UPLOADER') {
+            const inputElement = this.createElement('input', { attrs: { type: 'file' } });
+            let index = 0;
+            for (index; index < this.element.attributes.length; index++) {
+                inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                inputElement.innerHTML = this.element.innerHTML;
             }
-            /* istanbul ignore next */
-            if (ejInstance[0].isPureReactComponent) {
-                if (!isNullOrUndefined(ejInstance[0].props.name)) {
-                    this.element.setAttribute('name', ejInstance[0].props.name);
-                }
-                else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {
-                    this.element.setAttribute('name', ejInstance[0].props.id);
-                }
-                else {
-                    this.element.setAttribute('name', 'UploadFiles');
-                }
+            if (!inputElement.hasAttribute('name')) {
+                inputElement.setAttribute('name', 'UploadFiles');
             }
-            if (isNullOrUndefined(this.element.getAttribute('name'))) {
-                this.element.setAttribute('name', this.element.getAttribute('id'));
+            this.element.appendChild(inputElement);
+            this.element = inputElement;
+            setValue('ej2_instances', ejInstance, this.element);
+        }
+        /* istanbul ignore next */
+        if (ejInstance[0].isPureReactComponent) {
+            if (!isNullOrUndefined(ejInstance[0].props.name)) {
+                this.element.setAttribute('name', ejInstance[0].props.name);
+            }
+            else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {
+                this.element.setAttribute('name', ejInstance[0].props.id);
             }
-            if (!this.element.hasAttribute('type')) {
-                this.element.setAttribute('type', 'file');
+            else {
+                this.element.setAttribute('name', 'UploadFiles');
             }
-            this.updateDirectoryAttributes();
         }
+        if (isNullOrUndefined(this.element.getAttribute('name'))) {
+            this.element.setAttribute('name', this.element.getAttribute('id'));
+        }
+        if (!this.element.hasAttribute('type')) {
+            this.element.setAttribute('type', 'file');
+        }
+        this.updateDirectoryAttributes();
         this.keyConfigs = {
             enter: 'enter'
         };
@@ -7889,29 +7832,16 @@ let Uploader = class Uploader extends Component {
      * @returns {void}
      */
     render() {
-        if (!this.isServerBlazor) {
-            this.renderBrowseButton();
-            this.initializeUpload();
-            this.updateHTMLAttrToWrapper();
-            this.wireEvents();
-            this.setMultipleSelection();
-            this.setExtensions(this.allowedExtensions);
-            this.setRTL();
-            this.renderPreLoadFiles();
-            this.setControlStatus();
-            this.setCSSClass();
-        }
-        else {
-            this.dropAreaWrapper = closest(this.element, '.' + DROP_WRAPPER);
-            this.uploadWrapper = closest(this.element, '.e-upload.e-control-wrapper');
-            this.browseButton = this.dropAreaWrapper.querySelector('button.e-upload-browse-btn');
-            this.setDropArea();
-            this.renderPreLoadFiles();
-            this.wireEvents();
-        }
-        if (this.isServerBlazor) {
-            this.renderComplete();
-        }
+        this.renderBrowseButton();
+        this.initializeUpload();
+        this.updateHTMLAttrToWrapper();
+        this.wireEvents();
+        this.setMultipleSelection();
+        this.setExtensions(this.allowedExtensions);
+        this.setRTL();
+        this.renderPreLoadFiles();
+        this.setControlStatus();
+        this.setCSSClass();
     }
     renderBrowseButton() {
         this.browseButton = this.createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });
@@ -7928,22 +7858,20 @@ let Uploader = class Uploader extends Component {
     }
     renderActionButtons() {
         this.element.setAttribute('tabindex', '-1');
-        if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
-            this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });
-            this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,
-                attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
-            this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,
-                attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
-            this.actionButtons.appendChild(this.clearButton);
-            this.actionButtons.appendChild(this.uploadButton);
-            this.renderButtonTemplates();
-            this.uploadWrapper.appendChild(this.actionButtons);
-            this.browseButton.blur();
-            if (!this.isPreloadFiles) {
-                this.uploadButton.focus();
-            }
-            this.wireActionButtonEvents();
+        this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });
+        this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,
+            attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
+        this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,
+            attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
+        this.actionButtons.appendChild(this.clearButton);
+        this.actionButtons.appendChild(this.uploadButton);
+        this.renderButtonTemplates();
+        this.uploadWrapper.appendChild(this.actionButtons);
+        this.browseButton.blur();
+        if (!this.isPreloadFiles) {
+            this.uploadButton.focus();
         }
+        this.wireActionButtonEvents();
     }
     /* istanbul ignore next */
     serverActionButtonsEventBind(element) {
@@ -7958,19 +7886,6 @@ let Uploader = class Uploader extends Component {
             this.checkActionButtonStatus();
         }
     }
-    /* istanbul ignore next */
-    serverUlElement(element) {
-        if (element) {
-            if (this.isBlazorSaveUrl || this.isBlazorTemplate) {
-                this.listParent = element;
-                this.fileList = [].slice.call(this.listParent.querySelectorAll('li'));
-                this.serverRemoveIconBindEvent();
-                if (!this.isForm) {
-                    this.checkAutoUpload(this.filesData);
-                }
-            }
-        }
-    }
     wireActionButtonEvents() {
         EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);
         EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);
@@ -7982,9 +7897,7 @@ let Uploader = class Uploader extends Component {
     removeActionButtons() {
         if (this.actionButtons) {
             this.unwireActionButtonEvents();
-            if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
-                detach(this.actionButtons);
-            }
+            detach(this.actionButtons);
             this.actionButtons = null;
         }
     }
@@ -8107,7 +8020,7 @@ let Uploader = class Uploader extends Component {
                     if (!dropTextArea) {
                         this.createDropTextHint();
                     }
-                    else if (!this.isServerBlazor) {
+                    else {
                         dropTextArea.innerHTML = this.localizedTexts('dropFilesHint');
                     }
                 }
@@ -8136,11 +8049,9 @@ let Uploader = class Uploader extends Component {
         }
     }
     createDropTextHint() {
-        if (!this.isServerBlazor) {
-            const fileDropArea = this.createElement('span', { className: DROP_AREA });
-            fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');
-            this.dropAreaWrapper.appendChild(fileDropArea);
-        }
+        const fileDropArea = this.createElement('span', { className: DROP_AREA });
+        fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');
+        this.dropAreaWrapper.appendChild(fileDropArea);
     }
     updateHTMLAttrToElement() {
         if (!isNullOrUndefined(this.htmlAttributes)) {
@@ -8431,9 +8342,6 @@ let Uploader = class Uploader extends Component {
             return;
         }
         const selectedElement = args.target.parentElement;
-        if (this.isBlazorSaveUrl) {
-            this.fileList = [].slice.call(this.uploadWrapper.querySelectorAll('li'));
-        }
         const index = this.fileList.indexOf(selectedElement);
         const liElement = this.fileList[index];
         const formUpload = this.isFormUpload();
@@ -8475,27 +8383,20 @@ let Uploader = class Uploader extends Component {
         if (isNullOrUndefined(selectedElement)) {
             return;
         }
-        if (!this.isBlazorSaveUrl) {
-            detach(selectedElement);
-        }
+        detach(selectedElement);
         index = this.fileList.indexOf(selectedElement);
         this.fileList.splice(index, 1);
         this.filesData.splice(index, 1);
-        if (!this.isBlazorSaveUrl) {
-            if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {
-                detach(this.listParent);
-                this.listParent = null;
-                this.removeActionButtons();
-            }
-            if (this.sequentialUpload) {
-                /* istanbul ignore next */
-                if (index <= this.count) {
-                    --this.count;
-                }
-            }
+        if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {
+            detach(this.listParent);
+            this.listParent = null;
+            this.removeActionButtons();
         }
-        else {
-            this.interopAdaptor.invokeMethodAsync('removeFileData', index);
+        if (this.sequentialUpload) {
+            /* istanbul ignore next */
+            if (index <= this.count) {
+                --this.count;
+            }
         }
     }
     removeUploadedFile(file, eventArgs, removeDirectly, custom) {
@@ -8505,14 +8406,6 @@ let Uploader = class Uploader extends Component {
         const formData = new FormData();
         ajax.beforeSend = (e) => {
             eventArgs.currentRequest = ajax.httpRequest;
-            if (isBlazor()) {
-                if (this.currentRequestHeader) {
-                    this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);
-                }
-                if (this.customFormDatas) {
-                    this.updateFormData(formData, this.customFormDatas);
-                }
-            }
             if (!removeDirectly) {
                 this.trigger('removing', eventArgs, (eventArgs) => {
                     if (eventArgs.cancel) {
@@ -8527,15 +8420,6 @@ let Uploader = class Uploader extends Component {
                 this.removingEventCallback(eventArgs, formData, selectedFiles, file);
             }
         };
-        if (this.isServerBlazor) {
-            const name = this.element.getAttribute('name');
-            if (!isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
-                formData.append(name, selectedFiles.rawFile, selectedFiles.name);
-            }
-            else {
-                formData.append(name, selectedFiles.name);
-            }
-        }
         ajax.onLoad = (e) => {
             this.removeCompleted(e, selectedFiles, custom);
             return {};
@@ -8559,15 +8443,13 @@ let Uploader = class Uploader extends Component {
             createSpinner({ target: spinnerTarget, width: '20px' });
             showSpinner(spinnerTarget);
         }
-        if (!this.isServerBlazor) {
-            if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
-                formData.append(name, selectedFiles.rawFile, selectedFiles.name);
-            }
-            else {
-                formData.append(name, selectedFiles.name);
-            }
-            this.updateFormData(formData, eventArgs.customFormData);
+        if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
+            formData.append(name, selectedFiles.rawFile, selectedFiles.name);
+        }
+        else {
+            formData.append(name, selectedFiles.name);
         }
+        this.updateFormData(formData, eventArgs.customFormData);
     }
     /* istanbul ignore next */
     updateFormData(formData, customData) {
@@ -8820,10 +8702,6 @@ let Uploader = class Uploader extends Component {
     _internalRenderSelect(eventArgs, fileData) {
         if (!eventArgs.cancel) {
             /* istanbul ignore next */
-            if (isBlazor()) {
-                this.currentRequestHeader = eventArgs.currentRequest;
-                this.customFormDatas = eventArgs.customFormData;
-            }
             this.selectedFiles = this.selectedFiles.concat(fileData);
             this.btnTabIndex = this.disableKeyboardNavigation ? '-1' : '0';
             if (this.showFileList) {
@@ -8845,13 +8723,9 @@ let Uploader = class Uploader extends Component {
                 }
                 else {
                     this.createFileList(fileData, true);
-                    if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
-                        this.filesData = this.filesData.concat(fileData);
-                    }
+                    this.filesData = this.filesData.concat(fileData);
                     if (!this.isForm || this.allowUpload()) {
-                        if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
-                            this.checkAutoUpload(fileData);
-                        }
+                        this.checkAutoUpload(fileData);
                     }
                 }
                 if (!isNullOrUndefined(eventArgs.progressInterval) && eventArgs.progressInterval !== '') {
@@ -8860,9 +8734,6 @@ let Uploader = class Uploader extends Component {
             }
             else {
                 this.filesData = this.filesData.concat(fileData);
-                if (this.isBlazorSaveUrl) {
-                    this.interopAdaptor.invokeMethodAsync('updateServerFileData', this.filesData, this.isForm);
-                }
                 if (this.autoUpload) {
                     this.upload(this.filesData, true);
                 }
@@ -8887,7 +8758,7 @@ let Uploader = class Uploader extends Component {
         return isFormUpload;
     }
     clearData(singleUpload) {
-        if (!isNullOrUndefined(this.listParent) && !(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
+        if (!isNullOrUndefined(this.listParent)) {
             detach(this.listParent);
             this.listParent = null;
         }
@@ -8896,12 +8767,7 @@ let Uploader = class Uploader extends Component {
         }
         this.fileList = [];
         this.filesData = [];
-        if (this.isBlazorSaveUrl || this.isBlazorTemplate) {
-            this.interopAdaptor.invokeMethodAsync('clearAll');
-        }
-        else {
-            this.removeActionButtons();
-        }
+        this.removeActionButtons();
     }
     updateSortedFileList(filesData) {
         const previousListClone = this.createElement('div', { id: 'clonewrapper' });
@@ -8987,7 +8853,6 @@ let Uploader = class Uploader extends Component {
     }
     createCustomfileList(fileData) {
         this.createParentUL();
-        resetBlazorTemplate(this.element.id + 'Template', 'Template');
         for (const listItem of fileData) {
             const listElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });
             this.uploadTemplateFn = this.templateComplier(this.template);
@@ -9015,7 +8880,6 @@ let Uploader = class Uploader extends Component {
             this.fileList.push(listElement);
         }
         this.renderReactTemplates();
-        updateBlazorTemplate(this.element.id + 'Template', 'Template', this, false);
     }
     createParentUL() {
         if (isNullOrUndefined(this.listParent)) {
@@ -9188,7 +9052,6 @@ let Uploader = class Uploader extends Component {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     formCustomFileList(fileData, files) {
         this.createParentUL();
-        resetBlazorTemplate(this.element.id + 'Template', 'Template');
         const fileList = this.createElement('li', { className: FILE });
         fileList.setAttribute('data-files-count', fileData.length + '');
         this.setListToFileInfo(fileData, fileList);
@@ -9221,7 +9084,6 @@ let Uploader = class Uploader extends Component {
         this.listParent.appendChild(fileList);
         this.fileList.push(fileList);
         this.renderReactTemplates();
-        updateBlazorTemplate(this.element.id + 'Template', 'Template', this, false);
     }
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
@@ -9232,105 +9094,99 @@ let Uploader = class Uploader extends Component {
      */
     createFileList(fileData, isSelectedFile) {
         /* eslint-enable valid-jsdoc, jsdoc/require-param */
-        if (this.isBlazorSaveUrl || this.isBlazorTemplate) {
-            const fileListData = (isSelectedFile) ? this.filesData = this.filesData.concat(fileData) : fileData;
-            this.interopAdaptor.invokeMethodAsync('createFileList', fileListData, this.isForm);
+        this.createParentUL();
+        if (this.template !== '' && !isNullOrUndefined(this.template)) {
+            if (this.isFormUpload()) {
+                this.uploadWrapper.classList.add(FORM_UPLOAD);
+                this.formCustomFileList(fileData, this.element.files);
+            }
+            else {
+                this.createCustomfileList(fileData);
+            }
+        }
+        else if (this.isFormUpload()) {
+            this.uploadWrapper.classList.add(FORM_UPLOAD);
+            this.formFileList(fileData, this.element.files);
         }
         else {
-            this.createParentUL();
-            if (this.template !== '' && !isNullOrUndefined(this.template)) {
-                if (this.isFormUpload()) {
-                    this.uploadWrapper.classList.add(FORM_UPLOAD);
-                    this.formCustomFileList(fileData, this.element.files);
+            for (const listItem of fileData) {
+                const liElement = this.createElement('li', {
+                    className: FILE,
+                    attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }
+                });
+                const textContainer = this.createElement('span', { className: TEXT_CONTAINER });
+                const textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });
+                textElement.innerHTML = this.getFileNameOnly(listItem.name);
+                const fileExtension = this.createElement('span', { className: FILE_TYPE });
+                const fileType = this.getFileType(listItem.name);
+                fileExtension.innerHTML = '.' + fileType;
+                if (!fileType) {
+                    fileExtension.classList.add('e-hidden');
+                }
+                if (!this.enableRtl) {
+                    textContainer.appendChild(textElement);
+                    textContainer.appendChild(fileExtension);
                 }
                 else {
-                    this.createCustomfileList(fileData);
+                    const rtlContainer = this.createElement('span', { className: RTL_CONTAINER });
+                    rtlContainer.appendChild(fileExtension);
+                    rtlContainer.appendChild(textElement);
+                    textContainer.appendChild(rtlContainer);
+                }
+                const fileSize = this.createElement('span', { className: FILE_SIZE });
+                fileSize.innerHTML = this.bytesToSize(listItem.size);
+                textContainer.appendChild(fileSize);
+                const statusElement = this.createElement('span', { className: STATUS });
+                textContainer.appendChild(statusElement);
+                statusElement.innerHTML = listItem.status;
+                liElement.appendChild(textContainer);
+                const iconElement = this.createElement('span', { className: ' e-icons',
+                    attrs: { 'tabindex': this.btnTabIndex } });
+                /* istanbul ignore next */
+                if (this.browserName === 'msie') {
+                    iconElement.classList.add('e-msie');
+                }
+                iconElement.setAttribute('title', this.localizedTexts('remove'));
+                liElement.appendChild(iconElement);
+                EventHandler.add(iconElement, 'click', this.removeFiles, this);
+                if (listItem.statusCode === '2') {
+                    statusElement.classList.add(UPLOAD_SUCCESS);
+                    iconElement.classList.add(DELETE_ICON);
+                    iconElement.setAttribute('title', this.localizedTexts('delete'));
+                }
+                else if (listItem.statusCode !== '1') {
+                    statusElement.classList.remove(UPLOAD_SUCCESS);
+                    statusElement.classList.add(VALIDATION_FAILS);
                 }
-            }
-            else if (this.isFormUpload()) {
-                this.uploadWrapper.classList.add(FORM_UPLOAD);
-                this.formFileList(fileData, this.element.files);
-            }
-            else {
-                for (const listItem of fileData) {
-                    const liElement = this.createElement('li', {
-                        className: FILE,
-                        attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }
-                    });
-                    const textContainer = this.createElement('span', { className: TEXT_CONTAINER });
-                    const textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });
-                    textElement.innerHTML = this.getFileNameOnly(listItem.name);
-                    const fileExtension = this.createElement('span', { className: FILE_TYPE });
-                    const fileType = this.getFileType(listItem.name);
-                    fileExtension.innerHTML = '.' + fileType;
-                    if (!fileType) {
-                        fileExtension.classList.add('e-hidden');
-                    }
-                    if (!this.enableRtl) {
-                        textContainer.appendChild(textElement);
-                        textContainer.appendChild(fileExtension);
-                    }
-                    else {
-                        const rtlContainer = this.createElement('span', { className: RTL_CONTAINER });
-                        rtlContainer.appendChild(fileExtension);
-                        rtlContainer.appendChild(textElement);
-                        textContainer.appendChild(rtlContainer);
-                    }
-                    const fileSize = this.createElement('span', { className: FILE_SIZE });
-                    fileSize.innerHTML = this.bytesToSize(listItem.size);
-                    textContainer.appendChild(fileSize);
-                    const statusElement = this.createElement('span', { className: STATUS });
-                    textContainer.appendChild(statusElement);
-                    statusElement.innerHTML = listItem.status;
-                    liElement.appendChild(textContainer);
-                    const iconElement = this.createElement('span', { className: ' e-icons',
-                        attrs: { 'tabindex': this.btnTabIndex } });
-                    /* istanbul ignore next */
-                    if (this.browserName === 'msie') {
-                        iconElement.classList.add('e-msie');
-                    }
-                    iconElement.setAttribute('title', this.localizedTexts('remove'));
-                    liElement.appendChild(iconElement);
-                    EventHandler.add(iconElement, 'click', this.removeFiles, this);
-                    if (listItem.statusCode === '2') {
-                        statusElement.classList.add(UPLOAD_SUCCESS);
-                        iconElement.classList.add(DELETE_ICON);
-                        iconElement.setAttribute('title', this.localizedTexts('delete'));
-                    }
-                    else if (listItem.statusCode !== '1') {
-                        statusElement.classList.remove(UPLOAD_SUCCESS);
-                        statusElement.classList.add(VALIDATION_FAILS);
-                    }
-                    if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {
-                        statusElement.innerHTML = '';
-                    }
-                    if (!iconElement.classList.contains(DELETE_ICON)) {
-                        iconElement.classList.add(REMOVE_ICON);
-                    }
-                    const index = fileData.indexOf(listItem);
-                    const eventArgs = {
-                        element: liElement,
-                        fileInfo: listItem,
-                        index: index,
-                        isPreload: this.isPreLoadFile(listItem)
-                    };
-                    const eventsArgs = {
-                        element: liElement,
-                        fileInfo: listItem,
-                        index: index,
-                        isPreload: this.isPreLoadFile(listItem)
-                    };
-                    this.trigger('rendering', eventArgs);
-                    this.trigger('fileListRendering', eventsArgs);
-                    this.listParent.appendChild(liElement);
-                    this.fileList.push(liElement);
-                    this.truncateName(textElement);
-                    const preventActionComplete = this.flag;
-                    if (this.isPreLoadFile(listItem)) {
-                        this.flag = false;
-                        this.checkActionComplete(true);
-                        this.flag = preventActionComplete;
-                    }
+                if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {
+                    statusElement.innerHTML = '';
+                }
+                if (!iconElement.classList.contains(DELETE_ICON)) {
+                    iconElement.classList.add(REMOVE_ICON);
+                }
+                const index = fileData.indexOf(listItem);
+                const eventArgs = {
+                    element: liElement,
+                    fileInfo: listItem,
+                    index: index,
+                    isPreload: this.isPreLoadFile(listItem)
+                };
+                const eventsArgs = {
+                    element: liElement,
+                    fileInfo: listItem,
+                    index: index,
+                    isPreload: this.isPreLoadFile(listItem)
+                };
+                this.trigger('rendering', eventArgs);
+                this.trigger('fileListRendering', eventsArgs);
+                this.listParent.appendChild(liElement);
+                this.fileList.push(liElement);
+                this.truncateName(textElement);
+                const preventActionComplete = this.flag;
+                if (this.isPreLoadFile(listItem)) {
+                    this.flag = false;
+                    this.checkActionComplete(true);
+                    this.flag = preventActionComplete;
                 }
             }
         }
@@ -9392,18 +9248,8 @@ let Uploader = class Uploader extends Component {
     }
     updateStatus(files, status, statusCode, updateLiStatus = true) {
         if (!(status === '' || isNullOrUndefined(status)) && !(statusCode === '' || isNullOrUndefined(statusCode))) {
-            if (this.isBlazorSaveUrl) {
-                for (let i = 0; i < this.filesData.length; i++) {
-                    if (this.filesData[i].name === files.name) {
-                        this.filesData[i].status = status;
-                        this.filesData[i].statusCode = statusCode;
-                    }
-                }
-            }
-            else {
-                files.status = status;
-                files.statusCode = statusCode;
-            }
+            files.status = status;
+            files.statusCode = statusCode;
         }
         if (updateLiStatus) {
             const li = this.getLiElement(files);
@@ -9418,8 +9264,9 @@ let Uploader = class Uploader extends Component {
     getLiElement(files) {
         let index;
         for (let i = 0; i < this.filesData.length; i++) {
-            if ((!isNullOrUndefined(this.filesData[i].id) && !isNullOrUndefined(files.id)) ? (this.filesData[i].name === files.name &&
-                this.filesData[i].id === files.id) : this.filesData[i].name === files.name) {
+            if (!isNullOrUndefined(files) && ((!isNullOrUndefined(this.filesData[i].id) &&
+                !isNullOrUndefined(files.id)) ? (this.filesData[i].name === files.name &&
+                this.filesData[i].id === files.id) : this.filesData[i].name === files.name)) {
                 index = i;
             }
         }
@@ -9618,41 +9465,24 @@ let Uploader = class Uploader extends Component {
         };
         return response;
     }
-    /* istanbul ignore next */
-    serverRemoveIconBindEvent() {
-        if (this.uploadWrapper && this.isBlazorSaveUrl) {
-            const iconElement = [].slice.call(this.uploadWrapper.querySelectorAll('ul li'));
-            for (let i = 0; i < iconElement.length; i++) {
-                const removeIconEle = (iconElement[i]) ? iconElement[i].querySelector('.e-icons') : null;
-                if (removeIconEle) {
-                    EventHandler.remove(removeIconEle, 'click', this.removeFiles);
-                    EventHandler.add(removeIconEle, 'click', this.removeFiles, this);
-                }
-            }
-        }
-    }
     raiseSuccessEvent(e, file) {
         const response = e && e.currentTarget ? this.getResponse(e) : null;
         const statusMessage = this.localizedTexts('uploadSuccessMessage');
         const args = {
             e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '2', false), statusText: statusMessage
         };
-        if (!this.isBlazorSaveUrl) {
-            const liElement = this.getLiElement(file);
-            if (!isNullOrUndefined(liElement)) {
-                const spinnerEle = liElement.querySelector('.' + SPINNER_PANE);
-                if (!isNullOrUndefined(spinnerEle)) {
-                    hideSpinner(liElement);
-                    detach(spinnerEle);
-                }
+        const liElement = this.getLiElement(file);
+        if (!isNullOrUndefined(liElement)) {
+            const spinnerEle = liElement.querySelector('.' + SPINNER_PANE);
+            if (!isNullOrUndefined(spinnerEle)) {
+                hideSpinner(liElement);
+                detach(spinnerEle);
             }
         }
         this.trigger('success', args, (args) => {
             this.updateStatus(file, args.statusText, '2');
             this.uploadedFilesData.push(file);
-            if (!this.isBlazorSaveUrl) {
-                this.trigger('change', { file: this.uploadedFilesData });
-            }
+            this.trigger('change', { file: this.uploadedFilesData });
             this.checkActionButtonStatus();
             if (this.fileList.length > 0) {
                 if ((!(this.getLiElement(file)).classList.contains(RESTRICT_RETRY))) {
@@ -9895,15 +9725,6 @@ let Uploader = class Uploader extends Component {
         ajax.beforeSend = (e) => {
             eventArgs.currentRequest = ajax.httpRequest;
             eventArgs.currentChunkIndex = metaData.chunkIndex;
-            /* istanbul ignore next */
-            if (isBlazor()) {
-                if (this.currentRequestHeader) {
-                    this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);
-                }
-                if (this.customFormDatas) {
-                    this.updateFormData(formData, this.customFormDatas);
-                }
-            }
             if (eventArgs.currentChunkIndex === 0) {
                 // This event is currently not required but to avoid breaking changes for previous customer, we have included.
                 this.trigger('uploading', eventArgs, (eventArgs) => {
@@ -10399,9 +10220,7 @@ let Uploader = class Uploader extends Component {
     destroy() {
         this.element.value = null;
         this.clearTemplate();
-        if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
-            this.clearAll();
-        }
+        this.clearAll();
         this.unWireEvents();
         this.unBindDropEvents();
         if (this.multiple) {
@@ -10416,17 +10235,12 @@ let Uploader = class Uploader extends Component {
         for (const key of attributes$$1) {
             this.element.removeAttribute(key);
         }
-        if (!this.isServerBlazor) {
-            if (!isNullOrUndefined(this.uploadWrapper)) {
-                this.uploadWrapper.parentElement.appendChild(this.element);
-                detach(this.uploadWrapper);
-            }
-            this.uploadWrapper = null;
-            super.destroy();
-        }
-        else {
-            this.uploadWrapper = null;
+        if (!isNullOrUndefined(this.uploadWrapper)) {
+            this.uploadWrapper.parentElement.appendChild(this.element);
+            detach(this.uploadWrapper);
         }
+        this.uploadWrapper = null;
+        super.destroy();
     }
     /**
      * Allows you to call the upload process manually by calling save URL action.
@@ -10451,11 +10265,6 @@ let Uploader = class Uploader extends Component {
             };
             this.trigger('beforeUpload', eventArgs, (eventArgs) => {
                 if (!eventArgs.cancel) {
-                    if (isBlazor()) {
-                        this.currentRequestHeader = eventArgs.currentRequest ? eventArgs.currentRequest : this.currentRequestHeader;
-                        this.customFormDatas = (eventArgs.customFormData && eventArgs.customFormData.length > 0) ?
-                            eventArgs.customFormData : this.customFormDatas;
-                    }
                     this.uploadFiles(uploadFiles, custom);
                 }
             });
@@ -10537,9 +10346,6 @@ let Uploader = class Uploader extends Component {
     uploadFiles(files, custom) {
         let selectedFiles = [];
         if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {
-            if (this.isServerBlazor) {
-                this.interopAdaptor.invokeMethodAsync('GetFileDetails', files);
-            }
             return;
         }
         if (!custom || isNullOrUndefined(custom)) {
@@ -10556,54 +10362,23 @@ let Uploader = class Uploader extends Component {
             selectedFiles = files;
         }
         for (let i = 0; i < selectedFiles.length; i++) {
-            if (this.isServerBlazor && !this.checkChunkUpload()) {
-                /* istanbul ignore next */
-                if (selectedFiles[i] && selectedFiles[i].rawFile instanceof File) {
-                    this.getBase64(selectedFiles[i].rawFile).then((data) => {
-                        this.base64String.push(data);
-                        this.uploadFilesRequest(selectedFiles, i, custom);
-                    });
-                }
-            }
-            else {
-                this.uploadFilesRequest(selectedFiles, i, custom);
-            }
+            this.uploadFilesRequest(selectedFiles, i, custom);
         }
     }
     uploadFilesRequest(selectedFiles, i, custom) {
-        const cloneFiles = [];
         const chunkEnabled = this.checkChunkUpload();
         const ajax = new Ajax(this.asyncSettings.saveUrl, 'POST', true, null);
         ajax.emitError = false;
-        let getFileData;
-        /* istanbul ignore next */
-        if (this.isServerBlazor) {
-            getFileData = selectedFiles.slice(0);
-            cloneFiles.push(getFileData[i].rawFile);
-        }
         const eventArgs = {
-            fileData: (this.isServerBlazor) ? getFileData[i] : selectedFiles[i],
+            fileData: selectedFiles[i],
             customFormData: [],
             cancel: false
         };
         const formData = new FormData();
         ajax.beforeSend = (e) => {
             eventArgs.currentRequest = ajax.httpRequest;
-            /* istanbul ignore next */
-            if (isBlazor()) {
-                eventArgs.fileData.rawFile = !chunkEnabled ? this.base64String[i] : eventArgs.fileData.rawFile;
-                if (this.currentRequestHeader) {
-                    this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);
-                }
-                if (this.customFormDatas) {
-                    this.updateFormData(formData, this.customFormDatas);
-                }
-            }
             this.trigger('uploading', eventArgs, (eventArgs) => {
                 /* istanbul ignore next */
-                if (this.isServerBlazor && !chunkEnabled) {
-                    selectedFiles[i].rawFile = eventArgs.fileData.rawFile = cloneFiles[i];
-                }
                 if (eventArgs.cancel) {
                     this.eventCancelByArgs(e, eventArgs, selectedFiles[i]);
                 }
@@ -10618,7 +10393,7 @@ let Uploader = class Uploader extends Component {
             }
             else {
                 ajax.onLoad = (e) => {
-                    if (eventArgs.cancel && this.isServerBlazor) {
+                    if (eventArgs.cancel) {
                         return {};
                     }
                     else {
@@ -10627,7 +10402,7 @@ let Uploader = class Uploader extends Component {
                     }
                 };
                 ajax.onUploadProgress = (e) => {
-                    if (eventArgs.cancel && this.isServerBlazor) {
+                    if (eventArgs.cancel) {
                         return {};
                     }
                     else {
@@ -10688,11 +10463,7 @@ let Uploader = class Uploader extends Component {
         };
         this.trigger('beforeRemove', beforeEventArgs, (beforeEventArgs) => {
             if (!beforeEventArgs.cancel) {
-                if (isBlazor()) {
-                    this.currentRequestHeader = beforeEventArgs.currentRequest;
-                    this.customFormDatas = beforeEventArgs.customFormData;
-                }
-                if (this.isFormUpload() && !this.isBlazorSaveUrl) {
+                if (this.isFormUpload()) {
                     eventArgs.filesData = fileData;
                     this.trigger('removing', eventArgs, (eventArgs) => {
                         if (!eventArgs.cancel) {
@@ -10718,8 +10489,7 @@ let Uploader = class Uploader extends Component {
                         }
                     });
                 }
-                else if (this.isForm && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === '')
-                    && !this.isBlazorSaveUrl) {
+                else if (this.isForm && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === '')) {
                     eventArgs.filesData = this.getFilesData();
                     this.trigger('removing', eventArgs, (eventArgs) => {
                         if (!eventArgs.cancel) {
@@ -10772,7 +10542,7 @@ let Uploader = class Uploader extends Component {
      * @returns {void}
      */
     clearAll() {
-        if (isNullOrUndefined(this.listParent) && !(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
+        if (isNullOrUndefined(this.listParent)) {
             if (this.browserName !== 'msie') {
                 this.element.value = '';
             }
@@ -10799,19 +10569,11 @@ let Uploader = class Uploader extends Component {
      * @returns {FileInfo[]}
      */
     getFilesData(index) {
-        if (!this.isServerBlazor) {
-            if (isNullOrUndefined(index)) {
-                return this.filesData;
-            }
-            else {
-                return this.getSelectedFiles(index);
-            }
+        if (isNullOrUndefined(index)) {
+            return this.filesData;
         }
         else {
-            for (let i = 0; i < this.filesData.length; i++) {
-                this.filesData[i].rawFile = this.base64String[i];
-            }
-            return this.filesData;
+            return this.getSelectedFiles(index);
         }
     }
     /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
@@ -11228,6 +10990,7 @@ let ColorPicker = class ColorPicker extends Component {
             target: this.container,
             disabled: this.disabled,
             enableRtl: this.enableRtl,
+            createPopupOnClick: this.createPopupOnClick,
             open: this.onOpen.bind(this),
             click: () => {
                 this.trigger('change', {
@@ -12366,7 +12129,12 @@ let ColorPicker = class ColorPicker extends Component {
         if (!this.showButtons && !isKey) {
             this.trigger('change', { currentValue: { hex: hex, rgba: rgba },
                 previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }, value: cValue });
-            this.setProperties({ 'value': cValue }, true);
+            if (this.enableOpacity) {
+                this.setProperties({ 'value': cValue }, true);
+            }
+            else {
+                this.setProperties({ 'value': hex }, true);
+            }
             this.element.value = hex ? hex : '#000000';
         }
         else {
@@ -12882,6 +12650,9 @@ __decorate$5([
 __decorate$5([
     Property(true)
 ], ColorPicker.prototype, "enableOpacity", void 0);
+__decorate$5([
+    Property(false)
+], ColorPicker.prototype, "createPopupOnClick", void 0);
 __decorate$5([
     Event()
 ], ColorPicker.prototype, "select", void 0);
@@ -13064,72 +12835,70 @@ let TextBox = class TextBox extends Component {
         return (!str || /^\s*$/.test(str));
     }
     preRender() {
-        if (!(isBlazor() && this.isServerRendered)) {
-            this.cloneElement = this.element.cloneNode(true);
-            this.formElement = closest(this.element, 'form');
-            if (!isNullOrUndefined(this.formElement)) {
-                this.isForm = true;
-            }
-            /* istanbul ignore next */
-            if (this.element.tagName === 'EJS-TEXTBOX') {
-                const ejInstance = getValue('ej2_instances', this.element);
-                const inputElement = this.multiline ?
-                    this.createElement('textarea') :
-                    this.createElement('input');
-                let index = 0;
-                for (index; index < this.element.attributes.length; index++) {
-                    const attributeName = this.element.attributes[index].nodeName;
-                    if (attributeName !== 'id') {
-                        inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);
-                        inputElement.innerHTML = this.element.innerHTML;
-                        if (attributeName === 'name') {
-                            this.element.removeAttribute('name');
-                        }
+        this.cloneElement = this.element.cloneNode(true);
+        this.formElement = closest(this.element, 'form');
+        if (!isNullOrUndefined(this.formElement)) {
+            this.isForm = true;
+        }
+        /* istanbul ignore next */
+        if (this.element.tagName === 'EJS-TEXTBOX') {
+            const ejInstance = getValue('ej2_instances', this.element);
+            const inputElement = this.multiline ?
+                this.createElement('textarea') :
+                this.createElement('input');
+            let index = 0;
+            for (index; index < this.element.attributes.length; index++) {
+                const attributeName = this.element.attributes[index].nodeName;
+                if (attributeName !== 'id') {
+                    inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);
+                    inputElement.innerHTML = this.element.innerHTML;
+                    if (attributeName === 'name') {
+                        this.element.removeAttribute('name');
                     }
                 }
-                this.element.appendChild(inputElement);
-                this.element = inputElement;
-                setValue('ej2_instances', ejInstance, this.element);
-            }
-            this.updateHTMLAttrToElement();
-            this.checkAttributes(false);
-            if (this.element.tagName !== 'TEXTAREA') {
-                this.element.setAttribute('type', this.type);
-            }
-            this.element.setAttribute('role', 'textbox');
-            this.globalize = new Internationalization(this.locale);
-            const localeText = { placeholder: this.placeholder };
-            this.l10n = new L10n('textbox', localeText, this.locale);
-            if (this.l10n.getConstant('placeholder') !== '') {
-                this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
             }
-            if (!this.element.hasAttribute('id')) {
-                this.element.setAttribute('id', getUniqueID('textbox'));
-            }
-            if (!this.element.hasAttribute('name')) {
-                this.element.setAttribute('name', this.element.getAttribute('id'));
-            }
-            if (this.element.tagName === 'INPUT' && this.multiline) {
-                this.isHiddenInput = true;
-                this.textarea = this.createElement('textarea');
-                this.element.parentNode.insertBefore(this.textarea, this.element);
-                this.element.setAttribute('type', 'hidden');
-                this.textarea.setAttribute('name', this.element.getAttribute('name'));
-                this.element.removeAttribute('name');
-                this.textarea.setAttribute('role', this.element.getAttribute('role'));
-                this.element.removeAttribute('role');
-                this.textarea.setAttribute('id', getUniqueID('textarea'));
-                const apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];
-                for (let index = 0; index < this.element.attributes.length; index++) {
-                    const attributeName = this.element.attributes[index].nodeName;
-                    if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&
-                        !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {
-                        // e-mappinguid attribute is handled for Grid component.
-                        this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);
-                        if (apiAttributes.indexOf(attributeName) < 0) {
-                            this.element.removeAttribute(attributeName);
-                            index--;
-                        }
+            this.element.appendChild(inputElement);
+            this.element = inputElement;
+            setValue('ej2_instances', ejInstance, this.element);
+        }
+        this.updateHTMLAttrToElement();
+        this.checkAttributes(false);
+        if (this.element.tagName !== 'TEXTAREA') {
+            this.element.setAttribute('type', this.type);
+        }
+        this.element.setAttribute('role', 'textbox');
+        this.globalize = new Internationalization(this.locale);
+        const localeText = { placeholder: this.placeholder };
+        this.l10n = new L10n('textbox', localeText, this.locale);
+        if (this.l10n.getConstant('placeholder') !== '') {
+            this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
+        }
+        if (!this.element.hasAttribute('id')) {
+            this.element.setAttribute('id', getUniqueID('textbox'));
+        }
+        if (!this.element.hasAttribute('name')) {
+            this.element.setAttribute('name', this.element.getAttribute('id'));
+        }
+        if (this.element.tagName === 'INPUT' && this.multiline) {
+            this.isHiddenInput = true;
+            this.textarea = this.createElement('textarea');
+            this.element.parentNode.insertBefore(this.textarea, this.element);
+            this.element.setAttribute('type', 'hidden');
+            this.textarea.setAttribute('name', this.element.getAttribute('name'));
+            this.element.removeAttribute('name');
+            this.textarea.setAttribute('role', this.element.getAttribute('role'));
+            this.element.removeAttribute('role');
+            this.textarea.setAttribute('id', getUniqueID('textarea'));
+            const apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];
+            for (let index = 0; index < this.element.attributes.length; index++) {
+                const attributeName = this.element.attributes[index].nodeName;
+                if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&
+                    !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {
+                    // e-mappinguid attribute is handled for Grid component.
+                    this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);
+                    if (apiAttributes.indexOf(attributeName) < 0) {
+                        this.element.removeAttribute(attributeName);
+                        index--;
                     }
                 }
             }
@@ -13191,37 +12960,22 @@ let TextBox = class TextBox extends Component {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValue = this.getInputValidClassList(this.cssClass);
         }
-        if (!(isBlazor() && this.isServerRendered)) {
-            this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;
-            this.textboxWrapper = Input.createInput({
-                element: this.respectiveElement,
-                floatLabelType: this.floatLabelType,
-                properties: {
-                    enabled: this.enabled,
-                    enableRtl: this.enableRtl,
-                    cssClass: updatedCssClassValue,
-                    readonly: this.readonly,
-                    placeholder: this.placeholder,
-                    showClearButton: this.showClearButton
-                }
-            });
-            this.updateHTMLAttrToWrapper();
-            if (this.isHiddenInput) {
-                this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
-            }
-        }
-        else {
-            this.respectiveElement = this.element;
-            this.textboxWrapper = { container: this.element.parentElement };
-            if (this.showClearButton && !this.multiline) {
-                this.textboxWrapper.clearButton = this.textboxWrapper.container.querySelector('.e-clear-icon');
-                Input.wireClearBtnEvents(this.respectiveElement, this.textboxWrapper.clearButton, this.textboxWrapper.container);
-            }
-            if (this.floatLabelType === 'Auto') {
-                Input.wireFloatingEvents(this.respectiveElement);
+        this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;
+        this.textboxWrapper = Input.createInput({
+            element: this.respectiveElement,
+            floatLabelType: this.floatLabelType,
+            properties: {
+                enabled: this.enabled,
+                enableRtl: this.enableRtl,
+                cssClass: updatedCssClassValue,
+                readonly: this.readonly,
+                placeholder: this.placeholder,
+                showClearButton: this.showClearButton
             }
-            // eslint-disable-next-line max-len, @typescript-eslint/no-explicit-any
-            Input.bindInitialEvent({ element: this.respectiveElement, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties });
+        });
+        this.updateHTMLAttrToWrapper();
+        if (this.isHiddenInput) {
+            this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
         }
         this.wireEvents();
         if (!isNullOrUndefined(this.value)) {
@@ -13416,7 +13170,7 @@ let TextBox = class TextBox extends Component {
     }
     resetInputHandler(event) {
         event.preventDefault();
-        if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR))) {
+        if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR)) || this.textboxWrapper.container.classList.contains('e-static-clear')) {
             Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);
             if (this.isHiddenInput) {
                 this.element.value = this.respectiveElement.value;
@@ -13456,25 +13210,20 @@ let TextBox = class TextBox extends Component {
      */
     destroy() {
         this.unWireEvents();
-        if (!(isBlazor() && this.isServerRendered)) {
-            if (this.element.tagName === 'INPUT' && this.multiline) {
-                detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
-                this.respectiveElement = this.element;
-                this.element.removeAttribute('type');
-            }
-            this.respectiveElement.value = this.respectiveElement.defaultValue;
-            this.respectiveElement.classList.remove('e-input');
-            this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
-            if (!isNullOrUndefined(this.textboxWrapper)) {
-                this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);
-                detach(this.textboxWrapper.container);
-            }
-            this.textboxWrapper = null;
-            super.destroy();
+        if (this.element.tagName === 'INPUT' && this.multiline) {
+            detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
+            this.respectiveElement = this.element;
+            this.element.removeAttribute('type');
         }
-        else {
-            this.textboxWrapper = null;
+        this.respectiveElement.value = this.respectiveElement.defaultValue;
+        this.respectiveElement.classList.remove('e-input');
+        this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
+        if (!isNullOrUndefined(this.textboxWrapper)) {
+            this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);
+            detach(this.textboxWrapper.container);
         }
+        this.textboxWrapper = null;
+        super.destroy();
     }
     /**
      * Adding the icons to the TextBox component.