@syncfusion/ej2-inputs 19.3.47 → 19.4.38

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

@@ -188,7 +188,7 @@ var Input;
         if (args.floatLabelType === 'Auto') {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             args.element.addEventListener('input', (event) => {
-                updateLabelState(args.element.value, floatLabelElement);
+                updateLabelState(args.element.value, floatLabelElement, args.element);
             });
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             args.element.addEventListener('blur', (event) => {
@@ -237,7 +237,7 @@ var Input;
             addClass([button], CLASSNAMES.CLEARICONHIDE);
         }
     }
-    function updateLabelState(value, label) {
+    function updateLabelState(value, label, element = null) {
         if (value) {
             addClass([label], CLASSNAMES.LABELTOP);
             if (label.classList.contains(CLASSNAMES.LABELBOTTOM)) {
@@ -245,10 +245,13 @@ var Input;
             }
         }
         else {
-            if (label.classList.contains(CLASSNAMES.LABELTOP)) {
-                removeClass([label], CLASSNAMES.LABELTOP);
+            const isNotFocused = element != null ? element !== document.activeElement : true;
+            if (isNotFocused) {
+                if (label.classList.contains(CLASSNAMES.LABELTOP)) {
+                    removeClass([label], CLASSNAMES.LABELTOP);
+                }
+                addClass([label], CLASSNAMES.LABELBOTTOM);
             }
-            addClass([label], CLASSNAMES.LABELBOTTOM);
         }
     }
     function getParentNode(element) {
@@ -317,7 +320,7 @@ var Input;
         const parent = getParentNode(element);
         if (parent.classList.contains(CLASSNAMES.FLOATINPUT) && floatLabelType === 'Auto') {
             const label = getParentNode(element).getElementsByClassName('e-float-text')[0];
-            updateLabelState(element.value, label);
+            updateLabelState(element.value, label, element);
         }
     }
     /**
@@ -1211,7 +1214,7 @@ let NumericTextBox = class NumericTextBox extends Component {
     }
     resetHandler(e) {
         e.preventDefault();
-        if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide'))) {
+        if (!(this.inputWrapper.clearButton.classList.contains('e-clear-icon-hide')) || this.inputWrapper.container.classList.contains('e-static-clear')) {
             this.clear(e);
         }
         this.isInteract = true;
@@ -1453,8 +1456,13 @@ let NumericTextBox = class NumericTextBox extends Component {
             this.preventChange = true;
         }
         if (this.isVue) {
-            const current = this.instance.getNumberParser({ format: 'n' })(this.element.value);
+            let current = this.instance.getNumberParser({ format: 'n' })(this.element.value);
             const previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
+            //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
+            const nonZeroRegex = new RegExp('[^1-9]+$');
+            if (nonZeroRegex.test(this.element.value)) {
+                current = this.value;
+            }
             const eventArgs = {
                 event: event,
                 value: (current === null || isNaN(current) ? null : current),
@@ -2306,7 +2314,7 @@ function bindClearEvent() {
 }
 function resetHandler(e) {
     e.preventDefault();
-    if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide')) {
+    if (!this.inputObj.clearButton.classList.contains('e-clear-icon-hide') || (this.inputObj.container.classList.contains('e-static-clear'))) {
         clear.call(this, e);
         this.value = '';
     }
@@ -4333,9 +4341,11 @@ let Slider = class Slider extends Component {
         this.sliderBarClick(e);
         if (e.currentTarget === this.firstHandle) {
             this.firstHandle.classList.add(classNames.sliderHandleFocused);
+            this.firstHandle.classList.add(classNames.sliderTabHandle);
         }
         else {
             this.secondHandle.classList.add(classNames.sliderHandleFocused);
+            this.secondHandle.classList.add(classNames.sliderTabHandle);
         }
         EventHandler.add(document, 'mousemove touchmove', this.sliderBarMove, this);
         EventHandler.add(document, 'mouseup touchend', this.sliderBarUp, this);
@@ -4746,6 +4756,11 @@ let Slider = class Slider extends Component {
             this.getHandle().classList.add('e-large-thumb-size');
         }
     }
+    focusHandle() {
+        if (!this.getHandle().classList.contains(classNames.sliderTabHandle)) {
+            this.getHandle().classList.add(classNames.sliderTabHandle);
+        }
+    }
     repeatHandlerUp(e) {
         this.changeEvent('changed', e);
         this.closeTooltip();
@@ -5136,6 +5151,7 @@ let Slider = class Slider extends Component {
         }
         this.tooltipToggle(this.getHandle());
         this.getHandle().focus();
+        this.focusHandle();
         if (args.currentTarget.classList.contains(classNames.firstButton)) {
             EventHandler.add(this.firstBtn, 'mouseup touchend', this.buttonUp, this);
         }
@@ -6076,6 +6092,7 @@ let Slider = class Slider extends Component {
         event.preventDefault();
         this.focusSliderElement();
         this.sliderBarClick(event);
+        this.focusHandle();
     }
     wireEvents() {
         this.onresize = this.reposition.bind(this);
@@ -10990,6 +11007,7 @@ let ColorPicker = class ColorPicker extends Component {
             target: this.container,
             disabled: this.disabled,
             enableRtl: this.enableRtl,
+            createPopupOnClick: this.createPopupOnClick,
             open: this.onOpen.bind(this),
             click: () => {
                 this.trigger('change', {
@@ -12128,7 +12146,12 @@ let ColorPicker = class ColorPicker extends Component {
         if (!this.showButtons && !isKey) {
             this.trigger('change', { currentValue: { hex: hex, rgba: rgba },
                 previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }, value: cValue });
-            this.setProperties({ 'value': cValue }, true);
+            if (this.enableOpacity) {
+                this.setProperties({ 'value': cValue }, true);
+            }
+            else {
+                this.setProperties({ 'value': hex }, true);
+            }
             this.element.value = hex ? hex : '#000000';
         }
         else {
@@ -12644,6 +12667,9 @@ __decorate$5([
 __decorate$5([
     Property(true)
 ], ColorPicker.prototype, "enableOpacity", void 0);
+__decorate$5([
+    Property(false)
+], ColorPicker.prototype, "createPopupOnClick", void 0);
 __decorate$5([
     Event()
 ], ColorPicker.prototype, "select", void 0);
@@ -13161,7 +13187,7 @@ let TextBox = class TextBox extends Component {
     }
     resetInputHandler(event) {
         event.preventDefault();
-        if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR))) {
+        if (!(this.textboxWrapper.clearButton.classList.contains(HIDE_CLEAR)) || this.textboxWrapper.container.classList.contains('e-static-clear')) {
             Input.setValue('', this.respectiveElement, this.floatLabelType, this.showClearButton);
             if (this.isHiddenInput) {
                 this.element.value = this.respectiveElement.value;
@@ -13389,9 +13415,1095 @@ TextBox = __decorate$6([
  * Uploader modules
  */
 
+class SignatureBase extends Component {
+    constructor() {
+        super(...arguments);
+        /* minDistance(distance between the two point) was calaculated for smoothness.*/
+        this.minDistance = 5;
+        this.previous = 0;
+        /* interval handles for the smoothness in the mouse move event.*/
+        this.interval = 30;
+        this.timeout = null;
+        this.isSignatureEmpty = true;
+        this.backgroundLoaded = null;
+        this.clearArray = [];
+        this.isBlazor = false;
+    }
+    /**
+     * To Initialize the component rendering
+     *
+     * @private
+     * @param {HTMLCanvasElement} element - Specifies the canvas element.
+     * @param {parameter} parameter - Specifies only for the blazor parameter.
+     * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
+     * @returns {void}
+     */
+    initialize(element, parameter, dotnetRef) {
+        this.element = element;
+        this.canvasContext = this.element.getContext('2d');
+        this.canvasContext.canvas.tabIndex = 0;
+        if (parameter) {
+            this.setBlazorParameter(parameter);
+            this.dotnetRef = dotnetRef;
+        }
+        this.setHTMLProperties();
+        if (isNullOrUndefined(this.signatureValue)) {
+            this.updateSnapCollection(true);
+        }
+        this.wireEvents();
+        this.isSignatureEmpty = true;
+        if (!this.isBlazor) {
+            this.trigger('created', null);
+        }
+    }
+    setBlazorParameter(parameter) {
+        this.isBlazor = true;
+        this.backgroundColor = parameter.backgroundColor;
+        this.backgroundImage = parameter.backgroundImage;
+        this.disabled = parameter.disabled;
+        this.isReadOnly = parameter.isReadOnly;
+        this.maxStrokeWidth = parameter.maxStrokeWidth || 2;
+        this.minStrokeWidth = parameter.minStrokeWidth || 0.5;
+        this.velocity = parameter.velocity || 0.7;
+        this.strokeColor = parameter.strokeColor || '#000000';
+        this.saveWithBackground = parameter.saveWithBackground;
+        this.interval = 30;
+        this.previous = 0;
+        this.minDistance = 5;
+        this.signatureValue = parameter.signatureValue;
+        if (this.signatureValue) {
+            this.loadPersistedSignature();
+        }
+    }
+    wireEvents() {
+        if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
+            EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
+            EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);
+            window.addEventListener('resize', this.resizeHandler.bind(this));
+        }
+        else if (this.pointColl) {
+            EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);
+            EventHandler.add(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler, this);
+            EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);
+        }
+    }
+    unwireEvents(type) {
+        if (type === 'mouseup' || type === 'touchend') {
+            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
+            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
+            EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
+        }
+        else {
+            EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
+            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
+            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
+            EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
+            EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
+            window.removeEventListener('resize', this.resizeHandler);
+        }
+    }
+    setHTMLProperties() {
+        if (this.element.height === 150) {
+            this.element.height = this.element.offsetHeight;
+        }
+        if (this.element.width === 300) {
+            this.element.width = this.element.offsetWidth;
+        }
+        this.canvasContext.scale(1, 1);
+        this.canvasContext.fillStyle = this.strokeColor;
+        if (this.backgroundImage) {
+            this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
+        }
+        else if (this.backgroundColor) {
+            this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
+        }
+    }
+    mouseDownHandler(e) {
+        if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
+            if (e.type === 'touchstart') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            this.beginStroke(e);
+            this.wireEvents();
+        }
+    }
+    mouseMoveHandler(e) {
+        if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchmove') {
+            if (e.type === 'touchmove') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            if (this.interval) {
+                this.updateStrokeWithThrottle(e);
+            }
+            else {
+                this.updateStroke(e);
+            }
+        }
+    }
+    mouseUpHandler(e) {
+        const args = { actionName: 'strokeUpdate' };
+        if (e.type === 'touchstart') {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        this.endDraw();
+        this.updateSnapCollection();
+        this.unwireEvents(e.type);
+        if (!this.isBlazor) {
+            this.trigger('change', args);
+        }
+        else {
+            this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'mouseUp');
+        }
+        this.signatureValue = this.snapColl[this.incStep];
+    }
+    keyboardHandler(e) {
+        const args = { fileName: 'Signature', type: 'Png', cancel: false };
+        switch (e.key) {
+            case 'Delete':
+                this.clear();
+                break;
+            case (e.ctrlKey && 's'):
+                if (!this.isBlazor) {
+                    this.trigger('beforeSave', args, (observableSaveArgs) => {
+                        if (!args.cancel) {
+                            this.save(observableSaveArgs.type, observableSaveArgs.fileName);
+                        }
+                    });
+                }
+                else {
+                    this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'beforeSave');
+                }
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                break;
+            case (e.ctrlKey && 'z'):
+                this.undo();
+                break;
+            case (e.ctrlKey && 'y'):
+                this.redo();
+                break;
+        }
+    }
+    resizeHandler() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        this.canvasContext.canvas.width = this.element.offsetWidth;
+        this.canvasContext.canvas.height = this.element.offsetHeight;
+        this.canvasContext.scale(1, 1);
+        const restoreImg = new Image();
+        restoreImg.src = this.snapColl[this.incStep];
+        restoreImg.onload = () => {
+            proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
+            proxy.canvasContext.drawImage(restoreImg, 0, 0, proxy.element.width, proxy.element.height);
+        };
+    }
+    beginStroke(e) {
+        this.refresh();
+        this.updateStroke(e);
+    }
+    updateStroke(e) {
+        const point = this.createPoint(e);
+        this.addPoint(point);
+    }
+    updateStrokeWithThrottle(args) {
+        const now = Date.now();
+        const remaining = this.interval - (now - this.previous);
+        this.storedArgs = args;
+        if (remaining <= 0 || remaining > this.interval) {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+                this.timeout = null;
+            }
+            this.previous = now;
+            this.updateStroke(this.storedArgs);
+            if (!this.timeout) {
+                this.storedArgs = null;
+            }
+        }
+        else if (!this.timeout) {
+            this.timeout = window.setTimeout(this.delay.bind(this), remaining);
+        }
+    }
+    delay() {
+        this.previous = Date.now();
+        this.timeout = null;
+        this.updateStroke(this.storedArgs);
+        if (!this.timeout) {
+            this.storedArgs = null;
+        }
+    }
+    createPoint(e) {
+        const rect = this.canvasContext.canvas.getBoundingClientRect();
+        if (e.type === 'mousedown' || e.type === 'mousemove') {
+            return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
+        }
+        else {
+            return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
+        }
+    }
+    /* Returns the current point corrdinates(x, y) and time.*/
+    point(pointX, pointY, time) {
+        this.pointX = pointX;
+        this.pointY = pointY;
+        this.time = time || new Date().getTime();
+        return { x: this.pointX, y: this.pointY, time: this.time };
+    }
+    addPoint(point) {
+        const points = this.pointColl;
+        let controlPoint1;
+        let controlPoint2;
+        const lastPoint = points.length > 0 && points[points.length - 1];
+        const isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;
+        if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+            points.push(point);
+            if (points.length > 2) {
+                if (points.length === 3) {
+                    points.unshift(points[0]);
+                }
+                controlPoint1 = (this.calculateCurveControlPoints(points[0], points[1], points[2])).controlPoint2;
+                controlPoint2 = (this.calculateCurveControlPoints(points[1], points[2], points[3])).controlPoint1;
+                this.startPoint = points[1];
+                this.controlPoint1 = controlPoint1;
+                this.controlPoint2 = controlPoint2;
+                this.endPoint = points[2];
+                this.startDraw();
+                points.shift();
+            }
+        }
+    }
+    startDraw() {
+        let velocity;
+        velocity = this.pointVelocityCalc(this.startPoint);
+        velocity = this.velocity * velocity + (1 - this.velocity) * this.lastVelocity;
+        const newWidth = Math.max(this.maxStrokeWidth / (velocity + 1), this.minStrokeWidth);
+        this.curveDraw(this.lastWidth, newWidth);
+        this.lastVelocity = velocity;
+        this.lastWidth = newWidth;
+    }
+    endDraw() {
+        const canDrawCurve = this.pointColl.length > 2;
+        const point = this.pointColl[0];
+        if (!canDrawCurve && point) {
+            this.strokeDraw(point);
+        }
+    }
+    /* Calculate the Bezier (x, y) coordinate of the curve. */
+    curveDraw(startWidth, endWidth) {
+        const context = this.canvasContext;
+        let width;
+        let i;
+        let t1;
+        let t2;
+        let t3;
+        let u1;
+        let u2;
+        let u3;
+        let x;
+        let y;
+        const widthValue = endWidth - startWidth;
+        const bezierLength = this.bezierLengthCalc();
+        const drawSteps = Math.ceil(bezierLength) * 2;
+        context.beginPath();
+        for (i = 0; i < drawSteps; i++) {
+            t1 = i / drawSteps;
+            t2 = t1 * t1;
+            t3 = t2 * t1;
+            u1 = 1 - t1;
+            u2 = u1 * u1;
+            u3 = u2 * u1;
+            x = u3 * this.startPoint.x;
+            x += 3 * u2 * t1 * this.controlPoint1.x;
+            x += 3 * u1 * t2 * this.controlPoint2.x;
+            x += t3 * this.endPoint.x;
+            y = u3 * this.startPoint.y;
+            y += 3 * u2 * t1 * this.controlPoint1.y;
+            y += 3 * u1 * t2 * this.controlPoint2.y;
+            y += t3 * this.endPoint.y;
+            width = Math.min(startWidth + t3 * widthValue, this.maxStrokeWidth);
+            this.arcDraw(x, y, width);
+        }
+        context.closePath();
+        context.fill();
+        this.isSignatureEmpty = false;
+    }
+    strokeDraw(point) {
+        const context = this.canvasContext;
+        const pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+        context.beginPath();
+        this.arcDraw(point.x, point.y, pointSize);
+        context.closePath();
+        context.fill();
+        this.isSignatureEmpty = false;
+    }
+    arcDraw(x, y, size) {
+        const context = this.canvasContext;
+        context.moveTo(x, y);
+        context.arc(x, y, size, 0, 2 * Math.PI, false);
+    }
+    /* Utility functions for Bezier algorithm*/
+    calculateCurveControlPoints(p1, p2, p3) {
+        const dx1 = p1.x - p2.x;
+        const dy1 = p1.y - p2.y;
+        const dx2 = p2.x - p3.x;
+        const dy2 = p2.y - p3.y;
+        const m1 = { x: (p1.x + p2.x) / 2.0, y: (p1.y + p2.y) / 2.0 };
+        const m2 = { x: (p2.x + p3.x) / 2.0, y: (p2.y + p3.y) / 2.0 };
+        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+        const dxm = (m1.x - m2.x);
+        const dym = (m1.y - m2.y);
+        const k = l2 / (l1 + l2);
+        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+        const tx = p2.x - cm.x;
+        const ty = p2.y - cm.y;
+        return {
+            controlPoint1: this.point(m1.x + tx, m1.y + ty, 0),
+            controlPoint2: this.point(m2.x + tx, m2.y + ty, 0)
+        };
+    }
+    /* Returns approximated bezier length of the curuve.*/
+    bezierLengthCalc() {
+        const steps = 10;
+        let length = 0;
+        let i;
+        let t;
+        let pointx1;
+        let pointy1;
+        let pointx2;
+        let pointy2;
+        let pointx3;
+        let pointy3;
+        for (i = 0; i <= steps; i++) {
+            t = i / steps;
+            pointx1 = this.bezierPointCalc(t, this.startPoint.x, this.controlPoint1.x, this.controlPoint2.x, this.endPoint.x);
+            pointy1 = this.bezierPointCalc(t, this.startPoint.y, this.controlPoint1.y, this.controlPoint2.y, this.endPoint.y);
+            if (i > 0) {
+                pointx3 = pointx1 - pointx2;
+                pointy3 = pointy1 - pointy2;
+                length += Math.sqrt(pointx3 * pointx3 + pointy3 * pointy3);
+            }
+            pointx2 = pointx1;
+            pointy2 = pointy1;
+        }
+        return length;
+    }
+    /* Calculate parametric value of x or y given t and the
+       four point(startpoint, controlpoint1, controlpoint2, endpoint) coordinates of a cubic bezier curve.*/
+    bezierPointCalc(t, startpoint, cp1, cp2, endpoint) {
+        return startpoint * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * cp1 * (1.0 - t) * (1.0 - t) * t + 3.0 *
+            cp2 * (1.0 - t) * t * t + endpoint * t * t * t;
+    }
+    /* Velocity between the current point and last point.*/
+    pointVelocityCalc(startPoint) {
+        return (this.time !== startPoint.time) ? this.distanceTo(startPoint) / (this.time - startPoint.time) : 0;
+    }
+    /* Distance between the current point and last point.*/
+    distanceTo(start) {
+        return Math.sqrt(Math.pow(this.pointX - start.x, 2) + Math.pow(this.pointY - start.y, 2));
+    }
+    isRead(isRead) {
+        if (isRead) {
+            EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
+        }
+        else if (!this.disabled) {
+            EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
+        }
+    }
+    enableOrDisable(isDisable) {
+        this.disabled = isDisable;
+        if (isDisable) {
+            this.reDraw('0.5');
+            this.isRead(true);
+        }
+        else {
+            this.reDraw('1');
+            this.isRead(false);
+        }
+    }
+    reDraw(opacity) {
+        const data = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
+        this.canvasContext.clearRect(0, 0, this.element.width, this.element.height);
+        this.element.style.opacity = opacity;
+        this.canvasContext.putImageData(data, 0, 0);
+    }
+    updateSnapCollection(isClear) {
+        if (isNullOrUndefined(this.incStep)) {
+            this.incStep = -1;
+            this.incStep++;
+            this.snapColl = [];
+            this.clearArray = [];
+        }
+        else {
+            this.incStep++;
+        }
+        if (this.incStep < this.snapColl.length) {
+            this.snapColl.length = this.incStep;
+        }
+        if (this.incStep > 0) {
+            const canvasNew = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-wrapper' });
+            const canvasContextNew = canvasNew.getContext('2d');
+            canvasNew.width = this.canvasContext.canvas.width;
+            canvasNew.height = this.canvasContext.canvas.height;
+            canvasContextNew.drawImage(this.canvasContext.canvas, 0, 0, canvasNew.width, canvasNew.height);
+            this.snapColl.push(canvasNew.toDataURL());
+        }
+        else {
+            this.snapColl.push(this.canvasContext.canvas.toDataURL());
+        }
+        if (isClear) {
+            this.clearArray.push(this.incStep);
+        }
+    }
+    setBackgroundImage(imageSrc) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const imageObj = new Image();
+        imageObj.crossOrigin = 'anonymous';
+        imageObj.src = imageSrc;
+        imageObj.onload = () => {
+            proxy.canvasContext.globalCompositeOperation = 'source-over';
+            proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+            proxy.updateSnapCollection();
+            proxy.saveBackground(true);
+        };
+        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+    }
+    setBackgroundColor(color) {
+        const canvasEle = this.canvasContext;
+        canvasEle.strokeStyle = color;
+        let i;
+        let j;
+        for (i = 1; i <= canvasEle.canvas.width; i++) {
+            for (j = 1; j <= canvasEle.canvas.height; j++) {
+                canvasEle.strokeRect(0, 0, i, j);
+            }
+        }
+        this.updateSnapCollection();
+    }
+    loadPersistedSignature() {
+        if (isNullOrUndefined(this.signatureValue)) {
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const lastImage = new Image();
+        lastImage.src = this.signatureValue;
+        lastImage.onload = () => {
+            proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
+            proxy.canvasContext.drawImage(lastImage, 0, 0);
+            proxy.updateSnapCollection();
+        };
+        this.isSignatureEmpty = false;
+    }
+    /**
+     * To get the signature as Blob.
+     *
+     * @param {string} url - specify the url/base 64 string to get blob of the signature.
+     * @returns {Blob}.
+     */
+    getBlob(url) {
+        const arr = url.split(',');
+        const type = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: type });
+    }
+    download(blob, fileName) {
+        const blobUrl = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = blobUrl;
+        a.target = '_parent';
+        a.download = fileName;
+        (document.body || document.documentElement).appendChild(a);
+        a.click();
+        a.parentNode.removeChild(a);
+    }
+    /**
+     * To refresh the signature.
+     *
+     * @private
+     * @returns {void}.
+     */
+    refresh() {
+        this.pointColl = [];
+        this.lastVelocity = 0;
+        this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+    }
+    /**
+     * Erases all the signature strokes signed by user.
+     *
+     * @returns {void}.
+     */
+    clear() {
+        const args = { actionName: 'clear' };
+        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        this.refresh();
+        this.updateSnapCollection(true);
+        this.isSignatureEmpty = true;
+        if (!this.isBlazor) {
+            this.trigger('change', args);
+        }
+        else {
+            this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Clear');
+        }
+    }
+    /**
+     * Undo the last user action.
+     *
+     * @returns {void}.
+     */
+    undo() {
+        const args = { actionName: 'undo' };
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        if (this.incStep > 0) {
+            this.incStep--;
+            const undoImg = new Image();
+            undoImg.src = this.snapColl[this.incStep];
+            undoImg.onload = () => {
+                proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
+                proxy.canvasContext.drawImage(undoImg, 0, 0, proxy.element.width, proxy.element.height);
+            };
+        }
+        this.isClear();
+        if (!this.isBlazor) {
+            this.trigger('change', args);
+        }
+        else {
+            this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Undo');
+        }
+    }
+    /**
+     * Redo the last user action.
+     *
+     * @returns {void}.
+     */
+    redo() {
+        const args = { actionName: 'redo' };
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        if (this.incStep < this.snapColl.length - 1) {
+            this.incStep++;
+            const redoImg = new Image();
+            redoImg.src = this.snapColl[this.incStep];
+            redoImg.onload = () => {
+                proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
+                proxy.canvasContext.drawImage(redoImg, 0, 0, proxy.element.width, proxy.element.height);
+            };
+        }
+        this.isClear();
+        if (!this.isBlazor) {
+            this.trigger('change', args);
+        }
+        else {
+            this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'Redo');
+        }
+    }
+    isClear() {
+        if (this.clearArray) {
+            let empty = false;
+            for (let i = 0; i < this.clearArray.length; i++) {
+                if (this.clearArray[i] === this.incStep) {
+                    this.isSignatureEmpty = true;
+                    empty = true;
+                }
+            }
+            if (!empty) {
+                this.isSignatureEmpty = false;
+            }
+        }
+    }
+    /**
+     * To check whether the signature is empty or not.
+     *
+     * @returns {boolean}.
+     */
+    isEmpty() {
+        return this.isSignatureEmpty;
+    }
+    /**
+     * To check whether the undo collection is empty or not.
+     *
+     * @returns {boolean}.
+     */
+    canUndo() {
+        return this.incStep > 0;
+    }
+    /**
+     * To check whether the redo collection is empty or not.
+     *
+     * @returns {boolean}.
+     */
+    canRedo() {
+        return this.incStep < this.snapColl.length - 1;
+    }
+    /**
+     * To draw the signature based on the given text, with the font family and font size.
+     *
+     * @param {string} text - specify text to be drawn as signature.
+     * @param {string} fontFamily - specify font family of a signature.
+     * @param {number} fontSize - specify font size of a signature.
+     *
+     * @returns {void}.
+     */
+    draw(text, fontFamily, fontSize) {
+        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        fontFamily = fontFamily || 'Arial';
+        fontSize = fontSize || 30;
+        this.canvasContext.font = fontSize + 'px ' + fontFamily;
+        this.canvasContext.textAlign = 'center';
+        this.canvasContext.textBaseline = 'middle';
+        this.canvasContext.fillText(text, this.element.width / 2, this.element.height / 2);
+        this.updateSnapCollection();
+        this.isSignatureEmpty = false;
+    }
+    /**
+     * To load the signature with the given base 64 string, height and width.
+     *
+     * @param {string} signature - specify the url/base 64 string to be drawn as signature.
+     * @param {number} width - specify the width of the loaded signature image.
+     * @param {number} height - specify the height of the loaded signature image.
+     * @returns {void}.
+     */
+    load(signature, width, height) {
+        height = height || this.element.height;
+        width = width || this.element.width;
+        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const bitmapImage = new Image();
+        bitmapImage.src = signature;
+        bitmapImage.onload = () => {
+            Promise.all([
+                createImageBitmap(bitmapImage, 0, 0, width, height)
+            ]).then((results) => {
+                const tempCanvas = document.createElement('canvas');
+                tempCanvas.width = width;
+                tempCanvas.height = height;
+                tempCanvas.getContext('2d').drawImage(results[0], 0, 0);
+                proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);
+                proxy.updateSnapCollection();
+            });
+        };
+        this.isSignatureEmpty = false;
+    }
+    saveBackground(savebg) {
+        let imageSrc;
+        if (savebg && this.backgroundImage) {
+            imageSrc = this.snapColl[this.incStep - 1];
+        }
+        else {
+            imageSrc = this.snapColl[this.incStep];
+        }
+        if (!savebg) {
+            this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+            if (this.backgroundImage) {
+                this.setBackgroundImage(this.backgroundImage);
+            }
+            else if (this.backgroundColor) {
+                this.setBackgroundColor(this.backgroundColor);
+                savebg = true;
+            }
+        }
+        if (savebg) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const proxy = this;
+            const imageObj = new Image();
+            imageObj.crossOrigin = 'anonymous';
+            imageObj.src = imageSrc;
+            imageObj.onload = () => {
+                proxy.backgroundLoaded = true;
+                proxy.canvasContext.globalCompositeOperation = 'source-over';
+                proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+                proxy.save(proxy.fileType, proxy.fileName);
+            };
+        }
+    }
+    /**
+     * To save the signature with the given file type and file name.
+     *
+     * @param {SignatureFileType} type - specify type of the file to be saved a signature.
+     * @param {string} fileName - specify name of the file to be saved a signature.
+     *
+     * @returns {void}.
+     */
+    save(type, fileName) {
+        if (this.saveWithBackground && this.backgroundLoaded == null && (this.backgroundImage || this.backgroundColor)) {
+            this.backgroundLoaded = false;
+            this.fileType = type;
+            this.fileName = fileName;
+            this.saveBackground(false);
+        }
+        else if (type === 'Svg') {
+            fileName = fileName || 'Signature';
+            this.toSVG(fileName);
+        }
+        else if (type === 'Jpeg') {
+            fileName = fileName || 'Signature';
+            if (!this.saveWithBackground || this.saveWithBackground && !(this.backgroundImage || this.backgroundColor)) {
+                this.toJPEG(fileName);
+            }
+            else {
+                const dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');
+                this.download(this.getBlob(dataURL), fileName + '.' + 'jpeg');
+            }
+        }
+        else {
+            fileName = fileName || 'Signature';
+            const dataURL = this.canvasContext.canvas.toDataURL('image/png');
+            this.download(this.getBlob(dataURL), fileName + '.' + 'png');
+        }
+        if (this.saveWithBackground && this.backgroundLoaded) {
+            this.resetSnap();
+        }
+    }
+    resetSnap() {
+        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const restoreObj = new Image();
+        restoreObj.src = this.snapColl[this.incStep - 1];
+        restoreObj.onload = () => {
+            proxy.canvasContext.drawImage(restoreObj, 0, 0, proxy.element.width, proxy.element.height);
+            proxy.updateSnapCollection();
+        };
+        this.backgroundLoaded = null;
+        this.snapColl.pop();
+        this.incStep--;
+        this.snapColl.pop();
+        this.incStep--;
+    }
+    toJPEG(fileName) {
+        const imageSrc = this.snapColl[this.incStep];
+        this.setBackgroundColor('#ffffff');
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+        const imageObj = new Image();
+        imageObj.crossOrigin = 'anonymous';
+        imageObj.src = imageSrc;
+        imageObj.onload = () => {
+            proxy.canvasContext.globalCompositeOperation = 'source-over';
+            proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+            const dataURL = proxy.canvasContext.canvas.toDataURL('image/jpeg');
+            proxy.download(proxy.getBlob(dataURL), fileName + '.' + 'jpeg');
+            proxy.canvasContext.clearRect(0, 0, proxy.canvasContext.canvas.width, proxy.canvasContext.canvas.height);
+            this.resizeHandler();
+        };
+        this.snapColl.pop();
+        this.incStep--;
+    }
+    toSVG(fileName) {
+        const dataUrl = this.canvasContext.canvas.toDataURL();
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', this.canvasContext.canvas.width.toString());
+        svg.setAttribute('height', this.canvasContext.canvas.height.toString());
+        const XLinkNS = 'http://www.w3.org/1999/xlink';
+        const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        img.setAttributeNS(null, 'height', this.canvasContext.canvas.height.toString());
+        img.setAttributeNS(null, 'width', this.canvasContext.canvas.width.toString());
+        img.setAttributeNS(XLinkNS, 'xlink:href', dataUrl);
+        svg.appendChild(img);
+        const prefix = 'data:image/svg+xml;base64,';
+        const header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"'
+            + ` width="${this.canvasContext.canvas.width}"` + ` height="${this.canvasContext.canvas.height}"` + '>';
+        const footer = '</svg>';
+        const body = svg.innerHTML;
+        const data = header + body + footer;
+        const svgDataUrl = prefix + btoa(data);
+        if (fileName == null) {
+            return svgDataUrl;
+        }
+        else {
+            this.download(this.getBlob(svgDataUrl), fileName + '.' + 'svg');
+            return null;
+        }
+    }
+    /**
+     * To save the signature as Blob.
+     *
+     * @returns {Blob}.
+     */
+    saveAsBlob() {
+        return this.getBlob(this.canvasContext.canvas.toDataURL('image/png'));
+    }
+    /**
+     * To get the signature as Base 64.
+     *
+     * @private
+     * @param {SignatureFileType} type - Specifies the type of the image format.
+     * @returns {string}.
+     */
+    getSignature(type) {
+        if (type === 'Jpeg') {
+            const imgData = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
+            const data = imgData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                if (data[i + 3] < 255) {
+                    data[i] = 255 - data[i];
+                    data[i + 1] = 255 - data[i + 1];
+                    data[i + 2] = 255 - data[i + 2];
+                    data[i + 3] = 255 - data[i + 3];
+                }
+            }
+            this.canvasContext.putImageData(imgData, 0, 0);
+            const dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');
+            this.resizeHandler();
+            return dataURL;
+        }
+        else if (type === 'Svg') {
+            return this.toSVG(null);
+        }
+        else {
+            return this.canvasContext.canvas.toDataURL('image/png');
+        }
+    }
+    /**
+     * Get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName() {
+        return 'signature';
+    }
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    getPersistData() {
+        this.signatureValue = this.snapColl[this.incStep];
+        return this.addOnPersist(['signatureValue']);
+    }
+    /**
+     * Removes the component from the DOM and detaches all its related event handlers.
+     * Also it maintains the initial input element from the DOM.
+     *
+     * @method destroy
+     * @returns {void}
+     */
+    destroy() {
+        this.unwireEvents(null);
+        removeClass([this.element], 'e-' + this.getModuleName());
+        this.element.removeAttribute('tabindex');
+        this.pointColl = null;
+        super.destroy();
+    }
+    /**
+     * Modified onPropertyChanged method for both blazor and EJ2 signature component.
+     *
+     * @private
+     * @param {string} key - Specifies the property, which changed.
+     * @param {string} value - Specifies the property value changed.
+     * @returns {void}
+     */
+    propertyChanged(key, value) {
+        const canvasNew = this.canvasContext;
+        switch (key) {
+            case 'backgroundColor':
+                canvasNew.canvas.style.backgroundColor = value;
+                this.backgroundColor = value;
+                break;
+            case 'backgroundImage':
+                canvasNew.canvas.style.backgroundImage = 'url(' + value + ')';
+                this.backgroundImage = value;
+                break;
+            case 'strokeColor':
+                canvasNew.fillStyle = value;
+                this.strokeColor = value;
+                break;
+            case 'saveWithBackground':
+                this.saveWithBackground = value;
+                break;
+            case 'maxStrokeWidth':
+                this.maxStrokeWidth = value;
+                break;
+            case 'minStrokeWidth':
+                this.minStrokeWidth = value;
+                break;
+            case 'velocity':
+                this.velocity = value;
+                break;
+            case 'isReadOnly':
+                this.isRead(value);
+                break;
+            case 'disabled':
+                this.enableOrDisable(value);
+                break;
+        }
+    }
+}
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The Signature component allows user to draw smooth signatures as vector outline of strokes using variable width bezier curve interpolation.
+ * It allows to save signature as image.
+ * You can use your finger, pen, or mouse on a tablet, touchscreen, etc., to draw your own signature on this Signature component.
+ * Signature component is a user interface to draw the Signature or Text.
+ * It provides supports for various Background color, Stroke color and Background Image.
+ * ```html
+ * <canvas id="signature"></canvas>
+ * ```
+ * ```typescript
+ * <script>
+ *   let signatureObj: Signature = new Signature(null , "#signature");
+ * </script>
+ * ```
+ */
+let Signature = class Signature extends SignatureBase {
+    /**
+     * Constructor for creating the widget.
+     *
+     * @param {SignatureModel} options - Specifies the Signature model.
+     * @param {string | HTMLCanvasElement} element - Specifies the element.
+     * @private
+     */
+    constructor(options, element) {
+        super(options, element);
+    }
+    preRender() {
+        // pre render code snippets
+    }
+    /**
+     * To Initialize the component rendering
+     *
+     * @private
+     * @returns {void}
+     */
+    render() {
+        this.initialize();
+    }
+    initialize() {
+        addClass([this.element], 'e-' + this.getModuleName());
+        super.initialize(this.element);
+        if (this.enablePersistence) {
+            this.loadPersistedSignature();
+        }
+    }
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    getModuleName() {
+        return 'signature';
+    }
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    getPersistData() {
+        return this.addOnPersist(['signatureValue']);
+    }
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {SignatureModel} newProp - Specifies new properties
+     * @param  {SignatureModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            switch (prop) {
+                case 'backgroundColor':
+                    super.propertyChanged(prop, newProp.backgroundColor);
+                    break;
+                case 'backgroundImage':
+                    super.propertyChanged(prop, newProp.backgroundImage);
+                    break;
+                case 'strokeColor':
+                    if (newProp.strokeColor !== oldProp.strokeColor) {
+                        super.propertyChanged(prop, newProp.strokeColor);
+                    }
+                    break;
+                case 'saveWithBackground':
+                    super.propertyChanged(prop, newProp.saveWithBackground);
+                    break;
+                case 'isReadOnly':
+                    super.propertyChanged(prop, newProp.isReadOnly);
+                    break;
+                case 'disabled':
+                    super.propertyChanged(prop, newProp.disabled);
+                    break;
+            }
+        }
+    }
+};
+__decorate$7([
+    Property('')
+], Signature.prototype, "backgroundColor", void 0);
+__decorate$7([
+    Property('')
+], Signature.prototype, "backgroundImage", void 0);
+__decorate$7([
+    Property(false)
+], Signature.prototype, "disabled", void 0);
+__decorate$7([
+    Property(false)
+], Signature.prototype, "isReadOnly", void 0);
+__decorate$7([
+    Property(true)
+], Signature.prototype, "saveWithBackground", void 0);
+__decorate$7([
+    Property('#000000')
+], Signature.prototype, "strokeColor", void 0);
+__decorate$7([
+    Property(0.5)
+], Signature.prototype, "minStrokeWidth", void 0);
+__decorate$7([
+    Property(2)
+], Signature.prototype, "maxStrokeWidth", void 0);
+__decorate$7([
+    Property(0.7)
+], Signature.prototype, "velocity", void 0);
+__decorate$7([
+    Property('en-US')
+], Signature.prototype, "locale", void 0);
+__decorate$7([
+    Property(false)
+], Signature.prototype, "enableRtl", void 0);
+__decorate$7([
+    Property(false)
+], Signature.prototype, "enablePersistence", void 0);
+__decorate$7([
+    Event()
+], Signature.prototype, "beforeSave", void 0);
+__decorate$7([
+    Event()
+], Signature.prototype, "change", void 0);
+__decorate$7([
+    Event()
+], Signature.prototype, "created", void 0);
+Signature = __decorate$7([
+    NotifyPropertyChanges
+], Signature);
+
+/**
+ * Signature modules
+ */
+
+/**
+ * Signature base modules
+ */
+
 /**
  * NumericTextBox all modules
  */
 
-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 };
+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 };
 //# sourceMappingURL=ej2-inputs.es2015.js.map