@syncfusion/ej2-inputs 19.3.57 → 19.4.38

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