@syncfusion/ej2-inputs 19.4.52 → 20.1.55

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 (155) hide show
  1. package/CHANGELOG.md +0 -16
  2. package/README.md +15 -2
  3. package/dist/ej2-inputs.umd.min.js +2 -2
  4. package/dist/ej2-inputs.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-inputs.es2015.js +49 -46
  6. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  7. package/dist/es6/ej2-inputs.es5.js +50 -47
  8. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  9. package/dist/global/ej2-inputs.min.js +2 -2
  10. package/dist/global/ej2-inputs.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +9 -9
  13. package/src/color-picker/color-picker.js +1 -1
  14. package/src/common/signature-base.d.ts +7 -49
  15. package/src/common/signature-base.js +21 -33
  16. package/src/slider/slider.d.ts +1 -0
  17. package/src/slider/slider.js +5 -2
  18. package/src/textbox/textbox-model.d.ts +1 -1
  19. package/src/textbox/textbox.js +8 -1
  20. package/src/uploader/uploader.js +16 -11
  21. package/styles/bootstrap-dark.css +10 -12
  22. package/styles/bootstrap.css +10 -12
  23. package/styles/bootstrap4.css +9 -14
  24. package/styles/bootstrap5-dark.css +118 -57
  25. package/styles/bootstrap5.css +118 -57
  26. package/styles/color-picker/_bootstrap5-definition.scss +10 -10
  27. package/styles/color-picker/_fluent-dark-definition.scss +1 -0
  28. package/styles/color-picker/_fluent-definition.scss +18 -18
  29. package/styles/color-picker/_layout.scss +33 -5
  30. package/styles/color-picker/_tailwind-definition.scss +4 -3
  31. package/styles/color-picker/_theme.scss +1 -1
  32. package/styles/color-picker/bootstrap5-dark.css +26 -20
  33. package/styles/color-picker/bootstrap5.css +26 -20
  34. package/styles/color-picker/fluent-dark.css +902 -0
  35. package/styles/color-picker/fluent-dark.scss +11 -0
  36. package/styles/color-picker/fluent.css +902 -0
  37. package/styles/color-picker/fluent.scss +11 -0
  38. package/styles/color-picker/icons/_fluent-dark.scss +1 -0
  39. package/styles/color-picker/icons/_fluent.scss +1 -1
  40. package/styles/color-picker/icons/_tailwind-dark.scss +3 -2
  41. package/styles/color-picker/icons/_tailwind.scss +3 -2
  42. package/styles/color-picker/tailwind-dark.css +10 -6
  43. package/styles/color-picker/tailwind.css +10 -6
  44. package/styles/fabric-dark.css +8 -11
  45. package/styles/fabric.css +8 -11
  46. package/styles/fluent-dark.css +7366 -0
  47. package/styles/fluent-dark.scss +8 -0
  48. package/styles/fluent.css +7366 -0
  49. package/styles/fluent.scss +8 -0
  50. package/styles/highcontrast-light.css +8 -11
  51. package/styles/highcontrast.css +8 -11
  52. package/styles/input/_bootstrap-dark-definition.scss +1 -0
  53. package/styles/input/_bootstrap-definition.scss +1 -0
  54. package/styles/input/_bootstrap4-definition.scss +1 -0
  55. package/styles/input/_bootstrap5-definition.scss +23 -22
  56. package/styles/input/_fabric-dark-definition.scss +3 -1
  57. package/styles/input/_fabric-definition.scss +2 -1
  58. package/styles/input/_fluent-dark-definition.scss +1 -0
  59. package/styles/input/_fluent-definition.scss +8 -6
  60. package/styles/input/_highcontrast-definition.scss +2 -1
  61. package/styles/input/_highcontrast-light-definition.scss +2 -1
  62. package/styles/input/_layout.scss +186 -22
  63. package/styles/input/_material-dark-definition.scss +1 -0
  64. package/styles/input/_material-definition.scss +2 -1
  65. package/styles/input/_tailwind-definition.scss +18 -17
  66. package/styles/input/_theme.scss +9 -2
  67. package/styles/input/bootstrap-dark.css +8 -8
  68. package/styles/input/bootstrap.css +8 -8
  69. package/styles/input/bootstrap4.css +8 -8
  70. package/styles/input/bootstrap5-dark.css +86 -29
  71. package/styles/input/bootstrap5.css +86 -29
  72. package/styles/input/fabric-dark.css +7 -7
  73. package/styles/input/fabric.css +7 -7
  74. package/styles/input/fluent-dark.css +4595 -0
  75. package/styles/input/fluent-dark.scss +4 -0
  76. package/styles/input/fluent.css +4595 -0
  77. package/styles/input/fluent.scss +4 -0
  78. package/styles/input/highcontrast-light.css +7 -7
  79. package/styles/input/highcontrast.css +7 -7
  80. package/styles/input/icons/_fluent-dark.scss +1 -0
  81. package/styles/input/icons/_fluent.scss +2 -2
  82. package/styles/input/icons/_tailwind.scss +2 -2
  83. package/styles/input/material-dark.css +90 -7
  84. package/styles/input/material.css +90 -7
  85. package/styles/input/tailwind-dark.css +96 -40
  86. package/styles/input/tailwind.css +96 -40
  87. package/styles/maskedtextbox/_fluent-dark-definition.scss +1 -0
  88. package/styles/maskedtextbox/fluent-dark.css +26 -0
  89. package/styles/maskedtextbox/fluent-dark.scss +4 -0
  90. package/styles/maskedtextbox/fluent.css +26 -0
  91. package/styles/maskedtextbox/fluent.scss +4 -0
  92. package/styles/material-dark.css +91 -11
  93. package/styles/material.css +91 -11
  94. package/styles/numerictextbox/_fluent-dark-definition.scss +1 -0
  95. package/styles/numerictextbox/fluent-dark.css +60 -0
  96. package/styles/numerictextbox/fluent-dark.scss +5 -0
  97. package/styles/numerictextbox/fluent.css +60 -0
  98. package/styles/numerictextbox/fluent.scss +5 -0
  99. package/styles/numerictextbox/icons/_fluent-dark.scss +1 -0
  100. package/styles/numerictextbox/icons/_fluent.scss +3 -3
  101. package/styles/numerictextbox/icons/_tailwind.scss +2 -2
  102. package/styles/numerictextbox/tailwind-dark.css +2 -2
  103. package/styles/numerictextbox/tailwind.css +2 -2
  104. package/styles/signature/_fluent-dark-definition.scss +1 -0
  105. package/styles/signature/fluent-dark.css +9 -0
  106. package/styles/signature/fluent-dark.scss +3 -0
  107. package/styles/signature/fluent.css +9 -0
  108. package/styles/signature/fluent.scss +3 -0
  109. package/styles/slider/_fluent-dark-definition.scss +1 -0
  110. package/styles/slider/_fluent-definition.scss +46 -66
  111. package/styles/slider/_layout.scss +152 -51
  112. package/styles/slider/_tailwind-definition.scss +1 -1
  113. package/styles/slider/_theme.scss +14 -8
  114. package/styles/slider/bootstrap-dark.css +1 -0
  115. package/styles/slider/bootstrap.css +1 -0
  116. package/styles/slider/bootstrap4.css +0 -2
  117. package/styles/slider/bootstrap5-dark.css +5 -4
  118. package/styles/slider/bootstrap5.css +5 -4
  119. package/styles/slider/fluent-dark.css +632 -0
  120. package/styles/slider/fluent-dark.scss +5 -0
  121. package/styles/slider/fluent.css +632 -0
  122. package/styles/slider/fluent.scss +5 -0
  123. package/styles/slider/tailwind-dark.css +9 -5
  124. package/styles/slider/tailwind.css +9 -5
  125. package/styles/tailwind-dark.css +178 -92
  126. package/styles/tailwind.css +178 -92
  127. package/styles/textbox/_fluent-dark-definition.scss +1 -0
  128. package/styles/textbox/fluent-dark.css +0 -0
  129. package/styles/textbox/fluent-dark.scss +4 -0
  130. package/styles/textbox/fluent.css +0 -0
  131. package/styles/textbox/fluent.scss +4 -0
  132. package/styles/uploader/_fluent-dark-definition.scss +1 -0
  133. package/styles/uploader/_layout.scss +11 -0
  134. package/styles/uploader/_tailwind-definition.scss +29 -14
  135. package/styles/uploader/_theme.scss +25 -2
  136. package/styles/uploader/bootstrap-dark.css +1 -4
  137. package/styles/uploader/bootstrap.css +1 -4
  138. package/styles/uploader/bootstrap4.css +1 -4
  139. package/styles/uploader/bootstrap5-dark.css +1 -4
  140. package/styles/uploader/bootstrap5.css +1 -4
  141. package/styles/uploader/fabric-dark.css +1 -4
  142. package/styles/uploader/fabric.css +1 -4
  143. package/styles/uploader/fluent-dark.css +1137 -0
  144. package/styles/uploader/fluent-dark.scss +6 -0
  145. package/styles/uploader/fluent.css +1137 -0
  146. package/styles/uploader/fluent.scss +6 -0
  147. package/styles/uploader/highcontrast-light.css +1 -4
  148. package/styles/uploader/highcontrast.css +1 -4
  149. package/styles/uploader/icons/_fluent-dark.scss +1 -0
  150. package/styles/uploader/icons/_fluent.scss +7 -7
  151. package/styles/uploader/icons/_tailwind.scss +7 -8
  152. package/styles/uploader/material-dark.css +1 -4
  153. package/styles/uploader/material.css +1 -4
  154. package/styles/uploader/tailwind-dark.css +61 -39
  155. package/styles/uploader/tailwind.css +61 -39
@@ -4270,6 +4270,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
4270
4270
  this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
4271
4271
  this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
4272
4272
  this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
4273
+ this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
4273
4274
  this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;
4274
4275
  };
4275
4276
  Slider.prototype.createRangeBar = function () {
@@ -4418,7 +4419,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
4418
4419
  Slider.prototype.transitionEnd = function (e) {
4419
4420
  if (e.propertyName !== 'transform') {
4420
4421
  this.handleStart();
4421
- this.getHandle().style.transition = 'none';
4422
+ if (!this.enableAnimation) {
4423
+ this.getHandle().style.transition = 'none';
4424
+ }
4422
4425
  if (this.type !== 'Default') {
4423
4426
  this.rangeBar.style.transition = 'none';
4424
4427
  }
@@ -4762,7 +4765,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
4762
4765
  };
4763
4766
  Slider.prototype.renderTooltip = function () {
4764
4767
  this.tooltipObj = new Tooltip({
4765
- showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5,
4768
+ showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,
4766
4769
  cssClass: classNames.sliderTooltip,
4767
4770
  height: this.isMaterial ? 30 : 'auto',
4768
4771
  animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
@@ -9203,16 +9206,18 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
9203
9206
  fileList.classList.add(INVALID_FILE);
9204
9207
  };
9205
9208
  Uploader.prototype.createFormInput = function (fileData) {
9206
- var inputElement = this.element.cloneNode(true);
9207
- inputElement.classList.add(HIDDEN_INPUT);
9208
- for (var _i = 0, fileData_3 = fileData; _i < fileData_3.length; _i++) {
9209
- var listItem = fileData_3[_i];
9210
- listItem.input = inputElement;
9211
- }
9212
- inputElement.setAttribute('name', this.uploaderName);
9213
- this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);
9214
- if (this.browserName !== 'msie' && this.browserName !== 'edge') {
9215
- this.element.value = '';
9209
+ if (this.browserName !== 'safari') {
9210
+ var inputElement = this.element.cloneNode(true);
9211
+ inputElement.classList.add(HIDDEN_INPUT);
9212
+ for (var _i = 0, fileData_3 = fileData; _i < fileData_3.length; _i++) {
9213
+ var listItem = fileData_3[_i];
9214
+ listItem.input = inputElement;
9215
+ }
9216
+ inputElement.setAttribute('name', this.uploaderName);
9217
+ this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);
9218
+ if (this.browserName !== 'msie' && this.browserName !== 'edge') {
9219
+ this.element.value = '';
9220
+ }
9216
9221
  }
9217
9222
  };
9218
9223
  Uploader.prototype.getFileSize = function (fileData) {
@@ -9606,7 +9611,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
9606
9611
  };
9607
9612
  Uploader.prototype.removecanceledFile = function (e, file) {
9608
9613
  var liElement = this.getLiElement(file);
9609
- if (liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
9614
+ if (isNullOrUndefined(liElement) || liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
9610
9615
  return;
9611
9616
  }
9612
9617
  this.updateStatus(file, this.localizedTexts('fileUploadCancel'), '5');
@@ -9843,6 +9848,9 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
9843
9848
  if (selectAll(uploadTemplate, document).length) {
9844
9849
  return compile(select(uploadTemplate, document).innerHTML.trim());
9845
9850
  }
9851
+ else {
9852
+ return compile(uploadTemplate);
9853
+ }
9846
9854
  }
9847
9855
  catch (exception) {
9848
9856
  return compile(uploadTemplate);
@@ -11412,7 +11420,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
11412
11420
  }
11413
11421
  roundedColor = this.roundValue(colors[i]).toLowerCase();
11414
11422
  tile = this.createElement('span', {
11415
- className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }
11423
+ className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false', 'tabindex': '0' }
11416
11424
  });
11417
11425
  this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });
11418
11426
  row.appendChild(tile);
@@ -13168,6 +13176,9 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
13168
13176
  }
13169
13177
  this.updateHTMLAttrToElement();
13170
13178
  this.checkAttributes(false);
13179
+ if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {
13180
+ this.setProperties({ value: this.element.value }, true);
13181
+ }
13171
13182
  if (this.element.tagName !== 'TEXTAREA') {
13172
13183
  this.element.setAttribute('type', this.type);
13173
13184
  }
@@ -13465,6 +13476,10 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
13465
13476
  this.preventChange = false;
13466
13477
  this.trigger('change', eventArgs);
13467
13478
  this.previousValue = this.value;
13479
+ //EJ2CORE-738:For this task we update the textarea value to the input when input tag with multiline is present
13480
+ if (this.element.tagName === 'INPUT' && this.multiline && Browser.info.name === 'mozilla') {
13481
+ this.element.value = this.respectiveElement.value;
13482
+ }
13468
13483
  };
13469
13484
  TextBox.prototype.bindClearEvent = function () {
13470
13485
  if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {
@@ -13736,6 +13751,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
13736
13751
  _this.backgroundLoaded = null;
13737
13752
  _this.clearArray = [];
13738
13753
  _this.isBlazor = false;
13754
+ _this.isResponsive = false;
13739
13755
  return _this;
13740
13756
  }
13741
13757
  /**
@@ -13743,47 +13759,29 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
13743
13759
  *
13744
13760
  * @private
13745
13761
  * @param {HTMLCanvasElement} element - Specifies the canvas element.
13746
- * @param {parameter} parameter - Specifies only for the blazor parameter.
13747
13762
  * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
13748
13763
  * @returns {void}
13749
13764
  */
13750
- SignatureBase.prototype.initialize = function (element, parameter, dotnetRef) {
13765
+ SignatureBase.prototype.initialize = function (element, dotnetRef) {
13751
13766
  this.element = element;
13752
13767
  this.canvasContext = this.element.getContext('2d');
13753
13768
  this.canvasContext.canvas.tabIndex = 0;
13754
- if (parameter) {
13755
- this.setBlazorParameter(parameter);
13769
+ if (dotnetRef) {
13756
13770
  this.dotnetRef = dotnetRef;
13771
+ this.isBlazor = true;
13772
+ if (this.signatureValue) {
13773
+ this.loadPersistedSignature();
13774
+ }
13757
13775
  }
13758
13776
  this.setHTMLProperties();
13759
13777
  if (isNullOrUndefined(this.signatureValue)) {
13760
13778
  this.updateSnapCollection(true);
13761
13779
  }
13762
13780
  this.wireEvents();
13763
- this.isSignatureEmpty = true;
13764
13781
  if (!this.isBlazor) {
13765
13782
  this.trigger('created', null);
13766
13783
  }
13767
13784
  };
13768
- SignatureBase.prototype.setBlazorParameter = function (parameter) {
13769
- this.isBlazor = true;
13770
- this.backgroundColor = parameter.backgroundColor;
13771
- this.backgroundImage = parameter.backgroundImage;
13772
- this.disabled = parameter.disabled;
13773
- this.isReadOnly = parameter.isReadOnly;
13774
- this.maxStrokeWidth = parameter.maxStrokeWidth || 2;
13775
- this.minStrokeWidth = parameter.minStrokeWidth || 0.5;
13776
- this.velocity = parameter.velocity || 0.7;
13777
- this.strokeColor = parameter.strokeColor || '#000000';
13778
- this.saveWithBackground = parameter.saveWithBackground;
13779
- this.interval = 30;
13780
- this.previous = 0;
13781
- this.minDistance = 5;
13782
- this.signatureValue = parameter.signatureValue;
13783
- if (this.signatureValue) {
13784
- this.loadPersistedSignature();
13785
- }
13786
- };
13787
13785
  SignatureBase.prototype.wireEvents = function () {
13788
13786
  if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
13789
13787
  EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
@@ -13804,24 +13802,21 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
13804
13802
  }
13805
13803
  else {
13806
13804
  EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
13807
- EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
13808
- EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
13809
- EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
13810
13805
  EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
13811
13806
  window.removeEventListener('resize', this.resizeHandler);
13812
13807
  }
13813
13808
  };
13814
13809
  SignatureBase.prototype.setHTMLProperties = function () {
13815
- if (this.element.height === 150) {
13810
+ if (this.element.height === 150 && this.element.width === 300) {
13816
13811
  this.element.height = this.element.offsetHeight;
13817
- }
13818
- if (this.element.width === 300) {
13819
13812
  this.element.width = this.element.offsetWidth;
13813
+ this.isResponsive = true;
13820
13814
  }
13821
13815
  this.canvasContext.scale(1, 1);
13822
13816
  this.canvasContext.fillStyle = this.strokeColor;
13823
13817
  if (this.backgroundImage) {
13824
13818
  this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
13819
+ this.canvasContext.canvas.style.backgroundRepeat = "no-repeat";
13825
13820
  }
13826
13821
  else if (this.backgroundColor) {
13827
13822
  this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
@@ -13900,9 +13895,11 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
13900
13895
  SignatureBase.prototype.resizeHandler = function () {
13901
13896
  // eslint-disable-next-line @typescript-eslint/no-this-alias
13902
13897
  var proxy = this;
13903
- this.canvasContext.canvas.width = this.element.offsetWidth;
13904
- this.canvasContext.canvas.height = this.element.offsetHeight;
13905
- this.canvasContext.scale(1, 1);
13898
+ if (this.isResponsive) {
13899
+ this.canvasContext.canvas.width = this.element.offsetWidth;
13900
+ this.canvasContext.canvas.height = this.element.offsetHeight;
13901
+ this.canvasContext.scale(1, 1);
13902
+ }
13906
13903
  var restoreImg = new Image();
13907
13904
  restoreImg.src = this.snapColl[this.incStep];
13908
13905
  restoreImg.onload = function () {
@@ -14390,6 +14387,9 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
14390
14387
  var proxy = this;
14391
14388
  var bitmapImage = new Image();
14392
14389
  bitmapImage.src = signature;
14390
+ if (signature.slice(0, 4) !== 'data') {
14391
+ bitmapImage.crossOrigin = 'anonymous';
14392
+ }
14393
14393
  bitmapImage.onload = function () {
14394
14394
  Promise.all([
14395
14395
  createImageBitmap(bitmapImage, 0, 0, width, height)
@@ -14398,6 +14398,9 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
14398
14398
  tempCanvas.width = width;
14399
14399
  tempCanvas.height = height;
14400
14400
  tempCanvas.getContext('2d').drawImage(results[0], 0, 0);
14401
+ if (signature.slice(0, 4) !== 'data') {
14402
+ proxy.canvasContext.globalCompositeOperation = 'source-over';
14403
+ }
14401
14404
  proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);
14402
14405
  proxy.updateSnapCollection();
14403
14406
  });