@syncfusion/ej2-inputs 19.3.48 → 19.4.41

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 (153) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +1 -1
  3. package/common.d.ts +4 -0
  4. package/common.js +4 -0
  5. package/dist/ej2-inputs.umd.min.js +2 -2
  6. package/dist/ej2-inputs.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-inputs.es2015.js +1115 -8
  8. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  9. package/dist/es6/ej2-inputs.es5.js +1149 -7
  10. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  11. package/dist/global/ej2-inputs.min.js +2 -2
  12. package/dist/global/ej2-inputs.min.js.map +1 -1
  13. package/dist/global/index.d.ts +1 -1
  14. package/package.json +9 -9
  15. package/signature.d.ts +4 -0
  16. package/signature.js +4 -0
  17. package/src/common/index.d.ts +4 -0
  18. package/src/common/index.js +4 -0
  19. package/src/common/signature-base.d.ts +320 -0
  20. package/src/common/signature-base.js +946 -0
  21. package/src/index.d.ts +2 -0
  22. package/src/index.js +2 -0
  23. package/src/input/input.js +10 -6
  24. package/src/numerictextbox/numerictextbox.js +9 -0
  25. package/src/signature/index.d.ts +5 -0
  26. package/src/signature/index.js +4 -0
  27. package/src/signature/signature-model.d.ts +131 -0
  28. package/src/signature/signature.d.ts +167 -0
  29. package/src/signature/signature.js +171 -0
  30. package/src/slider/slider.d.ts +1 -0
  31. package/src/slider/slider.js +9 -0
  32. package/styles/bootstrap-dark.css +43 -16
  33. package/styles/bootstrap-dark.scss +1 -0
  34. package/styles/bootstrap.css +43 -16
  35. package/styles/bootstrap.scss +1 -0
  36. package/styles/bootstrap4.css +43 -16
  37. package/styles/bootstrap4.scss +1 -0
  38. package/styles/bootstrap5-dark.css +46 -41
  39. package/styles/bootstrap5-dark.scss +1 -0
  40. package/styles/bootstrap5.css +46 -41
  41. package/styles/bootstrap5.scss +1 -0
  42. package/styles/color-picker/_fabric-dark-definition.scss +1 -1
  43. package/styles/color-picker/_fluent-definition.scss +134 -0
  44. package/styles/color-picker/_layout.scss +5 -5
  45. package/styles/color-picker/_theme.scss +16 -15
  46. package/styles/color-picker/bootstrap-dark.css +20 -0
  47. package/styles/color-picker/bootstrap.css +20 -0
  48. package/styles/color-picker/bootstrap4.css +20 -0
  49. package/styles/color-picker/bootstrap5-dark.css +22 -20
  50. package/styles/color-picker/bootstrap5.css +22 -20
  51. package/styles/color-picker/fabric-dark.css +23 -3
  52. package/styles/color-picker/fabric.css +20 -0
  53. package/styles/color-picker/highcontrast-light.css +20 -0
  54. package/styles/color-picker/highcontrast.css +20 -0
  55. package/styles/color-picker/icons/_fluent.scss +10 -0
  56. package/styles/color-picker/material-dark.css +20 -0
  57. package/styles/color-picker/material.css +20 -0
  58. package/styles/color-picker/tailwind-dark.css +20 -0
  59. package/styles/color-picker/tailwind.css +20 -0
  60. package/styles/fabric-dark.css +46 -19
  61. package/styles/fabric-dark.scss +1 -0
  62. package/styles/fabric.css +43 -16
  63. package/styles/fabric.scss +1 -0
  64. package/styles/highcontrast-light.css +43 -16
  65. package/styles/highcontrast-light.scss +1 -0
  66. package/styles/highcontrast.css +43 -16
  67. package/styles/highcontrast.scss +1 -0
  68. package/styles/input/_fluent-definition.scss +321 -0
  69. package/styles/input/_layout.scss +138 -37
  70. package/styles/input/_theme.scss +42 -24
  71. package/styles/input/bootstrap-dark.css +13 -16
  72. package/styles/input/bootstrap.css +13 -16
  73. package/styles/input/bootstrap4.css +13 -16
  74. package/styles/input/bootstrap5-dark.css +13 -16
  75. package/styles/input/bootstrap5.css +13 -16
  76. package/styles/input/fabric-dark.css +13 -16
  77. package/styles/input/fabric.css +13 -16
  78. package/styles/input/highcontrast-light.css +13 -16
  79. package/styles/input/highcontrast.css +13 -16
  80. package/styles/input/icons/_fluent.scss +17 -0
  81. package/styles/input/material-dark.css +13 -16
  82. package/styles/input/material.css +13 -16
  83. package/styles/input/tailwind-dark.css +13 -16
  84. package/styles/input/tailwind.css +13 -16
  85. package/styles/maskedtextbox/_fluent-definition.scss +7 -0
  86. package/styles/maskedtextbox/_theme.scss +2 -2
  87. package/styles/material-dark.css +43 -16
  88. package/styles/material-dark.scss +1 -0
  89. package/styles/material.css +43 -16
  90. package/styles/material.scss +1 -0
  91. package/styles/numerictextbox/_fluent-definition.scss +5 -0
  92. package/styles/numerictextbox/_theme.scss +18 -0
  93. package/styles/numerictextbox/icons/_fluent.scss +12 -0
  94. package/styles/signature/_all.scss +2 -0
  95. package/styles/signature/_bootstrap-dark-definition.scss +3 -0
  96. package/styles/signature/_bootstrap-definition.scss +3 -0
  97. package/styles/signature/_bootstrap4-definition.scss +3 -0
  98. package/styles/signature/_bootstrap5-dark-definition.scss +1 -0
  99. package/styles/signature/_bootstrap5-definition.scss +3 -0
  100. package/styles/signature/_fabric-dark-definition.scss +3 -0
  101. package/styles/signature/_fabric-definition.scss +3 -0
  102. package/styles/signature/_fluent-definition.scss +3 -0
  103. package/styles/signature/_highcontrast-definition.scss +3 -0
  104. package/styles/signature/_highcontrast-light-definition.scss +3 -0
  105. package/styles/signature/_layout.scss +5 -0
  106. package/styles/signature/_material-dark-definition.scss +3 -0
  107. package/styles/signature/_material-definition.scss +3 -0
  108. package/styles/signature/_tailwind-dark-definition.scss +1 -0
  109. package/styles/signature/_tailwind-definition.scss +3 -0
  110. package/styles/signature/_theme.scss +7 -0
  111. package/styles/signature/bootstrap-dark.css +9 -0
  112. package/styles/signature/bootstrap-dark.scss +3 -0
  113. package/styles/signature/bootstrap.css +9 -0
  114. package/styles/signature/bootstrap.scss +3 -0
  115. package/styles/signature/bootstrap4.css +9 -0
  116. package/styles/signature/bootstrap4.scss +3 -0
  117. package/styles/signature/bootstrap5-dark.css +9 -0
  118. package/styles/signature/bootstrap5-dark.scss +3 -0
  119. package/styles/signature/bootstrap5.css +9 -0
  120. package/styles/signature/bootstrap5.scss +3 -0
  121. package/styles/signature/fabric-dark.css +9 -0
  122. package/styles/signature/fabric-dark.scss +3 -0
  123. package/styles/signature/fabric.css +9 -0
  124. package/styles/signature/fabric.scss +3 -0
  125. package/styles/signature/highcontrast-light.css +9 -0
  126. package/styles/signature/highcontrast-light.scss +3 -0
  127. package/styles/signature/highcontrast.css +9 -0
  128. package/styles/signature/highcontrast.scss +3 -0
  129. package/styles/signature/material-dark.css +10 -0
  130. package/styles/signature/material-dark.scss +3 -0
  131. package/styles/signature/material.css +10 -0
  132. package/styles/signature/material.scss +3 -0
  133. package/styles/signature/tailwind-dark.css +10 -0
  134. package/styles/signature/tailwind-dark.scss +3 -0
  135. package/styles/signature/tailwind.css +10 -0
  136. package/styles/signature/tailwind.scss +3 -0
  137. package/styles/slider/_bootstrap5-definition.scss +2 -2
  138. package/styles/slider/_fluent-definition.scss +94 -0
  139. package/styles/slider/_layout.scss +7 -2
  140. package/styles/slider/_tailwind-definition.scss +2 -2
  141. package/styles/slider/bootstrap5-dark.css +1 -5
  142. package/styles/slider/bootstrap5.css +1 -5
  143. package/styles/slider/tailwind-dark.css +1 -5
  144. package/styles/slider/tailwind.css +1 -5
  145. package/styles/tailwind-dark.css +45 -21
  146. package/styles/tailwind-dark.scss +1 -0
  147. package/styles/tailwind.css +45 -21
  148. package/styles/tailwind.scss +1 -0
  149. package/styles/textbox/_fluent-definition.scss +0 -0
  150. package/styles/uploader/_fluent-definition.scss +234 -0
  151. package/styles/uploader/_layout.scss +99 -8
  152. package/styles/uploader/_theme.scss +5 -2
  153. package/styles/uploader/icons/_fluent.scss +34 -0
@@ -188,7 +188,7 @@ var Input;
188
188
  if (args.floatLabelType === 'Auto') {
189
189
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
190
190
  args.element.addEventListener('input', function (event) {
191
- updateLabelState(args.element.value, floatLabelElement);
191
+ updateLabelState(args.element.value, floatLabelElement, args.element);
192
192
  });
193
193
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
194
194
  args.element.addEventListener('blur', function (event) {
@@ -238,7 +238,8 @@ var Input;
238
238
  addClass([button], CLASSNAMES.CLEARICONHIDE);
239
239
  }
240
240
  }
241
- function updateLabelState(value, label) {
241
+ function updateLabelState(value, label, element) {
242
+ if (element === void 0) { element = null; }
242
243
  if (value) {
243
244
  addClass([label], CLASSNAMES.LABELTOP);
244
245
  if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {
@@ -246,10 +247,13 @@ var Input;
246
247
  }
247
248
  }
248
249
  else {
249
- if (label.classList.contains(CLASSNAMES.LABELTOP)) {
250
- removeClass([label], CLASSNAMES.LABELTOP);
250
+ var isNotFocused = element != null ? element !== document.activeElement : true;
251
+ if (isNotFocused) {
252
+ if (label.classList.contains(CLASSNAMES.LABELTOP)) {
253
+ removeClass([label], CLASSNAMES.LABELTOP);
254
+ }
255
+ addClass([label], CLASSNAMES.LABELBOTTOM);
251
256
  }
252
- addClass([label], CLASSNAMES.LABELBOTTOM);
253
257
  }
254
258
  }
255
259
  function getParentNode(element) {
@@ -318,7 +322,7 @@ var Input;
318
322
  var parent = getParentNode(element);
319
323
  if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
320
324
  var label = getParentNode(element).getElementsByClassName('e-float-text')[0];
321
- updateLabelState(element.value, label);
325
+ updateLabelState(element.value, label, element);
322
326
  }
323
327
  }
324
328
  /**
@@ -1434,6 +1438,10 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
1434
1438
  }
1435
1439
  _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);
1436
1440
  }
1441
+ if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {
1442
+ _this.element.value = _this.element.value.substring(0, prevPos) +
1443
+ _this.element.value.substring(currentPos, _this.element.value.length);
1444
+ }
1437
1445
  }
1438
1446
  _this.prevVal = _this.element.value;
1439
1447
  }
@@ -1481,6 +1489,11 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
1481
1489
  if (this.isVue) {
1482
1490
  var current = this.instance.getNumberParser({ format: 'n' })(this.element.value);
1483
1491
  var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
1492
+ //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
1493
+ var nonZeroRegex = new RegExp('[^1-9]+$');
1494
+ if (nonZeroRegex.test(this.element.value)) {
1495
+ current = this.value;
1496
+ }
1484
1497
  var eventArgs = {
1485
1498
  event: event,
1486
1499
  value: (current === null || isNaN(current) ? null : current),
@@ -4430,9 +4443,11 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
4430
4443
  this.sliderBarClick(e);
4431
4444
  if (e.currentTarget === this.firstHandle) {
4432
4445
  this.firstHandle.classList.add(classNames.sliderHandleFocused);
4446
+ this.firstHandle.classList.add(classNames.sliderTabHandle);
4433
4447
  }
4434
4448
  else {
4435
4449
  this.secondHandle.classList.add(classNames.sliderHandleFocused);
4450
+ this.secondHandle.classList.add(classNames.sliderTabHandle);
4436
4451
  }
4437
4452
  EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);
4438
4453
  EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);
@@ -4846,6 +4861,11 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
4846
4861
  this.getHandle().classList.add('e-large-thumb-size');
4847
4862
  }
4848
4863
  };
4864
+ Slider.prototype.focusHandle = function () {
4865
+ if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {
4866
+ this.getHandle().classList.add(classNames.sliderTabHandle);
4867
+ }
4868
+ };
4849
4869
  Slider.prototype.repeatHandlerUp = function (e) {
4850
4870
  this.changeEvent('changed', e);
4851
4871
  this.closeTooltip();
@@ -5238,6 +5258,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
5238
5258
  }
5239
5259
  this.tooltipToggle(this.getHandle());
5240
5260
  this.getHandle().focus();
5261
+ this.focusHandle();
5241
5262
  if (args.currentTarget.classList.contains(classNames.firstButton)) {
5242
5263
  EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);
5243
5264
  }
@@ -6182,6 +6203,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
6182
6203
  event.preventDefault();
6183
6204
  this.focusSliderElement();
6184
6205
  this.sliderBarClick(event);
6206
+ this.focusHandle();
6185
6207
  };
6186
6208
  Slider.prototype.wireEvents = function () {
6187
6209
  this.onresize = this.reposition.bind(this);
@@ -13677,9 +13699,1129 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
13677
13699
  * Uploader modules
13678
13700
  */
13679
13701
 
13702
+ var __extends$8 = (undefined && undefined.__extends) || (function () {
13703
+ var extendStatics = function (d, b) {
13704
+ extendStatics = Object.setPrototypeOf ||
13705
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
13706
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
13707
+ return extendStatics(d, b);
13708
+ };
13709
+ return function (d, b) {
13710
+ extendStatics(d, b);
13711
+ function __() { this.constructor = d; }
13712
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13713
+ };
13714
+ })();
13715
+ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
13716
+ __extends$8(SignatureBase, _super);
13717
+ function SignatureBase() {
13718
+ var _this = _super !== null && _super.apply(this, arguments) || this;
13719
+ /* minDistance(distance between the two point) was calaculated for smoothness.*/
13720
+ _this.minDistance = 5;
13721
+ _this.previous = 0;
13722
+ /* interval handles for the smoothness in the mouse move event.*/
13723
+ _this.interval = 30;
13724
+ _this.timeout = null;
13725
+ _this.isSignatureEmpty = true;
13726
+ _this.backgroundLoaded = null;
13727
+ _this.clearArray = [];
13728
+ _this.isBlazor = false;
13729
+ return _this;
13730
+ }
13731
+ /**
13732
+ * To Initialize the component rendering
13733
+ *
13734
+ * @private
13735
+ * @param {HTMLCanvasElement} element - Specifies the canvas element.
13736
+ * @param {parameter} parameter - Specifies only for the blazor parameter.
13737
+ * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
13738
+ * @returns {void}
13739
+ */
13740
+ SignatureBase.prototype.initialize = function (element, parameter, dotnetRef) {
13741
+ this.element = element;
13742
+ this.canvasContext = this.element.getContext('2d');
13743
+ this.canvasContext.canvas.tabIndex = 0;
13744
+ if (parameter) {
13745
+ this.setBlazorParameter(parameter);
13746
+ this.dotnetRef = dotnetRef;
13747
+ }
13748
+ this.setHTMLProperties();
13749
+ if (isNullOrUndefined(this.signatureValue)) {
13750
+ this.updateSnapCollection(true);
13751
+ }
13752
+ this.wireEvents();
13753
+ this.isSignatureEmpty = true;
13754
+ if (!this.isBlazor) {
13755
+ this.trigger('created', null);
13756
+ }
13757
+ };
13758
+ SignatureBase.prototype.setBlazorParameter = function (parameter) {
13759
+ this.isBlazor = true;
13760
+ this.backgroundColor = parameter.backgroundColor;
13761
+ this.backgroundImage = parameter.backgroundImage;
13762
+ this.disabled = parameter.disabled;
13763
+ this.isReadOnly = parameter.isReadOnly;
13764
+ this.maxStrokeWidth = parameter.maxStrokeWidth || 2;
13765
+ this.minStrokeWidth = parameter.minStrokeWidth || 0.5;
13766
+ this.velocity = parameter.velocity || 0.7;
13767
+ this.strokeColor = parameter.strokeColor || '#000000';
13768
+ this.saveWithBackground = parameter.saveWithBackground;
13769
+ this.interval = 30;
13770
+ this.previous = 0;
13771
+ this.minDistance = 5;
13772
+ this.signatureValue = parameter.signatureValue;
13773
+ if (this.signatureValue) {
13774
+ this.loadPersistedSignature();
13775
+ }
13776
+ };
13777
+ SignatureBase.prototype.wireEvents = function () {
13778
+ if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
13779
+ EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
13780
+ EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);
13781
+ window.addEventListener('resize', this.resizeHandler.bind(this));
13782
+ }
13783
+ else if (this.pointColl) {
13784
+ EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);
13785
+ EventHandler.add(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler, this);
13786
+ EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);
13787
+ }
13788
+ };
13789
+ SignatureBase.prototype.unwireEvents = function (type) {
13790
+ if (type === 'mouseup' || type === 'touchend') {
13791
+ EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
13792
+ EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
13793
+ EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
13794
+ }
13795
+ else {
13796
+ EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
13797
+ EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
13798
+ EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
13799
+ EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
13800
+ EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
13801
+ window.removeEventListener('resize', this.resizeHandler);
13802
+ }
13803
+ };
13804
+ SignatureBase.prototype.setHTMLProperties = function () {
13805
+ if (this.element.height === 150) {
13806
+ this.element.height = this.element.offsetHeight;
13807
+ }
13808
+ if (this.element.width === 300) {
13809
+ this.element.width = this.element.offsetWidth;
13810
+ }
13811
+ this.canvasContext.scale(1, 1);
13812
+ this.canvasContext.fillStyle = this.strokeColor;
13813
+ if (this.backgroundImage) {
13814
+ this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
13815
+ }
13816
+ else if (this.backgroundColor) {
13817
+ this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
13818
+ }
13819
+ };
13820
+ SignatureBase.prototype.mouseDownHandler = function (e) {
13821
+ if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
13822
+ if (e.type === 'touchstart') {
13823
+ e.preventDefault();
13824
+ e.stopPropagation();
13825
+ }
13826
+ this.beginStroke(e);
13827
+ this.wireEvents();
13828
+ }
13829
+ };
13830
+ SignatureBase.prototype.mouseMoveHandler = function (e) {
13831
+ if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchmove') {
13832
+ if (e.type === 'touchmove') {
13833
+ e.preventDefault();
13834
+ e.stopPropagation();
13835
+ }
13836
+ if (this.interval) {
13837
+ this.updateStrokeWithThrottle(e);
13838
+ }
13839
+ else {
13840
+ this.updateStroke(e);
13841
+ }
13842
+ }
13843
+ };
13844
+ SignatureBase.prototype.mouseUpHandler = function (e) {
13845
+ var args = { actionName: 'strokeUpdate' };
13846
+ if (e.type === 'touchstart') {
13847
+ e.preventDefault();
13848
+ e.stopPropagation();
13849
+ }
13850
+ this.endDraw();
13851
+ this.updateSnapCollection();
13852
+ this.unwireEvents(e.type);
13853
+ if (!this.isBlazor) {
13854
+ this.trigger('change', args);
13855
+ }
13856
+ else {
13857
+ this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'mouseUp');
13858
+ }
13859
+ this.signatureValue = this.snapColl[this.incStep];
13860
+ };
13861
+ SignatureBase.prototype.keyboardHandler = function (e) {
13862
+ var _this = this;
13863
+ var args = { fileName: 'Signature', type: 'Png', cancel: false };
13864
+ switch (e.key) {
13865
+ case 'Delete':
13866
+ this.clear();
13867
+ break;
13868
+ case (e.ctrlKey && 's'):
13869
+ if (!this.isBlazor) {
13870
+ this.trigger('beforeSave', args, function (observableSaveArgs) {
13871
+ if (!args.cancel) {
13872
+ _this.save(observableSaveArgs.type, observableSaveArgs.fileName);
13873
+ }
13874
+ });
13875
+ }
13876
+ else {
13877
+ this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'beforeSave');
13878
+ }
13879
+ e.preventDefault();
13880
+ e.stopImmediatePropagation();
13881
+ break;
13882
+ case (e.ctrlKey && 'z'):
13883
+ this.undo();
13884
+ break;
13885
+ case (e.ctrlKey && 'y'):
13886
+ this.redo();
13887
+ break;
13888
+ }
13889
+ };
13890
+ SignatureBase.prototype.resizeHandler = function () {
13891
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
13892
+ var proxy = this;
13893
+ this.canvasContext.canvas.width = this.element.offsetWidth;
13894
+ this.canvasContext.canvas.height = this.element.offsetHeight;
13895
+ this.canvasContext.scale(1, 1);
13896
+ var restoreImg = new Image();
13897
+ restoreImg.src = this.snapColl[this.incStep];
13898
+ restoreImg.onload = function () {
13899
+ proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
13900
+ proxy.canvasContext.drawImage(restoreImg, 0, 0, proxy.element.width, proxy.element.height);
13901
+ };
13902
+ };
13903
+ SignatureBase.prototype.beginStroke = function (e) {
13904
+ this.refresh();
13905
+ this.updateStroke(e);
13906
+ };
13907
+ SignatureBase.prototype.updateStroke = function (e) {
13908
+ var point = this.createPoint(e);
13909
+ this.addPoint(point);
13910
+ };
13911
+ SignatureBase.prototype.updateStrokeWithThrottle = function (args) {
13912
+ var now = Date.now();
13913
+ var remaining = this.interval - (now - this.previous);
13914
+ this.storedArgs = args;
13915
+ if (remaining <= 0 || remaining > this.interval) {
13916
+ if (this.timeout) {
13917
+ clearTimeout(this.timeout);
13918
+ this.timeout = null;
13919
+ }
13920
+ this.previous = now;
13921
+ this.updateStroke(this.storedArgs);
13922
+ if (!this.timeout) {
13923
+ this.storedArgs = null;
13924
+ }
13925
+ }
13926
+ else if (!this.timeout) {
13927
+ this.timeout = window.setTimeout(this.delay.bind(this), remaining);
13928
+ }
13929
+ };
13930
+ SignatureBase.prototype.delay = function () {
13931
+ this.previous = Date.now();
13932
+ this.timeout = null;
13933
+ this.updateStroke(this.storedArgs);
13934
+ if (!this.timeout) {
13935
+ this.storedArgs = null;
13936
+ }
13937
+ };
13938
+ SignatureBase.prototype.createPoint = function (e) {
13939
+ var rect = this.canvasContext.canvas.getBoundingClientRect();
13940
+ if (e.type === 'mousedown' || e.type === 'mousemove') {
13941
+ return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
13942
+ }
13943
+ else {
13944
+ return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
13945
+ }
13946
+ };
13947
+ /* Returns the current point corrdinates(x, y) and time.*/
13948
+ SignatureBase.prototype.point = function (pointX, pointY, time) {
13949
+ this.pointX = pointX;
13950
+ this.pointY = pointY;
13951
+ this.time = time || new Date().getTime();
13952
+ return { x: this.pointX, y: this.pointY, time: this.time };
13953
+ };
13954
+ SignatureBase.prototype.addPoint = function (point) {
13955
+ var points = this.pointColl;
13956
+ var controlPoint1;
13957
+ var controlPoint2;
13958
+ var lastPoint = points.length > 0 && points[points.length - 1];
13959
+ var isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;
13960
+ if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
13961
+ points.push(point);
13962
+ if (points.length > 2) {
13963
+ if (points.length === 3) {
13964
+ points.unshift(points[0]);
13965
+ }
13966
+ controlPoint1 = (this.calculateCurveControlPoints(points[0], points[1], points[2])).controlPoint2;
13967
+ controlPoint2 = (this.calculateCurveControlPoints(points[1], points[2], points[3])).controlPoint1;
13968
+ this.startPoint = points[1];
13969
+ this.controlPoint1 = controlPoint1;
13970
+ this.controlPoint2 = controlPoint2;
13971
+ this.endPoint = points[2];
13972
+ this.startDraw();
13973
+ points.shift();
13974
+ }
13975
+ }
13976
+ };
13977
+ SignatureBase.prototype.startDraw = function () {
13978
+ var velocity;
13979
+ velocity = this.pointVelocityCalc(this.startPoint);
13980
+ velocity = this.velocity * velocity + (1 - this.velocity) * this.lastVelocity;
13981
+ var newWidth = Math.max(this.maxStrokeWidth / (velocity + 1), this.minStrokeWidth);
13982
+ this.curveDraw(this.lastWidth, newWidth);
13983
+ this.lastVelocity = velocity;
13984
+ this.lastWidth = newWidth;
13985
+ };
13986
+ SignatureBase.prototype.endDraw = function () {
13987
+ var canDrawCurve = this.pointColl.length > 2;
13988
+ var point = this.pointColl[0];
13989
+ if (!canDrawCurve && point) {
13990
+ this.strokeDraw(point);
13991
+ }
13992
+ };
13993
+ /* Calculate the Bezier (x, y) coordinate of the curve. */
13994
+ SignatureBase.prototype.curveDraw = function (startWidth, endWidth) {
13995
+ var context = this.canvasContext;
13996
+ var width;
13997
+ var i;
13998
+ var t1;
13999
+ var t2;
14000
+ var t3;
14001
+ var u1;
14002
+ var u2;
14003
+ var u3;
14004
+ var x;
14005
+ var y;
14006
+ var widthValue = endWidth - startWidth;
14007
+ var bezierLength = this.bezierLengthCalc();
14008
+ var drawSteps = Math.ceil(bezierLength) * 2;
14009
+ context.beginPath();
14010
+ for (i = 0; i < drawSteps; i++) {
14011
+ t1 = i / drawSteps;
14012
+ t2 = t1 * t1;
14013
+ t3 = t2 * t1;
14014
+ u1 = 1 - t1;
14015
+ u2 = u1 * u1;
14016
+ u3 = u2 * u1;
14017
+ x = u3 * this.startPoint.x;
14018
+ x += 3 * u2 * t1 * this.controlPoint1.x;
14019
+ x += 3 * u1 * t2 * this.controlPoint2.x;
14020
+ x += t3 * this.endPoint.x;
14021
+ y = u3 * this.startPoint.y;
14022
+ y += 3 * u2 * t1 * this.controlPoint1.y;
14023
+ y += 3 * u1 * t2 * this.controlPoint2.y;
14024
+ y += t3 * this.endPoint.y;
14025
+ width = Math.min(startWidth + t3 * widthValue, this.maxStrokeWidth);
14026
+ this.arcDraw(x, y, width);
14027
+ }
14028
+ context.closePath();
14029
+ context.fill();
14030
+ this.isSignatureEmpty = false;
14031
+ };
14032
+ SignatureBase.prototype.strokeDraw = function (point) {
14033
+ var context = this.canvasContext;
14034
+ var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
14035
+ context.beginPath();
14036
+ this.arcDraw(point.x, point.y, pointSize);
14037
+ context.closePath();
14038
+ context.fill();
14039
+ this.isSignatureEmpty = false;
14040
+ };
14041
+ SignatureBase.prototype.arcDraw = function (x, y, size) {
14042
+ var context = this.canvasContext;
14043
+ context.moveTo(x, y);
14044
+ context.arc(x, y, size, 0, 2 * Math.PI, false);
14045
+ };
14046
+ /* Utility functions for Bezier algorithm*/
14047
+ SignatureBase.prototype.calculateCurveControlPoints = function (p1, p2, p3) {
14048
+ var dx1 = p1.x - p2.x;
14049
+ var dy1 = p1.y - p2.y;
14050
+ var dx2 = p2.x - p3.x;
14051
+ var dy2 = p2.y - p3.y;
14052
+ var m1 = { x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0 };
14053
+ var m2 = { x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0 };
14054
+ var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
14055
+ var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
14056
+ var dxm = (m1.x - m2.x);
14057
+ var dym = (m1.y - m2.y);
14058
+ var k = l2 / (l1 + l2);
14059
+ var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
14060
+ var tx = p2.x - cm.x;
14061
+ var ty = p2.y - cm.y;
14062
+ return {
14063
+ controlPoint1: this.point(m1.x + tx, m1.y + ty, 0),
14064
+ controlPoint2: this.point(m2.x + tx, m2.y + ty, 0)
14065
+ };
14066
+ };
14067
+ /* Returns approximated bezier length of the curuve.*/
14068
+ SignatureBase.prototype.bezierLengthCalc = function () {
14069
+ var steps = 10;
14070
+ var length = 0;
14071
+ var i;
14072
+ var t;
14073
+ var pointx1;
14074
+ var pointy1;
14075
+ var pointx2;
14076
+ var pointy2;
14077
+ var pointx3;
14078
+ var pointy3;
14079
+ for (i = 0; i <= steps; i++) {
14080
+ t = i / steps;
14081
+ pointx1 = this.bezierPointCalc(t, this.startPoint.x, this.controlPoint1.x, this.controlPoint2.x, this.endPoint.x);
14082
+ pointy1 = this.bezierPointCalc(t, this.startPoint.y, this.controlPoint1.y, this.controlPoint2.y, this.endPoint.y);
14083
+ if (i > 0) {
14084
+ pointx3 = pointx1 - pointx2;
14085
+ pointy3 = pointy1 - pointy2;
14086
+ length += Math.sqrt(pointx3 * pointx3 + pointy3 * pointy3);
14087
+ }
14088
+ pointx2 = pointx1;
14089
+ pointy2 = pointy1;
14090
+ }
14091
+ return length;
14092
+ };
14093
+ /* Calculate parametric value of x or y given t and the
14094
+ four point(startpoint, controlpoint1, controlpoint2, endpoint) coordinates of a cubic bezier curve.*/
14095
+ SignatureBase.prototype.bezierPointCalc = function (t, startpoint, cp1, cp2, endpoint) {
14096
+ return startpoint * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * cp1 * (1.0 - t) * (1.0 - t) * t + 3.0 *
14097
+ cp2 * (1.0 - t) * t * t + endpoint * t * t * t;
14098
+ };
14099
+ /* Velocity between the current point and last point.*/
14100
+ SignatureBase.prototype.pointVelocityCalc = function (startPoint) {
14101
+ return (this.time !== startPoint.time) ? this.distanceTo(startPoint) / (this.time - startPoint.time) : 0;
14102
+ };
14103
+ /* Distance between the current point and last point.*/
14104
+ SignatureBase.prototype.distanceTo = function (start) {
14105
+ return Math.sqrt(Math.pow(this.pointX - start.x, 2) + Math.pow(this.pointY - start.y, 2));
14106
+ };
14107
+ SignatureBase.prototype.isRead = function (isRead) {
14108
+ if (isRead) {
14109
+ EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
14110
+ }
14111
+ else if (!this.disabled) {
14112
+ EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
14113
+ }
14114
+ };
14115
+ SignatureBase.prototype.enableOrDisable = function (isDisable) {
14116
+ this.disabled = isDisable;
14117
+ if (isDisable) {
14118
+ this.reDraw('0.5');
14119
+ this.isRead(true);
14120
+ }
14121
+ else {
14122
+ this.reDraw('1');
14123
+ this.isRead(false);
14124
+ }
14125
+ };
14126
+ SignatureBase.prototype.reDraw = function (opacity) {
14127
+ var data = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
14128
+ this.canvasContext.clearRect(0, 0, this.element.width, this.element.height);
14129
+ this.element.style.opacity = opacity;
14130
+ this.canvasContext.putImageData(data, 0, 0);
14131
+ };
14132
+ SignatureBase.prototype.updateSnapCollection = function (isClear) {
14133
+ if (isNullOrUndefined(this.incStep)) {
14134
+ this.incStep = -1;
14135
+ this.incStep++;
14136
+ this.snapColl = [];
14137
+ this.clearArray = [];
14138
+ }
14139
+ else {
14140
+ this.incStep++;
14141
+ }
14142
+ if (this.incStep < this.snapColl.length) {
14143
+ this.snapColl.length = this.incStep;
14144
+ }
14145
+ if (this.incStep > 0) {
14146
+ var canvasNew = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-wrapper' });
14147
+ var canvasContextNew = canvasNew.getContext('2d');
14148
+ canvasNew.width = this.canvasContext.canvas.width;
14149
+ canvasNew.height = this.canvasContext.canvas.height;
14150
+ canvasContextNew.drawImage(this.canvasContext.canvas, 0, 0, canvasNew.width, canvasNew.height);
14151
+ this.snapColl.push(canvasNew.toDataURL());
14152
+ }
14153
+ else {
14154
+ this.snapColl.push(this.canvasContext.canvas.toDataURL());
14155
+ }
14156
+ if (isClear) {
14157
+ this.clearArray.push(this.incStep);
14158
+ }
14159
+ };
14160
+ SignatureBase.prototype.setBackgroundImage = function (imageSrc) {
14161
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14162
+ var proxy = this;
14163
+ var imageObj = new Image();
14164
+ imageObj.crossOrigin = 'anonymous';
14165
+ imageObj.src = imageSrc;
14166
+ imageObj.onload = function () {
14167
+ proxy.canvasContext.globalCompositeOperation = 'source-over';
14168
+ proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
14169
+ proxy.updateSnapCollection();
14170
+ proxy.saveBackground(true);
14171
+ };
14172
+ this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
14173
+ };
14174
+ SignatureBase.prototype.setBackgroundColor = function (color) {
14175
+ var canvasEle = this.canvasContext;
14176
+ canvasEle.strokeStyle = color;
14177
+ var i;
14178
+ var j;
14179
+ for (i = 1; i <= canvasEle.canvas.width; i++) {
14180
+ for (j = 1; j <= canvasEle.canvas.height; j++) {
14181
+ canvasEle.strokeRect(0, 0, i, j);
14182
+ }
14183
+ }
14184
+ this.updateSnapCollection();
14185
+ };
14186
+ SignatureBase.prototype.loadPersistedSignature = function () {
14187
+ if (isNullOrUndefined(this.signatureValue)) {
14188
+ return;
14189
+ }
14190
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14191
+ var proxy = this;
14192
+ var lastImage = new Image();
14193
+ lastImage.src = this.signatureValue;
14194
+ lastImage.onload = function () {
14195
+ proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
14196
+ proxy.canvasContext.drawImage(lastImage, 0, 0);
14197
+ proxy.updateSnapCollection();
14198
+ };
14199
+ this.isSignatureEmpty = false;
14200
+ };
14201
+ /**
14202
+ * To get the signature as Blob.
14203
+ *
14204
+ * @param {string} url - specify the url/base 64 string to get blob of the signature.
14205
+ * @returns {Blob}.
14206
+ */
14207
+ SignatureBase.prototype.getBlob = function (url) {
14208
+ var arr = url.split(',');
14209
+ var type = arr[0].match(/:(.*?);/)[1];
14210
+ var bstr = atob(arr[1]);
14211
+ var n = bstr.length;
14212
+ var u8arr = new Uint8Array(n);
14213
+ while (n--) {
14214
+ u8arr[n] = bstr.charCodeAt(n);
14215
+ }
14216
+ return new Blob([u8arr], { type: type });
14217
+ };
14218
+ SignatureBase.prototype.download = function (blob, fileName) {
14219
+ var blobUrl = URL.createObjectURL(blob);
14220
+ var a = document.createElement('a');
14221
+ a.href = blobUrl;
14222
+ a.target = '_parent';
14223
+ a.download = fileName;
14224
+ (document.body || document.documentElement).appendChild(a);
14225
+ a.click();
14226
+ a.parentNode.removeChild(a);
14227
+ };
14228
+ /**
14229
+ * To refresh the signature.
14230
+ *
14231
+ * @private
14232
+ * @returns {void}.
14233
+ */
14234
+ SignatureBase.prototype.refresh = function () {
14235
+ this.pointColl = [];
14236
+ this.lastVelocity = 0;
14237
+ this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
14238
+ };
14239
+ /**
14240
+ * Erases all the signature strokes signed by user.
14241
+ *
14242
+ * @returns {void}.
14243
+ */
14244
+ SignatureBase.prototype.clear = function () {
14245
+ var args = { actionName: 'clear' };
14246
+ this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
14247
+ this.refresh();
14248
+ this.updateSnapCollection(true);
14249
+ this.isSignatureEmpty = true;
14250
+ if (!this.isBlazor) {
14251
+ this.trigger('change', args);
14252
+ }
14253
+ else {
14254
+ this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Clear');
14255
+ }
14256
+ };
14257
+ /**
14258
+ * Undo the last user action.
14259
+ *
14260
+ * @returns {void}.
14261
+ */
14262
+ SignatureBase.prototype.undo = function () {
14263
+ var args = { actionName: 'undo' };
14264
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14265
+ var proxy = this;
14266
+ if (this.incStep > 0) {
14267
+ this.incStep--;
14268
+ var undoImg_1 = new Image();
14269
+ undoImg_1.src = this.snapColl[this.incStep];
14270
+ undoImg_1.onload = function () {
14271
+ proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
14272
+ proxy.canvasContext.drawImage(undoImg_1, 0, 0, proxy.element.width, proxy.element.height);
14273
+ };
14274
+ }
14275
+ this.isClear();
14276
+ if (!this.isBlazor) {
14277
+ this.trigger('change', args);
14278
+ }
14279
+ else {
14280
+ this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Undo');
14281
+ }
14282
+ };
14283
+ /**
14284
+ * Redo the last user action.
14285
+ *
14286
+ * @returns {void}.
14287
+ */
14288
+ SignatureBase.prototype.redo = function () {
14289
+ var args = { actionName: 'redo' };
14290
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14291
+ var proxy = this;
14292
+ if (this.incStep < this.snapColl.length - 1) {
14293
+ this.incStep++;
14294
+ var redoImg_1 = new Image();
14295
+ redoImg_1.src = this.snapColl[this.incStep];
14296
+ redoImg_1.onload = function () {
14297
+ proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
14298
+ proxy.canvasContext.drawImage(redoImg_1, 0, 0, proxy.element.width, proxy.element.height);
14299
+ };
14300
+ }
14301
+ this.isClear();
14302
+ if (!this.isBlazor) {
14303
+ this.trigger('change', args);
14304
+ }
14305
+ else {
14306
+ this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Redo');
14307
+ }
14308
+ };
14309
+ SignatureBase.prototype.isClear = function () {
14310
+ if (this.clearArray) {
14311
+ var empty = false;
14312
+ for (var i = 0; i < this.clearArray.length; i++) {
14313
+ if (this.clearArray[i] === this.incStep) {
14314
+ this.isSignatureEmpty = true;
14315
+ empty = true;
14316
+ }
14317
+ }
14318
+ if (!empty) {
14319
+ this.isSignatureEmpty = false;
14320
+ }
14321
+ }
14322
+ };
14323
+ /**
14324
+ * To check whether the signature is empty or not.
14325
+ *
14326
+ * @returns {boolean}.
14327
+ */
14328
+ SignatureBase.prototype.isEmpty = function () {
14329
+ return this.isSignatureEmpty;
14330
+ };
14331
+ /**
14332
+ * To check whether the undo collection is empty or not.
14333
+ *
14334
+ * @returns {boolean}.
14335
+ */
14336
+ SignatureBase.prototype.canUndo = function () {
14337
+ return this.incStep > 0;
14338
+ };
14339
+ /**
14340
+ * To check whether the redo collection is empty or not.
14341
+ *
14342
+ * @returns {boolean}.
14343
+ */
14344
+ SignatureBase.prototype.canRedo = function () {
14345
+ return this.incStep < this.snapColl.length - 1;
14346
+ };
14347
+ /**
14348
+ * To draw the signature based on the given text, with the font family and font size.
14349
+ *
14350
+ * @param {string} text - specify text to be drawn as signature.
14351
+ * @param {string} fontFamily - specify font family of a signature.
14352
+ * @param {number} fontSize - specify font size of a signature.
14353
+ *
14354
+ * @returns {void}.
14355
+ */
14356
+ SignatureBase.prototype.draw = function (text, fontFamily, fontSize) {
14357
+ this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
14358
+ fontFamily = fontFamily || 'Arial';
14359
+ fontSize = fontSize || 30;
14360
+ this.canvasContext.font = fontSize + 'px ' + fontFamily;
14361
+ this.canvasContext.textAlign = 'center';
14362
+ this.canvasContext.textBaseline = 'middle';
14363
+ this.canvasContext.fillText(text, this.element.width / 2, this.element.height / 2);
14364
+ this.updateSnapCollection();
14365
+ this.isSignatureEmpty = false;
14366
+ };
14367
+ /**
14368
+ * To load the signature with the given base 64 string, height and width.
14369
+ *
14370
+ * @param {string} signature - specify the url/base 64 string to be drawn as signature.
14371
+ * @param {number} width - specify the width of the loaded signature image.
14372
+ * @param {number} height - specify the height of the loaded signature image.
14373
+ * @returns {void}.
14374
+ */
14375
+ SignatureBase.prototype.load = function (signature, width, height) {
14376
+ height = height || this.element.height;
14377
+ width = width || this.element.width;
14378
+ this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
14379
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14380
+ var proxy = this;
14381
+ var bitmapImage = new Image();
14382
+ bitmapImage.src = signature;
14383
+ bitmapImage.onload = function () {
14384
+ Promise.all([
14385
+ createImageBitmap(bitmapImage, 0, 0, width, height)
14386
+ ]).then(function (results) {
14387
+ var tempCanvas = document.createElement('canvas');
14388
+ tempCanvas.width = width;
14389
+ tempCanvas.height = height;
14390
+ tempCanvas.getContext('2d').drawImage(results[0], 0, 0);
14391
+ proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);
14392
+ proxy.updateSnapCollection();
14393
+ });
14394
+ };
14395
+ this.isSignatureEmpty = false;
14396
+ };
14397
+ SignatureBase.prototype.saveBackground = function (savebg) {
14398
+ var imageSrc;
14399
+ if (savebg && this.backgroundImage) {
14400
+ imageSrc = this.snapColl[this.incStep - 1];
14401
+ }
14402
+ else {
14403
+ imageSrc = this.snapColl[this.incStep];
14404
+ }
14405
+ if (!savebg) {
14406
+ this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
14407
+ if (this.backgroundImage) {
14408
+ this.setBackgroundImage(this.backgroundImage);
14409
+ }
14410
+ else if (this.backgroundColor) {
14411
+ this.setBackgroundColor(this.backgroundColor);
14412
+ savebg = true;
14413
+ }
14414
+ }
14415
+ if (savebg) {
14416
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14417
+ var proxy_1 = this;
14418
+ var imageObj_1 = new Image();
14419
+ imageObj_1.crossOrigin = 'anonymous';
14420
+ imageObj_1.src = imageSrc;
14421
+ imageObj_1.onload = function () {
14422
+ proxy_1.backgroundLoaded = true;
14423
+ proxy_1.canvasContext.globalCompositeOperation = 'source-over';
14424
+ proxy_1.canvasContext.drawImage(imageObj_1, 0, 0, proxy_1.element.width, proxy_1.element.height);
14425
+ proxy_1.save(proxy_1.fileType, proxy_1.fileName);
14426
+ };
14427
+ }
14428
+ };
14429
+ /**
14430
+ * To save the signature with the given file type and file name.
14431
+ *
14432
+ * @param {SignatureFileType} type - specify type of the file to be saved a signature.
14433
+ * @param {string} fileName - specify name of the file to be saved a signature.
14434
+ *
14435
+ * @returns {void}.
14436
+ */
14437
+ SignatureBase.prototype.save = function (type, fileName) {
14438
+ if (this.saveWithBackground && this.backgroundLoaded == null && (this.backgroundImage || this.backgroundColor)) {
14439
+ this.backgroundLoaded = false;
14440
+ this.fileType = type;
14441
+ this.fileName = fileName;
14442
+ this.saveBackground(false);
14443
+ }
14444
+ else if (type === 'Svg') {
14445
+ fileName = fileName || 'Signature';
14446
+ this.toSVG(fileName);
14447
+ }
14448
+ else if (type === 'Jpeg') {
14449
+ fileName = fileName || 'Signature';
14450
+ if (!this.saveWithBackground || this.saveWithBackground && !(this.backgroundImage || this.backgroundColor)) {
14451
+ this.toJPEG(fileName);
14452
+ }
14453
+ else {
14454
+ var dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');
14455
+ this.download(this.getBlob(dataURL), fileName + '.' + 'jpeg');
14456
+ }
14457
+ }
14458
+ else {
14459
+ fileName = fileName || 'Signature';
14460
+ var dataURL = this.canvasContext.canvas.toDataURL('image/png');
14461
+ this.download(this.getBlob(dataURL), fileName + '.' + 'png');
14462
+ }
14463
+ if (this.saveWithBackground && this.backgroundLoaded) {
14464
+ this.resetSnap();
14465
+ }
14466
+ };
14467
+ SignatureBase.prototype.resetSnap = function () {
14468
+ this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
14469
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14470
+ var proxy = this;
14471
+ var restoreObj = new Image();
14472
+ restoreObj.src = this.snapColl[this.incStep - 1];
14473
+ restoreObj.onload = function () {
14474
+ proxy.canvasContext.drawImage(restoreObj, 0, 0, proxy.element.width, proxy.element.height);
14475
+ proxy.updateSnapCollection();
14476
+ };
14477
+ this.backgroundLoaded = null;
14478
+ this.snapColl.pop();
14479
+ this.incStep--;
14480
+ this.snapColl.pop();
14481
+ this.incStep--;
14482
+ };
14483
+ SignatureBase.prototype.toJPEG = function (fileName) {
14484
+ var _this = this;
14485
+ var imageSrc = this.snapColl[this.incStep];
14486
+ this.setBackgroundColor('#ffffff');
14487
+ // eslint-disable-next-line @typescript-eslint/no-this-alias
14488
+ var proxy = this;
14489
+ var imageObj = new Image();
14490
+ imageObj.crossOrigin = 'anonymous';
14491
+ imageObj.src = imageSrc;
14492
+ imageObj.onload = function () {
14493
+ proxy.canvasContext.globalCompositeOperation = 'source-over';
14494
+ proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
14495
+ var dataURL = proxy.canvasContext.canvas.toDataURL('image/jpeg');
14496
+ proxy.download(proxy.getBlob(dataURL), fileName + '.' + 'jpeg');
14497
+ proxy.canvasContext.clearRect(0, 0, proxy.canvasContext.canvas.width, proxy.canvasContext.canvas.height);
14498
+ _this.resizeHandler();
14499
+ };
14500
+ this.snapColl.pop();
14501
+ this.incStep--;
14502
+ };
14503
+ SignatureBase.prototype.toSVG = function (fileName) {
14504
+ var dataUrl = this.canvasContext.canvas.toDataURL();
14505
+ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
14506
+ svg.setAttribute('width', this.canvasContext.canvas.width.toString());
14507
+ svg.setAttribute('height', this.canvasContext.canvas.height.toString());
14508
+ var XLinkNS = 'http://www.w3.org/1999/xlink';
14509
+ var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
14510
+ img.setAttributeNS(null, 'height', this.canvasContext.canvas.height.toString());
14511
+ img.setAttributeNS(null, 'width', this.canvasContext.canvas.width.toString());
14512
+ img.setAttributeNS(XLinkNS, 'xlink:href', dataUrl);
14513
+ svg.appendChild(img);
14514
+ var prefix = 'data:image/svg+xml;base64,';
14515
+ var header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"'
14516
+ + (" width=\"" + this.canvasContext.canvas.width + "\"") + (" height=\"" + this.canvasContext.canvas.height + "\"") + '>';
14517
+ var footer = '</svg>';
14518
+ var body = svg.innerHTML;
14519
+ var data = header + body + footer;
14520
+ var svgDataUrl = prefix + btoa(data);
14521
+ if (fileName == null) {
14522
+ return svgDataUrl;
14523
+ }
14524
+ else {
14525
+ this.download(this.getBlob(svgDataUrl), fileName + '.' + 'svg');
14526
+ return null;
14527
+ }
14528
+ };
14529
+ /**
14530
+ * To save the signature as Blob.
14531
+ *
14532
+ * @returns {Blob}.
14533
+ */
14534
+ SignatureBase.prototype.saveAsBlob = function () {
14535
+ return this.getBlob(this.canvasContext.canvas.toDataURL('image/png'));
14536
+ };
14537
+ /**
14538
+ * To get the signature as Base 64.
14539
+ *
14540
+ * @private
14541
+ * @param {SignatureFileType} type - Specifies the type of the image format.
14542
+ * @returns {string}.
14543
+ */
14544
+ SignatureBase.prototype.getSignature = function (type) {
14545
+ if (type === 'Jpeg') {
14546
+ var imgData = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
14547
+ var data = imgData.data;
14548
+ for (var i = 0; i < data.length; i += 4) {
14549
+ if (data[i + 3] < 255) {
14550
+ data[i] = 255 - data[i];
14551
+ data[i + 1] = 255 - data[i + 1];
14552
+ data[i + 2] = 255 - data[i + 2];
14553
+ data[i + 3] = 255 - data[i + 3];
14554
+ }
14555
+ }
14556
+ this.canvasContext.putImageData(imgData, 0, 0);
14557
+ var dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');
14558
+ this.resizeHandler();
14559
+ return dataURL;
14560
+ }
14561
+ else if (type === 'Svg') {
14562
+ return this.toSVG(null);
14563
+ }
14564
+ else {
14565
+ return this.canvasContext.canvas.toDataURL('image/png');
14566
+ }
14567
+ };
14568
+ /**
14569
+ * Get component name.
14570
+ *
14571
+ * @returns {string} - Module Name
14572
+ * @private
14573
+ */
14574
+ SignatureBase.prototype.getModuleName = function () {
14575
+ return 'signature';
14576
+ };
14577
+ /**
14578
+ * To get the properties to be maintained in the persisted state.
14579
+ *
14580
+ * @returns {string} - Persist data
14581
+ */
14582
+ SignatureBase.prototype.getPersistData = function () {
14583
+ this.signatureValue = this.snapColl[this.incStep];
14584
+ return this.addOnPersist(['signatureValue']);
14585
+ };
14586
+ /**
14587
+ * Removes the component from the DOM and detaches all its related event handlers.
14588
+ * Also it maintains the initial input element from the DOM.
14589
+ *
14590
+ * @method destroy
14591
+ * @returns {void}
14592
+ */
14593
+ SignatureBase.prototype.destroy = function () {
14594
+ this.unwireEvents(null);
14595
+ removeClass([this.element], 'e-' + this.getModuleName());
14596
+ this.element.removeAttribute('tabindex');
14597
+ this.pointColl = null;
14598
+ _super.prototype.destroy.call(this);
14599
+ };
14600
+ /**
14601
+ * Modified onPropertyChanged method for both blazor and EJ2 signature component.
14602
+ *
14603
+ * @private
14604
+ * @param {string} key - Specifies the property, which changed.
14605
+ * @param {string} value - Specifies the property value changed.
14606
+ * @returns {void}
14607
+ */
14608
+ SignatureBase.prototype.propertyChanged = function (key, value) {
14609
+ var canvasNew = this.canvasContext;
14610
+ switch (key) {
14611
+ case 'backgroundColor':
14612
+ canvasNew.canvas.style.backgroundColor = value;
14613
+ this.backgroundColor = value;
14614
+ break;
14615
+ case 'backgroundImage':
14616
+ canvasNew.canvas.style.backgroundImage = 'url(' + value + ')';
14617
+ this.backgroundImage = value;
14618
+ break;
14619
+ case 'strokeColor':
14620
+ canvasNew.fillStyle = value;
14621
+ this.strokeColor = value;
14622
+ break;
14623
+ case 'saveWithBackground':
14624
+ this.saveWithBackground = value;
14625
+ break;
14626
+ case 'maxStrokeWidth':
14627
+ this.maxStrokeWidth = value;
14628
+ break;
14629
+ case 'minStrokeWidth':
14630
+ this.minStrokeWidth = value;
14631
+ break;
14632
+ case 'velocity':
14633
+ this.velocity = value;
14634
+ break;
14635
+ case 'isReadOnly':
14636
+ this.isRead(value);
14637
+ break;
14638
+ case 'disabled':
14639
+ this.enableOrDisable(value);
14640
+ break;
14641
+ }
14642
+ };
14643
+ return SignatureBase;
14644
+ }(Component));
14645
+
14646
+ var __extends$7 = (undefined && undefined.__extends) || (function () {
14647
+ var extendStatics = function (d, b) {
14648
+ extendStatics = Object.setPrototypeOf ||
14649
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
14650
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
14651
+ return extendStatics(d, b);
14652
+ };
14653
+ return function (d, b) {
14654
+ extendStatics(d, b);
14655
+ function __() { this.constructor = d; }
14656
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
14657
+ };
14658
+ })();
14659
+ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
14660
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
14661
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
14662
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
14663
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
14664
+ };
14665
+ /**
14666
+ * The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation.
14667
+ * It allows to save signature as image.
14668
+ * You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this Signature component.
14669
+ * Signature component is a user interface to draw the Signature or Text.
14670
+ * It provides supports for various Background color, Stroke color and Background Image.
14671
+ * ```html
14672
+ * <canvas id="signature"></canvas>
14673
+ * ```
14674
+ * ```typescript
14675
+ * <script>
14676
+ * let signatureObj: Signature = new Signature(null , "#signature");
14677
+ * </script>
14678
+ * ```
14679
+ */
14680
+ var Signature = /** @__PURE__ @class */ (function (_super) {
14681
+ __extends$7(Signature, _super);
14682
+ /**
14683
+ * Constructor for creating the widget.
14684
+ *
14685
+ * @param {SignatureModel} options - Specifies the Signature model.
14686
+ * @param {string | HTMLCanvasElement} element - Specifies the element.
14687
+ * @private
14688
+ */
14689
+ function Signature(options, element) {
14690
+ return _super.call(this, options, element) || this;
14691
+ }
14692
+ Signature.prototype.preRender = function () {
14693
+ // pre render code snippets
14694
+ };
14695
+ /**
14696
+ * To Initialize the component rendering
14697
+ *
14698
+ * @private
14699
+ * @returns {void}
14700
+ */
14701
+ Signature.prototype.render = function () {
14702
+ this.initialize();
14703
+ };
14704
+ Signature.prototype.initialize = function () {
14705
+ addClass([this.element], 'e-' + this.getModuleName());
14706
+ _super.prototype.initialize.call(this, this.element);
14707
+ if (this.enablePersistence) {
14708
+ this.loadPersistedSignature();
14709
+ }
14710
+ };
14711
+ /**
14712
+ * To get component name.
14713
+ *
14714
+ * @returns {string} - Module Name
14715
+ * @private
14716
+ */
14717
+ Signature.prototype.getModuleName = function () {
14718
+ return 'signature';
14719
+ };
14720
+ /**
14721
+ * To get the properties to be maintained in the persisted state.
14722
+ *
14723
+ * @returns {string} - Persist data
14724
+ */
14725
+ Signature.prototype.getPersistData = function () {
14726
+ return this.addOnPersist(['signatureValue']);
14727
+ };
14728
+ /**
14729
+ * Called internally if any of the property value changed.
14730
+ *
14731
+ * @param {SignatureModel} newProp - Specifies new properties
14732
+ * @param {SignatureModel} oldProp - Specifies old properties
14733
+ * @returns {void}
14734
+ * @private
14735
+ */
14736
+ Signature.prototype.onPropertyChanged = function (newProp, oldProp) {
14737
+ for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
14738
+ var prop = _a[_i];
14739
+ switch (prop) {
14740
+ case 'backgroundColor':
14741
+ _super.prototype.propertyChanged.call(this, prop, newProp.backgroundColor);
14742
+ break;
14743
+ case 'backgroundImage':
14744
+ _super.prototype.propertyChanged.call(this, prop, newProp.backgroundImage);
14745
+ break;
14746
+ case 'strokeColor':
14747
+ if (newProp.strokeColor !== oldProp.strokeColor) {
14748
+ _super.prototype.propertyChanged.call(this, prop, newProp.strokeColor);
14749
+ }
14750
+ break;
14751
+ case 'saveWithBackground':
14752
+ _super.prototype.propertyChanged.call(this, prop, newProp.saveWithBackground);
14753
+ break;
14754
+ case 'isReadOnly':
14755
+ _super.prototype.propertyChanged.call(this, prop, newProp.isReadOnly);
14756
+ break;
14757
+ case 'disabled':
14758
+ _super.prototype.propertyChanged.call(this, prop, newProp.disabled);
14759
+ break;
14760
+ }
14761
+ }
14762
+ };
14763
+ __decorate$7([
14764
+ Property('')
14765
+ ], Signature.prototype, "backgroundColor", void 0);
14766
+ __decorate$7([
14767
+ Property('')
14768
+ ], Signature.prototype, "backgroundImage", void 0);
14769
+ __decorate$7([
14770
+ Property(false)
14771
+ ], Signature.prototype, "disabled", void 0);
14772
+ __decorate$7([
14773
+ Property(false)
14774
+ ], Signature.prototype, "isReadOnly", void 0);
14775
+ __decorate$7([
14776
+ Property(true)
14777
+ ], Signature.prototype, "saveWithBackground", void 0);
14778
+ __decorate$7([
14779
+ Property('#000000')
14780
+ ], Signature.prototype, "strokeColor", void 0);
14781
+ __decorate$7([
14782
+ Property(0.5)
14783
+ ], Signature.prototype, "minStrokeWidth", void 0);
14784
+ __decorate$7([
14785
+ Property(2)
14786
+ ], Signature.prototype, "maxStrokeWidth", void 0);
14787
+ __decorate$7([
14788
+ Property(0.7)
14789
+ ], Signature.prototype, "velocity", void 0);
14790
+ __decorate$7([
14791
+ Property('en-US')
14792
+ ], Signature.prototype, "locale", void 0);
14793
+ __decorate$7([
14794
+ Property(false)
14795
+ ], Signature.prototype, "enableRtl", void 0);
14796
+ __decorate$7([
14797
+ Property(false)
14798
+ ], Signature.prototype, "enablePersistence", void 0);
14799
+ __decorate$7([
14800
+ Event()
14801
+ ], Signature.prototype, "beforeSave", void 0);
14802
+ __decorate$7([
14803
+ Event()
14804
+ ], Signature.prototype, "change", void 0);
14805
+ __decorate$7([
14806
+ Event()
14807
+ ], Signature.prototype, "created", void 0);
14808
+ Signature = __decorate$7([
14809
+ NotifyPropertyChanges
14810
+ ], Signature);
14811
+ return Signature;
14812
+ }(SignatureBase));
14813
+
14814
+ /**
14815
+ * Signature modules
14816
+ */
14817
+
14818
+ /**
14819
+ * Signature base modules
14820
+ */
14821
+
13680
14822
  /**
13681
14823
  * NumericTextBox all modules
13682
14824
  */
13683
14825
 
13684
- export { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox };
14826
+ export { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox, Signature, SignatureBase };
13685
14827
  //# sourceMappingURL=ej2-inputs.es5.js.map