@syncfusion/ej2-inputs 19.2.59 → 19.3.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (150) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/ej2-inputs.umd.min.js +2 -2
  3. package/dist/ej2-inputs.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-inputs.es2015.js +346 -606
  5. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  6. package/dist/es6/ej2-inputs.es5.js +358 -623
  7. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  8. package/dist/global/ej2-inputs.min.js +2 -2
  9. package/dist/global/ej2-inputs.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/helpers/e2e/colorpickerHelper.d.ts +23 -0
  12. package/helpers/e2e/colorpickerHelper.js +53 -0
  13. package/package.json +9 -9
  14. package/src/maskedtextbox/maskedtextbox/maskedtextbox-model.d.ts +1 -4
  15. package/src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts +0 -3
  16. package/src/maskedtextbox/maskedtextbox/maskedtextbox.js +2 -11
  17. package/src/numerictextbox/numerictextbox-model.d.ts +1 -10
  18. package/src/numerictextbox/numerictextbox.d.ts +0 -9
  19. package/src/numerictextbox/numerictextbox.js +51 -95
  20. package/src/slider/slider.d.ts +1 -0
  21. package/src/slider/slider.js +10 -1
  22. package/src/textbox/textbox-model.d.ts +1 -4
  23. package/src/textbox/textbox.d.ts +0 -3
  24. package/src/textbox/textbox.js +90 -112
  25. package/src/uploader/uploader-model.d.ts +1 -26
  26. package/src/uploader/uploader.d.ts +0 -40
  27. package/src/uploader/uploader.js +210 -407
  28. package/styles/bootstrap-dark.css +14 -6
  29. package/styles/bootstrap.css +14 -6
  30. package/styles/bootstrap4.css +22 -12
  31. package/styles/bootstrap5-dark.css +7548 -0
  32. package/styles/bootstrap5-dark.scss +7 -0
  33. package/styles/bootstrap5.css +7548 -0
  34. package/styles/bootstrap5.scss +7 -0
  35. package/styles/color-picker/_bootstrap5-dark-definition.scss +1 -0
  36. package/styles/color-picker/_bootstrap5-definition.scss +134 -0
  37. package/styles/color-picker/_layout.scss +26 -3
  38. package/styles/color-picker/_tailwind-dark-definition.scss +1 -132
  39. package/styles/color-picker/_tailwind-definition.scss +25 -24
  40. package/styles/color-picker/_theme.scss +33 -0
  41. package/styles/color-picker/bootstrap5-dark.css +964 -0
  42. package/styles/color-picker/bootstrap5-dark.scss +11 -0
  43. package/styles/color-picker/bootstrap5.css +964 -0
  44. package/styles/color-picker/bootstrap5.scss +11 -0
  45. package/styles/color-picker/icons/_bootstrap5-dark.scss +1 -0
  46. package/styles/color-picker/icons/_bootstrap5.scss +10 -0
  47. package/styles/fabric-dark.css +15 -7
  48. package/styles/fabric.css +15 -7
  49. package/styles/highcontrast-light.css +15 -7
  50. package/styles/highcontrast.css +16 -8
  51. package/styles/input/_bootstrap5-dark-definition.scss +1 -0
  52. package/styles/input/_bootstrap5-definition.scss +320 -0
  53. package/styles/input/_definition.scss +217 -0
  54. package/styles/input/_fabric-definition.scss +1 -1
  55. package/styles/input/_highcontrast-definition.scss +1 -1
  56. package/styles/input/_layout.scss +196 -157
  57. package/styles/input/_material-dark-definition.scss +133 -120
  58. package/styles/input/_material-definition.scss +1 -0
  59. package/styles/input/_tailwind-dark-definition.scss +1 -315
  60. package/styles/input/_tailwind-definition.scss +50 -47
  61. package/styles/input/_theme.scss +92 -59
  62. package/styles/input/bootstrap-dark.css +12 -3
  63. package/styles/input/bootstrap.css +12 -3
  64. package/styles/input/bootstrap4.css +15 -3
  65. package/styles/input/bootstrap5-dark.css +4670 -0
  66. package/styles/input/bootstrap5-dark.scss +4 -0
  67. package/styles/input/bootstrap5.css +4670 -0
  68. package/styles/input/bootstrap5.scss +4 -0
  69. package/styles/input/fabric-dark.css +12 -3
  70. package/styles/input/fabric.css +13 -4
  71. package/styles/input/highcontrast-light.css +12 -3
  72. package/styles/input/highcontrast.css +13 -4
  73. package/styles/input/icons/_bootstrap5-dark.scss +1 -0
  74. package/styles/input/icons/_bootstrap5.scss +17 -0
  75. package/styles/input/icons/_material-dark.scss +32 -0
  76. package/styles/input/icons/_tailwind-dark.scss +1 -17
  77. package/styles/input/material-dark.css +2320 -201
  78. package/styles/input/material.css +12 -3
  79. package/styles/input/tailwind-dark.css +14 -5
  80. package/styles/input/tailwind.css +14 -5
  81. package/styles/maskedtextbox/_bootstrap5-dark-definition.scss +1 -0
  82. package/styles/maskedtextbox/_bootstrap5-definition.scss +7 -0
  83. package/styles/maskedtextbox/_tailwind-dark-definition.scss +1 -6
  84. package/styles/maskedtextbox/_tailwind-definition.scss +4 -1
  85. package/styles/maskedtextbox/bootstrap5-dark.css +33 -0
  86. package/styles/maskedtextbox/bootstrap5-dark.scss +4 -0
  87. package/styles/maskedtextbox/bootstrap5.css +33 -0
  88. package/styles/maskedtextbox/bootstrap5.scss +4 -0
  89. package/styles/material-dark.css +2337 -218
  90. package/styles/material.css +14 -5
  91. package/styles/numerictextbox/_bootstrap5-dark-definition.scss +1 -0
  92. package/styles/numerictextbox/_bootstrap5-definition.scss +3 -0
  93. package/styles/numerictextbox/_tailwind-dark-definition.scss +1 -5
  94. package/styles/numerictextbox/_tailwind-definition.scss +1 -1
  95. package/styles/numerictextbox/bootstrap5-dark.css +48 -0
  96. package/styles/numerictextbox/bootstrap5-dark.scss +5 -0
  97. package/styles/numerictextbox/bootstrap5.css +48 -0
  98. package/styles/numerictextbox/bootstrap5.scss +5 -0
  99. package/styles/numerictextbox/icons/_bootstrap5-dark.scss +1 -0
  100. package/styles/numerictextbox/icons/_bootstrap5.scss +12 -0
  101. package/styles/numerictextbox/icons/_tailwind-dark.scss +1 -12
  102. package/styles/slider/_bootstrap5-dark-definition.scss +1 -0
  103. package/styles/slider/_bootstrap5-definition.scss +90 -0
  104. package/styles/slider/_fabric-dark-definition.scss +2 -2
  105. package/styles/slider/_layout.scss +294 -69
  106. package/styles/slider/_material-dark-definition.scss +1 -1
  107. package/styles/slider/_tailwind-dark-definition.scss +1 -80
  108. package/styles/slider/_tailwind-definition.scss +32 -27
  109. package/styles/slider/_theme.scss +14 -6
  110. package/styles/slider/bootstrap-dark.css +2 -3
  111. package/styles/slider/bootstrap.css +2 -3
  112. package/styles/slider/bootstrap4.css +7 -9
  113. package/styles/slider/bootstrap5-dark.css +749 -0
  114. package/styles/slider/bootstrap5-dark.scss +5 -0
  115. package/styles/slider/bootstrap5.css +749 -0
  116. package/styles/slider/bootstrap5.scss +5 -0
  117. package/styles/slider/fabric-dark.css +3 -4
  118. package/styles/slider/fabric.css +2 -3
  119. package/styles/slider/highcontrast-light.css +3 -4
  120. package/styles/slider/highcontrast.css +3 -4
  121. package/styles/slider/material-dark.css +16 -16
  122. package/styles/slider/material.css +2 -2
  123. package/styles/slider/tailwind-dark.css +9 -8
  124. package/styles/slider/tailwind.css +7 -3
  125. package/styles/tailwind-dark.css +23 -13
  126. package/styles/tailwind.css +21 -8
  127. package/styles/textbox/_bootstrap5-dark-definition.scss +1 -0
  128. package/styles/textbox/_bootstrap5-definition.scss +0 -0
  129. package/styles/textbox/_tailwind-dark-definition.scss +1 -0
  130. package/styles/textbox/bootstrap5-dark.css +0 -0
  131. package/styles/textbox/bootstrap5-dark.scss +4 -0
  132. package/styles/textbox/bootstrap5.css +0 -0
  133. package/styles/textbox/bootstrap5.scss +4 -0
  134. package/styles/uploader/_bootstrap5-dark-definition.scss +1 -0
  135. package/styles/uploader/_bootstrap5-definition.scss +216 -0
  136. package/styles/uploader/_definition.scss +142 -0
  137. package/styles/uploader/_tailwind-dark-definition.scss +1 -216
  138. package/styles/uploader/_tailwind-definition.scss +21 -21
  139. package/styles/uploader/_theme.scss +2 -2
  140. package/styles/uploader/bootstrap5-dark.css +1079 -0
  141. package/styles/uploader/bootstrap5-dark.scss +6 -0
  142. package/styles/uploader/bootstrap5.css +1079 -0
  143. package/styles/uploader/bootstrap5.scss +6 -0
  144. package/styles/uploader/icons/_bootstrap5-dark.scss +1 -0
  145. package/styles/uploader/icons/_bootstrap5.scss +34 -0
  146. package/styles/uploader/icons/_tailwind-dark.scss +1 -35
  147. package/styles/uploader/material-dark.css +1 -1
  148. package/.eslintrc.json +0 -244
  149. package/styles/color-picker/_icons.scss +0 -10
  150. package/tslint.json +0 -111
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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';
2
2
  import { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
3
3
  import { Deferred, SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
4
4
 
@@ -895,15 +895,13 @@ let NumericTextBox = class NumericTextBox extends Component {
895
895
  this.element = input;
896
896
  setValue('ej2_instances', ejInstance, this.element);
897
897
  }
898
- if (!(isBlazor() && this.isServerRendered)) {
899
- attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });
900
- const localeText = {
901
- incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
902
- };
903
- this.l10n = new L10n('numerictextbox', localeText, this.locale);
904
- if (this.l10n.getConstant('placeholder') !== '') {
905
- this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
906
- }
898
+ attributes(this.element, { 'role': 'spinbutton', 'tabindex': '0', 'autocomplete': 'off', 'aria-live': 'assertive' });
899
+ const localeText = {
900
+ incrementTitle: 'Increment value', decrementTitle: 'Decrement value', placeholder: this.placeholder
901
+ };
902
+ this.l10n = new L10n('numerictextbox', localeText, this.locale);
903
+ if (this.l10n.getConstant('placeholder') !== '') {
904
+ this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
907
905
  }
908
906
  this.isValidState = true;
909
907
  this.inputStyle = null;
@@ -912,16 +910,14 @@ let NumericTextBox = class NumericTextBox extends Component {
912
910
  this.initCultureInfo();
913
911
  this.initCultureFunc();
914
912
  this.prevValue = this.value;
915
- if (!(isBlazor() && this.isServerRendered)) {
916
- this.updateHTMLAttrToElement();
917
- this.checkAttributes(false);
918
- if (this.formEle) {
919
- this.inputEleValue = this.value;
920
- }
913
+ this.updateHTMLAttrToElement();
914
+ this.checkAttributes(false);
915
+ if (this.formEle) {
916
+ this.inputEleValue = this.value;
921
917
  }
922
918
  this.validateMinMax();
923
919
  this.validateStep();
924
- if (this.placeholder === null && !(isBlazor() && this.isServerRendered)) {
920
+ if (this.placeholder === null) {
925
921
  this.updatePlaceholder();
926
922
  }
927
923
  }
@@ -933,47 +929,26 @@ let NumericTextBox = class NumericTextBox extends Component {
933
929
  */
934
930
  render() {
935
931
  if (this.element.tagName.toLowerCase() === 'input') {
936
- if (!(isBlazor() && this.isServerRendered)) {
937
- this.createWrapper();
938
- if (this.showSpinButton) {
939
- this.spinBtnCreation();
940
- }
941
- this.setElementWidth(this.width);
942
- if (!this.container.classList.contains('e-input-group')) {
943
- this.container.classList.add('e-input-group');
944
- }
945
- this.changeValue(this.value === null || isNaN(this.value) ?
946
- null : this.strictMode ? this.trimValue(this.value) : this.value);
932
+ this.createWrapper();
933
+ if (this.showSpinButton) {
934
+ this.spinBtnCreation();
947
935
  }
948
- else {
949
- this.container = this.element.parentElement;
950
- this.inputWrapper = { container: this.container };
951
- this.hiddenInput = this.container.querySelector('input[type="hidden"]');
952
- if (this.showClearButton) {
953
- this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');
954
- Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);
955
- }
956
- if (this.showSpinButton) {
957
- this.spinDown = this.container.querySelector('.' + SPINDOWN);
958
- this.spinUp = this.container.querySelector('.' + SPINUP);
959
- this.wireSpinBtnEvents();
960
- }
961
- Input.bindInitialEvent({
962
- element: this.element, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties
963
- });
936
+ this.setElementWidth(this.width);
937
+ if (!this.container.classList.contains('e-input-group')) {
938
+ this.container.classList.add('e-input-group');
964
939
  }
940
+ this.changeValue(this.value === null || isNaN(this.value) ?
941
+ null : this.strictMode ? this.trimValue(this.value) : this.value);
965
942
  this.wireEvents();
966
- if (!(isBlazor() && this.isServerRendered)) {
967
- if (this.value !== null && !isNaN(this.value)) {
968
- if (this.decimals) {
969
- this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);
970
- }
971
- }
972
- if (this.element.getAttribute('value') || this.value) {
973
- this.element.setAttribute('value', this.element.value);
974
- this.hiddenInput.setAttribute('value', this.hiddenInput.value);
943
+ if (this.value !== null && !isNaN(this.value)) {
944
+ if (this.decimals) {
945
+ this.setProperties({ value: this.roundNumber(this.value, this.decimals) }, true);
975
946
  }
976
947
  }
948
+ if (this.element.getAttribute('value') || this.value) {
949
+ this.element.setAttribute('value', this.element.value);
950
+ this.hiddenInput.setAttribute('value', this.hiddenInput.value);
951
+ }
977
952
  this.elementPrevValue = this.element.value;
978
953
  if (this.element.hasAttribute('data-val')) {
979
954
  this.element.setAttribute('data-val', 'false');
@@ -1877,25 +1852,23 @@ let NumericTextBox = class NumericTextBox extends Component {
1877
1852
  */
1878
1853
  destroy() {
1879
1854
  this.unwireEvents();
1880
- if (!(isBlazor() && this.isServerRendered)) {
1881
- detach(this.hiddenInput);
1882
- if (this.showSpinButton) {
1883
- this.unwireSpinBtnEvents();
1884
- detach(this.spinUp);
1885
- detach(this.spinDown);
1886
- }
1887
- const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
1888
- 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
1889
- 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',
1890
- 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
1891
- for (let i = 0; i < attrArray.length; i++) {
1892
- this.element.removeAttribute(attrArray[i]);
1893
- }
1894
- this.element.classList.remove('e-input');
1895
- this.container.insertAdjacentElement('afterend', this.element);
1896
- detach(this.container);
1897
- super.destroy();
1855
+ detach(this.hiddenInput);
1856
+ if (this.showSpinButton) {
1857
+ this.unwireSpinBtnEvents();
1858
+ detach(this.spinUp);
1859
+ detach(this.spinDown);
1898
1860
  }
1861
+ const attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
1862
+ 'autocorrect', 'aria-disabled', 'aria-placeholder', 'autocapitalize',
1863
+ 'spellcheck', 'aria-autocomplete', 'tabindex', 'aria-valuemin',
1864
+ 'aria-valuemax', 'aria-live', 'aria-valuenow', 'aria-invalid'];
1865
+ for (let i = 0; i < attrArray.length; i++) {
1866
+ this.element.removeAttribute(attrArray[i]);
1867
+ }
1868
+ this.element.classList.remove('e-input');
1869
+ this.container.insertAdjacentElement('afterend', this.element);
1870
+ detach(this.container);
1871
+ super.destroy();
1899
1872
  }
1900
1873
  /* eslint-disable valid-jsdoc, jsdoc/require-returns */
1901
1874
  /**
@@ -2048,33 +2021,16 @@ let NumericTextBox = class NumericTextBox extends Component {
2048
2021
  }
2049
2022
  }
2050
2023
  updateClearButton(newProp) {
2051
- if (isBlazor()) {
2052
- if (this.showClearButton) {
2053
- this.inputWrapper.clearButton = this.container.querySelector('.e-clear-icon');
2054
- Input.wireClearBtnEvents(this.element, this.inputWrapper.clearButton, this.inputWrapper.container);
2055
- }
2056
- }
2057
- else {
2058
- Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);
2059
- this.bindClearEvent();
2060
- }
2024
+ Input.setClearButton(newProp.showClearButton, this.element, this.inputWrapper, undefined, this.createElement);
2025
+ this.bindClearEvent();
2061
2026
  }
2062
2027
  updateSpinButton(newProp) {
2063
- if (isBlazor()) {
2064
- if (this.showSpinButton) {
2065
- this.spinDown = this.container.querySelector('.' + SPINDOWN);
2066
- this.spinUp = this.container.querySelector('.' + SPINUP);
2067
- this.wireSpinBtnEvents();
2068
- }
2028
+ if (newProp.showSpinButton) {
2029
+ this.spinBtnCreation();
2069
2030
  }
2070
2031
  else {
2071
- if (newProp.showSpinButton) {
2072
- this.spinBtnCreation();
2073
- }
2074
- else {
2075
- detach(this.spinUp);
2076
- detach(this.spinDown);
2077
- }
2032
+ detach(this.spinUp);
2033
+ detach(this.spinDown);
2078
2034
  }
2079
2035
  }
2080
2036
  /**
@@ -3430,7 +3386,6 @@ let MaskedTextBox = class MaskedTextBox extends Component {
3430
3386
  */
3431
3387
  render() {
3432
3388
  if (this.element.tagName.toLowerCase() === 'input') {
3433
- const checkBlazor = isBlazor() && this.isServerRendered;
3434
3389
  if (this.floatLabelType === 'Never') {
3435
3390
  addClass([this.element], INPUT);
3436
3391
  }
@@ -3440,14 +3395,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
3440
3395
  this.element.setAttribute('name', this.element.id);
3441
3396
  }
3442
3397
  this.isInitial = true;
3443
- if (checkBlazor && Browser.isIE === true) {
3444
- setTimeout(() => {
3445
- this.resetMaskedTextBox();
3446
- });
3447
- }
3448
- else {
3449
- this.resetMaskedTextBox();
3450
- }
3398
+ this.resetMaskedTextBox();
3451
3399
  this.isInitial = false;
3452
3400
  this.setMaskPlaceholder(true, false);
3453
3401
  this.setWidth(this.width);
@@ -4086,6 +4034,13 @@ let Slider = class Slider extends Component {
4086
4034
  this.wireEvents();
4087
4035
  this.setZindex();
4088
4036
  this.renderComplete();
4037
+ if (this.element.tagName === 'EJS-SLIDER') {
4038
+ if (this.getTheme(this.sliderContainer) == "none") {
4039
+ setTimeout(() => {
4040
+ this.refresh();
4041
+ }, 0);
4042
+ }
4043
+ }
4089
4044
  }
4090
4045
  initialize() {
4091
4046
  addClass([this.element], classNames.root);
@@ -4204,6 +4159,7 @@ let Slider = class Slider extends Component {
4204
4159
  || this.getTheme(this.sliderContainer) === 'bootstrap-dark';
4205
4160
  this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
4206
4161
  this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
4162
+ this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
4207
4163
  this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;
4208
4164
  }
4209
4165
  createRangeBar() {
@@ -4690,7 +4646,7 @@ let Slider = class Slider extends Component {
4690
4646
  }
4691
4647
  renderTooltip() {
4692
4648
  this.tooltipObj = new Tooltip({
4693
- showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind,
4649
+ showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5,
4694
4650
  cssClass: classNames.sliderTooltip,
4695
4651
  height: this.isMaterial ? 30 : 'auto',
4696
4652
  animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
@@ -7688,9 +7644,7 @@ let Uploader = class Uploader extends Component {
7688
7644
  this.updateDirectoryAttributes();
7689
7645
  break;
7690
7646
  case 'template':
7691
- if (!this.isServerBlazor) {
7692
- this.clearAll();
7693
- }
7647
+ this.clearAll();
7694
7648
  break;
7695
7649
  case 'minFileSize':
7696
7650
  case 'maxFileSize':
@@ -7790,55 +7744,44 @@ let Uploader = class Uploader extends Component {
7790
7744
  };
7791
7745
  this.l10n = new L10n('uploader', this.localeText, this.locale);
7792
7746
  this.preLocaleObj = getValue('currentLocale', this.l10n);
7793
- this.isServerBlazor = (isBlazor() && this.isServerRendered) ? true : false;
7794
- this.isBlazorTemplate = this.isServerBlazor && this.template !== '' && !isNullOrUndefined(this.template) ? true : false;
7795
- this.isBlazorSaveUrl = (this.isServerRendered &&
7796
- (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl))) ? true : false;
7797
- if (this.isBlazorSaveUrl && this.sequentialUpload) {
7798
- this.sequentialUpload = false;
7799
- }
7800
- if (!this.isBlazorSaveUrl) {
7801
- this.formRendered();
7802
- }
7803
- if (!this.isServerBlazor) {
7804
- this.updateHTMLAttrToElement();
7805
- this.checkHTMLAttributes(false);
7806
- const ejInstance = getValue('ej2_instances', this.element);
7807
- /* istanbul ignore next */
7808
- if (this.element.tagName === 'EJS-UPLOADER') {
7809
- const inputElement = this.createElement('input', { attrs: { type: 'file' } });
7810
- let index = 0;
7811
- for (index; index < this.element.attributes.length; index++) {
7812
- inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
7813
- inputElement.innerHTML = this.element.innerHTML;
7814
- }
7815
- if (!inputElement.hasAttribute('name')) {
7816
- inputElement.setAttribute('name', 'UploadFiles');
7817
- }
7818
- this.element.appendChild(inputElement);
7819
- this.element = inputElement;
7820
- setValue('ej2_instances', ejInstance, this.element);
7747
+ this.formRendered();
7748
+ this.updateHTMLAttrToElement();
7749
+ this.checkHTMLAttributes(false);
7750
+ const ejInstance = getValue('ej2_instances', this.element);
7751
+ /* istanbul ignore next */
7752
+ if (this.element.tagName === 'EJS-UPLOADER') {
7753
+ const inputElement = this.createElement('input', { attrs: { type: 'file' } });
7754
+ let index = 0;
7755
+ for (index; index < this.element.attributes.length; index++) {
7756
+ inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
7757
+ inputElement.innerHTML = this.element.innerHTML;
7821
7758
  }
7822
- /* istanbul ignore next */
7823
- if (ejInstance[0].isPureReactComponent) {
7824
- if (!isNullOrUndefined(ejInstance[0].props.name)) {
7825
- this.element.setAttribute('name', ejInstance[0].props.name);
7826
- }
7827
- else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {
7828
- this.element.setAttribute('name', ejInstance[0].props.id);
7829
- }
7830
- else {
7831
- this.element.setAttribute('name', 'UploadFiles');
7832
- }
7759
+ if (!inputElement.hasAttribute('name')) {
7760
+ inputElement.setAttribute('name', 'UploadFiles');
7833
7761
  }
7834
- if (isNullOrUndefined(this.element.getAttribute('name'))) {
7835
- this.element.setAttribute('name', this.element.getAttribute('id'));
7762
+ this.element.appendChild(inputElement);
7763
+ this.element = inputElement;
7764
+ setValue('ej2_instances', ejInstance, this.element);
7765
+ }
7766
+ /* istanbul ignore next */
7767
+ if (ejInstance[0].isPureReactComponent) {
7768
+ if (!isNullOrUndefined(ejInstance[0].props.name)) {
7769
+ this.element.setAttribute('name', ejInstance[0].props.name);
7836
7770
  }
7837
- if (!this.element.hasAttribute('type')) {
7838
- this.element.setAttribute('type', 'file');
7771
+ else if (!isNullOrUndefined(ejInstance[0].props.id) && isNullOrUndefined(ejInstance[0].props.name)) {
7772
+ this.element.setAttribute('name', ejInstance[0].props.id);
7773
+ }
7774
+ else {
7775
+ this.element.setAttribute('name', 'UploadFiles');
7839
7776
  }
7840
- this.updateDirectoryAttributes();
7841
7777
  }
7778
+ if (isNullOrUndefined(this.element.getAttribute('name'))) {
7779
+ this.element.setAttribute('name', this.element.getAttribute('id'));
7780
+ }
7781
+ if (!this.element.hasAttribute('type')) {
7782
+ this.element.setAttribute('type', 'file');
7783
+ }
7784
+ this.updateDirectoryAttributes();
7842
7785
  this.keyConfigs = {
7843
7786
  enter: 'enter'
7844
7787
  };
@@ -7889,29 +7832,16 @@ let Uploader = class Uploader extends Component {
7889
7832
  * @returns {void}
7890
7833
  */
7891
7834
  render() {
7892
- if (!this.isServerBlazor) {
7893
- this.renderBrowseButton();
7894
- this.initializeUpload();
7895
- this.updateHTMLAttrToWrapper();
7896
- this.wireEvents();
7897
- this.setMultipleSelection();
7898
- this.setExtensions(this.allowedExtensions);
7899
- this.setRTL();
7900
- this.renderPreLoadFiles();
7901
- this.setControlStatus();
7902
- this.setCSSClass();
7903
- }
7904
- else {
7905
- this.dropAreaWrapper = closest(this.element, '.' + DROP_WRAPPER);
7906
- this.uploadWrapper = closest(this.element, '.e-upload.e-control-wrapper');
7907
- this.browseButton = this.dropAreaWrapper.querySelector('button.e-upload-browse-btn');
7908
- this.setDropArea();
7909
- this.renderPreLoadFiles();
7910
- this.wireEvents();
7911
- }
7912
- if (this.isServerBlazor) {
7913
- this.renderComplete();
7914
- }
7835
+ this.renderBrowseButton();
7836
+ this.initializeUpload();
7837
+ this.updateHTMLAttrToWrapper();
7838
+ this.wireEvents();
7839
+ this.setMultipleSelection();
7840
+ this.setExtensions(this.allowedExtensions);
7841
+ this.setRTL();
7842
+ this.renderPreLoadFiles();
7843
+ this.setControlStatus();
7844
+ this.setCSSClass();
7915
7845
  }
7916
7846
  renderBrowseButton() {
7917
7847
  this.browseButton = this.createElement('button', { className: 'e-css e-btn', attrs: { 'type': 'button' } });
@@ -7928,22 +7858,20 @@ let Uploader = class Uploader extends Component {
7928
7858
  }
7929
7859
  renderActionButtons() {
7930
7860
  this.element.setAttribute('tabindex', '-1');
7931
- if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
7932
- this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });
7933
- this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,
7934
- attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
7935
- this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,
7936
- attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
7937
- this.actionButtons.appendChild(this.clearButton);
7938
- this.actionButtons.appendChild(this.uploadButton);
7939
- this.renderButtonTemplates();
7940
- this.uploadWrapper.appendChild(this.actionButtons);
7941
- this.browseButton.blur();
7942
- if (!this.isPreloadFiles) {
7943
- this.uploadButton.focus();
7944
- }
7945
- this.wireActionButtonEvents();
7861
+ this.actionButtons = this.createElement('div', { className: ACTION_BUTTONS });
7862
+ this.uploadButton = this.createElement('button', { className: UPLOAD_BUTTONS,
7863
+ attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
7864
+ this.clearButton = this.createElement('button', { className: CLEAR_BUTTONS,
7865
+ attrs: { 'type': 'button', 'tabindex': this.btnTabIndex } });
7866
+ this.actionButtons.appendChild(this.clearButton);
7867
+ this.actionButtons.appendChild(this.uploadButton);
7868
+ this.renderButtonTemplates();
7869
+ this.uploadWrapper.appendChild(this.actionButtons);
7870
+ this.browseButton.blur();
7871
+ if (!this.isPreloadFiles) {
7872
+ this.uploadButton.focus();
7946
7873
  }
7874
+ this.wireActionButtonEvents();
7947
7875
  }
7948
7876
  /* istanbul ignore next */
7949
7877
  serverActionButtonsEventBind(element) {
@@ -7958,19 +7886,6 @@ let Uploader = class Uploader extends Component {
7958
7886
  this.checkActionButtonStatus();
7959
7887
  }
7960
7888
  }
7961
- /* istanbul ignore next */
7962
- serverUlElement(element) {
7963
- if (element) {
7964
- if (this.isBlazorSaveUrl || this.isBlazorTemplate) {
7965
- this.listParent = element;
7966
- this.fileList = [].slice.call(this.listParent.querySelectorAll('li'));
7967
- this.serverRemoveIconBindEvent();
7968
- if (!this.isForm) {
7969
- this.checkAutoUpload(this.filesData);
7970
- }
7971
- }
7972
- }
7973
- }
7974
7889
  wireActionButtonEvents() {
7975
7890
  EventHandler.add(this.uploadButton, 'click', this.uploadButtonClick, this);
7976
7891
  EventHandler.add(this.clearButton, 'click', this.clearButtonClick, this);
@@ -7982,9 +7897,7 @@ let Uploader = class Uploader extends Component {
7982
7897
  removeActionButtons() {
7983
7898
  if (this.actionButtons) {
7984
7899
  this.unwireActionButtonEvents();
7985
- if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
7986
- detach(this.actionButtons);
7987
- }
7900
+ detach(this.actionButtons);
7988
7901
  this.actionButtons = null;
7989
7902
  }
7990
7903
  }
@@ -8107,7 +8020,7 @@ let Uploader = class Uploader extends Component {
8107
8020
  if (!dropTextArea) {
8108
8021
  this.createDropTextHint();
8109
8022
  }
8110
- else if (!this.isServerBlazor) {
8023
+ else {
8111
8024
  dropTextArea.innerHTML = this.localizedTexts('dropFilesHint');
8112
8025
  }
8113
8026
  }
@@ -8136,11 +8049,9 @@ let Uploader = class Uploader extends Component {
8136
8049
  }
8137
8050
  }
8138
8051
  createDropTextHint() {
8139
- if (!this.isServerBlazor) {
8140
- const fileDropArea = this.createElement('span', { className: DROP_AREA });
8141
- fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');
8142
- this.dropAreaWrapper.appendChild(fileDropArea);
8143
- }
8052
+ const fileDropArea = this.createElement('span', { className: DROP_AREA });
8053
+ fileDropArea.innerHTML = this.localizedTexts('dropFilesHint');
8054
+ this.dropAreaWrapper.appendChild(fileDropArea);
8144
8055
  }
8145
8056
  updateHTMLAttrToElement() {
8146
8057
  if (!isNullOrUndefined(this.htmlAttributes)) {
@@ -8431,9 +8342,6 @@ let Uploader = class Uploader extends Component {
8431
8342
  return;
8432
8343
  }
8433
8344
  const selectedElement = args.target.parentElement;
8434
- if (this.isBlazorSaveUrl) {
8435
- this.fileList = [].slice.call(this.uploadWrapper.querySelectorAll('li'));
8436
- }
8437
8345
  const index = this.fileList.indexOf(selectedElement);
8438
8346
  const liElement = this.fileList[index];
8439
8347
  const formUpload = this.isFormUpload();
@@ -8475,27 +8383,20 @@ let Uploader = class Uploader extends Component {
8475
8383
  if (isNullOrUndefined(selectedElement)) {
8476
8384
  return;
8477
8385
  }
8478
- if (!this.isBlazorSaveUrl) {
8479
- detach(selectedElement);
8480
- }
8386
+ detach(selectedElement);
8481
8387
  index = this.fileList.indexOf(selectedElement);
8482
8388
  this.fileList.splice(index, 1);
8483
8389
  this.filesData.splice(index, 1);
8484
- if (!this.isBlazorSaveUrl) {
8485
- if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {
8486
- detach(this.listParent);
8487
- this.listParent = null;
8488
- this.removeActionButtons();
8489
- }
8490
- if (this.sequentialUpload) {
8491
- /* istanbul ignore next */
8492
- if (index <= this.count) {
8493
- --this.count;
8494
- }
8495
- }
8390
+ if (this.fileList.length === 0 && !isNullOrUndefined(this.listParent)) {
8391
+ detach(this.listParent);
8392
+ this.listParent = null;
8393
+ this.removeActionButtons();
8496
8394
  }
8497
- else {
8498
- this.interopAdaptor.invokeMethodAsync('removeFileData', index);
8395
+ if (this.sequentialUpload) {
8396
+ /* istanbul ignore next */
8397
+ if (index <= this.count) {
8398
+ --this.count;
8399
+ }
8499
8400
  }
8500
8401
  }
8501
8402
  removeUploadedFile(file, eventArgs, removeDirectly, custom) {
@@ -8505,14 +8406,6 @@ let Uploader = class Uploader extends Component {
8505
8406
  const formData = new FormData();
8506
8407
  ajax.beforeSend = (e) => {
8507
8408
  eventArgs.currentRequest = ajax.httpRequest;
8508
- if (isBlazor()) {
8509
- if (this.currentRequestHeader) {
8510
- this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);
8511
- }
8512
- if (this.customFormDatas) {
8513
- this.updateFormData(formData, this.customFormDatas);
8514
- }
8515
- }
8516
8409
  if (!removeDirectly) {
8517
8410
  this.trigger('removing', eventArgs, (eventArgs) => {
8518
8411
  if (eventArgs.cancel) {
@@ -8527,15 +8420,6 @@ let Uploader = class Uploader extends Component {
8527
8420
  this.removingEventCallback(eventArgs, formData, selectedFiles, file);
8528
8421
  }
8529
8422
  };
8530
- if (this.isServerBlazor) {
8531
- const name = this.element.getAttribute('name');
8532
- if (!isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
8533
- formData.append(name, selectedFiles.rawFile, selectedFiles.name);
8534
- }
8535
- else {
8536
- formData.append(name, selectedFiles.name);
8537
- }
8538
- }
8539
8423
  ajax.onLoad = (e) => {
8540
8424
  this.removeCompleted(e, selectedFiles, custom);
8541
8425
  return {};
@@ -8559,15 +8443,13 @@ let Uploader = class Uploader extends Component {
8559
8443
  createSpinner({ target: spinnerTarget, width: '20px' });
8560
8444
  showSpinner(spinnerTarget);
8561
8445
  }
8562
- if (!this.isServerBlazor) {
8563
- if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
8564
- formData.append(name, selectedFiles.rawFile, selectedFiles.name);
8565
- }
8566
- else {
8567
- formData.append(name, selectedFiles.name);
8568
- }
8569
- this.updateFormData(formData, eventArgs.customFormData);
8446
+ if (eventArgs.postRawFile && !isNullOrUndefined(selectedFiles.rawFile) && selectedFiles.rawFile !== '') {
8447
+ formData.append(name, selectedFiles.rawFile, selectedFiles.name);
8570
8448
  }
8449
+ else {
8450
+ formData.append(name, selectedFiles.name);
8451
+ }
8452
+ this.updateFormData(formData, eventArgs.customFormData);
8571
8453
  }
8572
8454
  /* istanbul ignore next */
8573
8455
  updateFormData(formData, customData) {
@@ -8820,10 +8702,6 @@ let Uploader = class Uploader extends Component {
8820
8702
  _internalRenderSelect(eventArgs, fileData) {
8821
8703
  if (!eventArgs.cancel) {
8822
8704
  /* istanbul ignore next */
8823
- if (isBlazor()) {
8824
- this.currentRequestHeader = eventArgs.currentRequest;
8825
- this.customFormDatas = eventArgs.customFormData;
8826
- }
8827
8705
  this.selectedFiles = this.selectedFiles.concat(fileData);
8828
8706
  this.btnTabIndex = this.disableKeyboardNavigation ? '-1' : '0';
8829
8707
  if (this.showFileList) {
@@ -8845,13 +8723,9 @@ let Uploader = class Uploader extends Component {
8845
8723
  }
8846
8724
  else {
8847
8725
  this.createFileList(fileData, true);
8848
- if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
8849
- this.filesData = this.filesData.concat(fileData);
8850
- }
8726
+ this.filesData = this.filesData.concat(fileData);
8851
8727
  if (!this.isForm || this.allowUpload()) {
8852
- if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
8853
- this.checkAutoUpload(fileData);
8854
- }
8728
+ this.checkAutoUpload(fileData);
8855
8729
  }
8856
8730
  }
8857
8731
  if (!isNullOrUndefined(eventArgs.progressInterval) && eventArgs.progressInterval !== '') {
@@ -8860,9 +8734,6 @@ let Uploader = class Uploader extends Component {
8860
8734
  }
8861
8735
  else {
8862
8736
  this.filesData = this.filesData.concat(fileData);
8863
- if (this.isBlazorSaveUrl) {
8864
- this.interopAdaptor.invokeMethodAsync('updateServerFileData', this.filesData, this.isForm);
8865
- }
8866
8737
  if (this.autoUpload) {
8867
8738
  this.upload(this.filesData, true);
8868
8739
  }
@@ -8887,7 +8758,7 @@ let Uploader = class Uploader extends Component {
8887
8758
  return isFormUpload;
8888
8759
  }
8889
8760
  clearData(singleUpload) {
8890
- if (!isNullOrUndefined(this.listParent) && !(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
8761
+ if (!isNullOrUndefined(this.listParent)) {
8891
8762
  detach(this.listParent);
8892
8763
  this.listParent = null;
8893
8764
  }
@@ -8896,12 +8767,7 @@ let Uploader = class Uploader extends Component {
8896
8767
  }
8897
8768
  this.fileList = [];
8898
8769
  this.filesData = [];
8899
- if (this.isBlazorSaveUrl || this.isBlazorTemplate) {
8900
- this.interopAdaptor.invokeMethodAsync('clearAll');
8901
- }
8902
- else {
8903
- this.removeActionButtons();
8904
- }
8770
+ this.removeActionButtons();
8905
8771
  }
8906
8772
  updateSortedFileList(filesData) {
8907
8773
  const previousListClone = this.createElement('div', { id: 'clonewrapper' });
@@ -8987,7 +8853,6 @@ let Uploader = class Uploader extends Component {
8987
8853
  }
8988
8854
  createCustomfileList(fileData) {
8989
8855
  this.createParentUL();
8990
- resetBlazorTemplate(this.element.id + 'Template', 'Template');
8991
8856
  for (const listItem of fileData) {
8992
8857
  const listElement = this.createElement('li', { className: FILE, attrs: { 'data-file-name': listItem.name } });
8993
8858
  this.uploadTemplateFn = this.templateComplier(this.template);
@@ -9015,7 +8880,6 @@ let Uploader = class Uploader extends Component {
9015
8880
  this.fileList.push(listElement);
9016
8881
  }
9017
8882
  this.renderReactTemplates();
9018
- updateBlazorTemplate(this.element.id + 'Template', 'Template', this, false);
9019
8883
  }
9020
8884
  createParentUL() {
9021
8885
  if (isNullOrUndefined(this.listParent)) {
@@ -9188,7 +9052,6 @@ let Uploader = class Uploader extends Component {
9188
9052
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
9189
9053
  formCustomFileList(fileData, files) {
9190
9054
  this.createParentUL();
9191
- resetBlazorTemplate(this.element.id + 'Template', 'Template');
9192
9055
  const fileList = this.createElement('li', { className: FILE });
9193
9056
  fileList.setAttribute('data-files-count', fileData.length + '');
9194
9057
  this.setListToFileInfo(fileData, fileList);
@@ -9221,7 +9084,6 @@ let Uploader = class Uploader extends Component {
9221
9084
  this.listParent.appendChild(fileList);
9222
9085
  this.fileList.push(fileList);
9223
9086
  this.renderReactTemplates();
9224
- updateBlazorTemplate(this.element.id + 'Template', 'Template', this, false);
9225
9087
  }
9226
9088
  /* eslint-disable valid-jsdoc, jsdoc/require-param */
9227
9089
  /**
@@ -9232,105 +9094,99 @@ let Uploader = class Uploader extends Component {
9232
9094
  */
9233
9095
  createFileList(fileData, isSelectedFile) {
9234
9096
  /* eslint-enable valid-jsdoc, jsdoc/require-param */
9235
- if (this.isBlazorSaveUrl || this.isBlazorTemplate) {
9236
- const fileListData = (isSelectedFile) ? this.filesData = this.filesData.concat(fileData) : fileData;
9237
- this.interopAdaptor.invokeMethodAsync('createFileList', fileListData, this.isForm);
9097
+ this.createParentUL();
9098
+ if (this.template !== '' && !isNullOrUndefined(this.template)) {
9099
+ if (this.isFormUpload()) {
9100
+ this.uploadWrapper.classList.add(FORM_UPLOAD);
9101
+ this.formCustomFileList(fileData, this.element.files);
9102
+ }
9103
+ else {
9104
+ this.createCustomfileList(fileData);
9105
+ }
9106
+ }
9107
+ else if (this.isFormUpload()) {
9108
+ this.uploadWrapper.classList.add(FORM_UPLOAD);
9109
+ this.formFileList(fileData, this.element.files);
9238
9110
  }
9239
9111
  else {
9240
- this.createParentUL();
9241
- if (this.template !== '' && !isNullOrUndefined(this.template)) {
9242
- if (this.isFormUpload()) {
9243
- this.uploadWrapper.classList.add(FORM_UPLOAD);
9244
- this.formCustomFileList(fileData, this.element.files);
9112
+ for (const listItem of fileData) {
9113
+ const liElement = this.createElement('li', {
9114
+ className: FILE,
9115
+ attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }
9116
+ });
9117
+ const textContainer = this.createElement('span', { className: TEXT_CONTAINER });
9118
+ const textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });
9119
+ textElement.innerHTML = this.getFileNameOnly(listItem.name);
9120
+ const fileExtension = this.createElement('span', { className: FILE_TYPE });
9121
+ const fileType = this.getFileType(listItem.name);
9122
+ fileExtension.innerHTML = '.' + fileType;
9123
+ if (!fileType) {
9124
+ fileExtension.classList.add('e-hidden');
9125
+ }
9126
+ if (!this.enableRtl) {
9127
+ textContainer.appendChild(textElement);
9128
+ textContainer.appendChild(fileExtension);
9245
9129
  }
9246
9130
  else {
9247
- this.createCustomfileList(fileData);
9131
+ const rtlContainer = this.createElement('span', { className: RTL_CONTAINER });
9132
+ rtlContainer.appendChild(fileExtension);
9133
+ rtlContainer.appendChild(textElement);
9134
+ textContainer.appendChild(rtlContainer);
9135
+ }
9136
+ const fileSize = this.createElement('span', { className: FILE_SIZE });
9137
+ fileSize.innerHTML = this.bytesToSize(listItem.size);
9138
+ textContainer.appendChild(fileSize);
9139
+ const statusElement = this.createElement('span', { className: STATUS });
9140
+ textContainer.appendChild(statusElement);
9141
+ statusElement.innerHTML = listItem.status;
9142
+ liElement.appendChild(textContainer);
9143
+ const iconElement = this.createElement('span', { className: ' e-icons',
9144
+ attrs: { 'tabindex': this.btnTabIndex } });
9145
+ /* istanbul ignore next */
9146
+ if (this.browserName === 'msie') {
9147
+ iconElement.classList.add('e-msie');
9148
+ }
9149
+ iconElement.setAttribute('title', this.localizedTexts('remove'));
9150
+ liElement.appendChild(iconElement);
9151
+ EventHandler.add(iconElement, 'click', this.removeFiles, this);
9152
+ if (listItem.statusCode === '2') {
9153
+ statusElement.classList.add(UPLOAD_SUCCESS);
9154
+ iconElement.classList.add(DELETE_ICON);
9155
+ iconElement.setAttribute('title', this.localizedTexts('delete'));
9156
+ }
9157
+ else if (listItem.statusCode !== '1') {
9158
+ statusElement.classList.remove(UPLOAD_SUCCESS);
9159
+ statusElement.classList.add(VALIDATION_FAILS);
9248
9160
  }
9249
- }
9250
- else if (this.isFormUpload()) {
9251
- this.uploadWrapper.classList.add(FORM_UPLOAD);
9252
- this.formFileList(fileData, this.element.files);
9253
- }
9254
- else {
9255
- for (const listItem of fileData) {
9256
- const liElement = this.createElement('li', {
9257
- className: FILE,
9258
- attrs: { 'data-file-name': listItem.name, 'data-files-count': '1' }
9259
- });
9260
- const textContainer = this.createElement('span', { className: TEXT_CONTAINER });
9261
- const textElement = this.createElement('span', { className: FILE_NAME, attrs: { 'title': listItem.name } });
9262
- textElement.innerHTML = this.getFileNameOnly(listItem.name);
9263
- const fileExtension = this.createElement('span', { className: FILE_TYPE });
9264
- const fileType = this.getFileType(listItem.name);
9265
- fileExtension.innerHTML = '.' + fileType;
9266
- if (!fileType) {
9267
- fileExtension.classList.add('e-hidden');
9268
- }
9269
- if (!this.enableRtl) {
9270
- textContainer.appendChild(textElement);
9271
- textContainer.appendChild(fileExtension);
9272
- }
9273
- else {
9274
- const rtlContainer = this.createElement('span', { className: RTL_CONTAINER });
9275
- rtlContainer.appendChild(fileExtension);
9276
- rtlContainer.appendChild(textElement);
9277
- textContainer.appendChild(rtlContainer);
9278
- }
9279
- const fileSize = this.createElement('span', { className: FILE_SIZE });
9280
- fileSize.innerHTML = this.bytesToSize(listItem.size);
9281
- textContainer.appendChild(fileSize);
9282
- const statusElement = this.createElement('span', { className: STATUS });
9283
- textContainer.appendChild(statusElement);
9284
- statusElement.innerHTML = listItem.status;
9285
- liElement.appendChild(textContainer);
9286
- const iconElement = this.createElement('span', { className: ' e-icons',
9287
- attrs: { 'tabindex': this.btnTabIndex } });
9288
- /* istanbul ignore next */
9289
- if (this.browserName === 'msie') {
9290
- iconElement.classList.add('e-msie');
9291
- }
9292
- iconElement.setAttribute('title', this.localizedTexts('remove'));
9293
- liElement.appendChild(iconElement);
9294
- EventHandler.add(iconElement, 'click', this.removeFiles, this);
9295
- if (listItem.statusCode === '2') {
9296
- statusElement.classList.add(UPLOAD_SUCCESS);
9297
- iconElement.classList.add(DELETE_ICON);
9298
- iconElement.setAttribute('title', this.localizedTexts('delete'));
9299
- }
9300
- else if (listItem.statusCode !== '1') {
9301
- statusElement.classList.remove(UPLOAD_SUCCESS);
9302
- statusElement.classList.add(VALIDATION_FAILS);
9303
- }
9304
- if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {
9305
- statusElement.innerHTML = '';
9306
- }
9307
- if (!iconElement.classList.contains(DELETE_ICON)) {
9308
- iconElement.classList.add(REMOVE_ICON);
9309
- }
9310
- const index = fileData.indexOf(listItem);
9311
- const eventArgs = {
9312
- element: liElement,
9313
- fileInfo: listItem,
9314
- index: index,
9315
- isPreload: this.isPreLoadFile(listItem)
9316
- };
9317
- const eventsArgs = {
9318
- element: liElement,
9319
- fileInfo: listItem,
9320
- index: index,
9321
- isPreload: this.isPreLoadFile(listItem)
9322
- };
9323
- this.trigger('rendering', eventArgs);
9324
- this.trigger('fileListRendering', eventsArgs);
9325
- this.listParent.appendChild(liElement);
9326
- this.fileList.push(liElement);
9327
- this.truncateName(textElement);
9328
- const preventActionComplete = this.flag;
9329
- if (this.isPreLoadFile(listItem)) {
9330
- this.flag = false;
9331
- this.checkActionComplete(true);
9332
- this.flag = preventActionComplete;
9333
- }
9161
+ if (this.autoUpload && listItem.statusCode === '1' && this.asyncSettings.saveUrl !== '') {
9162
+ statusElement.innerHTML = '';
9163
+ }
9164
+ if (!iconElement.classList.contains(DELETE_ICON)) {
9165
+ iconElement.classList.add(REMOVE_ICON);
9166
+ }
9167
+ const index = fileData.indexOf(listItem);
9168
+ const eventArgs = {
9169
+ element: liElement,
9170
+ fileInfo: listItem,
9171
+ index: index,
9172
+ isPreload: this.isPreLoadFile(listItem)
9173
+ };
9174
+ const eventsArgs = {
9175
+ element: liElement,
9176
+ fileInfo: listItem,
9177
+ index: index,
9178
+ isPreload: this.isPreLoadFile(listItem)
9179
+ };
9180
+ this.trigger('rendering', eventArgs);
9181
+ this.trigger('fileListRendering', eventsArgs);
9182
+ this.listParent.appendChild(liElement);
9183
+ this.fileList.push(liElement);
9184
+ this.truncateName(textElement);
9185
+ const preventActionComplete = this.flag;
9186
+ if (this.isPreLoadFile(listItem)) {
9187
+ this.flag = false;
9188
+ this.checkActionComplete(true);
9189
+ this.flag = preventActionComplete;
9334
9190
  }
9335
9191
  }
9336
9192
  }
@@ -9392,18 +9248,8 @@ let Uploader = class Uploader extends Component {
9392
9248
  }
9393
9249
  updateStatus(files, status, statusCode, updateLiStatus = true) {
9394
9250
  if (!(status === '' || isNullOrUndefined(status)) && !(statusCode === '' || isNullOrUndefined(statusCode))) {
9395
- if (this.isBlazorSaveUrl) {
9396
- for (let i = 0; i < this.filesData.length; i++) {
9397
- if (this.filesData[i].name === files.name) {
9398
- this.filesData[i].status = status;
9399
- this.filesData[i].statusCode = statusCode;
9400
- }
9401
- }
9402
- }
9403
- else {
9404
- files.status = status;
9405
- files.statusCode = statusCode;
9406
- }
9251
+ files.status = status;
9252
+ files.statusCode = statusCode;
9407
9253
  }
9408
9254
  if (updateLiStatus) {
9409
9255
  const li = this.getLiElement(files);
@@ -9418,8 +9264,9 @@ let Uploader = class Uploader extends Component {
9418
9264
  getLiElement(files) {
9419
9265
  let index;
9420
9266
  for (let i = 0; i < this.filesData.length; i++) {
9421
- if ((!isNullOrUndefined(this.filesData[i].id) && !isNullOrUndefined(files.id)) ? (this.filesData[i].name === files.name &&
9422
- this.filesData[i].id === files.id) : this.filesData[i].name === files.name) {
9267
+ if (!isNullOrUndefined(files) && ((!isNullOrUndefined(this.filesData[i].id) &&
9268
+ !isNullOrUndefined(files.id)) ? (this.filesData[i].name === files.name &&
9269
+ this.filesData[i].id === files.id) : this.filesData[i].name === files.name)) {
9423
9270
  index = i;
9424
9271
  }
9425
9272
  }
@@ -9618,41 +9465,24 @@ let Uploader = class Uploader extends Component {
9618
9465
  };
9619
9466
  return response;
9620
9467
  }
9621
- /* istanbul ignore next */
9622
- serverRemoveIconBindEvent() {
9623
- if (this.uploadWrapper && this.isBlazorSaveUrl) {
9624
- const iconElement = [].slice.call(this.uploadWrapper.querySelectorAll('ul li'));
9625
- for (let i = 0; i < iconElement.length; i++) {
9626
- const removeIconEle = (iconElement[i]) ? iconElement[i].querySelector('.e-icons') : null;
9627
- if (removeIconEle) {
9628
- EventHandler.remove(removeIconEle, 'click', this.removeFiles);
9629
- EventHandler.add(removeIconEle, 'click', this.removeFiles, this);
9630
- }
9631
- }
9632
- }
9633
- }
9634
9468
  raiseSuccessEvent(e, file) {
9635
9469
  const response = e && e.currentTarget ? this.getResponse(e) : null;
9636
9470
  const statusMessage = this.localizedTexts('uploadSuccessMessage');
9637
9471
  const args = {
9638
9472
  e, response: response, operation: 'upload', file: this.updateStatus(file, statusMessage, '2', false), statusText: statusMessage
9639
9473
  };
9640
- if (!this.isBlazorSaveUrl) {
9641
- const liElement = this.getLiElement(file);
9642
- if (!isNullOrUndefined(liElement)) {
9643
- const spinnerEle = liElement.querySelector('.' + SPINNER_PANE);
9644
- if (!isNullOrUndefined(spinnerEle)) {
9645
- hideSpinner(liElement);
9646
- detach(spinnerEle);
9647
- }
9474
+ const liElement = this.getLiElement(file);
9475
+ if (!isNullOrUndefined(liElement)) {
9476
+ const spinnerEle = liElement.querySelector('.' + SPINNER_PANE);
9477
+ if (!isNullOrUndefined(spinnerEle)) {
9478
+ hideSpinner(liElement);
9479
+ detach(spinnerEle);
9648
9480
  }
9649
9481
  }
9650
9482
  this.trigger('success', args, (args) => {
9651
9483
  this.updateStatus(file, args.statusText, '2');
9652
9484
  this.uploadedFilesData.push(file);
9653
- if (!this.isBlazorSaveUrl) {
9654
- this.trigger('change', { file: this.uploadedFilesData });
9655
- }
9485
+ this.trigger('change', { file: this.uploadedFilesData });
9656
9486
  this.checkActionButtonStatus();
9657
9487
  if (this.fileList.length > 0) {
9658
9488
  if ((!(this.getLiElement(file)).classList.contains(RESTRICT_RETRY))) {
@@ -9895,15 +9725,6 @@ let Uploader = class Uploader extends Component {
9895
9725
  ajax.beforeSend = (e) => {
9896
9726
  eventArgs.currentRequest = ajax.httpRequest;
9897
9727
  eventArgs.currentChunkIndex = metaData.chunkIndex;
9898
- /* istanbul ignore next */
9899
- if (isBlazor()) {
9900
- if (this.currentRequestHeader) {
9901
- this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);
9902
- }
9903
- if (this.customFormDatas) {
9904
- this.updateFormData(formData, this.customFormDatas);
9905
- }
9906
- }
9907
9728
  if (eventArgs.currentChunkIndex === 0) {
9908
9729
  // This event is currently not required but to avoid breaking changes for previous customer, we have included.
9909
9730
  this.trigger('uploading', eventArgs, (eventArgs) => {
@@ -10399,9 +10220,7 @@ let Uploader = class Uploader extends Component {
10399
10220
  destroy() {
10400
10221
  this.element.value = null;
10401
10222
  this.clearTemplate();
10402
- if (!(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
10403
- this.clearAll();
10404
- }
10223
+ this.clearAll();
10405
10224
  this.unWireEvents();
10406
10225
  this.unBindDropEvents();
10407
10226
  if (this.multiple) {
@@ -10416,17 +10235,12 @@ let Uploader = class Uploader extends Component {
10416
10235
  for (const key of attributes$$1) {
10417
10236
  this.element.removeAttribute(key);
10418
10237
  }
10419
- if (!this.isServerBlazor) {
10420
- if (!isNullOrUndefined(this.uploadWrapper)) {
10421
- this.uploadWrapper.parentElement.appendChild(this.element);
10422
- detach(this.uploadWrapper);
10423
- }
10424
- this.uploadWrapper = null;
10425
- super.destroy();
10426
- }
10427
- else {
10428
- this.uploadWrapper = null;
10238
+ if (!isNullOrUndefined(this.uploadWrapper)) {
10239
+ this.uploadWrapper.parentElement.appendChild(this.element);
10240
+ detach(this.uploadWrapper);
10429
10241
  }
10242
+ this.uploadWrapper = null;
10243
+ super.destroy();
10430
10244
  }
10431
10245
  /**
10432
10246
  * Allows you to call the upload process manually by calling save URL action.
@@ -10451,11 +10265,6 @@ let Uploader = class Uploader extends Component {
10451
10265
  };
10452
10266
  this.trigger('beforeUpload', eventArgs, (eventArgs) => {
10453
10267
  if (!eventArgs.cancel) {
10454
- if (isBlazor()) {
10455
- this.currentRequestHeader = eventArgs.currentRequest ? eventArgs.currentRequest : this.currentRequestHeader;
10456
- this.customFormDatas = (eventArgs.customFormData && eventArgs.customFormData.length > 0) ?
10457
- eventArgs.customFormData : this.customFormDatas;
10458
- }
10459
10268
  this.uploadFiles(uploadFiles, custom);
10460
10269
  }
10461
10270
  });
@@ -10537,9 +10346,6 @@ let Uploader = class Uploader extends Component {
10537
10346
  uploadFiles(files, custom) {
10538
10347
  let selectedFiles = [];
10539
10348
  if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {
10540
- if (this.isServerBlazor) {
10541
- this.interopAdaptor.invokeMethodAsync('GetFileDetails', files);
10542
- }
10543
10349
  return;
10544
10350
  }
10545
10351
  if (!custom || isNullOrUndefined(custom)) {
@@ -10556,54 +10362,23 @@ let Uploader = class Uploader extends Component {
10556
10362
  selectedFiles = files;
10557
10363
  }
10558
10364
  for (let i = 0; i < selectedFiles.length; i++) {
10559
- if (this.isServerBlazor && !this.checkChunkUpload()) {
10560
- /* istanbul ignore next */
10561
- if (selectedFiles[i] && selectedFiles[i].rawFile instanceof File) {
10562
- this.getBase64(selectedFiles[i].rawFile).then((data) => {
10563
- this.base64String.push(data);
10564
- this.uploadFilesRequest(selectedFiles, i, custom);
10565
- });
10566
- }
10567
- }
10568
- else {
10569
- this.uploadFilesRequest(selectedFiles, i, custom);
10570
- }
10365
+ this.uploadFilesRequest(selectedFiles, i, custom);
10571
10366
  }
10572
10367
  }
10573
10368
  uploadFilesRequest(selectedFiles, i, custom) {
10574
- const cloneFiles = [];
10575
10369
  const chunkEnabled = this.checkChunkUpload();
10576
10370
  const ajax = new Ajax(this.asyncSettings.saveUrl, 'POST', true, null);
10577
10371
  ajax.emitError = false;
10578
- let getFileData;
10579
- /* istanbul ignore next */
10580
- if (this.isServerBlazor) {
10581
- getFileData = selectedFiles.slice(0);
10582
- cloneFiles.push(getFileData[i].rawFile);
10583
- }
10584
10372
  const eventArgs = {
10585
- fileData: (this.isServerBlazor) ? getFileData[i] : selectedFiles[i],
10373
+ fileData: selectedFiles[i],
10586
10374
  customFormData: [],
10587
10375
  cancel: false
10588
10376
  };
10589
10377
  const formData = new FormData();
10590
10378
  ajax.beforeSend = (e) => {
10591
10379
  eventArgs.currentRequest = ajax.httpRequest;
10592
- /* istanbul ignore next */
10593
- if (isBlazor()) {
10594
- eventArgs.fileData.rawFile = !chunkEnabled ? this.base64String[i] : eventArgs.fileData.rawFile;
10595
- if (this.currentRequestHeader) {
10596
- this.updateCustomheader(ajax.httpRequest, this.currentRequestHeader);
10597
- }
10598
- if (this.customFormDatas) {
10599
- this.updateFormData(formData, this.customFormDatas);
10600
- }
10601
- }
10602
10380
  this.trigger('uploading', eventArgs, (eventArgs) => {
10603
10381
  /* istanbul ignore next */
10604
- if (this.isServerBlazor && !chunkEnabled) {
10605
- selectedFiles[i].rawFile = eventArgs.fileData.rawFile = cloneFiles[i];
10606
- }
10607
10382
  if (eventArgs.cancel) {
10608
10383
  this.eventCancelByArgs(e, eventArgs, selectedFiles[i]);
10609
10384
  }
@@ -10618,7 +10393,7 @@ let Uploader = class Uploader extends Component {
10618
10393
  }
10619
10394
  else {
10620
10395
  ajax.onLoad = (e) => {
10621
- if (eventArgs.cancel && this.isServerBlazor) {
10396
+ if (eventArgs.cancel) {
10622
10397
  return {};
10623
10398
  }
10624
10399
  else {
@@ -10627,7 +10402,7 @@ let Uploader = class Uploader extends Component {
10627
10402
  }
10628
10403
  };
10629
10404
  ajax.onUploadProgress = (e) => {
10630
- if (eventArgs.cancel && this.isServerBlazor) {
10405
+ if (eventArgs.cancel) {
10631
10406
  return {};
10632
10407
  }
10633
10408
  else {
@@ -10688,11 +10463,7 @@ let Uploader = class Uploader extends Component {
10688
10463
  };
10689
10464
  this.trigger('beforeRemove', beforeEventArgs, (beforeEventArgs) => {
10690
10465
  if (!beforeEventArgs.cancel) {
10691
- if (isBlazor()) {
10692
- this.currentRequestHeader = beforeEventArgs.currentRequest;
10693
- this.customFormDatas = beforeEventArgs.customFormData;
10694
- }
10695
- if (this.isFormUpload() && !this.isBlazorSaveUrl) {
10466
+ if (this.isFormUpload()) {
10696
10467
  eventArgs.filesData = fileData;
10697
10468
  this.trigger('removing', eventArgs, (eventArgs) => {
10698
10469
  if (!eventArgs.cancel) {
@@ -10718,8 +10489,7 @@ let Uploader = class Uploader extends Component {
10718
10489
  }
10719
10490
  });
10720
10491
  }
10721
- else if (this.isForm && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === '')
10722
- && !this.isBlazorSaveUrl) {
10492
+ else if (this.isForm && (isNullOrUndefined(this.asyncSettings.removeUrl) || this.asyncSettings.removeUrl === '')) {
10723
10493
  eventArgs.filesData = this.getFilesData();
10724
10494
  this.trigger('removing', eventArgs, (eventArgs) => {
10725
10495
  if (!eventArgs.cancel) {
@@ -10772,7 +10542,7 @@ let Uploader = class Uploader extends Component {
10772
10542
  * @returns {void}
10773
10543
  */
10774
10544
  clearAll() {
10775
- if (isNullOrUndefined(this.listParent) && !(this.isBlazorSaveUrl || this.isBlazorTemplate)) {
10545
+ if (isNullOrUndefined(this.listParent)) {
10776
10546
  if (this.browserName !== 'msie') {
10777
10547
  this.element.value = '';
10778
10548
  }
@@ -10799,19 +10569,11 @@ let Uploader = class Uploader extends Component {
10799
10569
  * @returns {FileInfo[]}
10800
10570
  */
10801
10571
  getFilesData(index) {
10802
- if (!this.isServerBlazor) {
10803
- if (isNullOrUndefined(index)) {
10804
- return this.filesData;
10805
- }
10806
- else {
10807
- return this.getSelectedFiles(index);
10808
- }
10572
+ if (isNullOrUndefined(index)) {
10573
+ return this.filesData;
10809
10574
  }
10810
10575
  else {
10811
- for (let i = 0; i < this.filesData.length; i++) {
10812
- this.filesData[i].rawFile = this.base64String[i];
10813
- }
10814
- return this.filesData;
10576
+ return this.getSelectedFiles(index);
10815
10577
  }
10816
10578
  }
10817
10579
  /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
@@ -13064,72 +12826,70 @@ let TextBox = class TextBox extends Component {
13064
12826
  return (!str || /^\s*$/.test(str));
13065
12827
  }
13066
12828
  preRender() {
13067
- if (!(isBlazor() && this.isServerRendered)) {
13068
- this.cloneElement = this.element.cloneNode(true);
13069
- this.formElement = closest(this.element, 'form');
13070
- if (!isNullOrUndefined(this.formElement)) {
13071
- this.isForm = true;
13072
- }
13073
- /* istanbul ignore next */
13074
- if (this.element.tagName === 'EJS-TEXTBOX') {
13075
- const ejInstance = getValue('ej2_instances', this.element);
13076
- const inputElement = this.multiline ?
13077
- this.createElement('textarea') :
13078
- this.createElement('input');
13079
- let index = 0;
13080
- for (index; index < this.element.attributes.length; index++) {
13081
- const attributeName = this.element.attributes[index].nodeName;
13082
- if (attributeName !== 'id') {
13083
- inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);
13084
- inputElement.innerHTML = this.element.innerHTML;
13085
- if (attributeName === 'name') {
13086
- this.element.removeAttribute('name');
13087
- }
12829
+ this.cloneElement = this.element.cloneNode(true);
12830
+ this.formElement = closest(this.element, 'form');
12831
+ if (!isNullOrUndefined(this.formElement)) {
12832
+ this.isForm = true;
12833
+ }
12834
+ /* istanbul ignore next */
12835
+ if (this.element.tagName === 'EJS-TEXTBOX') {
12836
+ const ejInstance = getValue('ej2_instances', this.element);
12837
+ const inputElement = this.multiline ?
12838
+ this.createElement('textarea') :
12839
+ this.createElement('input');
12840
+ let index = 0;
12841
+ for (index; index < this.element.attributes.length; index++) {
12842
+ const attributeName = this.element.attributes[index].nodeName;
12843
+ if (attributeName !== 'id') {
12844
+ inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);
12845
+ inputElement.innerHTML = this.element.innerHTML;
12846
+ if (attributeName === 'name') {
12847
+ this.element.removeAttribute('name');
13088
12848
  }
13089
12849
  }
13090
- this.element.appendChild(inputElement);
13091
- this.element = inputElement;
13092
- setValue('ej2_instances', ejInstance, this.element);
13093
- }
13094
- this.updateHTMLAttrToElement();
13095
- this.checkAttributes(false);
13096
- if (this.element.tagName !== 'TEXTAREA') {
13097
- this.element.setAttribute('type', this.type);
13098
- }
13099
- this.element.setAttribute('role', 'textbox');
13100
- this.globalize = new Internationalization(this.locale);
13101
- const localeText = { placeholder: this.placeholder };
13102
- this.l10n = new L10n('textbox', localeText, this.locale);
13103
- if (this.l10n.getConstant('placeholder') !== '') {
13104
- this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
13105
- }
13106
- if (!this.element.hasAttribute('id')) {
13107
- this.element.setAttribute('id', getUniqueID('textbox'));
13108
12850
  }
13109
- if (!this.element.hasAttribute('name')) {
13110
- this.element.setAttribute('name', this.element.getAttribute('id'));
13111
- }
13112
- if (this.element.tagName === 'INPUT' && this.multiline) {
13113
- this.isHiddenInput = true;
13114
- this.textarea = this.createElement('textarea');
13115
- this.element.parentNode.insertBefore(this.textarea, this.element);
13116
- this.element.setAttribute('type', 'hidden');
13117
- this.textarea.setAttribute('name', this.element.getAttribute('name'));
13118
- this.element.removeAttribute('name');
13119
- this.textarea.setAttribute('role', this.element.getAttribute('role'));
13120
- this.element.removeAttribute('role');
13121
- this.textarea.setAttribute('id', getUniqueID('textarea'));
13122
- const apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];
13123
- for (let index = 0; index < this.element.attributes.length; index++) {
13124
- const attributeName = this.element.attributes[index].nodeName;
13125
- if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&
13126
- !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {
13127
- // e-mappinguid attribute is handled for Grid component.
13128
- this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);
13129
- if (apiAttributes.indexOf(attributeName) < 0) {
13130
- this.element.removeAttribute(attributeName);
13131
- index--;
13132
- }
12851
+ this.element.appendChild(inputElement);
12852
+ this.element = inputElement;
12853
+ setValue('ej2_instances', ejInstance, this.element);
12854
+ }
12855
+ this.updateHTMLAttrToElement();
12856
+ this.checkAttributes(false);
12857
+ if (this.element.tagName !== 'TEXTAREA') {
12858
+ this.element.setAttribute('type', this.type);
12859
+ }
12860
+ this.element.setAttribute('role', 'textbox');
12861
+ this.globalize = new Internationalization(this.locale);
12862
+ const localeText = { placeholder: this.placeholder };
12863
+ this.l10n = new L10n('textbox', localeText, this.locale);
12864
+ if (this.l10n.getConstant('placeholder') !== '') {
12865
+ this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
12866
+ }
12867
+ if (!this.element.hasAttribute('id')) {
12868
+ this.element.setAttribute('id', getUniqueID('textbox'));
12869
+ }
12870
+ if (!this.element.hasAttribute('name')) {
12871
+ this.element.setAttribute('name', this.element.getAttribute('id'));
12872
+ }
12873
+ if (this.element.tagName === 'INPUT' && this.multiline) {
12874
+ this.isHiddenInput = true;
12875
+ this.textarea = this.createElement('textarea');
12876
+ this.element.parentNode.insertBefore(this.textarea, this.element);
12877
+ this.element.setAttribute('type', 'hidden');
12878
+ this.textarea.setAttribute('name', this.element.getAttribute('name'));
12879
+ this.element.removeAttribute('name');
12880
+ this.textarea.setAttribute('role', this.element.getAttribute('role'));
12881
+ this.element.removeAttribute('role');
12882
+ this.textarea.setAttribute('id', getUniqueID('textarea'));
12883
+ const apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];
12884
+ for (let index = 0; index < this.element.attributes.length; index++) {
12885
+ const attributeName = this.element.attributes[index].nodeName;
12886
+ if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&
12887
+ !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {
12888
+ // e-mappinguid attribute is handled for Grid component.
12889
+ this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);
12890
+ if (apiAttributes.indexOf(attributeName) < 0) {
12891
+ this.element.removeAttribute(attributeName);
12892
+ index--;
13133
12893
  }
13134
12894
  }
13135
12895
  }
@@ -13191,37 +12951,22 @@ let TextBox = class TextBox extends Component {
13191
12951
  if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
13192
12952
  updatedCssClassValue = this.getInputValidClassList(this.cssClass);
13193
12953
  }
13194
- if (!(isBlazor() && this.isServerRendered)) {
13195
- this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;
13196
- this.textboxWrapper = Input.createInput({
13197
- element: this.respectiveElement,
13198
- floatLabelType: this.floatLabelType,
13199
- properties: {
13200
- enabled: this.enabled,
13201
- enableRtl: this.enableRtl,
13202
- cssClass: updatedCssClassValue,
13203
- readonly: this.readonly,
13204
- placeholder: this.placeholder,
13205
- showClearButton: this.showClearButton
13206
- }
13207
- });
13208
- this.updateHTMLAttrToWrapper();
13209
- if (this.isHiddenInput) {
13210
- this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
13211
- }
13212
- }
13213
- else {
13214
- this.respectiveElement = this.element;
13215
- this.textboxWrapper = { container: this.element.parentElement };
13216
- if (this.showClearButton && !this.multiline) {
13217
- this.textboxWrapper.clearButton = this.textboxWrapper.container.querySelector('.e-clear-icon');
13218
- Input.wireClearBtnEvents(this.respectiveElement, this.textboxWrapper.clearButton, this.textboxWrapper.container);
13219
- }
13220
- if (this.floatLabelType === 'Auto') {
13221
- Input.wireFloatingEvents(this.respectiveElement);
12954
+ this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;
12955
+ this.textboxWrapper = Input.createInput({
12956
+ element: this.respectiveElement,
12957
+ floatLabelType: this.floatLabelType,
12958
+ properties: {
12959
+ enabled: this.enabled,
12960
+ enableRtl: this.enableRtl,
12961
+ cssClass: updatedCssClassValue,
12962
+ readonly: this.readonly,
12963
+ placeholder: this.placeholder,
12964
+ showClearButton: this.showClearButton
13222
12965
  }
13223
- // eslint-disable-next-line max-len, @typescript-eslint/no-explicit-any
13224
- Input.bindInitialEvent({ element: this.respectiveElement, buttons: null, customTag: null, floatLabelType: this.floatLabelType, properties: this.properties });
12966
+ });
12967
+ this.updateHTMLAttrToWrapper();
12968
+ if (this.isHiddenInput) {
12969
+ this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
13225
12970
  }
13226
12971
  this.wireEvents();
13227
12972
  if (!isNullOrUndefined(this.value)) {
@@ -13456,25 +13201,20 @@ let TextBox = class TextBox extends Component {
13456
13201
  */
13457
13202
  destroy() {
13458
13203
  this.unWireEvents();
13459
- if (!(isBlazor() && this.isServerRendered)) {
13460
- if (this.element.tagName === 'INPUT' && this.multiline) {
13461
- detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
13462
- this.respectiveElement = this.element;
13463
- this.element.removeAttribute('type');
13464
- }
13465
- this.respectiveElement.value = this.respectiveElement.defaultValue;
13466
- this.respectiveElement.classList.remove('e-input');
13467
- this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
13468
- if (!isNullOrUndefined(this.textboxWrapper)) {
13469
- this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);
13470
- detach(this.textboxWrapper.container);
13471
- }
13472
- this.textboxWrapper = null;
13473
- super.destroy();
13204
+ if (this.element.tagName === 'INPUT' && this.multiline) {
13205
+ detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
13206
+ this.respectiveElement = this.element;
13207
+ this.element.removeAttribute('type');
13474
13208
  }
13475
- else {
13476
- this.textboxWrapper = null;
13209
+ this.respectiveElement.value = this.respectiveElement.defaultValue;
13210
+ this.respectiveElement.classList.remove('e-input');
13211
+ this.removeAttributes(['aria-placeholder', 'aria-disabled', 'aria-readonly', 'aria-labelledby']);
13212
+ if (!isNullOrUndefined(this.textboxWrapper)) {
13213
+ this.textboxWrapper.container.insertAdjacentElement('afterend', this.respectiveElement);
13214
+ detach(this.textboxWrapper.container);
13477
13215
  }
13216
+ this.textboxWrapper = null;
13217
+ super.destroy();
13478
13218
  }
13479
13219
  /**
13480
13220
  * Adding the icons to the TextBox component.